デザインする前にコンセプトやターゲット、内容の見直しを

WEBサイトのデザインカンプやフライヤーなどの課題制作で、毎回皆さんにお伝えしていることは、コンセプトやターゲットなどをよく考え、それに沿った内容にしてください、ということです。

コンセプトやターゲットが決まっていない状態でデザインしてしまうと、軸がぶれてしまって、デザインするのに時間がかかります。

また、WEBサイトやフライヤーに入れる内容(情報)は、あらかじめ決めておく必要があります。内容が決まっていない状態でレイアウトを始めてしまう方がいらっしゃいますが、本来、内容が決まっていなければデザインはできないはずです。

たとえばWEBサイトの場合は、サイトに必要な内容をまとめ、どのようなページが必要か決めて、サイトマップを作ってからデザインに取り掛かります。内容がおぼろげなままデザイン開始すると、結局レイアウトがはかどらず、逆に時間がかかることになってしまうのでご注意ください。

たとえ予定通りに制作が進まなかったとしても、あらかじめ準備しておくことは大切なので、意識して決めておいてほしいと思います。

Illustratorで木目テクスチャを作る方法

Illustrator木目テクスチャ

木目など、有機的なテクスチャはPhotoshopで作成したり、写真を使ったりすることが多いと思いますが、Illustratorの機能だけで作る方法があったので紹介します。この記事は、以下のチュートリアルを参考にしています。

参考:How to Create A Wood Grain Texture in Adobe Illustrator

木目テクスチャの作り方

  1. 土台となる四角形を作成する
  2. 細長い四角を描き、Photoshop効果の「グラフィックペン」を適用
  3. 2の「アピアランスを分割」し、「画像トレース」でパス化する
  4. 3の四角を土台の大きさに変形し、色を変える
  5. 4の木目を「ワープツール」などで波打たせる

1.土台となる四角形を作成する

木のベースの色で四角形を作ります。この四角の上に木目を乗せます。

2.細長い四角を描き、Photoshop効果「グラフィックペン」を適用

効果:グラフィックペン

木目の元になる細長い四角(色は自由)を描きます。縦の木目を作りたい場合は横長、横の木目なら縦長に、土台の四角より一回り小さく作ってください。その四角に 効果>スケッチ>グラフィックペン を適用します。細かい線ができるように各パラメーターを調整してください。「ストロークの長さ」は長く、「明るさ・暗さのバランス」は小さく、「ストロークの方向」は作りたい木目の方向にします。

3.2の「アピアランスを分割」し、「画像トレース」でパス化する

画像トレースの設定

「グラフィックペン」を適用した四角に、オブジェクト>アピアランスを分割 を実行します。するとビットマップ画像に変換されるので、選択してコントロールパネルから「画像トレース」ボタンをクリック、ウィンドウ>画像トレース で、下の画像のように精細なトレース結果になるよう設定します。カラーは「白黒」で、「ホワイトを無視」にチェックを入れてください。設定が終わったらコントロールパネルの「拡張」ボタンをクリックします。※IllustratorCS5以前は「画像トレース」が「ライブトレース」、「画像トレースパネル」がオブジェクト>ライブトレース>トレースオプション となっています。

4.3の四角を土台の大きさに変形し、色を変える

木目を土台に合わせて変形し、色を濃い茶色などに変えます。

5.木目を「ワープツール」などで波打たせる

ワープツールの設定

ワープツール(線幅ツールを長押し)などで木目を波打たせます。まずはワープツールをダブルクリックし、ワープツールオプションで「強さ」を10%程度に変更してください。設定したら木目に沿ってなぞるようにドラッグすると、自然な強さで波打ちます。選択したときの線が邪魔なら、Ctrl+Hで境界を隠しておくと作業しやすいです。

木目が細かいと結構負荷がかかります。処理が重いと感じたら、エンベロープなどで変形することをお勧めします。

これで完成です。

完成

Illustrator アピアランスで鏡面反射の文字を作る

完成品

今回の記事では、Illustratorのアピアランス機能を使って、文字の鏡面反射を作る方法をご紹介します。使う機能は、「新規塗りを追加」と「(効果の)変形」などです。

最初に、完成品のアピアランスパネルの状態を載せておきます。

完成品のアピアランスパネル

文字の塗りは削除し、テキストに塗りを2つ追加して、片方の塗りを反射した文字に使っています。「効果」の「変形」で上下に反転し、位置をずらしています。

作り方

1.「文字」の塗りを「なし」にし、「テキスト」の塗りを2つ追加する

