投稿日: | 最終更新日:
illustratorとphotoshopでペーパーカットエフェクトを作る
illustratorとphotoshopを使って、紙を切り取って重ねたようなようなペーパーカットエフェクトのパターン画像を作ります。
ペーパーカットエフェクト
illustratorとphotoshopを使います。プラグインや素材は特に必要ありません。
以下の動画を参考にしました。
photoshopでコントラストイメージを作る
①photoshopを起動して、「新規作成」します。横1377px縦768pxで作ります。
②アートボードのレイヤー1を右クリックします。スマートオブジェクトを押します。
④アートボードのレイヤー1をクリックします。メニューバーの「フィルター」→「描画」→「雲模様1」をクリックします。
すると、レイヤー1に以下のような模様が表示されます。
⑤メニューバーの「フィルター」→「ぼかし」→「ぼかし(ガウス)…」をクリックします。
⑥半径(R)を36pxに設定してOKします。
以下のように表示されます。
⑦メニューバーの「イメージ(I)」→「色調補正(J)」→「ポスタリゼーション(P)」をクリックします。
⑧階調数(L)を19ぐらいにしてOK。
以下のように表示されます。
アートボードのレイヤー1の雲模様をダブルクリックすると模様が変化します。
⑨メニューバーの「選択範囲(S)」→「すべてを選択(A)」をクリックします。
⑩メニューバーの「編集(E)」→「コピー(C)」をクリックします。
illustratorでイメージの輪郭をトレース
①illustratorを起動して、「新規作成」します。横1377px縦768pxで作ります。
②メニューバーの「編集(E)」→「ペースト(C)」をクリックします。すると、以下のようにphotoshopで作成した雲模様のパターンがペーストされます。このパターンをアートボードの中央に整列させてください。
③メニューバーの「ウィンドウ(W)」→「画像トレース(C)」をクリックします。
以下のような内容でトレースを実行します。※「カラーモード:カラー」に設定します。
④トレースが完了したら、メニューバーの「拡張」をクリックします。
以下のようにトレース後のアウトラインが表示されます。
⑤アートボードを右クリックして、「グループ」の解除をクリックします。
illustratorでカラーを入れる
①模様の一番暗い部分を選択します。
「共通のオブジェクトを選択」をクリック。
同じ階層(同じ暗さ)のオブジェクトが選択されますので、「右クリック」→「グループ」。
②スポイトルールをクリックします。
CCライブラリなどで色をクリックします。すると、選択した部分に色がつきます。
※CCライブラリの色は、「AdobeColor」等でパターンを作っておくと楽ちんです。
以下のような結果になります。
ドロップシャドウ追加
模様をペーパークラフトっぽくするため、ドロップシャドウを追加します。以下のような方向で影をつけます。
①一番最下層にしたい部分をクリックします。メニューバーの「オブジェクト」→「重ね順(A)」→「最背面へ(A)」を選択します。
①最下層から2番目にしたい部分をクリックします。
③メニューバーの「オブジェクト」→「重ね順(A)」→「最前面へ(F)」を選択します。
④その状態(最下層から2番目を選択した状態)のまま「効果(C)」→「スタイライズ(S)」→「ドロップシャドウ(D)」を選択します。
⑤以下の内容でOKをクリックします。
描画モード | 乗算 |
---|---|
不透明度 | 50% |
X軸オフセット | 6px |
Y軸オフセット | 6px |
ぼかし | 5px |
⑤以下のように影ができます。
同じように最下層から3番目をクリックし、最前面にしてドロップシャドウを追加します。
最後まで繰り返すと以下のような結果になります。
次回
- Python 114
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- 機械学習 8
- PyCharm 7
- jQuery 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- Google Colaboratory 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- API 1