ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで簡単な縦型のソーシャルメディア用リボンアイコンを作成する方法

Photoshopで簡単な縦型のソーシャルメディア用リボンアイコンを作成する方法

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

このチュートリアルでは、簡単な縦型のソーシャルメディア用リボンアイコンを作成する方法を紹介します。

Step1:はじめに

新規ドキュメントを作成(Ctrl+N)します。サイズは600x400ピクセルで背景のスタイルは何でも構いません。

新規ドキュメント



Step2:リボンの形を作成する

長方形ツール(U)を選択し、小さな縦長の長方形をキャンバスの中央に描いてください。

縦長の長方形

レイヤーウィンドウのベクトルマスクサムネールを選択してください。

シェイプの周囲の黒い線でベクトルシェイプが選択していることが確認できます。

ベクトルマスクサムネール

ベクトルマスクを選択したまま、ペンツールペンツール(P)を選んで、パスのオプションを「シェイプから一部型抜」に変えてください。

シェイプから一部型抜

次に三角形のパスを描きます。
パスを閉じるとメインのシェイプからパスが型抜きされたのが分かります。

パス





Step3:スタイルを追加する

リボンのシェイプに下記のレイヤースタイルを追加してください。

ドロップシャドウ

シャドウ(内側)

境界線

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

このようになります。

適用後

次に、そのレイヤーを右クリックして「スマートオブジェクトに変換」を選びます。変換が済んだら「フィルタ」−「ノイズ」−「ノイズを加える」を選択してください。

ノイズを加える

適用後


Step4:縫い目の効果を追加する

文字ツール文字ツール(T)を選び、描画色を#2e81c6にして、キーボードのマイナスキー(-)を押し続けてください。
縫い目が長方形の縦の長さに充分と思うところまで来たら止めます。完全にぴったりである必要はありません。
行き過ぎた部分は後で簡単に切り取ることができます。
自由変形ツール(Ctrl+T)を選んで、シフトキーを押しながら線を回転させ垂直にしてください。

縫い目1

縫い目レイヤーをコピーして1ピクセル右に動かして、色を#7dc2e7に変えてください。

縫い目2

両方の線をコピーして長方形の反対側に移動します。

縫い目をコピー



Step5:ソーシャルメディア用に加工する

長方形ツール長方形ツール(T)を選んで、リボンの下の方に小さな正方形を描いてください。最初の方のステップで三角形を抽出したのと反対の要領で正方形の下に三角形を加えてください。

今回は「シェイプから一部型抜」の代わりに「シェイプ範囲に合体」を使用します。

シェイプ範囲に合体

リソースリストからソーシャルメディア用のアイコンを使って、ツィッターのアイコンを正方形に加えてください。

ツィッターのアイコンを加える

最後にリボンに何かテキスト(例えば、「フォローする」等)を加えれば出来上がりです。

テキストを加える



Step6:完成

完成です。

完成


引用:Web Design Library 著者:photoshop.plus 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

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