FireworksマニアTOP > Fireworksチュートリアルまとめ,Fireworksデザインレシピ,ダウンロード,ツール,テクスチャ > Fireworksですぐできる!アメコミ風のデザインの作り方 【アメコミ風スタイルダウンロード付き】

Fireworksですぐできる!アメコミ風のデザインの作り方 【アメコミ風スタイルダウンロード付き】

カテゴリー: Fireworksチュートリアルまとめ,Fireworksデザインレシピ,ダウンロード,ツール,テクスチャ

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

お久しぶりの更新です!

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

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

それでははじめます☆

984-019

構成要素

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

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

 

984-003

 

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

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

吹き出し

984-004984-005

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

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

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

984-006

 

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

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

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

 

984-007

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

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

 

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

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

984-008

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

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

パンクマーク

984-009

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

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

 

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

 

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

 

袋文字の作り方

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

984-010

テキストを入力

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

984-020

塗りと線の設定

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

フィルターを適用する

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

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

984-011

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

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

984-012

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

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

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

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

984-013

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

984-021

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

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

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

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

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

984-014

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

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

塗りの色について

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

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

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

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

出典:マンガ学―マンガによるマンガのためのマンガ理論(書籍)

なるほどー。

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

984-017

アメコミっぽい!(気がする)

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

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

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

ごめんなさい><

テクスチャについて

984-015

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

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

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

シンプルパターン研究所

 

完成したのがこちら!

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

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

984-016

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

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

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

おまけ

984-002

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

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

最後に

Fireworksの本を書きました!

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

Fireworks CS5/4/3 (速習デザイン)

山口 有由希
技術評論社

2011-12-07

→Amazonで詳しく見る

→楽天で詳しく見る

 

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

 

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

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

bnFwBook

最後までお読み頂き、本当にありがとうございました。お気に召しましたらぜひ共有orクリップして頂けますと幸いです。またお会いできますように♪

Check このエントリーをはてなブックマークに追加 この記事をクリップ! コメントを見る Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

関連エントリー

このサイトを運営している人

YUKIと申します。福岡で働く会社員WEBデザイナーです。
フロッグマンオフィス所属。ショッピングカートのCS-Cartとかもやってます。

仕事以外でも趣味でいろいろサイトを作っています。
こういったTipsサイトや無料の素材屋さんにたくさんたくさんお世話になりながら勉強して、今ではWebデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい!とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでもお役に立てればとてもうれしいです^^

まわりの人にもご紹介いただけるとうれしいです。

たくさんの方に見ていただき、たくさんのご意見を頂くことは、記事の正確さや有益性を高めるだけでなく、新しい記事を書くモチベーションになります!
お気に召しましたらぜひまわりの方にもご紹介いただけるとうれしいです。リンクはご自由にどうぞ!

Fireworksマニア

バナーが必要な方はこちらをどうぞ♪
サイト名:Fireworksマニア URL:http://fw.v-colors.com/