ホームページ用のカンタンでかわいいイラストを描いてみませんか?Fireworksの操作方法を覚えよう!「カンタンお絵かき講座 with Fireworks」

「カンタンお絵かき講座 with Fireworks」サイトトップへ Fireworks はじめての人へ Fireworksって何? 「カンタンお絵かき講座 with Fireworks」リンク集 「カンタンお絵かき講座 with Fireworks」管理人について

 

コピーペーストで描くお花のアイコン

パーツをコピー&ペーストを使って、右のようなお花のアイコンを描く方法をご紹介します。
とても簡単ですので、まだ描いたことのない方はどうぞお試し下さい。
お花アイコン レベル
超カンタン
1)まずは新規作成


  Fireworksを起動し、ファイル>新規作成をクリック。200×200ピクセル(お好きなサイズで結構です)、解像度72ピクセル/インチ(WEB用ということで、72ピクセル/インチとします)、キャンパスカラーは白とします。

新規ドキュメント
 
2)涙粒の形をした花びらを描く
 


楕円ツール まずは花びらの部分を描きます。ツールの[楕円]ツール(ツールウィンドウの○)を選択します。お好きな大きさの楕円を描きますが、花びらですので大きすぎないようにご注意を。

 

ダイレクト選択ツール次に、ツールのダイレクト選択ツール(白抜き矢印マーク)を使います。円の左側にあるポイント(円のライン上にある○)をクリックし、ALTキーを押しながらハンドルバーをポイントの中心へ引っ込めます。

 

花びらハンドルバーをなくしたポイントをさらに左側に引っ張ると、涙粒のような形になるので、形よく整えます。

3)コピーペーストで花びらを増やす
 
花びら 花びらをあと5枚増やし、計6枚にします。

 花びらを選択し、ツールバーのコピー(Ctrl(windows)またはCommand(mac)+C)&ペースト(Ctrl(windows)またはCommand(mac)+V)をして2枚に増やします。選択したまま、次にツールバー[修正]>[変形]>[横反転]して回転させて左右対称にします。
コピーペーストよりもカンタンな、クローンという機能でもよいです。
…ツールバー[編集]>[クローン](Ctrl(windows)またはCommand(mac)+shift+V)

花びらを回転 今度はその2枚を選択し、コピー&ペースト(またはクローン)します。そして同じように回転させて4枚に増やします。若干斜めに配置させてください。同様に、あと2枚ペーストし、計6枚作成してください。バランスよく円状に花びらを増やします。
4)円を描いて花の出来上がり
  出来上がり
 楕円ツールで小さめの円を、ちょうど花びらの真ん中に描きます。これで、花のマークはひとまず完成。
 
5)縮小してアイコンにする
 


 花はこのままでもよいのですが、ホームページのアイコンとして使う場合は、全体的に縮小します。

Ctrl+Aですべてを選択し、ツールの拡大・縮小ボタンをクリック。周りがところどころ■に囲まれたラインがでてきますので、右下の■を動かして全体を縮小させます。

縮小

大きさが20ピクセル×20ピクセルくらいが使いやすいサイズだと思いますよ。

 とはホームページ用にgifファイルとして書き出しすれば完成です。

 
7)最適化パネルで書き出して完成です。
 
実際にホームページで使うときは、GIFファイルかJPGファイルに書き出しします。
最適化パネルで設定:GIF WEB216色、カラー32色
(2色使いなので、それ以下でもよいです)にし、ファイル>書き出しでGIFファイルにしましょう。

ちなみに、書き出しの時の設定は、グラデーションが多いイラスト(手書き下書きイラストに色をつけたいの金魚のイラストなど)ではJPGがオススメです。
レッスンポイントチェック

応用イラスト 花びらの形や枚数を変えると、いろんな種類のお花が描けると思います。

 応用として葉っぱと茎を付け足して、このようなイラストを描いてみました。 いかがですか?

 
コピーペーストで描くお花のアイコン 13個の円でクマを描いてみよう! 手書き下書きイラストに色をつけたい!
キャラクターを描いてみよう なめらかな曲線のイラストを描こう  
「カンタンお絵かき講座」トップページ はじめての人へ Fireworksって何? リンク集 管理人について
 
Macromedia および Fireworks®は、Macromedia, Inc. の米国およびその他の国における商標または登録商標です。
Copyright 2001-2003 web-cube.com All right reserved.
presented by web-cube.com e-mail info@web-cube.com