ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopできれいな区切り線を作る方法

Photoshopできれいな区切り線を作る方法

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

このチュートリアルでは、きれいな区切り線を作る方法を紹介します。

区切りとは、空間をたてや横に切り分ける線や空白のことです。
これは、レイアウトやメニューやツールバーを作成するときによく使われます。
いろいろな種類がありますが、どれも、ある情報を別の情報と切り離す役割を担っている点では同じです。

Step1:はじめに

Photoshopを開き、新しいファイルを作ります。
大きさは500x300とし、背景の色は#6e6c6cとします。

新規作成



Step2:長方形を描き、複製する

まずは長方形ツール長方形ツールを選択し、下のように#4b4a4aの色で長方形を描きます。

長方形を描く

長方形のレイヤーを複製し、下のように二つ目の長方形レイヤーを配置します。

長方形を複製





Step3:レイヤースタイルを適用する

次に、一つ目の長方形レイヤーにレイヤースタイルを適用します。

レイヤースタイルを適用

レイヤースタイルを適用

これらのレイヤースタイルを適用すると、一つ目の長方形には次のような効果が反映されます。

レイヤースタイル適用効果



Step4:複製にレイヤースタイルを適用する

次に、二つ目の長方形レイヤーに、レイヤースタイルを適用します。

複製にレイヤースタイルを適用

複製にレイヤースタイルを適用

これらのレイヤースタイルを適用すると、二つ目の長方形には次のような効果が反映されます。

レイヤースタイル適用効果



Step5:レイヤーを統合する

これら2つのレイヤーを統合します。
長方形ツール長方形選択ツールを使って、次のように長方形を描きます。

レイヤースタイルを結合

次に、選択範囲を反転させます。
Ctrl + Shift + Iで反転されます。

選択範囲を反転



Step6:ぼかしを適用する

ぼかしを適用します。

ぼかしを適用

ぼかしを選択すると、設定画面が開くので、半径を20pxと設定します。

半径を設定

角丸長方形でぼかしの半径を設定したらOKボタンをクリックします。

設定効果



Step7:完成

最後にDeleteキーを二回押してチュートリアルは終了です。
下の最終形のような美しい区切り線の出来上がりです。

完成

とてもシンプルで優しいテクニックのみを使っています。
このチュートリアルが気に入ってもらえたらうれしいです。

引用:Web Design Library 著者:tutorialchip.com 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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