CSS Nite LP22フォローアップ（1）『Photoshop × Webデザイン　時間短縮のための基本テクニック』（黒葛原 道さん）

2012年3月24日（土） 、ベルサール神保町で開催したCSS Nite LP, Disk 22「Webデザインで使うPhotoshop」のフォローアップとして、黒葛原 道さん（eater）の『Photoshop × Webデザイン　時間短縮のための基本テクニック』のスライドなどを公開します。

• スライド（PDF、29ページ、26MB）

フォローアップメッセージ

みなさま、ご参加ありがとうございました。そして、お疲れさまでした。

遠方からの参加で若干不安もありましたが、あたたかく見守っていただきうれしかったです。

さて、今回のセッションでは押さえておくべき基本の設定や、カスタマイズ方法など、どちらかというと地味な内容でしたが、いずれも時間短縮につながりますので、ぜひ実践してみてください。

以下に補足・注意点をまとめました。

「ピクセルにスナップ」の振る舞いについての注意点

長方形ツール、角丸長方形ツールのオプションで「ピクセルにスナップ」にチェックしておけば境界はぼけないのではないか？という質問をいただきました。

答えは半分正解、半分不正解です。デモでも触れましたが、オプションで「固定」を選択し「W（幅）」だけ固定や「H（高さ）」だけ固定で描画した場合「ピクセルにスナップ」にチェックが入っていると、幅だけ or 高さだけ固定で描画できません。なので「ピクセルにスナップ」のチェックは外さないといけないのですが、そうすると境界がぼけてしまいます。ということは「ピクセルにスナップ」は万能ではないということです。このような場合はデモでおこなったように、ガイド、グリッドを活用してください。

グリッド利用時のスナップの振る舞いについての注意点

グリッドの設定で「グリッド線：100」「分割数：100」と設定すると、グリッドとグリッドの間隔が1pxづつに設定されます。グリッドを表示しているとレイヤーは1pxづつスナップしてしまうので、結果他のガイドやスライスへのスナップより優先されてしまいます。ガイド、スライスへのスナップを利用したい場合はガイドを非表示にしてください。

以上のように、ケースバイケースでふるまいが変わってしまいますので、必要に応じて設定を切り替えて使うようにしてください。

レイヤー名をスライス名にするスクリプト

slice_Set.jsx

デモでは簡単にスライスする方法として「レイヤーに基づく新規スライス」を利用しましたが、最終的に画像を書き出すにあたり画像のファイル名として「スライス名」を利用するケースが多いと思います。ということはスライスに「スライス名」を付ける必要が出てきます。そこでご紹介するのは「レイヤー名をスライス名にする」というスクリプトです。こちらのスクリプトを実行すると「レイヤー名をスライス名にしつつレイヤーに基づく新規スライス」を行ってくれます。

注意点としては複数のレイヤーからスライスを作成しようとすると処理に時間がかかったりうまくいかない場合があります。

また同梱の「sliceGroup_Set.jsx」を利用すると、グループ化したレイヤーや複数のレイヤーを選択して実行すると、レイヤーを結合したスライスを作ることができます。

※こちらのではほかにも便利なスクリプトやアクションが配布されています。

スクリプトは他の登壇者のみなさんも触れられていましたが、ほかにもいろいろ便利なものがあります。また自分で作ることもできますので、興味のあるかたは調べてみてください。

補足・注意点は以上になります。

おまけその1

レイヤーパネル右上のメニューにある「パネルオプション…」を「Option」キー（WinはAltキー）を押しながら実行してみてください！

おまけその2

Photoshopの歴史　歴代の起動画面などが見れます。

それではみなさんありがとうございました。

ビデオ