Webデザイン事始め其の三・GIMPで窪みのある文字を作ってみる

スポンサーリンク

なんとなく気が向いたので
書いてみます。右画像の様
な、窪んだ感じの文字を
オープンソースのツール、
GIMPでサクッと作るチュート
リアルです。

今回も「デザインの扉を開いてみよう」という趣旨になっています。実用的というよりは操作法を覚える為のもの、興味を抱いてもらうための内容です。Photoshopでは無く、GIMPにしているのはそういった理由からです。「GIMPってなに?」という方は「まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト」をご覧下さい。

今回は窪みのあるテキストの簡単な作り方。

文字を書く

design-1st-step01
まず、文字を書きます。大きさなどはお好みで。大きい方が分かりやすいかもです。

テキストを選択肢にする

design-1st-step02
レイヤー→テキストから選択範囲→テキストを選択範囲に

レイヤーを追加してグラデーションを掛ける

design-1st-step03
グラデーションをかけます。テキストを選択したままレイヤーを追加してグラデーションを掛けてみてください。色はお好きなもので。

選択範囲を反転して塗りつぶす

design-1st-step04
グラデーションをかけたら、もう一枚レイヤーを追加して選択範囲を反転させます。反転は「選択→選択範囲を反転」で行なえます。反転したら追加したレイヤーを塗りつぶします。ここが影部分になるので黒にしました。少し透過させています。

塗りつぶしたレイヤーにぼかしを掛ける

design-1st-step05
塗りつぶしたレイヤーにぼかしをかけます。まずCtrl+Aで選択を解除、メニューを出して「フィルタ→ガウシアンぼかし」を選択。数値は高い方がぼかし度も高いです。デフォルトでは5になっていますが、今回は3にしています。

ぼかしたレイヤーをずらす

design-1st-step06
ぼかしたレイヤーを右下にずらします。少しで大丈夫だと思います。

再度、テキストを選択範囲にする

design-1st-step07
ずらしたら、先ほどのテキストレイヤーを選択して、再度テキストを選択範囲にします。

選択範囲はそのままで、ぼかしたレイヤーに移動

design-1st-step08
テキストを選択範囲にしたまま先ほどぼかしを入れたレイヤーを選択してください。

Ctrl+Xで切り取り

design-1st-step09
そのままCtrl+Xで選択範囲を切り取ります。切り取ったらそのレイヤーは非表示にします。これが影の部分になります。

新しくレイヤーを追加して貼り付け

design-1st-step10
新しくレイヤーを追加し、Ctrl+Vで貼り付けます。影がつきました。

完成

design-1st-step11
完成です。あとは、グラデーションをかけたテキストと統合すればそのまま移動出来ます。以下は影が無いもの。比較していただけると分かりやすいでしょうか。
design-1st-step13

日本語だとこんな感じ。
design-1st-step14

慣れれば数分の作業ですので、デザイン興味あるけど何すればいいの、という方はぜひチャレンジしてみてください。

もちろんこれのみが正解ではなく、クオリティを高めようと思えば時間も手間もかかります(例えば窪みの周りに光沢を出す事で、よりリアルな窪みを表現する等)し、楽したいと思えばもっとスマートな方法もあると思いますが、まずは操作法に慣れる事が大事です。以前の記事も宜しければご覧下さい。

URL :
TRB :

Comments & Trackbacks (3)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services