ブラシを使用した線を使った手描き風の表現や「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。
今回はIllustratorだけでできる、水彩画風の表現方法です。
とある案件のデザインをしていたときのこと。
基本はIllustratorのベクターイラストなのですが、塗り方だけ水彩画のような表現ができないかとの指示をいただきました。
なにかいい方法はないかと探していたところ、3倍早くなるためのDTP講座 様のこちらの記事で紹介されていた方法がとても参考になりました。
自分なりに試してみたものを、覚書として今回記事として残しておきます。
続きを読む Illustratorで手描き風【水彩画風の塗り】
カテゴリー: Illustrator
色・イロと悩ましい話。
Windowsや全ての発色調整が済んでいる方には”ほぼ”関係ない話かもしれません。
…そう、色の話です。
画像には大抵『カラープロファイル』と言う自己紹介（プロフィール）的な物が付いています。
その中身を簡単に言うと『何の色空間で表現されているか』と言う…
もっと簡単に言うと『色鉛筆何本あれば表現できる画像です』と言った感じでしょうか。
ですので、その情報の変換・共有が取れている『調整の済んでいる方』やsRGBが標準のWindowsの方には”ほぼ”関係ない話になります。
続きを読む 色・イロと悩ましい話。
Illustratorで手描き風【塗り編】
以前の記事で、Illustratorのブラシを使用した手描き風の線をご紹介しました。
今回は「不透明マスク」を利用した、塗りを手描き風にみせる方法をご紹介します。
まずオブジェクトを選択後、透明パネルの「マスクを作成」をクリックし「不透明マスク」を作成します。
右側の黒い四角形をクリックし「不透明マスクの編集」モードに。
「クリップ」のチェックを外します。
できるだけガサガサしたブラシを選択し線の色を黒（K100）にした状態で
オブジェクトの上をなぞります。
今回はブラシライブラリの「アート_木炭・鉛筆」から下のブラシを使用しました。
なぞった部分が透明になり、アナログのがさがさした塗り残しのような表現ができました。
透明パネルの左側の四角形（オブジェクトが表示されている方）をクリックすると
編集完了です。
イラストだけではなく記号や線などに使っても、アナログ感のあるちょっとしたあしらいにできるのでおすすめです。
簡単な一手間でできるものなので、ちょっと違った表現を取り入れたいときなどに
ぜひお試しください。
段組み設定を使った、ワイヤーフレームの作成
いよいよ今年も残すところ、あと一週間！
一年あっというまでした。
今回は、Illustratorの「段組み機能」を使用した、ワイヤーフレームの作り方です。
サイトデザインをする前に、ページのレイアウトの目安として作るワイヤーフレーム。
以前の記事でもふれましたが、CSSniteで「段組み設定」を使った、ワイヤーフレームの作り方を紹介されていました。
それを参考に、940グリッドシステムに沿ったワイヤーフレームを実際に作ってみました。
1、長方形ツール
長方形ツールで、幅940pxの長方形を作成します。（高さは任意ですが、キリよくできる1500pxで作りました）
2、段組み設定でパスを分割
オブジェクトメニュー＞パス＞段組み設定を選択します。
今回は1カラム60pxとしたいので、
下図のように設定しました。
すると、このように60px角のカラムに分割されます。
あとで変更するときのために、これをまるまる別レイヤーにコピーしておきます。
3、カラムを結合させる
任意のカラムを複数選択し、オブジェクトメニュー＞パス＞段組み設定を選択します。列数・行数ともに「1」にすると、カラムが結合されます。
あとは、写真や文章のダミーを作り込んで完成です。
有料ですがwireMagicがダミー画像の作成に便利だそうです。
カラムを選択して、ダウンロードしたグラフィックスタイルを適用するだけなので、さらにお手軽にできますね！
段組み設定を使うと、マージンやカラムのサイズを計算せずに、感覚的にワイヤーフレームを作ることができます。
別レイヤーに保存していた、分割前のカラムを使えば、あとからの修正もカンタン。
ワイヤーフレーム作りが、ちょっと面倒だなと感じている方はぜひお試しください。
新潟グラム x CSS Nite「Webで使うIllustrator」に参加してきました
先日11月6日に、新潟グラム x CSS Niteに参加してきました。
テーマは「Webで使うIllustrator」
「WebデザインといえばまずはPhotoshop!」って入口からきて、今までPhotoshopメインでデザインしてきました。が、もとはIllustratorを使う方が多かった自分（パスいじっているのが好き…）。
できたら、IllustratorでもWebデザインするのに、もっと活用できたらいいなってことで、今回初めて参加してみました。
気になったこと・使っていきたい機能などを、忘れない内にメモします。
新潟グラム／CSS Niteについて
【新潟グラムとは】新潟でデザイン業務に関わる方に向けたセミナーを主催されています。
【CSS Niteとは】
株式会社スイッチの鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。
今回は鷹野さんが講師もされていました。
Web制作の動向
いままでビットマップベースで行っていたパーツの作成をSVGやWebフォント、アイコンフォントなどのベクター表現や、CSS3を活用することで
マルチデバイスに対応したWebデザインをしていく。
↓
ベクター表現が得意なIllustratorでWeb制作
Illustratorの便利な機能
時間をかけずに、編集しやすいデータをつくれるIllustratorの機能をいくつか紹介されてましたので、その中でも特に気になったものをいくつかピックアップしました。1 ライブカラーで再配色
ハーモニーカラーをリンク。あとはホイールをぐるぐるまわすだけで簡単にカラーバリエーションができます。別々に配色する必要のあった「塗り」と「線」も、これで一度に変更が可能に!
配色に悩んでいるときも、これで気軽に別の雰囲気の色が試せますね。
2 文字タッチツール
文字のアウトライン化をすることなく、一文字単位で文字の移動･回転ができます。今まで文字パレットの数値でいじっていたのを、感覚的にできるのでいいですね!
しかも下位バージョンでデータを開くこともできるそう。
でも残念ながら、こちらはCCのみ対応の機能となっています。
3 段組み設定を使ったgrid対応のワイヤーフレーム作成
段組み設定でグリッド分割し、さらにその分割したオブジェクトを段組み設定で結合。結合したオブジェクトに、ダミーの画像やテキストをアピアランスで適応
…と、ものの数分でサクサクとワイヤーフレームができあがっていく様は圧巻でした…!
段組み設定にこんな使い方があったんだなーと、一番印象に残った項目でした。
6 Layer Exporterや画像アセット（Photoshop）を使ったPNG/SVG/JPEGの書き出し
スライスを使用せず、レイヤーやフォルダ単位で画像を書き出すことができます。しかも、レイヤー名（フォルダ名）を対応する名前に変えると、それにあわせた形式や解像度で書き出してくれるそうです!
面倒だったスライス作業がなくなると、相当な時間短縮になるのではないでしょうか。
しかしこちら、CCから対応の機能です…。本当に残念です…。
参加してみての雑感
・Illustratorのこと以外にも、「Webデザイン」制作の動向も知れて、大変ためになりました。・鷹野さんのスライドの構成・デザインもわかりやすく、かつ遊びがあって素敵でした。
・視点誘導に使用されていたスポットライト機能(Mouseposéというそうです)も、わかりやすかったです。
Mouseposé
人前でデモしたりするときにやっておくといいこと（Mac OS編） – DTP Transit（Mac OS X, セミナー, イベント, 展示会, プレゼンテーション, ユーティリティ）
・CCの機能っていろいろあるんだなーと、新機能を試すのが今から楽しみです。
・使い慣れているつもりになっているソフトでも、知らない機能･活用方法がたくさん。まだまだ勉強しないとですね。
・次回開催されるときには、またぜひとも参加したいです。
Illustratorで手描き風
ベジェ曲線大好き、SAKAIです。
あとからでも修正もしやすい、少しだけ手描き風な表現を
Illustratorのブラシを使って試してみました。
①ブラシの準備
まずは線画用のブラシを作成します。
抜きの細い部分と墨だまりの太い部分を線幅ツールで調整しつつ作ります。
それにラフをかけたものをアートブラシに登録。
※ブラシ登録すると自動的にアピアランスが分割されるので、ブラシの元データはとっておきます。
これを
長いライン
中くらいのライン
短いライン
と、3種類用意しました。
ブラシ1種類だと、ラフのかかり具合がパスの長さで違ってきます。
また、ラフをかけないブラシで作成→ラフ
でも同様にできますが、
ブラシに処理をかける上で、曲線部分に妙な隙間ができてしまいます…
なので少し面倒ですが、描くイラストのパスの長さにあわせて、ブラシを作成します。
②線
滑らかになりすぎないようにパスを引いていきます。
ここでも線幅ツールを使用して、微調整します。
③着色
着色用のパスを作成
塗り残しやはみ出し部分を作ったり、線にブラシを適用したりします。
そんなこんなで完成！ハロウィンきりんくん（仮）。
・ブラシのラフを強めにかける
・さらに不透明マスクで、ざらざらした質感を追加
・着色に絵筆ブラシを使用
↑お好みに合わせてプラスすると、より手描きっぽさがアップします！
Illustratorで効率よく表組作成
はじめまして。AGN WebチームでWebデザインを担当しているsakaiといいます。
Webやデザインのことはもちろん、ソフトの使い方もまだまだ覚えることが沢山で、勉強の日々です。
Webデザインのカンプ作成ではPhotoshopを、アイコンや表などのパーツはIllustratorを使用して作業していますので、
それらを使っていて気づいたこと･便利な機能などを、こちらでご紹介できたらと思っています。よろしくお願いします。
今回はIllustratorのお話です。
Illustratorで効率よく表組作成
Illustratorでの表組作成の機能はCCの時点でまだサポートされていません。
Webデザインには表組を利用したデザインが多くありますので（会社概要や料金表、プランの比較などなど…）
作成にけっこう手間がかかってしまいます。
なにか効率のいい方法はないものかと、いろいろ調べたものを以下まとめてみました。
※IllustratorCS6を基準としてます
1 パスの段組み設定を利用する
あらかじめセルが個々にわかれた状態で作成されますので、セルの結合が「パスファインダー＞合体」で簡単にできます。
ただ、こちらの方法だと、列や行が増えてしまったときの修正がけっこう大変です。
列や行数があらかじめ決まっている時に、この方法はいいかもしれません。
2 長方形グリッドツールを利用する
- ツールバーから長方形グリッドツールを選択
- 任意の場所でクリックし、設定
（「外枠長方形を使用」にチェックを入れた場合は外枠＋ライン）
なので、列や行数の変更も「パスの段組み設定の利用」したものに比べると、グッと作業がラクになります。
以下、表作成後の編集方法をまとめました。
2-1列･行数の変更
- 長方形グリッドツールオプションで「外枠長方形を使用」のチェックをはずして表を作成。
- 表のグループ設定を解除し、中のラインを削除。
- ツールバーのブレンドツールをダブルクリックし、ブレンドオプションを表示。
- 間隔を「ステップ数」に変更。ステップ数に「列数（または行数）-1」の数を入力。
- 2辺をブレンドツールでクリックし、ブレンド作成
2-2セルを個々に分割･結合する
- 外枠のライン同士を結合させ、1つのパスにする。
- 外枠を「塗り･線あり」にした状態で全てを選択し、パスファインダー＞分割
- 結合したいセルを選択し、パスファインダー＞合体
番外編 InDesignを利用する
InDesignでは表組機能が搭載されていますので、セルの結合やセル内の文字組など編集が簡単に行えます。
EPS書き出しもできるので、Illustratorでも編集することが可能です。
InDesignが手元にあってもあまり使用されてなかった方は、試しに活用してみるのも１つの手かもしれません。
こちらのサイトを参考にさせていただきました。