アクアリウムハジメマシタ!!

いまさらながらPhotoshopで枠線を描く方法

photoshopで枠線を描く方法

Photoshopで枠線を描く方法はいろいろあります。CCになってからは「長方形ツール」が出てきてとても楽にできるようになりました。遠い昔にはIllustratorから成形した長方形コピペしないと任意の色と形作るの大変でしたから。

それでは、基本的に長方形の枠線で、個人的に簡単に枠線が作ることができると思う順に紹介します。

 

まず枠の形を作るところから

今回は一番使う長方形で説明します。長方形の作り方は主に以下の3つです。他にもありますが、この方法が手軽にできると考えます。

photoshopで枠線を描く方法

長方形ツール

このツールは長方形以外にも角丸長方形や円形、多角形も作成できますが、ここでは長方形の属性の設定を紹介します。

このツールを選択し、画面内に四角を描きます。表面上は変わりませんが上部メニューの「ウィンドウ」から「属性」を表示、または右側のメニューの中に「属性」が出ていればそちらから設定します。

photoshopの枠線の書き方

赤枠内の部分で枠内や枠線の色太さ枠の種類が選択できます。下段の真ん中の「線の先端の形」の設定は、長方形ではこの先端がないので、ここではあまり関係ありません。

印刷用の画像、web用の画像を作る時に上図の赤枠内下段左の「線の整列タイプの設定」と言われる枠線の位置の設定に注意が必要です。

枠線の位置の設定をします。

Photoshopで枠線を描く方法

上図のように線の幅の配置の設定を決めます。

この配置はweb用の画像を作る時にきれいに見えるかが変わってきたりします。印刷用であればそこまで気にならないですが、web用で作成するものはピクセル単位で設定していきます。最小値が1ピクセルになりますが、幅の配置を中心にした時に、描画される線幅は内外で0.5ピクセルずつとなり、web画像にした時ぼやけた線になる可能性が高いです。

2ピクセル以上の偶数数字にすればいいですが、イメージ画像の枠に使う1ピクセルの細い線幅ではぼかしたような線幅になりシャープな描画にはならないと思います。すべての線を2ピクセル以上にというのはデザイン上では使いたくないですよね。

●内側

細い線幅の枠を設定するweb用画像を作る時はこの設定にしておくと問題が少ないです。画像枠(Photoshopのカンパスサイズ)いっぱいの枠線を設定する時は内側で設定しましょう。

●中心

印刷用画像を作成するなら中心か上記の内側だと思います。web用画像は上記で説明しましたが、この設定で作成しない方がいいと思います。72pxの解像度の画面上で1ピクセルの線を作って配置すると、ピクセルのライン上にしか設置されないので内外に配置された0.5ピクセルが最小値に満たないためボケた線になってしまうのです。

●外側

web用画像を作るのはこの設定でも問題ないと思います。が、画像枠(Photoshopのカンパスサイズ)いっぱいの枠線を設定する時に気をつけないと枠からはみ出て完成品に線がでないと失敗につながります。

設定は「シェイプ」で設定します。

属性の設定はPhotoshop枠の上部のところでも設定できます。「長方形ツール」の設定は「シェイプ」に切り替えてください。

Photoshopで枠線を描く方法

ペンツール

ペンツールは昔からあるツールで任意で枠を作る時に使います。切り抜きのためのパスやトレースなどで主に使用していたのですが、長方形や円など成形されたものはズレや歪んでしまい私は苦手です。

ペンツールで作成されたパスは上記の「シェイプ」か「パス」かの選択肢を切り替えれば、「長方形ツール」と「長方形選択ツール」両方の要素を兼ねますので設定の仕方はどちらかと同じで大丈夫です。

最初から「シェイプ」を選択したら「長方形ツール」の設定と同じです。

Photoshopで枠線を描く方法

上図のように「パス」を選択すると3種類のものを作成する選択ができます。

枠の設定自体は「シェイプ」や「長方形選択ツール」の方法と同じです。

●選択

「長方形選択ツール」と同じ枠を作成します。

●マスク

レイヤーマスクを作成します。

●シェイプ

シェイプは前述の「シェイプ」と同じです。

描いてから、3種選択できるなら便利です。パス自体は「パスの保存」をしておけば何度でもやり直せます。

余談ですが、Illustlatorからベクター形式のデータをパスとしてコピペすれば、長方形やイラスト、テキストのアウトラインなどのいろんな加工もしやすいです。

長方形選択ツール

主に切り抜きをする時やマスクをかける時に使用するツールになりますが、作成した選択枠(破線で囲われたところ)で枠線を描いたり枠内に色をつけたりすることができます。

長方形選択ツールには長方形以外に円などもあります。

選択ツールでの枠線の作り方は、まずツールで長方形を作ると破線で囲いができます。

Photoshopで枠線を描く方法

枠を作ったら、モニター上部にあるPhotoshopのメニューにある「編集」から「境界線を描く」を選択します。

Photoshopで枠線を描く方法

「境界線を描く」の設定パネルがでます。

線幅、色、線幅の位置など設定できます。

この設定で作られる線のデメリットは設定後はピクセル画像になってしまうため、枠の天地左右の大きさを変えると線幅が伸びたり、縮んだりしてしまうことです。なので後々サイズが変更されるものには向いていないと思います。

「編集」の「塗りつぶし」での設定

この方法は「シェイプ」が使えれば使う必要性はないと思います。が、一応「塗りつぶし」は文字通り選択ツールの枠内で色をつけるので枠とは言えませんが、レイヤースタイルで「境界線」の設定ができます。選択ツールで塗りつぶしを作ったレイヤーをダブルクリックして「レイヤースタイル」の設定を表示させます。

Photoshopで枠線を描く方法

色やサイズ(線幅)など設定できます。

境界線の設定ができたら塗りつぶしたピクセルデータに枠がつきます。

Photoshopで枠線を描く方法

塗りつぶしをしたわけですが、レイヤーパネルの上部にある「塗り」のところの%を0%にすることで枠のみ残すことができます。

レイヤースタイルの境界線で枠線を作った時のデメリットは太い枠の時の角部分の外側が角丸になってしまうことでしょうか。細い1ピクセル程度の太さなら気になりませんがカチッとした枠にしたい時に困ります。

以上、Photoshopで枠線を描く方法でした。

他にもありましたらまた書きます。