ウェブ学のすすめ

Study of Web Design & Programing

PhotoshopでApple風布地テクスチャを作る

iPhoneiPadの通知センター、iCloudなどの背景に使われている布地風テクスチャが欲しかったのでPhotoshopで作ってみました。

作り方

※使用ソフト:Photoshop CS6

【1】新規作成で幅、高さを設定(例では100px×100px)

 

【2】ウインドウを縮小して作業領域を広く取る(Ctrl+ -)

【3】長方形ツールを選択

【4】カンバスより大きめの長方形を描く

【5】描画色を好きな色に(例では#514f4f)

【6】シェイプの描画色を変更(Alt+BackSpace)

【7】「フィルター」→「ノイズ」→「ノイズを加える」

【8】シェイプをラスタライズするか聞かれるので「OK」をクリック

【9】「量:40%」「均等に分布」「グレースケールノイズ」を選択

【10】「フィルター」→「ぼかし」→「ぼかし(移動)」

【11】「角度:0」「距離:120」に設定

【12】「長方形1」レイヤーを複製(Ctrl+J)

【13】【12】で複製したレイヤー(以後「長方形2」)を選択し自由変形(Ctrl+T)

【14】Shiftを押しながら90°回転させる

【15】「長方形2」レイヤーを選択し不透明度を「50%」に設定

【16】Web用に保存

【17】画像形式を選択し「保存」

【18】完成!

サイズ、色、ノイズの量、ぼかし具合、回転具合などを変更すればいろいろなバリエーションが作れそうです。

素材がダウンロードできるサイト

作る時間がない場合は・・・

Free Apple iOS Fabric (Linen) Texture | Premium Pixels


アップルiOSリネンテクスチャ素材 | MaterialandEx