「上端揃え」+「水平方向中央揃え」といった形で2つの整列の組み合わせをすることが多いと思います。厳密に言えば最初に「カンバス全体に選択範囲を作成」して「移動ツール」に持ち替えてといったフローも必要です。今回配布するエクステンションを使えば↓のように1クリックでレイヤーを移動することができます。・カンバスを基準にする場合はそのまま「移動」エクステンションのボタンをクリック。・選択範囲を基準にする場合は選択範囲を作成して「移動」エクステンションのボタンをクリック。・数値を指定してオブジェクトを移動したい場合は右側の「水平移動」または「垂直移動」をクリックします。するとダイアログが表示されるので移動する数値を入力して移動をクリック。「移動」のインストール方法について「移動」エクステンションをダウンロードDOWNLOADダウンロードしたzipファイルを解凍します。解凍されたフォルダ「Move」を下記ディレクトリに移動します。Support/Adobe/CEP/extensionsライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。Photoshopを再起動します。メニュー[ウインドウ]/[エクステンション]/[移動]を選択します。以上で「移動」パネルが表示されて利用できる状態になります。Photshopセッションにて鷹野雅弘(スイッチ)さんと登壇させていただきました。ご来場いただいた方はありがとうございました!私のパートでお話させていただいたエクステンションなどのURLをお知らせします。Editionとして作成したので配布させていただきます。ファイルと同じサブフォルダーに保存されるようになりました。2018にアップデートしたら使用できなくなってしまいました。Renamer」というエクステンションを作成したので配布させていただきます。Renamer」をダウンロードDOWNLOADダウンロードしたzipファイルを解凍します。解凍されたフォルダ「AssetRenamer」を下記ディレクトリに移動します。Support/Adobe/CEP/extensionsライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。Photoshopを再起動します。Renamer]を選択します。Renamer」パネルが表示されて利用できる状態になります。Renamer」の使用方法についてリネームしたいレイヤーまたはレイヤーグループを選択(複数可)して生成したい画像種類のボタンをクリック。下部の項目はjpg形式で書き出す際に使用。(50,80,100は画質)2017.07.10選択範囲をシェイプに変換するスクリプト選択範囲をシェイプに変換するスクリプトを作成しました。更新:2017.7.10シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。「単位:px」でご利用ください。ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。[スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択すると選択範囲がシェイプに変換されます。私はこのスクリプトにショートカット(command+U)を設定しています。ファイルメニュー[選択範囲]/[選択範囲を変形]にも(command+Shift+T)を設定することによりさらに作業の効率化がはかれます。2016.05.24縦長Webページをデザインする際に役立つPhotoshopの小技3つ近年スマートフォンの普及によりシングルページの案件が増えて縦長のWebページをデザインすることが多くなりました。カンバスサイズの高さが5,000pxを超えることも多々あります。なると作業をする上で余計に手間がかかってしまうことがあります。それを少しでも解消できる小技を今回紹介させていただきます。通常はPhotoshopで「埋め込みを配置」や「リンクを配置」をすると表示領域の中心に配置されます。狙ったところに配置したい場合があります。いうときはカンバス上の配置したい位置に選択範囲を作成して「埋め込みを配置」や「リンクを配置」をすると選択範囲の中心に画像を配置することができます。2.快適に表示位置を変更する縦長のWebページをデザインしているときページ上部から下部に表示を移動したい場合、拡大縮小やスクロールをするなど手間がかかります。そんな時は「H」キーをクリックしたままカンバス上をドラッグしてみてください。快適に表示を移動することができます。3.レイヤーを任意の場所に瞬間移動パーツを複製して使い回すことがあると思います。複製元のパーツがページの上部にあり使用したい位置がページ下部だとしたら移動に手間がかかります。そのようなときは複製したパーツをレイヤーパネルで選択した状態で、カンバス上の移動したい位置に選択範囲を作成して[レイヤーメニュー]/[レイヤーを選択範囲に整列]/[垂直方向中央]を選択して移動します。した小技を積み重ねることによって大きく作業効率をあげることにつながります。今後も小技を探求していきたいと思います。繰り返し利用するようなグラフィックはスマートオブジェクトで共通化しましょう!制作物の中で繰り返し使うような同一デザインのパーツはスマートオブジェクトを利用して共通化させましょう。スマートオブジェクトの特徴を解説します。元の画像データを保持したまま加工レイヤーやレイヤーグループ、画像、Illustratorなどで作成したベクトル画像などをスマートオブジェクトとして扱うことによって元データを保持したまま様々な加工ができます。いわゆる非破壊編集が可能になります。1つのソースを編集すれば複製したすべてに変更が自動反映されるスマートオブジェクトを複製する際、元のソースコンテンツファイルとのリンクを維持することによってひとつのスマートオブジェクトを編集することによって複製されたすべてのスマートオブジェクトに変更が反映されます。今回のテーマである「共通化」はこの特徴を利用します。他にも通常のレイヤーを複製する方法でスマートオブジェクトを複製すればリンク関係を保持した形で複製ができます。この方法で複製されたスマートオブジェクトは独立したコンテンツとなり編集を加えても他のスマートオブジェクトに影響を与えません。かなりの効率化がはかれます。変数機能の活用術「Web編」TipsをみるレスポンシブWebデザインのカンプ制作アートボード機能を使って複数デバイスのカンプ制作を1つのドキュメントで行う際はスマートオブジェクトを活用しましょう。サンプルデータ(10MB)はこちらからDOWNLOAD広告展開イメージにもスマートオブジェクトを活用スマートオブジェクトの共通化と変形しても元データを保持する特徴を活用した事例です。2014からスマートオブジェクトを外部ファイル化できるようになりました。共有モジュールなどを外部ファイル化して別ファイルと共有することができるようになりました。修正があっても外部ファイルを変更すればリンクしているすべてに変更が反映されるのでとても便利です。レイヤー(レイヤーグループ)、スマートオブジェクトを一発で外部リンクファイル化するスクリプトを下記ページにて公開しています。■ぶっこ抜いてリンクスクリプト外部ファイルをリンク配置(スマートオブジェクト)容量の大きいデータを読み込んでもリンク配置で参照するだけなのでPSDファイルを軽いままに保つことができます。アセット」のライブラリにグラフィックを追加、リンクすることが可能になりました。スマートオブジェクトを外部ファイル化するたびに保存先を指定する手間がなくなります。何よりもローカルで管理するファイルが1つですむのでスマートに作業を進めることができます。ストレージ容量が20GB(個人版)と限られているのとずっとサービスが続くという保証もないので、あくまで作業中の利用にとどめて完成したらパッケージ機能でデータはひとまとめにして保存しておく運用方法がいいかなと思います。2014以前で開くとリンクエラーになってしまうので注意が必要です。(リンクエラーのスマートオブジェクトの編集はできなくなりますがドキュメント自体は開いて編集することが可能です。其の一として非破壊について実例を踏まえながらテクニックを紹介いたします。続きを読む2015.06.10作業効率化のための三箇条Photoshopでの作業を進める上で効率化を図るために常に意識していることが3つあります。