文字を打ったら、塗りを「なし」にし、選択ツールで選択してアピアランスパネルを開いて「テキスト」に塗りを2つ追加します。アピアランスパネルの「テキスト」と「塗り」の違いは、以下の記事で詳しく書いています。

2.片方の塗りにグラデーションを設定する

塗りの一方にグラデーションを設定します。色は「黒~黒」で、不透明度で濃さを調整してください。

3.グラデーションの塗りを「変形」で編集する

「変形」の設定

グラデーションを設定した方の塗りを 効果>パスの変形>変形 で反転・移動します。「オプション」の「水平軸にリフレクト」で文字を反転し、プレビューで様子を見ながら、「移動」の「垂直方向」でずらしてください。

4.グラデーションの塗りの描画モードを「乗算」にする

最後に、アピアランスパネルでグラデーションの塗りを選択して展開し、「不当明度」の設定で描画モードを乗算にして完成です。

Ilustrator 線対称の図形を変形するときに便利な拡大縮小ツール

以前の記事でIllustratorのリフレクトツールを使って左右(上下)対称の図形を作る方法を紹介しました(記事:Illustrator 左右対称の図形を作るときに便利なリフレクトツール)。線対象の図形の半分だけを作成し、リフレクトツールで反転コピーして連結する方法です。しかし、完成時の形を想像しながら半分の図形を作るのは結構難しいので、思い通りの形にならないこともあると思います。線対称の図形の一部を変形したいときに、線対称の形を保ったまま変形する方法を紹介します。

線対称の図形を変形するとき、ダイレクト選択ツールで部分的に変形すると、対称な図形ではなくなってしまいます。そこで、拡大縮小ツールを使います。拡大縮小ツールは、ドラッグすることでオブジェクトの拡大・縮小ができるツールですが、アンカーポイントを個別に選択して拡大縮小すると、オブジェクトの一部を拡大縮小できます。この方法では、線対称の形も崩れません。ただ、どんな変形にも出来るというわけではないので、無理そうだと判断したら図形を作り直してください。

拡大縮小ツール変形の例

ハートとスペードを拡大縮小ツールで変形した例です。画像の青い○印をつけたアンカーだけを選択し、拡大縮小しています。

写真撮影時のライティングについて

本日、午前コースの訓練で写真撮影実習を行いました。カメラの機能解説やライティング、構図について解説を行った後、実際に写真を撮影してもらいました。今回は、写真撮影で重要になるライティングについてです。

写真は、人間の目で見た風景をそのまま表現できるわけではありません。肉眼で見て、明るいところも暗いところも細部まで判別できる場合でも、写真に撮ると白トビや黒ツブレを起こすことがあります。カメラは人間の目ほど柔軟に明るさの違いを写すことができないからです。そういったときには、ライティングを工夫して物の形がはっきり移るように調整をします。

点光源と面光源

写真撮影で扱う光源には、点光源と面光源があります。それぞれの光源で撮れる写真の陰影に違いが出ます。

点光源

点光源は電球など、小さい範囲から光を発する光源です。点光源で撮影すると陰影が強くなり、印象の強い写真になりますが、白トビや黒ツブレを起こしやすく、物の形が分かりにくくなってしまうことがあります。

面光源

面光源とは、点光源を半透明の板に当てて作った光源や、モニターのバックライトに使われるELなどの、広い範囲から光を発する光源のことです。面光源の光で撮影すると柔らかく光が当たり、極端に暗い部分や明るい部分ができるのを防ぐことができます。

レフ版などの反射光を利用する

レフ版(リフレクター)とは白や銀色の板で、撮影時の光を反射させるために使います。二つ折りの固い板状のものや、小さく折りたためる布状のものなどがあります。撮影してみて、影が濃くなりすぎてしまったときには、このレフ版などの反射光を使って影を薄くします。白い紙や板、アルミホイルなどでも代用可能です。

たとえば、左手前から照明で光を当てているとき、右奥にできる影が濃すぎるなら、右側にレフ版を置いて緩和するというように使います。

このように、写真を撮っていて明るさが思い通りにならないときに、ライティングで解決できることがあります。デジタル一眼を使った本格的な撮影でなくても、スマートフォンなどで撮影をする場合にも言えることなので、ぜひ活用してみてください。

Illustrator 完成した作品のパスはシンプルに

Illustratorで、ロゴなど他の人が利用する作品を制作する際、完成品のパスはできるだけシンプルにした方がいいです。余分なパスやアンカーポイントがあると、扱いづらく、ファイルサイズも少し大きくなってしまうからです。アウトライン表示(塗りや線を隠し、パスだけ表示する表示モード)でもきれいに見えるのがベストです。

