ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > フォトショップでスターバッチの作り方

フォトショップでスターバッチの作り方

投稿日:2007年7月3日   レベル:初心者    ソフトウェア:PhotoShop


Step1:新規ドキュメントの作成
まず、フォトショップで新規ドキュメントを開きます。このチュートリアルでは400x400のドキュメントを開きますが、 わたしが通常皆さんにお見せしているイメージは通常300x200です。

新規ドキュメント作成後、バックグラウンドを加えます。 わたしは水色のグラディエントにいくつかの白の縞を加えました。

水色のグラディエント

Step2:形を作る
次に星形のバッジの形を作りましょう。 フォトショップのツールメニューで、多角形ツール (U)を見つけてください。

多角形ツール (U)

ツールオプションメニューで、以下の設定が使われていることを確認してください。

ps_ツールオプションメニュー

上の写真でハイライトされている下向きの矢印をクリックし、以下の設定を適用します。

以下の設定を適用

Step3:描写色の設定
新規レイヤーを作成し、描写色を変更して、バッジを自分の好きな色にします。わたしは#4fb2eaを 選びました。新しいレイヤーを選んでいることを確認し、クリックしてキャンバスにドラッグします。

これで、基本的な形が出来ました。次のステップでもっと見栄えを良くしましょう。

描写色の設定

Step4:レイヤースタイルとハイライトを適用する
バッジを右クリックし、レイヤー効果をクリックします。その後、以下の設定を適用します。

設定1

設定2

以下の様な結果が得られたと思います。かっこいいでしょう?

結果

Step5:光沢とハイライト
次に光沢とハイライトを加えます。新しいレイヤーを作成した後、コントロールキー(Ctrl)を押したままでレイヤーのサムネイルをクリックして バッジを選びます。

光沢とハイライト

選択範囲 > 選択範囲を変更 > 縮小 を選んでインプットを2にすることにより選択範囲を2ピクセル縮小します。

選択範囲

縮小後

新しいレイヤーで、この選択範囲を#FFFFFFで色を塗ります。その後、カーソルキーの左と下を一回ずつ押します。その後、デリートキーを押します。

選択範囲をffffff

Step6:Web2.0仕様にする
レイヤーモードをオーバーレイに変えます。必要な時は不透明度を下げます。わたしは約70%に下げました。

再度、選択範囲を2ピクセル縮小します。そして、新しく作った別のレイヤーの左上から真ん中に掛けて、以下の様に白から透明のグラデーションを作ります。

グラデーション

なげなわツールを使用し、真ん中から下部に掛けての範囲を選択し、消去します。

なげなわツールを使用

このレイヤーのレイヤーモードをソフトライトに変え、不透明度を60%に下げます。

ソフトライト

Step7:最後に
かっこよくできました!次にドロップシャドウを使って簡単な白いテキストを加えますご覧頂きありがとうございます。

最後に

引用:Web Design Library 著者:PhotoshopStar翻訳:中山



スポンサードリンク

コメント

ランダム記事5件

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