Appleの最近のプロダクトで使用されているかっこいいテクスチャをさくっと作るチュートリアル

iPhone, iPadのiOSの背景をはじめ、SafariなどAppleのさまざまなプロダクトで使用されているかっこいい布地のテクスチャを作るチュートリアルを紹介します。

慣れたら、1分くらいでさくっと作れます。

サイトのキャプチャ

How to Create Apple's Famous Linen Texture

下記は各ポイントを意訳したものです。

新規ドキュメントを作成し、長方形ツール「U」を選択します。

Photoshopのキャプチャ

長方形のサイズは400x400にしてみました。
※サイズはあとで調整するので適当な大きさでOK。

長方形を描くとこんな感じです。

Photoshopのキャプチャ

描いた長方形。

次に、長方形のカラーを「#514f4f」で塗ります。

Photoshopのキャプチャ

長方形にカラーを適用。

テクスチャを作成します。
まずは、[フィルター]-[ノイズ]-[ノイズを加える]を選択します。ラスタライズのダイアログが出るので「OK」ボタンをクリックします。

Photoshopのキャプチャ

ノイズは量を「40%」、分布方法を「均等」、「グレースケール」にチェックを入れて、「OK」ボタンをクリックします。

続いて、[フィルター]-[ぼかし]-[ぼかし(移動)]を選択します。

Photoshopのキャプチャ

ぼかしは角度を「0」、距離を「120」にして、「OK」ボタンをクリックします。

作成した矩形がドキュメント全体に広がるようにします。
「Ctrl+T」でハンドルを表示し、長方形のサイズを変更します。

Photoshopのキャプチャ

長方形のサイズを変更。

長方形のレイヤーを複製「Ctrl+J」します。

Photoshopのキャプチャ

レイヤーを複製。

複製したレイヤーを90度回転させます。
「Ctrl+T」でハンドルを表示し、「Shift」を押しながら90度回転させます。

Photoshopのキャプチャ

複製したレイヤーを90度回転。

布地のようにするために、複製したレイヤーの不透明度を変更します。

Photoshopのキャプチャ

複製したレイヤーの不透明度を「50%」に。

これで完成です。

Photoshopのキャプチャ

完成したテクスチャ。

テクスチャはカラーや角度や不透明度を変えることで、いろいろ楽しめます。

テクスチャのキャプチャ

カラーを淡いグレーにしてみました。

top of page

©2017 coliss