【デザイン】PhotoShopで草や布目のようなギザギザしたヘッダーを作る方法

このWebサイトのヘッダーみたいなものを作るときの方法を、PhotoShopの初心者向けチュートリアルのような感じでご紹介していきたいと思います。ちなみに、バージョンはCS5.5です。

 

下準備

まずは、適当なサイズでカンパスを作っていきます。

画面上部を塗りつぶす

次に、『長方形ツール』で画面上部を囲います。

ブラシの設定

『消しゴムツール』を選択し、この雑草のようなトゲトゲしたブラシに変更します。サイズを大きくするほど型がはっきりと荒々しいものになります。

型をつけていく

先ほど塗りつぶした黒い部分を、フチが消えて境目が見えなくなるまで、消しゴムの先っぽでガリガリと削っていきます。

スクロールしてひずみを正す

ページ上部『フィルター』→『その他』→『スクロール』から、水平方向にスクロールしてみると、先ほど削った型に歪みがあることがわかります。違和感のある部分を真ん中あたりまでスクロールしたら、OKを押してひずみの部分をガリガリと削っていきます。削りすぎてしまった場合は、黒いブラシでその部分を塗り足してから、再びガリガリ削ります。

※全体で二度のスクロール作業がありますが、一度目（今回）のスクロールは省略することができます。しかし、レイヤー構造にしてシェイプとエフェクトを分けることで、後々カタチだけ変えたり、エフェクトだけ変えたりといった作業ができるようになります。

レイヤーを足して色付け

いい感じの型が出来上がりましたら、上に重ねるレイヤーを一つ足して、『塗りつぶしツール』で好みの色をつけ、レイヤーを右クリックして『クリッピングマスクを作成』します。

フィルタがけ

色をつけたレイヤーに対して、好みのフィルターをかけて、いい感じの素材にしていきます。今回は『フィルター』→『ノイズ』→『ノイズを加える』から、画像をざらざらにした後に、『フィルター』→『フィルターギャラリー』を開き、いい感じの素材だなーと思うまで感覚的にかけるフィルターを変更していきます。今回は『ストローク（斜め）』にしてみます。

再び、スクロールして歪みを調整

先ほどと同じように、『フィルター』→『その他』→『スクロール』から、エフェクトを掛けたレイヤーを水平方向に移動して歪みを確認します。今度は『コピースタンプツール』を使用してなおしていきます。MacOSであれば『option』キーを押しながらひずみの無い部分をクリックし、違和感のあるラインの部分でクリックすると、不思議なことに馴染んで気にならなくしてくれます。

チェックと修正をして完成

スクロールしてみて、違和感が感じなくなれば完成です。『Webおよびデバイス用に保存』などから制作したヘッダー画像を作成し、CSSで背景の設定をすれば、このWebサイトのヘッダーみたいなものが簡単につくれます。上下反転すれば同様にフッターも作ることができます。

あとがき: PhotoShopを使ってみて

Webという大海原で素材画像を延々と探し回っているよりも、PhotoShopで自力で作った方が手っ取り早い場合があります。僕はまさに素材に頼るタイプの人間だったので、PhotoShopでゼロから背景素材を作ることができるということに気づけたのは一歩前進です。このWebサイトのマスキングテープや紙っぽい感じの素材も、PhotoShopだけで作っています。もし需要があれば方法を公開したいと思います。