Fireworksマニア

Fireworksですぐできる！アメコミ風デザイン

お久しぶりの更新です！

さて、今日はこんな感じのアメコミ風デザインをFireworksで簡単に作る方法をご紹介します！

完成ファイルとアメコミ風の色のスタイルのダウンロードもできますよ☆

それでははじめます☆

構成要素

今回のサンプルは以下のようなオブジェクトで構成されています。

ほぼ自動シェイプで描いたものを変形させたり組み合わせたりして作ります。

それぞれのオブジェクトの作り方

それぞれのオブジェクトの作り方を説明します。

吹き出し

これはツールから【楕円ツール】を使って描いた楕円と、【ペンツール】を使って描いた三角形を組み合わせて描画します。
（※このときの塗りや線の色や種類はなんでもかまいません）

三角形は【パスツール】にしたら画面上で頂点にしたいところを3点をぽちぽちぽちとクリックしてください。三角形が描けます。

楕円と三角形が描けたら、重ねて置きます。

【shiftキー】を押した状態で三角形と楕円をクリックして、2つのオブジェクトとも選択状態にします。

次に【パネル】から【パス】パネルを表示します。

パスパネル内の【パスの合体】をクリックすると、パスが合体して1つのオブジェクトになります。
これで吹き出しの完成です。

こちらも同じく楕円ツールで描画したオブジェクトを【パス】パネルから合体させたもの

ポイント：ストロークの位置

Fireworksではストロークの位置揃えを内側、中央揃え、外側の3つの中から選ぶことができます。

（CS5以前のバージョンはストロークを編集ボタンから指定できます）

それぞれ角の処理が図のように異なります。

この形の場合は外側とするのがよいかと思います。

パンクマーク

これはFireworksマニアではおなじみの、便利な便利な星ツールを使って描画します。

星ツールを使ったパンクマークの書き方がわからない方はこちらの記事を参考にしてください☆

Fireworksの星ツールで書けちゃう、星以外の模様いろいろ

ツールの【拡大・縮小ツール】を長押しすると切り替えられる【変形ツール】を使えばこんな感じで動きのあるパンクマークに簡単に変形させることができますよ☆

袋文字の作り方

次にこんな感じの動きのある袋文字を作ります。

テキストを入力

まずテキストツールでテキストを入力します。

塗りと線の設定

塗りはお好きな色で、線はなしに設定します。

フィルターを適用する

次にフィルター効果をかけていきます。

【プロパティインスペクタ】からますはPhotoshopライブエフェクトを設定します。

Photoshopライブエフェクトを適用する

ストロークを以下のように設定します。塗りの色は#000000です。

オブジェクトの線を使用しない理由

オブジェクトの線でも袋文字はできるのですが、オブジェクトの線を使用した場合、フォントサイズが小さい文字（12px以下ぐらい）に線を適用すると文字が乱れてしまう現象が起こります。

今回の文字サイズぐらい大きければ線を使用しても問題ないのですが、この方法で作ってスタイル登録すれば使い回しができるのでこちらの方法を紹介しています☆

ソリッドシャドウを適用する

こんな感じになりました。

動きのある形に変形させる

変形ツールを使って動きのある形に変形させます。

ツールから【拡大・縮小ツール】を長押しして【変形ツール】に切り替えます。

黒いハンドルを自由に動かすことができるようになりますので、動きのある形に変形させます。

今回は右に行くにつれて大きくなっていくよう変形させました。

それぞれのオブジェクトのテクスチャと塗り、線を適用する

それぞれのオブジェクトに塗りや線、テクスチャを適用していきます。

塗りの色について

アメコミの独特の配色ってどうやって生まれたんだろう？？と思って調べてみました。

どうやらこれが起源のよう。

アメコミ業界では三原色の色の濃さを100%,50%,20%の3種類に限定し、
境界線には黒インクを使っている

派手な現職とシンプルで力強い輪郭線をザラ紙に刷ったもの点これはやがてアメリカンコミックスの代表的なスタイルになっていった
 

出典：マンガ学―マンガによるマンガのためのマンガ理論（書籍）

なるほどー。

ということで、それにそってCMYKでCMYをそれぞれ0%,20%,50%,100%の4パターンで組み合わせた全64色のスタイルを作ってみました！

アメコミっぽい！（気がする）

よりアメコミっぽくするために黒い線が引かれるようにしています。

ページ下のダウンロードボタンからダウンロードできますので使ってみてくださいね！

ちなみにスタイルファイル作るときに失敗してしまって、ひとつ変な順番になっちゃってピンクが一番最後になっちゃいました＞＜

ごめんなさい＞＜

テクスチャについて

スタイスファイルにはテクスチャは適用していないので、

スタイルクリックで塗りの色と線を設定した後、テクスチャを指定してください。

デフォルトのものでも斜線やドットなどそこそこ使えるものが入っているのですが、シンプルパターン研究所にもアメコミに使えそうないろんなテクスチャを置いているのでよかったらそちらもどうぞ☆

シンプルパターン研究所

完成したのがこちら！

アメコミ風デザインの完成です！

完成ファイルはダウンロードファイルの中に入っています☆

サンプル＆スタイルファイルダウンロード

サンプルデータとスタイルファイルのダウンロードは以下のダウンロードボタンからどうぞ♪

スタイルファイルの読み込み方はについてはこちらの記事をご覧下さい。

おまけ

線の色を黒ではなく違う色にしてもポップな感じでかわいいです♪

いろいろお試しくださいねー！！

最後に

Fireworksの本を書きました！

12月7日に発売になります。

Fireworks CS5/4/3 (速習デザイン) 山口 有由希 技術評論社 2011-12-07 →Amazonで詳しく見る →楽天で詳しく見る

Fireworksはじめての方から、使っているけどまだ使いこなせていない気がする方まで楽しんでいただける1冊になったと思います♪書店や図書館などで内容をみていただければうれしいです☆

Fireworksのよさがもっと多くの人に伝わりますように…！！

本の内容については以下のページにまとめているのでよろしければそちらもご覧下さい☆