イラレだけでブラシ風の擦れたペイントグラフィックを作製する方法

Share on Facebook
Pocket

久しぶりのデザインチップス投稿です!はい、これ系の記事は2ndです。
プリント屋をオープンさせるのに大忙しですが、サイトを放っておく訳にもいかないので、今とりかかってるTシャツ用のプリント柄作製の仕事の延長線上でいける記事を書いてみようと思います。自分用の覚え書きにもなるしね。いっつもエフェクトかける順番忘れるからw

これが正解ってわけではないと思いますがー、1つの方法として、また自分流にアレンジしていけばもっと良い表現にできるかもしれない。ピンポイントな記事を目指してます。アパレル系のプリント用グラフィックの作製案件が多々あるなか、いろいろな要望があるものです。その中で手書き風の雰囲気を出したい、ちょっと経年劣化したプリントが擦れた古着のような雰囲気など、カチッとしたイメージでは完成できないものが多いので、その中で自分流にあみ出した方法です。そういう壁にぶちあたった方達のために1つの参考になればと思う。です。はい。

特にTシャツのプリントなどではシルク印刷のコストを抑えるため、色数を抑えることが多く、単色でどれだけ表現できるかってのも1つの課題でもあります。なのでその辺もふまえて制作過程をスクリーンショットをばしばし撮りましたので、早速いってみましょう!

まずはですね。この方法細い線のみのグラフィックではあまり役に立ちそうにないですw 最初に言っておきますね、それと使っているのはイラストレータCS5英語版です。

という訳で太めのフォントを使ったグラフィックをいっちょこさえました。注意点はグループ化させておくか合成して1つのオブジェクトにして色は黒1色にしておくこと。それと大きめに作っておくこと。最終的に納品する(仕上げる)実寸かそれよりちょっと大きめがベストです。小さいとエフェクトをかけた時に調整しづらくなります。ちなみに今回は1200 x 800ピクセルのアートボードでやってます。なぜピクセルかっていうと記事にするためわかりやすい画像サイズにしたかっただけです。(図1参照)

図1

図1

次に、いきなりエフェクトをかけます。エフェクトメニューからスケッチ→フォトコピーを選択してください。(図2参照)

図2

図2

するとエフェクトの調整画面がでてきますので、図3のような雰囲気に調整します。これはグラフィックの大きさや太さなどで調整値が変わるのでやってみてどん!です。(図3参照)

図3

図3

すると図4のようになりますね!(図4参照)

図4

図4

そしたら、お次もエフェクトさんです。エフェクトメニューからスタイライズ→グローウィングエッジを選択します。(図5参照)で、調整画面で図6のような雰囲気にします。よく見るとグラフィックの淵が白くなってますね。ここがポイントです。白い淵が細すぎると最後に効果が薄くなるし、太すぎると効果が効きすぎて細かい部分がすっぽり消えてしまうので、何度かリトライしてみてください。で図7のようになりますね。(図7参照)

図5

図5

図6

図6

図7

図7

しつこいですが次もエフェクトです。ブラシストロークからスプラッターを選択して下さい。(図8参照)すると図9のようにグラフィックの淵がノイズがかって滲んだようになり細部がつぶれます。スプレーラディウス(Spray Radius)とスムースネス(Smoothness)の設定が決めてになります。スプレーラディウスの値が大きいと淵のにじみがおおきくゆがみますので、これも何度かリトライして好みの設定にしていきます。してね。(図9、10参照)

図8

図8

図9

図9

図10

図10

さて!最後のエフェクトです。しつこいですねw 最後はブラシストロークからインクアウトラインを選択します。(図11参照)またまた調整画面が出てですね。図12のように筆のテクスチャーがつくような感じで調整します。で、図13のようになると思います。(図13参照)

図11

図11

図12

図12

図13

図13

おぉ!手書きっぽくなったよね!ただのグラフィックならこれで終了しても良いのですが、これだとグラフィックにアピアランスとしてエフェクトが適用されているだけなので、拡大したり縮小するとエフェクトの設定値がずれてしまい、もとの狙った効果とはずれてしまいますし、もしTシャツ用のシルク印刷が前提のグラフィックならば全てアウトラインしてあげないとだめです。

という訳で図14で見るようにラスタライズしてまずは画像に変換しましょう!(図14参照)画像変換の設定画面がでますので、なるべく解像度を大きくしてあげた方が仕上がりはキレイなので300dpiを選択して「OK」しましょう。(図15参照)すると画像に変換されます(図16参照)

図14

図14

図15

図15

図16

図16

