creatersnest

Webデザインでもよく使う!境界線をPhotoshopで表現する方法


境界線を表現する場合、どのように作成していますか?
まだ学生で細かな作業を知らない頃は、1つ1つ選択範囲を塗りつぶして作っていました。
とても滅入る作業です…が、簡単な方法を知らなかっただけなんですね。
それでは簡単に境界線を表現する方法をご紹介します。

 

 

境界線を表現してみよう

まずは新規作成をします。
ファイル→新規→カンバスサイズを設定してください。

 

左のツールバーより選択ツールを選択。
この二つが選択ツールです。
001 002

 

長方形選択ツールで説明します。
長方形選択ツールを選択します。
001

 

長方形を描く時に、そのままフリーで描くと色々な形で指定できます。
004

 

 

Shiftキーを押しながら長方形を描くと、正方形指定になります。
これは楕円形選択ツールでも適応できるので、覚えておくと便利です。
005

 

選択した後、右クリックをします。
メニューが表示されますので、境界線を描く…を選択。
006

 

境界線パネルが表示されます。
007

境界線/幅:線の太さを決めます
境界線/カラー:線の色を指定します
位置:選択線のどの場所に線を描くか決めます
描写モード:モードが変更できます
不透明度:線の不透明度を決めます

 

線の種類がわかりやすいように、線の幅を20pxと太目に設定します。
位置を比べてみます。

【内側】
選択範囲の内側20px幅が出来ます
008

 

【中央】
選択範囲を真ん中に20px幅が出来ます
角が90度では無くなります
009

 

【外側】
選択範囲の外側20px幅が出来ます
角が90度では無くなります
010

 

 

描写モードを比べる

こちらの画像を使用します。
8575152601_874b5a7ea9_b
http://free-images.gatag.net/

 

線の位置は【中央】
描写色と背景色はこちらを使用します。
写真の主要イメージカラー(緑)と反対色に近い(ピンク)にします。
011

 

【通常】不透明度100%
b00

 

【通常】不透明度50%
b01

 

【ディザ合成】不透明度80%
b02

 

【比較(暗)】
無し

 

【乗算】
無し

 

【焼き込みカラー】
b03

 

【焼き込み(リニア)】
b04

 

【カラー比較(暗)】
b05

 

【比較(明)】
b06

 

【スクリーン】
b07

 

【覆い焼きカラー】
b08

 

【覆い焼き(リニア)-加算】
b09

 

【カラー比較(明)】
b10

 

【オーバーレイ】
b11

 

【ソフトライト】
b12

 

【ハードライト】
b13

 

【ビビッドライト】
b14

 

【リニアライト】
b15

 

【ピンライト】
b16

 

【ハードミックス】
b17

 

【差の絶対値】
b18

 

【除外】
b20

 

【減算】
b21

 

【除算】
b22

 

【色相】
b23

 

【彩度】
b24

 

【カラー】
b25

 

【輝度】
b26

 

 

 

まとめ

境界線を表現する方法の基本は以上の内容です。
そのまま実線として使用したり、描写モードを利用して表現の一部となります。
描写色と背景色も反映しますので、そちらのカラーも気をつけてください。
「線を描くだけ」と考えたらとても簡単な事ですが、思ったよりも表現があるとわかりましたね。この手法を色々と試してください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


shirodomi

ライター初心者

Next ArticleSublimeText 3をより快適に使うための設定方法