スライス作成スクリプト

Photoshopでスライスを作成するには[スライスツール]もしくは[レイヤーに基づく新規スライス]で作成する方法の2種類があります。

しかしそれぞれ不満がありました。

・[レイヤーに基づく新規スライス]はレイヤーグループに対してはNG

・スライスに名前を付け忘れる。
(書き出した画像をみて‘ユーザー_01.jpg’とかになっていてはじめて気がつく…)

・スライス名を確認するのにスライスオプションダイアログを開く必要があるので面倒

・スライスをレイヤーとして管理できない

等など…

特に[レイヤーに基づく新規スライス]はレイヤーグループに対してはNGが致命的ですね。

Photoshopってバージョンアップするごとに素晴らしい機能が追加されているのに、「スライス」に関してはけっこうノータッチなんですよね。

CCから機能追加された「画像アセット機能」を使えってことなんだろうけどいまいち馴染めない…そんな方も多いのではないでしょうか。

私が「画像アセット機能」を使わない理由はこんな感じです。

・作業を共有する場合相手がCC以上じゃないといけない
・タグの付け漏れがぱっと見で分からない
・画質をタグで設定できるけどこれはやっぱりWeb用に保存のダイアログでプレビューを見ながら最適な画質を設定するべき
・画像アセットの「@2x」機能がスマートオブジェクトに対応していない
(こちらの記事で触れていますRetina対応用画像の作成について@2x)

そこで今回はスライスに関する不満を解消させるスクリプトを作成したのでご紹介させていただきます。

まずはじめに下記リンク先よりスライス作成スクリプトをダウンロードしてください。

↓slicescript.zip ダウンロード↓

slicescript.zipを解凍すると「選択範囲からスライスを作成x.jsx」と「レイヤーからスライスを作成x.jsx」の2つのスクリプトファイルができます。

2つのスクリプトの使用方法は下記のとおりです。

【レイヤーからスライスを作成x.jsxの使用方法】

①レイヤーパネルでスライスを作成したいレイヤー(レイヤーグループ)を選択します。

②[ファイル]メニューの[スクリプト]から[参照]を選択し、先ほどダウンロードした「レイヤーからスライスを作成.jsx」を実行します。

③[スライス作成]ダイアログが表示されるのでスライス名を入力し、[確定]ボタンをクリックします。

④[レイヤー]パネルに「Webレイヤー」が作成され、その中に、[スライス作成]ダイアログボックスで設定したスライスのレイヤーが作成されます。

【選択範囲からスライスを作成x.jsx】

①[ファイル]メニューの[スクリプト]から[参照]を選択し「選択範囲からスライスを作成x.jsx」を実行します。

②選択範囲のバウンディングボックス が表示されるのでそれをスライス対象のサイズに変形させて確定(◯ボタンをクリック)します。

③[スライス作成]ダイアログが表示されるのでスライス名を入力し、[確定]ボタンをクリックします。

④[レイヤー]パネルに「Webレイヤー」が作成され、その中に、[スライス作成]ダイアログボックスで設定したスライスのレイヤーが作成されます。

※[選択ツール]で選択範囲を作成した状態でスクリプトを実行してそのまま選択範囲をスライス領域にすることもできます。

「Webレイヤー」は通常非表示になっていますがこれを表示することによってスライスを可視化できるのでプリントアウトをするなど指示書としても活用できます。

[注意]
このスクリプトは[スライスツール]、[レイヤーに基づく新規スライス]との併用はできません。

各スクリプトは下記のような役割をイメージしていただくとわかりやすいと思います。
[スライスツール] →「選択範囲からスライスを作成x.jsx」
[レイヤーに基づく新規スライス] →「レイヤーからスライスを作成x.jsx」

実際にこのスクリプトを使用している動画です。

最後に宣伝させてください!

この度共著でPhotoshopの本を執筆させていただきました。2015年3月13日にソシム社より発売になります。今回紹介したようなWebデザインに役立つスクリプトやTipsを多数紹介させて頂いています。下記バナーがamazonへのリンクとなっております。