次は以前書いたこちらの記事のように画像をベクター変換をします。(図17参照)ここでスレッショルドの値をいじくるとグラフィックの淵の擦れ具合など少し変わってくるので、今回はスレッショルドの設定値を少し低くめに設定し、効果がわかりやすいようにしました。ミニマムエリアも小さくしておくと細かい筆のテクスチャー部分も残るので、設定値を低くしておくことオススメです。

図17

図17

これで変換すると図18のように1色でブラシ風の雰囲気に仕上がりましたね。自分的にオッケー!てなればエクスパンド(Expand)して、アウトライン化させましょう。(図19参照)そしたら白い塗り部分はいらないので消し去りましょう。(図20参照)

図18

図18

図19

図19

図20

図20

はい、これで完成ですね!(図21参照)1色でブラシの擦れた雰囲気が出ていると思います。

図21完成!?

図21完成!?

でも、もうちっと味付けしたいよねー、という方はテクスチャー画像を使ってみるといいですよ!(図22参照)

図22

図22

今回ぶらしの擦れた雰囲気のテクスチャーを作りましたのでダウンロードできるようにしてあります。

テクスチャー画像のダウンロードはコチラをクリック
↓↓↓

同じ要領で羽を作ったのでロゴに付け足して、テクスチャー画像を貼り込みます。これはビットマップ画像(BMP)になっているのでイラレにお持ち込みするとテクスチャーに色付けできます。背景色と同じホワイトにしてあげれば、さらに掠れ具合が増していい感じ。(図23参照)

図23

図23

これで一通り完成ですが、少し応用して他の画像を作ってみました。Tシャツのプリントとは関係なく、ウェブ用のバナー画像やらなんちゃら、使えるんじゃないかな?

まずさきほどのロゴに色つけてグラデーションを適用させます。(図24参照)
(注)グラデーションは画像にのっけた時に濃淡が出てそれっぽく見えるように適用しました。一応書いておかないとグラデーションかけた理由もないとわかんないよね、後で気がついた。

24

そしておもむろに背景画像を用意しますw(図25参照) 

図25

図25

これはですね。5th Design Digital Contents Shopで取り扱ってる背景画像です。宣伝その1ですw で、その背景画像にグラデーションをかけたロゴを透明度をいじって、ここではオーバーレイを使ってます。のっけてあげると(図26参照)

図26

図26

このような画像が作れます。で、いろいろ背景画像を変えたり、透明度をいろいろ変えたりするして応用していけば、図27、28のような画像にもなります。はい、これらの背景画像もココで扱ってます。(無料もけっこうあるので良かったら見てね!)

図27

図27

図28

図28

という訳でデザインチップスなんだか、宣伝なんだか、新手のステルスマーケティングとして書かせていただきましたw

まぁ、ともかくデザインチップスとして誰かに役に立ってくれたらいいなと思います。これからもピンポイントなデザインチップス記事を目指しますのでよろしくみなさん!


その他5th Design 関連サイト & SNS

5th DesignのFB, Twitter, Pinterest そしてRSS購読などもありますのでもし記事を気に入っていただけたら下記リンクからフォロー等よろしくお願いいたします!

fb-black
5th Design on Facebook
フェイスブックページにて主にブログの更新情報などをお届けしています。メッセージでのお問合せも受け付けております。
tw-black
5th Design on Twitter
ツイッターにてブログの更新情報や気になる情報など発信。DMでのお問合せも受け付けております。
pin-black
5th Design on Pinterest
5th DesignのPinterestサイトです。。素晴らしい作品なんかをぼけっと眺めながらピンさせていただいてます。
rss-black
5th Design on RSS
RSSにてブログ購読できます。更新情報がすぐに届くので便利!
5ddc-black
5th Design Digital Contents
本家の5th Designデジタルコンテンツのサイトです。アブストラクトなイメージやグランジテイストのイメージなどがメインの5th Designが運営するフォト素材サイト。2015年12月11日のリニューアル後、全て無料でダウンロード可能になりました。

業務内容の詳細やお問合せなどは...

5th Designの業務内容の詳しい内容は” Contents of Jobs ”ページを参照していただき、問い合わせやご依頼などは” Contact ”ページよりお願いいたします。

contentsofjob-banner contact

スポンサーリンク

この記事を書いた人

2nd5th Designでは2ndことデザイナーのBLCKBTYです。グラフィックデザイン全般・WEBデザイン・5th-Designサイト運営・オリジナルTシャツ制作サイトCREATEE運営(準備中)
Share on Facebook
Pocket

コメントを残す