例を挙げておきます。下の2つの図形はどちらも見た目が同じですが、パスのみ表示してみると、右は無駄なパスが残っています。

余分なパスは無くす

制作途中はこういったパスを残していても問題ありませんが、完成品はパスファインダーで合体するなどして、余分なパスを無くしておくのがマナーです。

Illustrator 入稿データ作成時のチェックポイント8個

Illustratorで印刷入稿データを作る際には、確認しなければいけないことが沢山あります。今回はそのチェック項目をまとめました。

入稿データ作成時のチェックポイント8個

  1. 塗り足し(裁ち落とし)が3mm作成されているか
  2. 余分なオブジェクトが無いか
  3. トリムマーク(トンボ)がきちんと作成されているか
  4. 文字がアウトライン化されているか
  5. 重要なものが仕上がり線より3mm以上内側にあるか
  6. 特色スウォッチを使っていないか
  7. 画像のリンク切れや埋め込みし忘れが無いか
  8. ドキュメントのラスタライズ効果設定が300ppi以上になっているか

塗り足し(裁ち落とし)が3mm作成されているか

断裁が多少ずれてしまっても問題ないように仕上がり線より3mm外側まではみ出しておく「塗り足し」または「裁ち落とし」は、必ず3mm以上作成します。3mm未満はNGです。

余分なオブジェクトが無いか

作品に不要なオブジェクトはすべて削除します。テンプレートレイヤーなども削除した方が良いです。アンカーが1個だけ孤立しているものは、選択>オブジェクト>余分なアンカー で選択し、削除します。

トリムマーク(トンボ)がきちんと作成されているか

トリムマークの大きさや線の設定が間違っていないか確認します。トリムマークを作成するとき、線付きのオブジェクトで作成するとサイズが違ってしまうので注意してください。線の設定は、線幅0.3pt、線の色が「レジストレーション(スウォッチパネルで透明の右にある照準マークのようなスウォッチ)」になっているかどうか確認します。

文字がアウトライン化されているか

フォントデータは、使用したフォントがパソコンにインストールされていないと表示できないため、書式>アウトラインを作成 でアウトライン化します。

重要なものが仕上がり線より3mm以上内側にあるか

仕上がり線の3mm内側までは、断裁がずれて切れてしまう可能性がある部分なので、読めないと困る文字や、重要なロゴや写真等が入らないようにします。上下左右に3mm以上余白を空けて配置してください。

特色スウォッチを使っていないか

CMYK印刷のデータに特色スウォッチが使われていると、正常に印刷できません。スウォッチパネルに特色スウォッチ(スウォッチ右下に黒丸が表示される)がある場合は、削除するかCMYKに変換します。削除した場合、特色スウォッチを使っていたオブジェクトの色は自動的にCMYKに変換されます。ブラシを使用した場合に、知らない間に特色が使われていることがあるので注意してください。

画像のリンク切れや埋め込みし忘れが無いか

画像を使った制作物の場合、画像のリンク切れや埋め込みし忘れに注意が必要です。リンクで入稿する場合は画像ファイルをaiデータと同じフォルダに入れ、まとめて入稿します。埋め込みの場合は、ウィンドウ>リンク で開くリンクパネルで画像名の右にアイコンが表示されていることを確認します。リンク画像の場合、アイコンは何も表示されません。

ドキュメントのラスタライズ効果設定が300ppi以上になっているか

「ドキュメントのラスタライズ効果設定」とは、ドロップシャドウや光彩など、効果の部分がビットマップになる(ラスタライズされる)効果の、解像度の設定です。印刷で粗くならないように、300ppi以上に設定します。

Photoshop 合成写真作成のポイント

Photoshopを実務で使うとき、写真の色調補正や切り抜きの作業は非常に多いです。そういった作業をまとめて練習できる方法として、合成写真があります。合成写真を作るなかで、マスクや調整レイヤーなどのよく使う機能を積極的に使い、慣れていってください。

合成写真作成のポイント

  1. 比較的解像度の高い写真素材を用意する
  2. 切り抜きはマスクで
  3. 選択範囲はクイック選択ツールでダメならほかのツールへ
  4. 色調補正はレベル補正→トーンカーブ
  5. 調整レイヤーはクリッピングマスクに
  6. 変形するときはスマートオブジェクトに変換
  7. 影や映り込みで現実感を出す

1. 比較的解像度の高い写真素材を用意する

印刷用かどうかにもよりますが、写真の解像度はあまり低くない方が良いです。解像度がある程度高くないと、綺麗に切り抜くのが難しいからです。また、大きい画像を縮小して使うのは問題ありませんが、小さいサイズの画像を拡大して使わないようにしてください。