ご興味がある方は是非御覧ください!

Webデザインの現場ですぐに役立つ Photoshop仕事術

ブラウザフレームのPSDを利用して簡単にファーストビューを確認するテクニック

今回はブラウザフレームのPSDを利用して簡単にファーストビューを確認するテクニックを紹介します。
(Photoshop CC 2014以降で利用できるテクニックです)
まずはじめに以下リンク先よりブラウザフレームのPSDファイルをダウンロードして下さい。
browser.psdのダウンロードは以下から。

①ファーストビューを確認したいWebサイトのデザインカンプを開きます。

②[ファイル] / [リンクを配置]を選択し先ほどダウンロードした「browser.psd」を配置します。

③配置する際、ドキュメントサイズに合わせて縮小されている可能性があるのでオプションバーを確認し、幅(W)と高さ(H)が100%になっていない場合は100%に変更します。

④配置された「browser.psd」は中心に配置された状態なのでドキュメントの上端に揃えます。選択範囲でドキュメント全体を選択しオプションバーから「上端揃え」をクリックします。

⑤[ウインドウ] / [属性]を選択し属性パネルを表示します。

⑥「browser.psd」は画面解像度ごとにレイヤーカンプを設定しているので属性パネルのプルダウンで切り替える事が出来ます。

⑦属性パネルのプルダウンから確認したい画面解像度を選択します。

⑧デザインカンプにブラウザフレームが表示されました。(IE11のブラウザフレームです)

ご活用いただけると幸いです。

【Illustratorネタ】変数を利用して大量のバリエーションを作成する

今回はPhotoshopではなくIllustratorネタを紹介します。

昨年末、私は某アイドルグループのグッズ制作に追われていました。短期で入稿データを数100種作成しなければいけない…。。。
最近のアイドルグループは1グループ100名近くいるのもざらでコンサートごとに全員分、ハンドタオルやらキーホルダー等のグッズを制作するんですね。それをちまちまオペ作業で対応するのにはとてつもない手間も時間もかかってしまうのでPhotoshopの様に変数を利用してデータの流し込みでガンガン入稿データを作成できないかと悩みました。

Photoshopの変数とは少し勝手が違うので少し工夫が必要でしたが超絶楽にデータを作成する方法を考えついたので紹介します。
我が家のアイドル(^^)をサンプルに一連の作業の流れを掲載します!

①ベースとなるアイテムをデザインします。今回変更したい部分は「テキストレイヤー」と「リンク画像」です。

②[ウインドウ] / [変数]を選択し変数パネルを表示します。

③変数を設定する「テキストレイヤー」1を選択した状態で「変数パネル」2のボタンをクリックします。次に3の変数名を適宜変更します。

④つぎに変数を設定する「リンク画像」1を選択した状態で「変数パネル」2のボタンをクリックします。次に3の変数名を適宜変更します。

⑤「変数パネル」の「データセットをキャプチャ」1のボタンをクリックします。 つぎにサブメニュー2から「変数ライブラリを保存」をクリックし、任意の場所にXMLファイルを保存します。

⑥前のステップで保存したXMLファイルを「Dreamweaver」等のエディタで開きます。赤枠のコードを複製し、黄色い網掛け部分を変更してバリエーションを作成します。このままコードを書いていってもいいのですが更に楽できるように次のステップでエクセルを利用したデータ作成方法を紹介します。

※リンク画像はローカルパスで指定します。aiファイルと同じディレクトリに置くことを推奨します。

⑦エクセルで下記画像のように変更する値の部分(⑥の画像の黄色い網掛け部分)と前後のソースコードをセルごとに分けて入力します。

⑧ ⑦で入力したデータを作成するバリエーションの数だけ複製し適宜情報を入力します。

