スクリプト「レイヤーをグループ化→描画モード:通常」

レイヤーをグループ化するとそのレイヤグループの描画モードはデフォルトでは「通過」になります。

その場合レイヤーグループ内で調整レイヤーで色調補正した場合、描画モードが「通過」なので下のレイヤーに影響します。(下記画像参照)

この調整レイヤーでの色調補正をレイヤーグループ内で留めたい場合レイヤーグループの描画モードを「通常」にするか、色調補正したいレイヤーに対してクリッピングマスクする必要があります。(下記画像参照)

この一手間を解消するスクリプトを作成したので、ご紹介させていただきます。このスクリプトを使用すればレイヤーグループを作成した際の描画モードをデフォルトで「通常」にすることができます。

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

↓Dearps_レイヤーをグループ化_通常.jsx ダウンロード↓

【利用方法】

①「Dearps_レイヤーをグループ化_通常.jsx」を
【Mac】/Applications/Adobe Photoshop [CC/CC2014]/Presets/Scripts/ に保存。

②Photoshopが起動している場合は再起動。

③[編集] / [キーボードショートカット]で「Dearps_レイヤーをグループ化_通常.jsx」にたいして「⌘+G」を設定。

これでレイヤーグループを作成した際の描画モードがデフォルトで「通常」になります。

是非ご活用下さい。

ぶっこ抜いてリンク スクリプト

top

指定したレイヤー(レイヤーグループ)を1クリックで外部リンクファイルとして書き出すスクリプト

Photoshop cc 2014からスマートオブジェクトを外部リンクファイルとして書き出すことができるようになりました。

手順としては、

書き出したいレイヤー(レイヤーグループ)を選択し、[レイヤー]メニュー>[スマートオブジェクト]>[スマートオブジェクトに変換]を選択してスマートオブジェクト化。次に[ウインドウメニュー]>[属性]パネルを表示。そして[属性]パネルの[リンクされたアイテムに変換]ボタンをクリック。ダイアログが出てくるので保存先を指定して保存。

という作業をする必要があります。

今回公開させていただく「ぶっこ抜いてリンク」スクリプトを使えば、

書き出したいレイヤー(レイヤーグループ)を選択し、[ファイル]メニュー>[スクリプト]>[参照]からダウンロードした「ぶっこ抜いてリンク」スクリプトを選択するとダイアログが出てくるので保存先を指定して保存。

という工程だけですみます。

スマートオブジェクトの外部リンクファイル化機能にはこんなメリットがあります。

(1)ヘッダーやナビゲーション等共通モジュールを書き出して複数ファイルで共有できる。

(2)外部ファイルとして抜き出した分、元のPSDデータの容量が軽くなる。

今後間違いなく使用頻度が増えていく機能だと思うので是非活用してみてください。

ぶっこ抜いてリンク スクリプトのダウンロードは以下から。

Photoshop CC 2014版はこちら

DOWNLOAD

Photoshop CC 2015版はこちら

DOWNLOAD

ただレイヤーを別ファイルに抜き出したい場合は
ぶっこ抜き スクリプト」を御覧ください。

【セミナー情報CSS Nite @Co-Edo, Vol.19-20『Webデザインの現場ですぐに役立つ Photoshop仕事術』

book

4月9日、10日の2デイズ、『Webデザインの現場ですぐに役立つ Photoshop仕事術』の出版記念を兼ねたセミナーがコワーキングスペース茅場町Co-Edoにて開催されます。私、当ブログ管理人もVol.20に出演させていただきます。ぜひご参加の検討をいただけると幸いです!

CSS Nite @Co-Edo, Vol.19-20
『Webデザインの現場ですぐに役立つ Photoshop仕事術』

【Vol.1】2015年4月9日(木)19:30-21:00
【Vol.
2】2015年4月10日(金)19:30-21:00

コワーキングスペース茅場町Co-Edo
〒104-0033 東京都中央区新川1-3-4 PAビル5F

