WORKSハリー準備中.jpg

2006年01月12日

ウェブアートデザイナー術:保存

ウェブアートデザイナー術も、今回の「保存」までで、「一応、写真を含んで、思ったサイズのバナーを作れる」というところまで完了です。
実際にバナーなどの素材加工をしてみた際に、「これはどうすれば?」とご質問いただければ、お答えしたいと思います・・・出来る範囲で。
苦労して編み出した部分とかは、内緒(笑)


では、保存方法、いってみよー。


今回のサンプル
今回使うのはこの写真。
JPEGという保存形式で保存します。


保存方法1
保存したい素材を選択します。
文字など、重なっている素材がある場合、漏れずに全部選択します。


保存2
「保存するオブジェクトを指定する」をチェックし、
「指定」をチェックすれば、一緒に保存する物を選択しなおすことは出来ます。
でも、先に全部選択した方が楽ちんですよー。


保存3
初期設定はGIFになっていますが、今回はJPEGにチェックを入れます。


保存4
この小さい窓には、保存内容全体が縮小されて表示されています。
特に画質を下げた場合は、必ず原寸表示させてチェックしましょう。
画像ににじみやザラ付きがあっても、縮小表示だと気付き難いですから。


保存5


保存6


さぁ、これで、保存まで完了です。
では、GIFとは??
GIFは、アニメの絵のような、線と平塗りで出来た素材に向きます。

福
こんなのね。

JPEG画像向きの写真をGIF保存したらどうなるか・・・???

まず、ちゃんとJPEGで保存した場合。
保存7
14KBにまでしようとすると、12色まで色数を減らすことになりました。
滑らかな写真画像を無理に12色で塗り分けてる状態になるので、ザラザラになります。

わかりにくいので、出来上がり画像で比較してみましょう。

JPEG見本JPEG見本 

GIF見本GIF見本

違いが分かったでしょうか?


今回は、写真=JPEGというように説明させていただきました。
しかし、写真の中の色数が少ない場合、一概にJPEGが向いているとは言い切れません。

例えば、
バナー見本
これは、全体の色数が比較的少ないので、GIF保存してあります。
GIF保存の方が、文字などはくっきりと表示されます。
若干ファイルサイズが大きくなる可能性は高いですが、
最近はブロードバンド環境の方、放題設定の携帯の方が多いので、
画質を優先しても大丈夫かなーー・・・?と思ってます(^_^;)
でも、大きくなりすぎると嫌われますからねー(^_^;)



最近ウェブアートデザイナー講座というサイトさんを見つけました〜。
私も勉強になることがいっぱいありました(*^_^*)
参考にしてみてください(*^_^*)


ホームページ・ビルダー10 通常版 ガイドブック+Paintgraphic
ホームページ・ビルダー10 通常版
ガイドブック+Paintgraphic
価格 11,150円 (税込11,707円) 送料別

ホームページ・ビルダー10 バージョンアップ版ガイドブック+Paintgraphic付き
ホームページ・ビルダー10 バージョンアップ版
ガイドブック+Paintgraphic付き

商品番号 63440
価格 5,724円 (税込6,010円) 送料別

posted by あずみ屋あずき。 at 14:13| ☁| Comment(0) | TrackBack(0) | ウェブアートデザイナー術 | このブログの読者になる | 更新情報をチェックする

ウェブアートデザイナー術:バナーを作ってみよう

前回までで、作るバナーの大きさを決めてみましたので、今回はいよいよバナーを作ってみましょう。

今回作るのは、コレ

   バナー見本 見本です(笑)こんなサイト無いです(笑)

前に切抜きをした、
切り抜けました♪
この画像がそのままキャンバスに残ってるのもとして、作業を開始いたしますー。


バナー作り1
かなーーーり、大雑把な解説で申し訳ないのですが・・・
中身の細かい部品の作り方は、追々ご希望があったら解説するとしまして(笑)
要するに、作ろうと思ったサイズの枠にバランスよく、部品を配置します。

写真なんかは、枠に入れたい部分意外は無視して構わないので、
大胆にはみ出したままでOKです(^.^)
デザインによっては、「文字」や「吹き出し」なんかもはみ出ることあります。

ほらほら。。。
ピグモンさんリンク用
これは「吹き出し」がはみ出てるの分かります?

そして、アタリの枠(幅120x高さ60の枠)が一番上になるように画像を重ねてあります。

画像の順番は、新しく登場した物が上に積もっていく形になります。
よって、最初の方に作った枠は下の方になってる訳ですが、
作業がしにくいなぁと、感じた時点で、一番上に持ち上げます。
バナー作り2
これで、一番上になりました。

では、最後の作業です。
この、画像の塊状態の絵から、必要な部分を切り抜きます。

バナー作り3
枠のすぐ内側を切り抜き用の枠で指定して、
ダブルクリックしたら完成です(^.^)

完成なんですが、、、
出来上がった物をダブルクリックして、
「情報」を見ると、若干サイズが120x60になってない可能性があります。
うまく内側ギリギリを切り抜けてないってことなんですが・・・
大雑把な私は、こんな時、、、
出来上がった物のサイズを若干変更してしまいます(笑)
1〜2%前後の伸び縮みは、あまり気になりませんので(笑)
気になるような、幾何学的なデザインを作った場合は。。。
頑張ってキレイに切り抜いてください。
または、事前にそれを見越して、枠のサイズを自分好みに調整しましょう。



以上、大雑把なバナー作成手順解説でした!

次回は、Web用に保存する方法を解説いたします〜(^.^)


