Illustrator & Photoshop 手描き風アナログデザインのつくり方

本書はデザイン手法のひとつとしての手描き風デザインやパーツを作成するためのテクニック集です。具体的には Adobe Illustrator および Photoshop のテクニックとなりますが、ポスターやチラシ、雑誌記事などの紙媒体だけでなく、Web デザインや映像、スマホアプリなどでもよく見かける、味わいのあるラフな手描き感や質感などを活かすポイントを中心に制作方法を解説していきます。
写真をスキャンして質感のあるイラストにする方法、フォントを手書き風文字にする方法、スケッチ風の Web デザインを作成する方法、などなど、Illustrator & Photoshop でのテクニックが満載です。
解説しているサンプルはダウンロードサービスで入手できるので、実際の完成品がどのような構成になっているのかを読者は確認できます (一部の写真などは収録されていません)。さらに、デザイン作例に使用した素材もそのまま収録し、実際の制作も追体験できます。
なお、 Illustrator および Photoshop は CC2018 での解説となっており、収録しているデータも CC 対応のみとなっています。
はじめに
本書の読み方
サンプルファイルのダウンロード

PART 01 手描き風デザインのための Illustrator & Photoshop 基本テク
01 Illustrator と Photoshop の基本の連携
02 Illustrator の効果で手描き風に演出する
03 Illustrator のブラシで手描き風の線を描く
04 Photoshop のブラシで手描き風の線を描く
05 写真をベースに線画を描いて色を塗る
06 写真をベースに塗り重ねてイラストを描く
07 Photoshop のフィルター効果でアナログの質感を表現する
08 テクスチャ素材を合成する
09 手描きイラスト画像をパス化する
10 手描きイラストと写真を合成する

PART 02 手描きデザインのための素材パーツのつくり方
01 フリーハンドで描いたような文字デザイン
02 落書き風のロゴデザイン
03 墨で描いたようなにじみ文字
04 複数の手描きイラストをランダムにレイアウトする
05 均一な線にニュアンスを加えたイラスト
06 ドット柄のパターンをつくる
07 和紙のちぎり絵を再現する
08 手描きした線画イラストを着色する
09 一文字ずつ加工してつくるタイトルロゴ

PART 03 手描き風デザインのためのアイデア (紙媒体編)
01 手描きブラシで地図を描く
02 温かみのある素材を使った地図デザイン
03 2 色刷りのイベントフライヤー
04 写真を水彩画タッチのイラストに加工する
05 毛筆風ブラシを使った年賀状デザイン
06 チョークアート風のポスター
07 消しゴムはんこ風の背景デザイン
08 クレヨン風に加工した子ども向けチラシ
09 版ズレしたレトロな雰囲気の DM
10 立体的なペンで描いたようなデザイン

PART 04 手描き風デザインのためのアイデア (Web 編)
01 鉛筆風の質感を施した Web サイト
02 線画イラスト風の飾りをあしらったバナー
03 色鉛筆風の背景を使ったヘッダーデザイン
04 タイトルにグランジ加工を施し印象を強める
05 コスメパレット風ブラシを使った Web サイト
06 手づくり感のあるステッチ風 Web デザイン
07 アメコミ風デザインに加工する
08 インクがこすれたように加工する

Illustrator と Photoshop で「手で描いたような」質感を出す方法を、作例ごとの手順で示した技法書が『Illustrator & Photoshop 手描き風アナログデザインのつくり方』 (pasto 著、技術評論社、2019 年 9 月刊) です。厳密には IT 技術書ではなくグラフィックデザインの技法書ですが、収録作例の一角は Web サイト・バナー・ヘッダーの制作で、Web 制作でビジュアル素材も自分で用意する人に接点があります。版元はこの本を、手描き風デザインやパーツを作成するための「テクニック集」と位置づけており、書誌には「絵心がなくてもできる!!」という副題も登録されています。解説は Illustrator / Photoshop ともに CC 2018 が前提で、作例のサンプルデータと使用素材はダウンロードで入手できます (一部の写真は未収録)。

全 4 PART の構成、基本テクから紙媒体と Web の作例へ

