ロゴデザインに役立つPhotoshopのカスタムシェイプ

2008年10月01日 00時48分更新

文● 小橋川誠己／ASCII.jp

　フリーのCSS/HTMLテンプレートやジェネレーターを活用するとカッコいいWebサイトは簡単に出来上がる。Webサイトのロゴジェネレーターもあるが、サイトの看板となるロゴだけは気合を入れて作りたい。だが、どうも文字を並べただけではしっくりこない――。

　そんなときにオススメなのが、Photoshopのカスタムシェイプを活用する方法だ。先日紹介したブラシ（関連記事）と同様に、ネット上にはさまざまなカスタムシェイプが配布されている。今回はロゴのデザインに手軽に使えそうなカスタムシェイプをいくつかピックアップしてみた。

「Speech Balloon Shapes」


「Speech Balloon Shapes」

　ここ数年、Webサイトのロゴとしてよく見かけるのが、「テクノラティ」や「Google Talk」、「Life Logger」などが採用している文字と吹き出しの組み合わせによるデザインだ。文字と吹き出しを組み合わせたロゴは、カスタムシェイプを使えばとても簡単に作れる。


「吹き出し」を使った有名サイトのロゴデザイン

　Photoshopには標準で吹き出しのカスタムシェイプが数種類用意されているが、もっといろいろな種類の吹き出しを使いたいときには40種類の吹き出しがセットになった「Speech Balloon Shapes」がオススメだ。さっそく使い方を紹介しよう（以降は「Photoshop CS3」をベースに解説）。

　まず、Photoshopのツールボックスの中から、カスタムシェイプを選び、ツールバーの下にある「シェイプ」の横の▼をクリックしてカスタムシェイプの一覧を表示させる。

　次に、カスタムシェイプ一覧の右側にある▼部分をクリックして、[シェイプの読み込み」を選ぶ。ここで、先ほどダウンロードしたSpeech_Balloons.zipの中にある「Balloons.csh」を指定すれば準備は完了だ。


ダウンロードしたカスタムシェイプファイル（CSH）を読み込む


吹き出しのカスタムシェイプが読み込まれた

　あとは、好みのカスタムシェイプを選び、適当な場所でマウスをドラッグするだけ。カスタムシェイプは後で自由にサイズを変えられるので、最初はあまり気にせず適当に配置してもいい。


大きさや位置は後で調整するつもりで適当に配置

　筆者が試しに作ってみたのが下のロゴだ。文字を配置し、サイズと位置を少し調節した上で、巷で見かけるWeb2.0サイト風のグラデーション処理を施してみた。といっても、Web2.0風の配色パターンをまとめたグラデーションスタイル（GRDファイル）「Ultimate Web 2.0 Gradients」を使ったので、すべての作業はわずか5分ほどで済んだ。