また、最近ウェブアートデザイナー講座というサイトさんを見つけました〜。
私も勉強になることがいっぱいありました(*^_^*)
参考にしてみてください(*^_^*)


posted by あずみ屋あずき。 at 14:05| ☁| Comment(0) | TrackBack(0) | ウェブアートデザイナー術 | このブログの読者になる | 更新情報をチェックする

ウェブアートデザイナー術:キャンバスの設定&サイズ決め

前回起動出来たので、今度はキャンバスの設定です。
と、言うのも、起動したままでは、白いキャンバスが結構狭いのです。
作業の全てを1つのキャンバス内で行うためには、ある程度の広さが欲しいので。

キャンバス設定1


キャンバス設定2



ではでは、引き続いて、素材作りの用意です。

作りたい素材のサイズを決めましょう。
今回は、、、

ピグモンさんリンク用
このサイズのバナーを作る際のサイズ決めねー。
モデルはピグモンさんとこのリンク用バナー(^.^)


>サイズ決め1

テキトーーに枠を作ってから、ちゃんと設定します。

サイズ決め2


この枠はアタリです。
枠からはみ出すような素材や効果を使って構成した場合に、
最終的にこの枠のすぐ内側で切り抜くことによって、最初に設定したサイズに出来上がります。

使う素材によって、デザインによって、アタリ用の枠はジャストサイズの方が良い場合もありますので、場合に寄って使い分けてください。
私は最近、お写真をお預かりする機会が多いので、
敢えて一回り大きい枠で説明させていただきました。



また、最近ウェブアートデザイナー講座というサイトさんを見つけました〜。
私も勉強になることがいっぱいありました(*^_^*)
参考にしてみてください(*^_^*)










黒ハート私はこれが欲しいかなーー黒ハート

posted by あずみ屋あずき。 at 13:50| ☁| Comment(0) | TrackBack(0) | ウェブアートデザイナー術 | このブログの読者になる | 更新情報をチェックする

ウェブアートデザイナー術:ソフトの起動

今回は、まず、ソフトの起動から。

そもそものソフトは、ホームページビルダーをフルにインストールしていただければ、パソコンに入っているはずです。


WAD起動
ちなみに私のパソコンはWindowsXPが入っています。
ホームページビルダーが立ち上がった状態なら、「ツール」の中からも立ち上げられます。
JPEGやBMP、GIFのファイルを右クリックして、
「プログラムから開く」をクリックして選んでも起動出来ます。




今日は起動まで。
とりあえず、ホームページビルダーをインストールしてある方で、「素材を作ってみようかなー」と思ってる方(^.^)
まずは、一度WADの画面を見てみてくださいませー(^.^)


次回は、「素材を作る用意」です(^.^)


また、最近ウェブアートデザイナー講座というサイトさんを見つけました〜。
私も勉強になることがいっぱいありました(*^_^*)
参考にしてみてください(*^_^*)










黒ハート私はこれが欲しいかなーー黒ハート

posted by あずみ屋あずき。 at 13:45| ☁| Comment(0) | TrackBack(0) | ウェブアートデザイナー術 | このブログの読者になる | 更新情報をチェックする

ウェブアートデザイナー術:写真の切り抜き

出来る方の領域は荒らさず、出来そうな方は伸ばそう!
それが私の主義です。
というわけで、私が扱えるのはウェブアートデザイナーというソフトです。
ご質問いただいた事にボチボチお答えさせていただこうと、カテゴリを一つ追加してみました(^.^)
少しずつ溜まって行けば、少しは役立つカテゴリーにならないかな?(^.^)


そんなわけで早速ですが、、、

「早速ですがひとつ教えてください≦(._.)≧ ペコ

わんちゃんやうさちゃんの写真を背景カットする良い方法あったら教えてください。
宜しくおねがいします!」


kana&tosiさんからいただいたメールです。


では、切り抜き術、いってみよ♪


WAD講座用写真.jpg
まずは写真を用意します。
これは、デジカメではなく、フィルムで撮影した写真をスキャナで取り込んだ写真です。
どんな写真でもOKですが、
写真は、後で加工することを考えて対象が切れていないものを選びましょう。


ウェブアートデザイナーの作業画面です。
ウェブアートデザイナーの作業画面の一部です。
一応、「キャンバスを含まない」を選んでますが、
今回は写真の中だけで切り抜いてるので、関係ないです(^_^;)

「輪郭 10」を「輪郭 0」にすると、くっきり切り抜けます。
なので、0〜10で扱い易い数値を探してみましょう。



切り抜きは結構ザックリでOK
囲んだら、囲みの中をダブルクリックで切り抜き完了。


切り抜けました♪
これで切り抜けました。
切り抜く前に、周囲の色味などを参考に色の調整をしておきましょう。
今回は色の修正を加えていません。


で、参考までに、、、
以前、この写真を加工して出来上がった作品はこれですー

Christmas





ウェブアートデザイナーは、ホームページビルダーに付属してくるソフトです。
かなり優秀なソフトだと思います(>w<)
どんなことが出来るかと言えば、、、
私がこの日記などで公開している作品の全ては、このソフトのみで作成しています(^.^)

さ、ウェブアートデザイナー仲間が増やせるかなーー??

ちなみに私は、ホームページビルダーを使ってます。
現在、最新は10が出てるようです。
そろそろ新しいのが欲しいような気がしますが、素材作りだけなら、8で充分な今日このごろ(笑)


posted by あずみ屋あずき。 at 13:39| ☁| Comment(0) | TrackBack(0) | ウェブアートデザイナー術 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。