作業効率化

Photoshopでの整列を超絶スピーディにする「移動」 エクステンションを作ったよ(無料) | Dearps

ogp

Photoshopでレイヤーを選択範囲を基準に移動したい場合、例えばこんな感じで↓

1
「上端揃え」+「水平方向中央揃え」といった形で2つの整列の組み合わせをすることが多いと思います。更に厳密に言えば最初に「カンバス全体に選択範囲を作成」して「移動ツール」に持ち替えてといったフローも必要です。

しかし今回配布するエクステンションを使えば↓のように1クリックでレイヤーを移動することができます。

2

・カンバスを基準にする場合はそのまま「移動」エクステンションのボタンをクリック。

・選択範囲を基準にする場合は選択範囲を作成して「移動」エクステンションのボタンをクリック。

・数値を指定してオブジェクトを移動したい場合は右側の「水平移動」または「垂直移動」をクリックします。するとダイアログが表示されるので移動する数値を入力して移動をクリック。

3

「移動」のインストール方法について

「移動」エクステンションをダウンロード

DOWNLOAD

ダウンロードしたzipファイルを解凍します。

解凍されたフォルダ「Move」を下記ディレクトリに移動します。

【Mac OS】 Library/Application Support/Adobe/CEP/extensions

ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

Photoshopを再起動します。

メニュー[ウインドウ]/[エクステンション]/[移動]を選択します。
以上で「移動」パネルが表示されて利用できる状態になります。

Adobe MAX Japan フォローアップ

photo

「Adobe MAX Japan」— 2017年11月28日(火)パシフィコ横浜
ベテランほど知らずに損してるPhotoshop[MAX Special]

Adobe MAX Japan Photshopセッションにて鷹野雅弘(スイッチ)さんと登壇させていただきました。ご来場いただいた方はありがとうございました!
私のパートでお話させていただいたエクステンションなどのURLをお知らせします。
またセッション中に使用したWebサイトのサンプルデータとセッションで紹介したBootcomp3の重要機能だけに絞ったコンパクト版をMAX Editionとして作成したので配布させていただきます。
ぜひご利用ください!
max

「フォローアップデータ」をダウンロード

DOWNLOAD

画像アセット用リネーム エクステンション「Asset Renamer」
http://dearps.lovwar.com/2017/11/03/asset-renamer/
Bootcomp3.0
http://dearps.lovwar.com/bootcomp/

Creative Cloud ライブラリとは?
https://helpx.adobe.com/jp/creative-cloud/how-to/creative-cloud-libraries.html

Adobe Stock
https://stock.adobe.com/jp/

画像アセット用リネーム エクステンション「Asset Renamer」 CC 2018対応

mv

Photoshop CCからレイヤーまたはレイヤーグループの名前にファイル形式の拡張子(.jpg/.png/.gif)を追加することで自動で画像アセットが生成され、ソースの PSD ファイルと同じサブフォルダーに保存されるようになりました。

このリネームの作業を効率化させるために今までAdobeが公式に提供している「Adobe Layer Namer」を使用していたのですがPhotoshop CC 2018にアップデートしたら使用できなくなってしまいました。

なので急遽「Asset Renamer」というエクステンションを作成したので配布させていただきます。

「Asset Renamer」のインストール方法について

「Asset Renamer」をダウンロード

DOWNLOAD

ダウンロードしたzipファイルを解凍します。

解凍されたフォルダ「AssetRenamer」を下記ディレクトリに移動します。

【Mac OS】 Library/Application Support/Adobe/CEP/extensions

ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

Photoshopを再起動します。

メニュー[ウインドウ]/[エクステンション]/[Asset Renamer]を選択します。
以上で「Asset Renamer」パネルが表示されて利用できる状態になります。

「Asset Renamer」の使用方法について

リネームしたいレイヤーまたはレイヤーグループを選択(複数可)して生成したい画像種類のボタンをクリック。

02

(1)1xで書き出す(8,24,32はPNG形式)

(2)1xと2xで書き出す

(3)2xでデザインデータを作成している場合に使用

下部の項目はjpg形式で書き出す際に使用。(50,80,100は画質)

選択範囲をシェイプに変換するスクリプト

選択範囲をシェイプに変換するスクリプトを作成しました。

更新:2017.7.10
シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。
「単位:px」でご利用ください。

スクリプトの利用手順について

選択範囲をシェイプに変換スクリプトをダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。

