Photoshopで見出し画像を作る #1

サイトにある見出し、例えば、このブログのトップページの各記事タイトルみたいなところって、ある程度目立たせたかったりしますよね。で、CSSを使って罫線を引いたり背景色をつけたりするわけですが、これだとどこにでもある感じがしてイヤ！なんて方もいらっしゃるかと。

そんなときは見出し用の背景画像を作って表示させてあげるとオリジナリティーのある目立った見出しを作ることができるわけですが、画像なんて作れなーい！という方のために、見出し用画像の作り方をレポートしてみたいと思います。

と、その前に。

私が使ってるソフトはPhotoshop7.0。Photoshopエレメンツやその他の画像ソフトを使っている方は申し訳ありません、参考程度に流し見してやってください＾＾；また、「見出し部分の幅が変わらない」というのを前提に画像を作りますので、リキッドデザインを採用されてる方も参考程度に流し見してやってください＾＾；

カンバスを作る

Photoshopを立ち上げたらファイルメニューから「新規」を選択します。すると、次のような画面が表示され新しく作るカンバスの大きさを聞かれます。

ここでは、サイドバーのメニュー用にする想定で横幅160px、縦幅30pxに指定してみました。入力が終わったらOKボタンを押してカンバスを作成します。

アウトライン用のシェイプを作る

続いて、見出し画像のアウトラインを作るためのシェイプを作成します。ここでは、角を丸くしたアウトラインを作ってみたいと思います。

ツールバーのシェイプ作成ツールの中から角丸長方形ツールを選択します。（シェイプ作成ツールボタンの上で右クリックするとツールの種類を選択できます。）

すると、ツールのオプションバーに角丸の半径を指定するフォームが出てきますので、ここに適当な数字を入れます。ここでは半径10pxにしてみました。入力が終わったら、カーソルをカンバス上に持っていき、カーソルを角から対角までべろべろっとドラッグします。すると、こんなのができると思います。

この際、描画色でシェイプが描かれるはずですが、この時点では何色でも構いません。また、カーソルをドラッグした際、カンバスの縁にピトッとくっつく感じがしたかと思いますが、これでカンバス目一杯にシェイプが描かれています。

と、こんなところでアウトラインの作成は完了。次以降で本格的な見出し画像作りに入ります。