2. 切り抜きはマスクで

Photoshopでは、「いかに元に戻せるデータにするか」が編集(修正)しやすいデータを作るために非常に重要です。画像を直接切り抜いてしまうのではなく、極力マスクを使ってください。

3. 選択範囲はクイック選択ツールでダメならほかのツールへ

クイック選択ツールは非常に優秀なので、どんな方法で選択範囲を作るか迷ったときには、まず試してみてください。あまりうまくいかないときには、他の方法で作るか、「境界線を調整」で仕上げたりします。

4. 明るさの調整はレベル補正→トーンカーブ

写真の明るさを補正する際は、レベル補正で諧調を整え、トーンカーブで仕上げるという順番が作業しやすく、おすすめです。元々諧調が使いきれている画像では、レベル補正は使わなくて大丈夫です。

5. 調整レイヤーはクリッピングマスクに

合成写真では、切り抜いた写真を何枚も組み合わせるので、それぞれのレイヤーに別々の色調補正を適用したいということも多いです。その場合は、調整レイヤーをクリッピングマスクにすると1つのレイヤーにのみ効果を適用できます。

6. 変形するときはスマートオブジェクトに変換

ビットマップデータは拡大・縮小に弱いですが、レイヤーをスマートオブジェクトに変換しておけば、縮小などの変形を行った後、元の大きさ(形)に戻しても画像が荒れません。

7. 影や映り込みで現実感を出す

写真を切り抜いて配置し、背景に合わせて色調補正をしてもまだ自然には見えないはずです。影を付けたり、映り込みを作ったりしてリアルさを演出してください。

Illustrator ペンツールの練習ができるサイトやフリーソフト

Illustratorの基本操作で、一番躓きやすいのがペンツールです。初めのうちは、曲線を描くときにどこにアンカーを打ったらいいか、ハンドルはどのくらい伸ばしたらいいのか、迷うと思います。以前何度かペンツールで曲線を描く際のポイントを記事にしましたが、結局沢山練習しなければ、なかなか思い通りに描けるようにはなりません。

ペンツール関連の記事
Illustrator ペンツールで曲線を書く際のポイント
Illustrator ペンツールでアンカーポイントを打つ位置について

そこで今回の記事では、Illustratorが無い環境でもペンツールの練習ができるサイトやフリーソフトを紹介します。

ペンツールの練習ができるサイト

The Bézier Game

The Bezier Game

ブラウザ上でベジェ曲線を描く練習ができます。簡単な図形から描いていき、綺麗に描けたら次の図形に進めるというゲーム形式になっています。最初のうちはお手本のアンカーやハンドルが表示されているので、どこにアンカーを打って、どんなふうにハンドルを伸ばしたらいいか間隔をつか見やすいと思います。操作もほぼIllustratorと同じです。

Mondrian

ブラウザで動作するベクター描画ツールです。SVGの書き出しにも対応しています。ただ、Illustratorとは操作が違う部分があるので注意してください。

ペンツールの練習ができるフリーソフト

Inkscape

Illustratorの代替アプリケーションとしてよく名前が挙がるフリーソフトです。Illustratorの基本的な機能は網羅していて、Windows版もMac版もあります。

参考サイト

Adobe製品の代わりに使える無料アプリ10+ | Webクリエイターボックス

Illustrator パスファインダーは実際に試して慣れる

複数の図形を組み合わせて新しい図形を作るパスファインダーは、Illustratorの機能の中でもよく使う重要な機能です。しかし、実行してみるまで結果が分かり辛く、沢山あるパスファインダーそれぞれの効果を覚えるのも大変です。

パスファインダーに関しては、効果を覚えようとするのは、二の次で良いと思います。まずは、沢山使ってみて慣れてください。以前、パスファインダーの適用結果を延々と記事にまとめましたが、パスファインダーを学びたてのときに見るのと、何度も使って慣れてから見るのとでは印象が変わるはずです。ある程度慣れてから見てみるとそれぞれのパスファインダーの性質を理解する役に立つと思います。

関連記事

最初のうちは、とりあえず試してみて、結果が違ったら別のパスファインダーを使うという感じで、使っていってください。どれを使うか迷うより、まず使ってみることが上達の近道だと思います。慣れてきて、それぞれのパスファインダーの大まかな性質が理解できたら、パスの数や形を変えて色々実験してみると、さらに深く理解できると思います。

それぞれのパスファインダーの性質が理解できれば、どのパスファインダーで目的の図形を作れるか分かるようになるので、まずは使ってみてください。