構成は全 4 PART です。PART 01 は手描き風デザインのための基本テク編で、両ソフトの連携、Illustrator の効果とブラシ、Photoshop のブラシとフィルター、写真を下敷きにした線画と塗り、テクスチャ素材の合成、手描きイラスト画像のパス化といった要素技術を 10 項目で押さえます。PART 02 は素材パーツ編で、フリーハンド風の文字、落書き風のロゴ、墨で描いたようなにじみ文字、ドット柄のパターン、和紙のちぎり絵など、部品として使い回せる 9 項目の作例が並びます。PART 03 は紙媒体編 (10 項目) で、手描きブラシの地図、2 色刷りのイベントフライヤー、毛筆風ブラシの年賀状、チョークアート風のポスター、版ズレしたレトロな DM といった完成物を作り、PART 04 の Web 編 (8 項目) では鉛筆風の質感を施した Web サイト、線画イラスト風のバナー、色鉛筆風の背景のヘッダー、グランジ加工したタイトル、アメコミ風やインクのこすれの加工へ進みます。要素技術を先に学び、後半でそれを組み合わせた成果物を作る順序です。

手描き風の質感をデジタルで再現する技術的な難しさ

デジタル制作物が冷たく見える正体は、均一な線幅、完全な直線と円、ムラのない塗り、寸分の狂いもない整列といった、ソフトが既定で生み出す規則性にあります。手描き風の表現は、この規則性を意図的に崩す作業です。Illustrator はベクター形式でパスを扱うため、拡大しても劣化しない代わりに線がどこまでも均一になりやすく、ブラシ (アートブラシや散布ブラシなど) や効果で線の太さと輪郭に揺らぎを与えるのが基本の手筋になります。一方 Photoshop はピクセル単位のラスター編集なので、紙の繊維、インクのにじみ、かすれ、版ズレのような物理現象は、テクスチャ画像の重ね合わせと描画モード、フィルター、マスクで再現します。実務で要になるのは両者の往復で、Photoshop で作った質感を Illustrator の部品に載せる、手描きのスキャン画像をパス化してベクター部品にする、といった手順を押さえておくと、PART 01 に両ソフトの連携やパス化の項目が置かれている意味がはっきりします。ランダムな配置やニュアンスのある線は、既製素材を買って貼るだけでは統一感が出にくく、自分で作れる手順を持っているかどうかが仕上がりの差になります。

CC 2018 準拠の前提と、向かない読者

前提として、解説は Illustrator / Photoshop ともに CC 2018 の画面で進み、ダウンロードできる収録データも CC 対応のみと版元が明記しています。2019 年刊の本なので、以後のバージョンでパネルやメニューの配置が変わっている箇所は読み替えが必要になる可能性がありますが、ブラシ / 効果 / 描画モード / マスクという手法の骨格はバージョンに左右されにくい部分です。レイヤーやマスクといった両ソフトの基本操作をこれから覚える段階なら、ツールの入門書を先に済ませてから本書に入る方が手順を追いやすいでしょう。本書は表現目的に絞ったテクニック集であり、ツール全体の教科書ではありません。また、フラットな UI デザインや CSS で実装するタイプの Web デザインを学びたい人、イラストの描き方そのものを習いたい人が求める内容とも違います。Web デザイン本ガイド には、HTML/CSS の入門書から Photoshop の教本、レイアウトと配色の定番書までを学ぶ順番がまとまっているので、本書をどの段階で挟むかの参考になります。

元が取れるのは、チラシやフライヤー、DM、年賀状、ポスターといった紙媒体を Illustrator と Photoshop で日常的に作っていて、既製のテクスチャ素材を貼るだけの表現から一歩出たい人です。Web 制作者にとっては、鉛筆風 / 色鉛筆風 / グランジといった質感をサイトの背景やヘッダー、バナーに取り込む具体的な手順が 8 項目の作例で得られ、温かみを出したい案件で他と違う顔を作れるようになります。なお、こうした質感はビットマップ画像として書き出すことになるため、Web で使う際は 画像最適化 で表示速度との折り合いをつける工程が別途必要です。サンプルデータで完成品の構成を確かめながら作例を再現していけば、手描き風の部品を自分の案件に合わせて作り分ける引き出しが手元に残る一冊です。