/スライス作成スクリプト2015.03.01スライス作成スクリプトTweetPocketPhotoshopでスライスを作成するには[スライスツール]もしくは[レイヤーに基づく新規スライス]で作成する方法の2種類があります。それぞれ不満がありました。・[レイヤーに基づく新規スライス]はレイヤーグループに対してはNG・スライスに名前を付け忘れる。・スライスをレイヤーとして管理できない等など...特に[レイヤーに基づく新規スライス]はレイヤーグループに対してはNGが致命的ですね。Photoshopってバージョンアップするごとに素晴らしい機能が追加されているのに、「スライス」に関してはけっこうノータッチなんですよね。CCから機能追加された「画像アセット機能」を使えってことなんだろうけどいまいち馴染めない...そんな方も多いのではないでしょうか。私が「画像アセット機能」を使わない理由はこんな感じです。・作業を共有する場合相手がCC以上じゃないといけない・タグの付け漏れがぱっと見で分からない・画質をタグで設定できるけどこれはやっぱりWeb用に保存のダイアログでプレビューを見ながら最適な画質を設定するべき・画像アセットの「@2x」機能がスマートオブジェクトに対応していない(こちらの記事で触れていますRetina対応用画像の作成について@2x)そこで今回はスライスに関する不満を解消させるスクリプトを作成したのでご紹介させていただきます。はじめに下記リンク先よりスライス作成スクリプトをダウンロードしてください。ダウンロード↓slicescript.zipslicescript.zipを解凍すると「選択範囲からスライスを作成x.jsx」と「レイヤーからスライスを作成x.jsx」の2つのスクリプトファイルができます。2つのスクリプトの使用方法は下記のとおりです。【レイヤーからスライスを作成x.jsxの使用方法】1レイヤーパネルでスライスを作成したいレイヤー(レイヤーグループ)を選択します。2[ファイル]メニューの[スクリプト]から[参照]を選択し、先ほどダウンロードした「レイヤーからスライスを作成.jsx」を実行します。3[スライス作成]ダイアログが表示されるのでスライス名を入力し、[確定]ボタンをクリックします。4[レイヤー]パネルに「Webレイヤー」が作成され、その中に、[スライス作成]ダイアログボックスで設定したスライスのレイヤーが作成されます。【選択範囲からスライスを作成x.jsx】1[ファイル]メニューの[スクリプト]から[参照]を選択し「選択範囲からスライスを作成x.jsx」を実行します。表示されるのでそれをスライス対象のサイズに変形させて確定(◯ボタンをクリック)します。3[スライス作成]ダイアログが表示されるのでスライス名を入力し、[確定]ボタンをクリックします。4[レイヤー]パネルに「Webレイヤー」が作成され、その中に、[スライス作成]ダイアログボックスで設定したスライスのレイヤーが作成されます。※[選択ツール]で選択範囲を作成した状態でスクリプトを実行してそのまま選択範囲をスライス領域にすることもできます。「Webレイヤー」は通常非表示になっていますがこれを表示することによってスライスを可視化できるのでプリントアウトをするなど指示書としても活用できます。[注意]このスクリプトは[スライスツール]、[レイヤーに基づく新規スライス]との併用はできません。各スクリプトは下記のような役割をイメージしていただくとわかりやすいと思います。実際にこのスクリプトを使用している動画です。最後に宣伝させてください!この度共著でPhotoshopの本を執筆させていただきました。2015年3月13日にソシム社より発売になります。今回紹介したようなWebデザインに役立つスクリプトやTipsを多数紹介させて頂いています。下記バナーがamazonへのリンクとなっております。ご興味がある方は是非御覧ください!TweetPocketScriptSNSでもご購読できます。*メールアドレス(公開はされません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。