投稿日:
【photoshop】ポリゴンデザインのテクスチャを作成するには【探してた】
phtoshopを使って、Webサイトで使用するポリゴンデザインのテクスチャを作成したいと思います。
ポリゴンデザイン
WEBサイトなどの背景などによく使われるテクスチャです。需要があるのにもかかわらず、なかなか作り方がわからなかったので紹介します。
デザインテクニック大全を参考に制作します。
ベースのポリゴンパターン作成
まずは、簡単にベースとなるポリゴンパターンを作成します。
①アートボードを作成します。縦500px×横500pxを指定して「作成」をクリックします。
②ペンツールを使いやすくするためガイド線を表示します。「編集(S)」→「環境設定」→「ガイド・グリッド・スライス」を選択します。グリッド線(D)を250pxに設定します。
「表示(V)」→「表示・非表示(H)」→「グリッド(G)」を選択します。
以下のようにグリッド線がアートボードに表示します。
ペンツールで三角形を作ります。色は、以下のようにblack、80%、40%、Whiteの4色のグレースケールを使います。
三角形をグレースケールで作ります。以下のような簡単な幾何学模様ができると思います。
ポイント
下の図のように、外側の三角形の頂点を画面ギリギリにして、反対側とラインを揃えます。すると今後「スクロール」を使う場合に後々の仕上がりがよくなります。
スマートオブジェクトに変換
オブジェクトが複数のままだと「スクロール」が使えないので、ある程度描いたところで図形をスマートオブジェクトに変換します。
①レイヤーパネルにあるすべてのレイヤーをShiftで選択して、「右クリック」→「スマートオブジェクトに変換」します。
スマートオブジェクトにしておけば、後から色を替えることもできます。ただ結合するよりオススメです。
フィルタ「スクロール」を使う
①「フィルター(T)」→「その他」→「スクロール…」を選択します。
②水平方向、垂直方向を250pxに設定し、「ラップアラウンド(巻き戻し)」を選択し、OKします。
以下のように画像が縦横にスクロールします。スカスカな部分ができてしまいました。
③空白部分に三角形をペンツールで追加します。追加したらレイヤーを選択し、再度スマートオブジェクトに変換を行います。
ポリゴンを並べる
テクスチャの元画像が完成しました。後はこの画像を並べて大きなポリゴンテクスチャを作ります。
①新規のプロジェクトpolygon2を作成します。アートボードのサイズは1000px×1000pxです。
②新しいアートボードにポリゴンテクスチャをコピーします。
これらをさらにコピーして4つ並べます。
③4つのテクスチャのレイヤーを結合します。
結合してひとつのレイヤーにします。
着色
①ポリゴンレイヤーは一度非表示にします。あらたに1000px×1000pxの四角形を作成します。
②グラデーション効果を追加します。以下のボタンをクリックします。
グラデーションオーバーレイを選択します。
グラデーションの色や方向を指定します。(※必ず不透明度を100%以下にします。)
③ポリゴンのレイヤーを表示すると、ポリゴンに色がつきます。
次回
工事中。
- Python 113
- 制作 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
- PyCharm 7
- jQuery 7
- 機械学習 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
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- Google Colaboratory 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