⑨ ⑧で入力したデータをコピーして「Dreamweaver」に戻り青い網掛け部分にコードをペーストしてXMLファイルを任意の場所に保存します。

※原因不明ですが自分の場合ペーストした際に無駄なスペースができてしまったのですがもし無駄なスペースが出来てしまっていたら削除します。

※追記 2015.2.19 画像のファイルパスですがフォルダ名などに日本語を使用している場合バグが出るのでご注意下さい。エラーなどが出た場合はファイルパスを文字化けなどしていないか確認して下さい。

⑩「変数パネル」のサブメニューから「変数ライブラリの読み込み」を選択して⑨で作成したXMLファイルを読み込みます。

⑪これで大量のバリエーションが作成されました。「変数パネル」の「データセット」プルダウンメニューを切り替えてバリエーションを確認して下さい。必要に応じてレイアウトを調整して完成です。

このテクニックは様々なシーンで応用が効くと思うのでご活用いただけると幸いです!

Webデザイン超効率化(バナー制作編)


※フルスクリーンでご覧下さい。

今回は“Webデザイン超効率化 第3弾”として、変数を利用したWebバナー制作を楽にするテクニックを紹介します。

取引企業の中で毎月キャンペーンを実施している会社があるのですが、
都度バナーをサイズ違いで10種類近く作らなければなりませんでした。普通にやっていては結構な手間だったので効率化を図る為に今回の変数を利用した方法を考えました。

【まずは下準備】

①新規ファイルを作成。[幅600px、高600px 72dpi]
シェイプツールでキャンバスサイズいっぱいに(適当でOK)に矩形を作成し“background”と名前をつけます。(後にバナーの背景になります)

②“background”レイヤーをスマートオブジェクト化して、
一旦“background”レイヤーは縮小して右下に移動させておきます。

③また①〜②と同じ行程でスマートオブジェクトを作成し“graphic”と名前をつけます。(後にバナーに入るオブジェクトになります)

【基本となるバナーを作成します】

④任意のサイズのレイヤーボックスを作成します。

⑤次にバナーに入れる情報のテキストレイヤーを作成します。(変数の箱になります)
今回の例では
・サービス名
・テキストL
・テキストM
・テキストS
・コピーライト
としました。

⑤次に変数を定義していきます。
メニューからイメージ/変数/定義 を選択します。
ダイアログが出てくるのでレイヤーのプルダウンで先ほど入力したテキストレイヤーを選択します。
次にテキストの置き換えチェックボックスにチェックを入れてレイヤー名と同じ名前を入力します。
上記作業をテキストレイヤーすべてに定義していきます。

⑥完了したら他のサイズのバナーも①〜⑤の作業を繰り返し行い、作成します。

⑦先ほど②でスマートオブジェクト化した“background”レイヤーを複製して各レイヤーボックスに移動し、レイヤーボックスのサイズいっぱいになるように拡大します。

⑧同じように③で作成した“graphic”レイヤーも複製して各レイヤーボックスに移動し、こちらは任意のサイズで配置します。
以上でベースとなるPSDの完成です。

⑨以上でベースとなるPSDの完成です。

【値を入力するCSVをエクセルで作成】

⑩次は値を入力する為のcsvをエクセルで作成していきます。
1行目に変数を定義したテキストレイヤー名を入力します。
2行目に値を入力します。今回は例としてピザ屋さんを想定して入力しました。
ファイルをPSDと同じ階層にcsvで保存します。
※保存後CSVファイルは必ず閉じて下さい。

⑪Photoshopに戻りCSVを読み込みます。
メニューからイメージ/変数/データセット を選択します。
ダイアログが出てくるので読み込みボタンを押下して
先ほど作成したcsvファイルを選択してOKボタンを押下。
適用ボタンを押下してOKボタンを押下。

⑫これですべてのテキストレイヤーに値が入りました。

【デザインをする】

⑬“background”レイヤーをダブルクリックしてスマートオブジェクトを展開します。
素材を配置して上書き保存。保存が終わったら閉じて下さい。

