作業効率化

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

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

1.画像配置の位置指定

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

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

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

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

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

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

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

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

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

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

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

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)を設定することによりさらに作業の効率化がはかれます。

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

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

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

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

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

レイヤーやレイヤーグループ、画像、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つあります。

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

続きを読む