Photoshopでレイヤー周りのガイド引きを便利にする機能拡張 -Layer Guides

レイヤーに配置したエレメントの左・上・右・下に沿ってガイドを引きたい、天地中央・左右中央にガイドを引きたい、そんな要望に1クリックでガイドを設定できるPhotoshopの機能拡張を紹介します。

デモのキャプチャ

Layer Guides Photoshop Extension
Layer Guides -GitHub

Layer Guidesのインストール

ページの「Downloading the action」から「layer-guides-master.zip」をダウンロードします。

サイトのキャプチャ

Layer Guides Photoshop Extension

ファイルを解凍し「Layer Guides.zxp」をダブルクリックすると「Adobe Extension Manager」が起動するので、指示に従いインストールします。
Photoshopを再起動し、[ウインドウ - エクステンション]から「Layer Guides」を起動します。

Phtoshopのキャプチャ

Layer Guidesのパネル

Layer Guidesの使い方

使い方は、簡単です。
ウェブページのUIをまとめたPSDを例に使用してみます。

使用した素材
Green ECO UI (PSD)

PSDには、複数のレイヤーにさまざまなUIエレメントが揃っています。

Photoshopのキャプチャ

PSDにはガイドが設定してあるので、ここでは削除します。

Photoshopのキャプチャ

PSDのレイヤーはこんな感じ。

Photoshopのキャプチャ

左上のボタンに沿ってガイドを設定してみます。
まずは、レイヤーを選択。

Photoshopのキャプチャ

レイヤーを選択したら、Layer Guidesのパネルを起動します。

Phtoshopのキャプチャ

Layer Guidesのパネルから左のガイドボタンをクリックします。

Photoshopのキャプチャ

上にもガイドを引いてみます。

Photoshopのキャプチャ

ガイドはレイヤーに対して左・上だけでなく、右・下・天地中央・左右中央にも1クリックで簡単に設定できます。

top of page

©2017 coliss