⑭これで背景が完成です。すべてのバナーの背景に反映されました。

⑮次にオブジェクトをのせていきたいと思います。
“graphic”レイヤーをダブルクリックしてスマートオブジェクトを展開します。
素材を配置して上書き保存。今回はピザを配置しました。
保存が終わったら閉じて下さい。

⑯すべてのバナーにピザが配置されました。

⑰次にテキストを装飾していきます。
レイヤーの絞り込み機能で装飾したいレイヤーを名前で絞り込みます。
例では“新登場!!”レイヤーを絞り込みました。

⑱一つのレイヤーをレイヤー効果で装飾します。完成したらそのレイヤースタイルをコピーして他のレイヤーすべてにペーストして反映します。

⑲あとは他のテキストも同様に装飾していき、レイアウトを調整して完成です。

今回紹介したテクニックは特にルーチンワークに効果的です。
一度作ったデータはフォーマットとして別の案件に流用可能です。
バナーに限らずさまざまな場面で役に立つテクニックだと思うので
ぜひ皆様の業務にあった応用法を考案してご活用ください。

参考ファイルは下記リンク先よりDL下さい。

レイヤーボックス作成スクリプト

img01

今回はwebバナーやボタンを作成する際に便利なスクリプトを紹介します。

まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
レイヤーボックス作成.jsxのダウンロードは以下から。

【準備】
ダウンロードした“Dearps_LayerBox.zip”を解凍し、「レイヤーボックス作成.jsx」ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

使用方法

①Photoshopを起動し、[ファイル] / [スクリプト]から「レイヤーボックス作成.jsx」を実行します。

②するとダイアログが表示されるのでサイズ等の情報を入力します。

以上でレイヤーボックスの出来上がりです。

img02
img03

バナーやボタンを制作する際のベースとしてご利用ください。

Webデザイン超効率化(カンプ制作下準備 編)

top

今回は“WEBデザイン超効率化 第2弾”として、デザインカンプを制作する際の下準備を自動化するスクリプトを紹介します。

まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
Dearps_サイトカンプ.zipのダウンロードは以下から。

【準備】
ダウンロードした“Dearps_サイトカンプ.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

使用方法

①Photoshopを起動し、[ファイル] / [スクリプト]からDearps_サイトカンプ.zipを実行します。

②すると下記画像のダイアログが表示されるので名前やサイズ等の情報を入力します。

02

③以上でサイトカンプのベースが出来上がりです。

03

Webデザイン超効率化(ナビゲーション編)

00

WEBデザインの超効率化ということで今回はナビゲーションのデザインにスポットをあててテクニックを紹介したいと思います。
私自身が業務で行っているナビゲーション作成のフローを以下に紹介します。

①ナビゲーションのベースになるシェイプを作成します。

01

ここでは当ブログで配布しているスクリプトを使用します。

幅!高さ!角丸!サイズを指定してシェイプを作成!幅!高さ!角丸!サイズを指定してシェイプを作成!

②シェイプにレイヤー効果等を利用して装飾する。

02
様々なレイヤー効果が公開されているのでそちらを利用するとより効率化が図れます。
保存版!Photoshop用無料レイヤースタイル750個+まとめ [PHOTOSHOP VIP]

③装飾が完了したらレイヤーを全て選択してスマートオブジェクト化させます。

03
レイヤー/スマートオブジェクト/スマートオブジェクトに変換
※スマートオブジェクト化する理由は後ほど。

④スマートオブジェクトの上にテキストレイヤーを作成し、テキストを入力

04
配置、行揃え共に中央に!(テキストを変更してもレイアウトが崩れ無い様にするため。)

⑤テキストレイヤーと先ほど作成したスマートオブジェクトをグループ化する。

05
これでナビゲーションボタンの1つ目が完成。次のステップからこれを必要数分、複製して行きます。

⑥複製スクリプトでナビゲーションを複製!!

