所要時間10分、Photoshopで作る飛び出たド派手文字

2010/01/29

横浜のホームページ制作スタジオFIXの社長ブログ このような飛び出た文字をIllustratorで作る場合、
FILTERiT」というプラグインを使えば30秒で出来ちゃうんですが、
このために2万円以上もするプラグインを購入するのはもったいない。


そこで、Photoshopを使って所要時間10分で作る
飛び出たド派手文字チュートリアルです。
ネットショップのバナー作成などに重宝する小技ですYO!(・∀・)


横浜のホームページ制作スタジオFIXの社長ブログ Photoshopで縦500×縦500ピクセルの新規ファイルを作成します。



横浜のホームページ制作スタジオFIXの社長ブログ 描画色を黒にして「ポイント10倍キャンペーン」と
テキストレイヤーを作成するのですが、この時
・ポイント
・10
・倍キャンペーン
は、それぞれ別のレイヤーにします。

サンプルではメリハリ感を出すために、
「10」の書体を変えフォントサイズを大きくしています。
この時のポイントは、ウェイトの太い書体を使うこと。

ここでは、「ポイント」「倍キャンペーン」に新ゴU(35pt)、
「10」に小塚ゴシックH(80pt)を使用しています。


横浜のホームページ制作スタジオFIXの社長ブログ
レイヤーパレットで「ポイント」レイヤーを選択して
レイヤー効果>グラデーションオーバーレイ…をクリックします。



横浜のホームページ制作スタジオFIXの社長ブログ
上図のようにグラデーションを設定します。
描画モード:通常
不透明度:100%
グラデーション:#edd002〜#fffe7e
スタイル:線形
角度:90度



横浜のホームページ制作スタジオFIXの社長ブログ
次に境界線を上図のように設定します。
サイズ:4px
位置:外側
描画モード:通常
不透明度:100%
塗りつぶしタイプ:カラー
カラー:#e60013



横浜のホームページ制作スタジオFIXの社長ブログ
「ポイント」という文字がこうなります。


横浜のホームページ制作スタジオFIXの社長ブログ
「10」、「倍キャンペーン」レイヤーも同様のレイヤースタイルを適用します。
これだけで十分な気がしてきましたが、もう一手間加えます。



横浜のホームページ制作スタジオFIXの社長ブログ
この3つのレイヤーをグループ化して複製し、
元の「グループ1 のコピー」を不可視にします。
(目玉マークをクリックすると不可視になります)



横浜のホームページ制作スタジオFIXの社長ブログ
「グループ1」を選択してグループを結合します。
レイヤーサムネールの上で
Macなら「Commond」、Windowsなら「Ctrl」を押したままクリックして
「グループ1」の選択範囲を選択します。



横浜のホームページ制作スタジオFIXの社長ブログ
選択範囲>選択範囲を変更>拡張…>拡張量を「6px」にします。



横浜のホームページ制作スタジオFIXの社長ブログ 文字の周りに点線が表示されています。
選択範囲が文字より一回り大きくなりました。



横浜のホームページ制作スタジオFIXの社長ブログ 「グループ1」の上に新規レイヤー「レイヤー1」を作成し、
描画色「黒」で塗り潰します。
「グループ1」レイヤーは不可視にしておきましょう。


横浜のホームページ制作スタジオFIXの社長ブログ ここで「グループ 1 のコピー」を可視化してから、
黒く塗りつぶした「レイヤー1」を上に5pxずらします。
なんとなく飛び出た感が出てきました!(・∀・)



横浜のホームページ制作スタジオFIXの社長ブログ 黒く塗りつぶした「レイヤー1」を選択して
編集>変形>ゆがみ効果で
右上と左上のポイントをそれぞれ内側にドラッグして
台形っぽく変形させます。
ますます飛び出た感が増してきました!(・∀・)



横浜のホームページ制作スタジオFIXの社長ブログ 最後に光をブラシで描き足せば、
とたんにネットショップのバナーらしくなりました!(・∀・)



横浜のホームページ制作スタジオFIXの社長ブログ グラデーションや、線の色、影の色を変えると
色々なバリエーションの飛び出た文字が作成できます。


Photoshopでも所用時間10分程度で、
こんなに簡単に飛び出た文字が作成できちゃうので、
ネットショップのバナー作成などに、ぜひお試しくださーい!(^-^)ノ


まぁ…私くらいになるとやっぱり面倒くさいので、
迷わず「FILTERiT」を使いますけどね!(笑)

Post to Twitter

コメントを投稿する