参加費 3,000円(両日割、および、書籍持参によるキャッシュバックあり)

詳細はこちら Vol.19Vol.20

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

「Webデザインの現場ですぐに役立つ Photoshop仕事術」本日発売!

book

共著で執筆させていただきました「Webデザインの現場ですぐに役立つ Photoshop仕事術」が本日発売されました。

『Webデザインの現場ですぐに役立つ Photoshop仕事術』
出版社: ソシム

<本書の主な内容>

・Webデザインをスムーズに行うための設定をガイドライン

・素早く効率的にカンプ作成を行うための準備と各種TIPS

・マルチデバイス向けのデータを簡単に作る実践テックニック 他

◆Amazon
http://www.amazon.co.jp/dp/488337971X

◆Facebookページ
https://www.facebook.com/photoshop4web

Photoshop初心者からPhotoshopを使いこなしているプロの方まで、どなたが見ても新しい発見があるような、とても内容の濃い1冊となっています。

今回Web業界の第一線でご活躍されている共著の方々とお仕事をさせていただき、とてもいい経験になりました。

著者の鷹野 雅弘さん、 黒葛原 道さん、 牧下 浩之さん、ならびにソシム担当編集者様に感謝です!

書店へ足を運んだ際は、是非お手にとって見ていただけばとおもいます。

Retina対応用画像の作成について@2x

最近Retinaディスプレイ対応画像を制作する機会が増えてきています。

Photoshop CCから機能追加された「画像アセット機能」ではレイヤー名に200%とRetina対応用画像のファイル名(□□□□@2x.jpg)を書いておくことで画像サイズ200%の画像を生成することが可能です。

しかし上記の方法で書き出された画像には注意が必要です。

下記画像をみていただくと分かる通りテキストレイヤーはくっきり綺麗に拡大されているのに対し後ろの写真がぼやけてしまっているのがわかります。

原因は画像アセット機能で保存される画像はスマートオブジェクトに対応していない為画像が荒れてしまいます。

この機能で綺麗に書きだすにはテキストレイヤーやシェイプレイヤーに限られてしまうのでRetinaディスプレイ対応させたい画像というのは写真が多いため機能として致命的です。

 

そこで今回はDearpsの考えるRetinaディスプレイ対応のための解像度2倍の画像を作成する一番最適な方法をご紹介します。

まず下記の記事より「ぶっこ抜きスクリプト.jsx」をダウンロードして下さい。

ぶっこ抜きスクリプト http://dearps.lovwar.com/2010/12/bukko/

Retinaディスプレイ対応させる画像を作成する際の注意点

・写真は極力解像度が高いものを用意。

・写真を配置する際最初にスマートオブジェクト化しておく
(埋め込み配置、リンクを配置で読み込んだ場合は最初からスマートオブジェクト化された状態になります。)

・シェイプレイヤーやテキストレイヤーはラスタライズ化させない。

Retina対応用(サイズ200%)の画像を作成する。

①Retina対応用に高解像度版画像を作成したいレイヤー(レイヤーグループ)を選択します。

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

③すると選択していたレイヤー(レイヤーグループ)が別ファイル抜き出されます。

④[ファイル]メニューの[イメージ]から[画像解像度]を選択し画像解像度を200%にします。(@3xにしたい場合は300%)

⑤これでRetinaディスプレイ用の画像の出来上がりです。

画像アセット機能で作成された画像と比較すると後ろの写真が綺麗に書きだされていることがわかります。

ぶっこ抜きスクリプト@2xを作ったので配布します。

ぶっこ抜いた後の画像サイズ2倍にする作業も自動化させたいという方のために 「ぶっこ抜きスクリプト@2x」を作成しました。

下記リンク先よりスどうぞ!

↓ぶっこ抜きスクリプト@2x ダウンロード↓

最後に宣伝。

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

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

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

スライス作成スクリプト

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

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