06
今回紹介するテクニックの目玉です。

まずは以下リンク先よりスクリプトをダウンロードして下さい。
Dearps_copy_yoko.zipのダウンロードは以下から。

【準備】
ダウンロードした“Dearps_複製横移動.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

準備が完了したら先ほどのグループ化したナビゲーションを選択した状態で[ファイル] / [スクリプト]からDearps_複製横移動.jsxを実行する。

すると自動でグループが複製されてナビゲーションの横幅分移動されます。

これを必要数分くりかえしてそれぞれのテキストを変更して完了です。

③でスマートオブジェクト化した理由

07
スマートオブジェクト化したものを複製するとすべてコピー元の情報が関連付けされます。

これにより1つのスマートオブジェクトに修正を加えれば全てのスマートオブジェクトに修正内容が反映されます。

ナビゲーションのデザインの修正が非常に楽になります。

以上でWEBデザイン超効率化(ナビゲーション編)は終了です。

次回はWEBデザイン超効率化(バナー編)を紹介しようと思っています。

それではまた!

⑥で紹介したスクリプトの縦移動版は以下から。

FireworksのスライスレイヤーをPhotoshopで実現【決定版】

dearps

Dearpsでは今までにPhotoshopでのスライスを楽にする裏テクニックを数々公開してきました。
【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用【WEBデザ向け】スライスチップ作成パネルver2-CS4.CS5用

スライスチップ作成パネル-CS4用スライスチップ作成パネル-CS4用

【裏技】「ちょっと変わったスライス作成テクニック」【裏技】「ちょっと変わったスライス作成テクニック」

スライス作成テクニックスライス作成テクニック

今回はこれらの決定版ともいえるスクリプトを作成する事が出来たので公開します。

【今回公開するスクリプトの特徴】

・選択範囲をスライスに変換する。
・スライスをFireworksのようにレイヤーで管理できる。
・スライスはWEBレイヤーフォルダに自動格納される。
・画像名称をスライス作成時入力できてレイヤー名にも反映される。
他にもメリットたくさん!まずはだまされたと思って使ってみて下さい=3

利用方法はこんな感じ。

【1】ファイルメニューから[スクリプト]>[参照]を選択し、ダウンロードしたスクリプトファイル”fw_slice.jsx”を選択し読み込む

【2】バウンディングボックス が表示されるのでそれをスライス対象のサイズに変形させて確定(enter)します

【3】スライス名を入力するダイアログがでてくるので画像名を入力します。

【4】スライスがレイヤーとして保存されました。この方法で作成されたスライスはWEBレイヤーというグループに自動格納されます。

※もうひとつの使い方

事前にスライスを切りたいサイズに選択範囲を作成してから【1】を実行するとそのサイズでスライスが作成されます。

スクリプトのダウンロードは以下から。

Photoshopで超絶簡単に点線・破線をかく

dot

まずはじめに以下リンク先よりスクリプトをダウンロードして下さい。
dot_line.zipのダウンロードは以下から。

【準備】
ダウンロードしたzipファイルを解凍し、“Dearps_点線破線.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

使用方法

①Photoshopを起動し、[ファイル] / [スクリプト]からDearps_点線破線.jsxを実行します。

②すると上記画像のダイアログが表示されるので数値を入力します。

以上で出来上がりです。

レイヤー名にレイヤーのサイズを追加

nuri

パーツのサイズを簡単に調べてレイヤー名に追記することができるスクリプトです。コーダーさんにぜひお勧めしたいスクリプトです。

【1】サイズを取得したいレイヤーまたはレイヤーグループを選択します。

step1

【2】ファイルメニューから[スクリプト]>[参照]を選択し、ダウンロードしたスクリプトファイル「レイヤーサイズ追記.jsx」を選択し読み込む

step2

【3】レイヤー名(レイヤーグループ名)にサイズが追記されました!!

step3

レイヤーサイズ追記.jsxのダウンロードは以下から。