ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopできれいな画像をリボンに入れる方法

Photoshopできれいな画像をリボンに入れる方法

投稿日:2009年02月24日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopできれいな画像をリボンに入れてみたいと思います。


Step1:はじめに

はじめに、(PhotoshopかIllustratorの)ペンツールペンツールでリボンを作ります。
このシェイプに沿ってガイドラインの作業とマスキングを行います。

ペンツールでリボンを作成


Step2:ワープを使って画像を貼りつける

好みに応じて3つの画像を選んで貼り合わせます。

画像を選んで貼り合わせる

レイヤーの不透明度を40%か50%に調整するとガイドラインは次のようになります。
「編集」−「パスを変形」−「ワープ」を選択します。
するとグリッド線とそれぞれの端に4個のアンカーポイントが表示されます。
画像を曲げるには、アンカーポイント、ディレクションポイント、グリッドラインをドラッグします。

ワープを使用し画像を曲げる

このステップをリボンのほかの箇所に対して繰り返します。
このステップがシンプルで繰り返し可能なので、ここでは詳細についての作業はしません。
作業ステップのスクリーンショットは次のとおりです。

ワープを使用し画像を曲げる2

ワープを使用し画像を曲げる3

ワープを使用し画像を曲げる4


Step3:マスキングをする

レイヤーをグループ化します(例:リボン1、2、3、4)。

レイヤーをグループ化する

最初に作ったシェイプから選択範囲を読み込み、それぞれのグループにレイヤーマスクを追加します(カーブがスムーズになります)。

グループにレイヤーマスクを追加する


Step4:影や光の強調や境界線を入れる

マスクを適用したグループ1に、新規レイヤーを作成してリボンの上に配置します。
グラデーションツールグラデーションツールを使って上から下へドラッグして黒いグラデーションを作ります。

黒いグラデーションを作成

このステップを他のリボンにも繰り返します。

黒いグラデーションを他のリボンにも作成

リボンに光沢を入れて目立たせるには次のように作業します。
輝く円形のシェイプを作り、上下を短くして、リボンの方向に合わせて回転させます。

輝く円形のシェイプを合わせて配置

境界線を入れるには次のように作業します。
マスクの選択範囲を読み込み、新規レイヤーを作成して黒く塗り、選択範囲を1ピクセルか2ピクセル左に移動させたら、「Delete」キーを押して選択範囲を削除します。

境界線を入れる


Step5:完成

画像をもう少し面白くするには、背後の2つのリボンの彩度を減らします。

完成

おまけ

Photoshopのワープツールはひねりや曲げといったグラフィック効果を入れるのに非常に役立ちます。
次のイラスト例のようにワープツールを使うとこのようなことができます。
ぜひお試しください!

おまけ


引用:Web Design Library 著者:www.webdesignerwall.com  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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