ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Web2.0のテキストエフェクト

Web2.0のテキストエフェクト

投稿日:2012年10月2日   レベル:初心者    ソフトウェア:Photoshop

このチュートリアルでは、PhotoshopでWeb2.0のテキストを作成する方法を紹介します。

Step1:はじめに

400x400の新規ドキュメントを開いてください。
これでスペースは充分で、後で切り取ることが出来ます。
背景は白にしておいてください。


Step2:テキストを設定

テキスト文字ツールで任意の単語をタイプしてください。
下記のように設定してください。
(ここでは例として「texteffect」とし、フォントを「Verdana」に指定します。)

テキスト




Step3:テキストを調整

「レイヤー」−「ラスタライズ」−「テキスト」
(テキストのサイズは変更できなくなります。最初に正しいサイズを選んでおいてください。)

テキストレイヤー上でCtrlを押しながらクリックしてください。
これで全てが選択されます。
「選択範囲」−「選択範囲を変更」−「拡張」で下記の設定を適用してください。

拡張

カラースウォッチで黒を背景色に選び、Ctrlを押しながらバックスペースを押してください。これでそのエリアが黒で塗られます

拡張


Step4:テキストを装飾

レイヤー効果(「レイヤー」−「レイヤースタイル」−「レイヤー効果」)を選択し、グラデーションオーバーレイを選んでください。 次の設定を適用します。

グラデーションオーバーレイ

レイヤー効果を開いたまま、次は境界線を選んで次の設定をしてください。

境界線


Step5:完成

こんな感じになっているはずです。

Web2.0テキスト

これで基本的なテキストが完成しました。
可愛らしい2色使いのシンプルなテキストです。
Web2.0にも適合します。
色んな色に変えてお試しください。
同じ色の違う色合いの組み合わせを使うと最高の結果が得られるということを覚えておいてください。

Web2.0テキスト

Web2.0テキスト


引用:Web Design Library 著者:avivadirectory.com 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング