2009年のウェブトレンドのひとつとして、文字を切り抜いたような効果を使っているホームページをよく見かけます。
今回は、この型押し文字をフォトショップで作る方法をご紹介します。
背景画像に宇宙の星空を現した壁紙を使用しており、こちらもフォトショップのみで簡単に作ることができます。
一緒に覚えておくと便利ですのでこの機会にぜひどうぞ。
チュートリアルを始める前に、今回使用するフォントをダウンロードしておきましょう。
Deliciousフォント
http://www.josbuivenga.demon.nl/delicious.html
STEP 1
メインメニューよりファイル＞新規を選択し、ドキュメントを開きます。
このチュートリアルでは、カンバスの大きさを800x800pxの72px/inchとします。
描画色「黒」(#000000)として、メインメニューより「編集」＞「塗りつぶし」でカンバスを塗りつぶします。
STEP 2
新しいレイヤーを作成し、描画色「黒」(#000000)とし、STEP 1同様に黒で塗りつぶします。
次にメインメニューより「フィルタ」＞「ノイズ」＞「ノイズを加える」を以下の様に適用します。
続けてメインメニューより「フィルタ」＞「ぼかし」＞「ぼかし(ガウス)」を適用します。
STEP 3
メインメニューより「イメージ」＞「イメージ補正」＞「レベル補正」を選択し、以下のように設定します。
レイヤー名を「星」に変更し、レイヤーの不透明度を「70％」に設定します。
STEP 4
全てのレイヤーの一番上に新しいレイヤー「雲」を作成したら、描画色「黒」(#000000)、背景色「白」(#ffffff)として、メインメニューより「フィルタ」＞「描画」＞「雲模様１」を選択します。
STEP 5
ツールボックスより「指先ツール」を選択し、400pxのソフトブラシで「強さ」を「74％」としたら、図の様にカンバスを数回こすります。
STEP 6
新しいレイヤー「グラデーション１」を作成し、ツールボックスより「グラデーションツール」を選択します。
グラデーションの色を以下のように設定したら、左上から右下にかけてグラデーションをかけます。
最後にレイヤーの描画モードを「乗算」に設定します。
STEP 7
もうひとつ新しいレイヤー「グラデーション２」を作成し、別の色でSTEP 6同様にグラデーションをかけます。このときレイヤーの描画モードを「ソフトライト」に設定します。
STEP 8
新しいレイヤー「フレア」を一番上に作成し、メインメニューより「編集」＞「塗りつぶし」を選択し、描画色「黒」(#000000)で塗りつぶします。
続けてメインメニューより「フィルタ」＞「描画」＞「逆光」を適用します。
最後にレイヤーの描画モードを「比較(明)」、不透明度「76％」とします。
STEP 9
新しいグループ「宇宙背景」を作成し、今まで作成してきたレイヤーのうち「星」レイヤーと「背景」レイヤー以外を収納します。
次にメインメニューより「レイヤー」＞「レイヤーマスク」＞「全ての領域を表示」を選択します。
レイヤーマスクを適用したら、ツールボックスより「グラデーションツール」を選択し、以下の設定したら「円形」グラデーションで好みのグラデーションをかけていきます。
STEP 10
ツールボックスより「角丸長方形ツール」を選択し、丸み「10px」で描画色「白」(#ffffff)の長方形を描きます。
作成したレイヤーの名前を「枠組み」レイヤーに変更しましょう。
続けて、メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、グラデーションオーバーレイを以下の様に適用します。
STEP 11
あらかじめダウンロードしておいたフォントを使用して、適当な文字を入力します。
レイヤーパレットで「枠組み」レイヤーを選択したら、右クリック＞「レイヤーをラスタライズ」を適用します。
次にレイヤーパレット上で、Ctrlキーを押しながら(MacはCommandキー)を入力した文字レイヤーのサムネイルのひとつをクリックすると、文字レイヤーの周りが選択されます。
選択範囲が指定されている状態で、「枠組み」レイヤーを選択し、deleteキーを押すと選択範囲部分のみ削除されます。
これを全ての入力した文字で行います。
STEP 12
切り抜きが完了した「角丸長方形」レイヤーを選択した状態で、メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、以下のように適用したら完成です。
完成
いかがでしたでしょうか。白紙の状態から淡く光り輝く宇宙空間を作り出し、その上に型押し文字を作る方法をご紹介しました。
背景画像を変更するだけで印象もがらりと変わりますし、どのような文字であっても簡単に型押し文字として作成することができますよ。
