photo-1420828265723-3dbcadd2f65f

【Illustrator】グランジ(かすれ)の表現の仕方を学ぼう!


アナログとは違い、デジタルでは文字に質感を入れるのも一苦労。特に荒めの加工をすると、まとまりを出すのに苦労することが多いです。
そんな時はグランジ(かすれ)が便利。ベースとなる形は維持し、それでいてラフ感を出せるスキルを手に入れましょう。
ここでは【型抜き】【クリッピング】【不透明マスク】を利用した3パターンをご紹介します。

グランジ…型抜き編

パスで作られたものなら、一番最初に試したいのは型抜きです。たった3ステップで作ることができるので、多用したい人には特にオススメの方法です。

型抜き1
(1)グランジさせるもの(例では文字)とグランジ風の素材を用意します。両方ともパス化必須です。

型抜き2
(2)重ね合わせ、この時点でグランジする状態を合わせます。素材がレイヤーの上になるように注意します。

型抜き3
(3)両方のオブジェクトを選択したら、[パスファインダー]パネルから[前面オブジェクトで型抜き]を選び、型抜きします。

型抜き4

→グループ内に不要な要素があれば削除し、完成です。

★ポイント
グランジは「かすれ」の表現方法なので、切り抜く素材は大きさ・太さに注意しましょう。
明朝体やイタリックなどの細いラインが入っているものは不向きです。ゴシックなど、どっしりした太字だとグランジのタッチが効果的に見えます。
直に素材を切り抜いてしまうため、後からの修正が難しい方法です。素材を合わせた状態でデザインを確定し、後から調節したい場合はまずは後述のクリッピングを試しましょう。

グランジ…クリッピング編

切り抜きの手間を省きたい、また切り抜く前に調整をしたい時に便利な方法です。たった2ステップで作ることができるので、特に多忙な人にオススメの方法です。
また型抜きをするとまとめるのが大変な、細かいテイストのグランジにも適しています。
クリッピング1
(1)グランジさせるオブジェクト(例では文字)とグランジ風の素材(jpg推奨)を用意します。

クリッピング2
(2)重ね合わせ、Option+Command+Gでクリッピング化します。グランジ風の素材がレイヤーの上になるよう注意します。

クリッピング3

→完成です。

★ポイント
切り抜きをしない分、素材の色味に要注意。背景と合わない場合は、photoshopなど画像編集ソフトで補うと効率的です。
その場合はリンク設定をし、調整の過程をリアルタイムで見られるようにしましょう。
また、グランジした部分が不透明になるため、透過したい場合はレイヤーを乗算に設定しましょう。

グランジ…不透明マスク編

切り抜きをすると後の編集が難しく、クリッピングではデータが重くなりがちです。編集後の調節、データの軽量化を考える場合は不透明マスクの設定を試してみましょう。
たった3ステップで作ることができるので、数を編集する人により向いている方法です。

不透明マスク1
(1)グランジさせるもの(例では文字)とグランジする素材を用意します。両方ともパス化必須です。

不透明マスク2
(2)両方のオブジェクトを選択し、[透明]パネルから不透明マスクの作成を選択。

不透明マスク3
不透明マスク4
不透明マスク
(3)[透明]パネルの[クリップ]のチェックボックスをオフにします。
散り方が綺麗ではない場合、ここで調節します。反転を使うと整うことが多いので、まずは反転にチェックを入れることがベストです。
→完成です。

★ポイント
型抜きとも、クリッピングとも異なる方法です。どちらも使えない、という場合や、マスクに慣れている方などに適した方法です。
またレイヤーとマスクのリンクを切ることで、マスク単独で調節できるなどの特徴があります。

いかがだったでしょうか。全てに特色があり、用途によって使い分けることが推奨される方法です。
特にオススメの使い方は
【型抜き】背景が必要なもの、背景の変更が多いもの、透過必須のもの(例…ポスター・フライヤー)
【クリッピング】最終的に一枚にしてしまうもの、目で見た状態が優先されるもの(例…WEB画像)
【不透明マスク】調整が必要、細かなやりとりを要するもの(例…ポスター、書籍デザイン)
となります。

あくまで一例ですので、使い勝手がいいように扱うことをオススメします。
効率的、かつよりよい作品を作るためにスキルを活かしてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


memeron

今年東京の美術大学を卒業したmemeronと申します。 大学ではデザインを専攻、在学中はイラストや雑貨の製作をしながら友人らと展示などで活動していました。 現在は引き続きデザインとイラストを学びながら、フリーランスで自立できるよう邁進中です。 元々文章を書くことも好きだったので、何か人のお役に立てることをできればと思い日々模索しております。 何事にも一生懸命取り組んでいきたいと思っています。 どうぞよろしくお願いします。

Next Article【Illustrator】ロゴ制作の参考になるテキストエフェクトチュートリアルまとめ