Illustratorで手描き風【水彩画風の塗り】

170131_06

 

ブラシを使用した線を使った手描き風の表現「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。
今回はIllustratorだけでできる、水彩画風の表現方法です。

170131_13

とある案件のデザインをしていたときのこと。
基本はIllustratorのベクターイラストなのですが、塗り方だけ水彩画のような表現ができないかとの指示をいただきました。

なにかいい方法はないかと探していたところ、3倍早くなるためのDTP講座 様こちらの記事で紹介されていた方法がとても参考になりました。
自分なりに試してみたものを、覚書として今回記事として残しておきます。

続きを読む Illustratorで手描き風【水彩画風の塗り】


色・イロと悩ましい話。

201602kaz

Windowsや全ての発色調整が済んでいる方には”ほぼ”関係ない話かもしれません。
…そう、色の話です。

画像には大抵『カラープロファイル』と言う自己紹介(プロフィール)的な物が付いています。
その中身を簡単に言うと『何の色空間で表現されているか』と言う…
もっと簡単に言うと『色鉛筆何本あれば表現できる画像です』と言った感じでしょうか。
ですので、その情報の変換・共有が取れている『調整の済んでいる方』やsRGBが標準のWindowsの方には”ほぼ”関係ない話になります。
続きを読む 色・イロと悩ましい話。


Illustratorで手描き風【塗り編】

以前の記事で、Illustratorのブラシを使用した手描き風の線をご紹介しました。

今回は「不透明マスク」を利用した、塗りを手描き風にみせる方法をご紹介します。

13

 

まずオブジェクトを選択後、透明パネルの「マスクを作成」をクリックし「不透明マスク」を作成します。

11

 

右側の黒い四角形をクリックし「不透明マスクの編集」モードに。
「クリップ」のチェックを外します。

12

できるだけガサガサしたブラシを選択し線の色を黒(K100)にした状態で
オブジェクトの上をなぞります。

今回はブラシライブラリの「アート_木炭・鉛筆」から下のブラシを使用しました。

01

 

なぞった部分が透明になり、アナログのがさがさした塗り残しのような表現ができました。

05

透明パネルの左側の四角形(オブジェクトが表示されている方)をクリックすると
編集完了です。

04

 

イラストだけではなく記号や線などに使っても、アナログ感のあるちょっとしたあしらいにできるのでおすすめです。

10

簡単な一手間でできるものなので、ちょっと違った表現を取り入れたいときなどに
ぜひお試しください。

 


段組み設定を使った、ワイヤーフレームの作成

いよいよ今年も残すところ、あと一週間!
一年あっというまでした。

今回は、Illustratorの「段組み機能」を使用した、ワイヤーフレームの作り方です。

サイトデザインをする前に、ページのレイアウトの目安として作るワイヤーフレーム。
以前の記事でもふれましたが、CSSniteで「段組み設定」を使った、ワイヤーフレームの作り方を紹介されていました。
それを参考に、940グリッドシステムに沿ったワイヤーフレームを実際に作ってみました。

1、長方形ツール

長方形ツールで、幅940pxの長方形を作成します。
(高さは任意ですが、キリよくできる1500pxで作りました)

長方形作成

2、段組み設定でパスを分割

オブジェクトメニュー>パス>段組み設定を選択します。

段落設定

今回は1カラム60pxとしたいので、
下図のように設定しました。

分割

すると、このように60px角のカラムに分割されます。

分割後

あとで変更するときのために、これをまるまる別レイヤーにコピーしておきます。

3、カラムを結合させる

任意のカラムを複数選択し、オブジェクトメニュー>パス>段組み設定を選択します。
列数・行数ともに「1」にすると、カラムが結合されます。

結合

 

あとは、写真や文章のダミーを作り込んで完成です。

完成

有料ですがwireMagicがダミー画像の作成に便利だそうです。
カラムを選択して、ダウンロードしたグラフィックスタイルを適用するだけなので、さらにお手軽にできますね!

 

段組み設定を使うと、マージンやカラムのサイズを計算せずに、感覚的にワイヤーフレームを作ることができます。
別レイヤーに保存していた、分割前のカラムを使えば、あとからの修正もカンタン。
ワイヤーフレーム作りが、ちょっと面倒だなと感じている方はぜひお試しください。