【Photoshop】簡単なリボンの作り方

ここ最近のWEBデザインのトレンドとして、「リボンデザイン」があります。今回は、そのトレンドである「リボン」をPhotoshopで簡単に作れるチュートリアルをご紹介します。

1.リボンの長方形の部分を作成する

長方形のシェイプを作成

まずは適当な幅の長方形をシェイプツールで作成します。

2.リボンの端を作成する

2-1.ペンツールでリボンの端の形を描く

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

次に、リボンの端をペンツールで作成します。この時注意することは、最初に作成した長方形のシェイプよりも描画色を暗くしておくことです。

2-2.リボンの移動

描いたリボンの移動

描いたリボンの端を、右に10px、下に10px移動させます。

2-3.リボンの端に陰影をつける

まず作成したリボンの端のシェイプを右クリックし、スマートオブジェクトに変換します。その後、下記のようにレイヤー効果を追加し陰影をつけます。

レイヤー効果-シャドウ(内側)

レイヤー効果-光彩(内側)

これらの効果をつけると、下記のように陰影ができます。

陰影の出来たリボンの端

2-4.逆側の作成

「2-3」で作成したシェイプを複製し、「編集>変形>水平方向に反転」をさせ、逆側に配置します。その際、「レイヤー効果>シャドウ(内側)」で角度を180°に変更しておくことを忘れないようにしましょう。(左側で0°だったため、右側では真逆の180°となります)

リボンの端を反対にも配置

反対側のリボンの端

3.曲がった内側に色を付ける

このままでもなんとなくリボンっぽく見えますが、さらに細部を調整し、より「らしさ」をアップして行きましょう。

折れ曲がりの内側

ペンツールを使い、折れ曲がりの内側に、ほぼ黒でシェイプを描きます。逆側も同様です。

4.曲がった部分に立体感を出す

先程は曲がった部分の内側でしたが、今度は外側の調整をします。

4-1.明るいグラデーションをつける

まずは、リボンの長方形シェイプの一番左端から10px分を選択ツールで囲います。

リボンの長方形の左端を選択

そして描画色を白にしてから、レイヤー>新規塗りつぶしレイヤー>グラデーションを選択します。その際、描画モードと不透明度は下記の通りにします。

新規塗りつぶしレイヤーでグラデーションを作成その1

「グラデーションで塗りつぶし」画面では下記のように設定します。

グラデーションで塗りつぶし

そうすると下記のようになります。

リボンの立体感

4-2.暗いグラデーションをつける

次に、端の5pxを選択します。

リボンの立体感その2

描画色を折り曲がった先の暗い色にしてから、レイヤー>新規塗りつぶしレイヤー>グラデーションを選択します。そして「グラデーションで塗りつぶし」を下記のように設定します。

グラデーションの塗りつぶしその2

これで丸みがかかった立体感を出すことができます。

丸みがかかった立体感

4-3.逆側にも設置する

ここで作った2つのシェイプを複製し、逆側に配置します。この時に注意すべきは、2つのシェイプともにグラデーションの角度を180°に変更しておくことです。

逆側に設置

これでリボン自体の作成は完了です。ここに、文字などをのせたりしてWEBサイトのどこかにしようしてみましょう。

リボンデザイン完成

  

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Back To The Top