Illustrator:写真をモザイクタイル風のドット絵に加工するチュートリアル

Illustrator:写真をモザイクタイル風のドット絵に加工するチュートリアル

イラストレーターを使って写真をタイル張りのモザイク画風に加工するチュートリアルです。
特に難しい手順はないので、初心者でも15分前後で加工できます。
グラフィックスタイルを使用した方法と3Dの押し出し・ベベルを使用した方法があります。
どちらも処理が重くなりやすいので、PCのスペックが低い人は注意してください。

完成イメージ

 

1. 写真をドット絵に加工する


加工する写真をイラレに貼り付けます。
リンクになっている場合は【埋め込み】にします。

 

【オブジェクト】→【モザイクオブジェクトを作成】
【タイル数】の【幅】を設定し【比率を使用】をクリック

 

ドット絵になりました。

 

2. タイルの立体感を作る

適当な大きさで正方形を作ります。

 

【塗り】にグラデーションを適用。
色は【#000000】、不透明度は右端【100%】、それ以外は【0%】に設定。
位置は画像を参照してください。
 

 

アピアランスパネルから【塗り】の不透明度を【50%】に、描画モードを【乗算】に設定し、複製。

 

グラデーションの角度を変更します。

 

同様にアピアランスパネルから【塗り】の複製を2つ作り、描画モードを【ハードライト】に設定。
(描画モードは【オーバーレイ】や【ソフトライト】でもいいと思います。お好みで)

 

グラデーションの色を【#FFFFFF】に設定し、それぞれ角度を変更。

 

タイルの立体感ができました。

 

これをグラフィックスタイルに登録します。

 

 

3. グラフィックスタイルを適用して完成

ドット絵を複製し、複製した方のグループ化を解除。
(またはグループ編集モードにする)

 

先ほど登録したグラフィックスタイルを適用します。
適用したら再度グループ化。

 

拡大するとこんな感じ。

 

グラフィックスタイルを適用した方に【線】を設定します。
今回はカラー【#DBD2D1】、線幅【0.5pt】に設定。

 

グラフィックスタイルを適用したグループをドット絵に重ねて完成です。

 

 

4. 3Dの押し出し・ベベルによるタイル加工(別の方法)

タイルの立体感を作る作業が面倒なときは【効果】→【3D】→【押し出し・ベベル】から簡単に立体感を付けることができます。
回転はすべて【0度】にしてベベルを設定。

 

【塗り】なしで【線】だけを設定したオブジェクトを重ねたものがこちら。

 

上がグラフィックスタイル。
下が押し出し・ベベル。

押し出し・ベベルの方がカッチリとした印象ですが、暗い色の部分は効果がわかりにくいです。
また、押し出し・ベベルは処理が激重になることがあるので、その点は注意が必要。
グラフィックスタイルもちょっと重いですが、押し出し・ベベルと比べたら全然余裕です。
手順は押し出し・ベベルの方が簡単ですね。
好みやPCのスペックに合わせて使い分けると良いと思います。

スポンサーリンク

関連記事

▼スポンサーリンク
▼LINEスタンプ販売中です!
▼おすすめの記事
▼スポンサーリンク

新着記事

  1. 【北海道無人駅】函館本線 道南編その7 掛澗駅〜東森駅
  2. 【北海道無人駅】函館本線 道南編その6 鹿部駅〜渡島砂原駅
  3. 【北海道無人駅】函館本線 道南編その5 池田園駅〜銚子口駅
ページ上部へ戻る