(3) [ファイル] / [スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択すると選択範囲がシェイプに変換されます。

私はこのスクリプトにショートカット(command+U)を設定しています。
またファイルメニュー[選択範囲]/[選択範囲を変形]にも(command+Shift+T)を設定することによりさらに作業の効率化がはかれます。

縦長Webページをデザインする際に役立つPhotoshopの小技3つ

近年スマートフォンの普及によりシングルページの案件が増えて縦長のWebページをデザインすることが多くなりました。カンバスサイズの高さが5,000pxを超えることも多々あります。そうなると作業をする上で余計に手間がかかってしまうことがあります。それを少しでも解消できる小技を今回紹介させていただきます。

1.画像配置の位置指定

通常はPhotoshopで「埋め込みを配置」や「リンクを配置」をすると表示領域の中心に配置されます。

しかし狙ったところに配置したい場合があります。そういうときはカンバス上の配置したい位置に選択範囲を作成して「埋め込みを配置」や「リンクを配置」をすると選択範囲の中心に画像を配置することができます。

2.快適に表示位置を変更する

縦長のWebページをデザインしているときページ上部から下部に表示を移動したい場合、拡大縮小やスクロールをするなど手間がかかります。そんな時は「H」キーをクリックしたままカンバス上をドラッグしてみてください。快適に表示を移動することができます。

3.レイヤーを任意の場所に瞬間移動

パーツを複製して使い回すことがあると思います。複製元のパーツがページの上部にあり使用したい位置がページ下部だとしたら移動に手間がかかります。そのようなときは複製したパーツをレイヤーパネルで選択した状態で、カンバス上の移動したい位置に選択範囲を作成して[レイヤーメニュー]/[レイヤーを選択範囲に整列]/[垂直方向中央]を選択して移動します。

ちょっとした小技を積み重ねることによって大きく作業効率をあげることにつながります。今後も小技を探求していきたいと思います。

スマートオブジェクトで「共通化」

繰り返し利用するようなグラフィックはスマートオブジェクトで共通化しましょう!

制作物の中で繰り返し使うような同一デザインのパーツはスマートオブジェクトを利用して共通化させましょう。 まずはスマートオブジェクトの特徴を解説します。

スマートオブジェクトの特徴

元の画像データを保持したまま加工

レイヤーやレイヤーグループ、画像、Illustratorなどで作成したベクトル画像などをスマートオブジェクトとして扱うことによって元データを保持したまま様々な加工ができます。いわゆる非破壊編集が可能になります。

1つのソースを編集すれば複製したすべてに変更が自動反映される

スマートオブジェクトを複製する際、元のソースコンテンツファイルとのリンクを維持することによってひとつのスマートオブジェクトを編集することによって複製されたすべてのスマートオブジェクトに変更が反映されます。 今回のテーマである「共通化」はこの特徴を利用します。

リンク関係を保持してスマートオブジェクトを複製する方法

[レイヤーメニュー] / [レイヤーを複製] を選択します。

他にも通常のレイヤーを複製する方法でスマートオブジェクトを複製すればリンク関係を保持した形で複製ができます。(altキーを押しながらドラッグして複製など)

リンク関係を解除してスマートオブジェクトを複製する方法

[レイヤーメニュー] / [スマートオブジェクト] /[スマートオブジェクトを複製] を選択します。

この方法で複製されたスマートオブジェクトは独立したコンテンツとなり編集を加えても他のスマートオブジェクトに影響を与えません。

スマートオブジェクトを効果的に使った事例

複数サイズのWebバナー制作

複数サイズのWebバナー制作をする場合、スマートオブジェクトと変数機能を活用することによって かなりの効率化がはかれます。

変数機能の活用術「Web編」

Tipsをみる


レスポンシブWebデザインのカンプ制作

アートボード機能を使って複数デバイスのカンプ制作を1つのドキュメントで行う際はスマートオブジェクトを活用しましょう。

サンプルデータ(10MB)はこちらから

DOWNLOAD


広告展開イメージにもスマートオブジェクトを活用

スマートオブジェクトの共通化と変形しても元データを保持する特徴を活用した事例です。

サンプルデータ(2.1MB)はこちらから

DOWNLOAD


スマートオブジェクトの外部ファイル化

Photoshop CC 2014からスマートオブジェクトを外部ファイル化できるようになりました。。

スマートオブジェクトをリンクされた外部ファイルに変換

共有モジュールなどを外部ファイル化して別ファイルと共有することができるようになりました。修正があっても外部ファイルを変更すればリンクしているすべてに変更が反映されるのでとても便利です。

レイヤー(レイヤーグループ)、スマートオブジェクトを一発で外部リンクファイル化するスクリプトを下記ページにて公開しています。
ぶっこ抜いてリンクスクリプト


外部ファイルをリンク配置(スマートオブジェクト)

容量の大きいデータを読み込んでもリンク配置で参照するだけなのでPSDファイルを軽いままに保つことができます。


Photoshop CC 2015ではさらに進化!
ネットワーク経由でリンク配置が可能に(Creative Cloud Libraries)

Photoshop CC 2015で追加された「ライブラリ」パネルにスマートオブジェクトをドラックするだけで「Creative Cloud アセット」のライブラリにグラフィックを追加、リンクすることが可能になりました。

スマートオブジェクトを外部ファイル化するたびに保存先を指定する手間がなくなります。何よりもローカルで管理するファイルが1つですむのでスマートに作業を進めることができます。

しかしストレージ容量が20GB(個人版)と限られているのとずっとサービスが続くという保証もないので、あくまで作業中の利用にとどめて完成したらパッケージ機能でデータはひとまとめにして保存しておく運用方法がいいかなと思います。

CC 2014以前で開くとリンクエラーになってしまうので注意が必要です。(リンクエラーのスマートオブジェクトの編集はできなくなりますがドキュメント自体は開いて編集することが可能です。)


作業効率化のための三箇条

Photoshopでの作業を進める上で効率化を図るために常に意識していることが3つあります。

上の画像にあるように非破壊、自動化、共通化です。

続きを読む