ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでリボンに描かれたロゴを簡単に作る方法

Photoshopでリボンに描かれたロゴを簡単に作る方法

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

このチュートリアルではPhotoshopを使って、リボンに描かれたロゴを簡単に作る方法を紹介します。

Step1.はじめに

今回のチュートリアルでは、次の画像のような「リボンに描かれたロゴ」を手早く完成する方法をご紹介します。

完成形



Step2.リボンの左側を作る

まずは、800px × 400pxの大きさの新規ドキュメントを作成します。
好みの色や効果をかけ、背景として仕上げます。

新規ドキュメントを作成する


長方形ツール長方形ツールを選び、前景色を#656565にしてから、下のように設定します。

長方形ツールの設定をする


キャンバスの左側に長方形を描きます。

長方形を描く


次に2つ目の長方形を描きます
この長方形は、1つ目の長方形から型抜をするために使用します。
まず、長方形ツール長方形ツールを選択し、上のオプションパネルにある「シェイプから一部型抜」を選択します。
型抜の前に、レイヤーウィンドウでパスが選択されていることを確認してください。

元の長方形に重なるように長方形を描きます。 書いた図形をドラッグすると、重なった部分が消えることが分かります。

最初の四角形に2番目の四角形を重ねる



Step3.折りたたみ部分を作る

長方形ツール長方形ツールを選び、リボンの端と同じ高さの小さい長方形を描きます。
次に、「編集」−「変形」−「遠近法」を選択します。
そして、左上のアンカーポイントを下へドラッグし、下の画像と同じようにします。

リボンの折り返し部分を作る


折りたたみ部分ができたら、「リボンの端」レイヤーへ次のように設定したグラデーションオーバーレイを追加します。

「リボンの端」レイヤーのグラデーションオーバーレイの設定をする


「折りたたみ」レイヤーには、次のように設定したグラデーションオーバーレイを追加します。

「折りたたみ」レイヤーのグラデーションオーバーレイの設定をする


このようになります。

グラデーションオーバーレイの適用結果



Step4.リボンの正面を作る

長方形ツール長方形ツールを選び、折りたたみ部分の小さい側に高さを揃えた長方形を描きます。
長さは好みの長さにしてください。

折りたたみ部分の小さい側に高さを合わせる

リボンの正面を描く


「リボン」レイヤーへ、次のように設定したグラデーションオーバーレイを追加します。

「リボン」レイヤーのグラデーションオーバーレイの設定をする


このようになります。

「リボン」レイヤーのグラデーションオーバーレイの適用結果



Step5.リボンの右側を作る

リボンの右側を作るのは簡単です。
まず、Ctrlキーを押しながら「左リボンの端」レイヤーと「左リボンの折りたたみ」レイヤーを選び、ハイライトします。
次に右クリックをして「レイヤーの複製」を行います。
レイヤーを複製したら、レイヤーを選択したままで、「編集」−「変形」−「垂直方向に変形」を行います。
リボンを反対側まで伸ばします。

リボンの右側を作成する

もし包括光源の設定ができる場合には、グラデーションの角度を変え、左側とマッチさせることができます。



Step6.完成

リボンにロゴを配置するなどカスタマイズをすれば、完成です。

完成



引用:Web Design Library 著者:photoshop.plus 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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