Photoshopでスライス(基本的なこと)


ウェブクリエイターにとってモックアップからの素材の切り出しは欠かせないものですが、私は最近ようやくその方法を覚えました。

・・・というわけで、自分用まとめ。

【スライス】
1.移動ツールの設定を変える
「移動ツール」の“自動選択”と“バウンディングボックスを表示”にチェックを入れ、プルダウン部分は“レイヤー”を選択。

2.スライス対象のレイヤーを選択
移動ツールでスライスするレイヤーを選択し、レイヤーメニューから“レイヤーに基づく新規スライス”を選択

3.スライス選択ツールに切り替え
手順2で選択した部分にカーソルを合わせ、右クリック。「ユーザー定義スライス」を選んで同じ場所でダブルクリック後、「寸法」でスライスする幅を調整。
その際、「スライスの種類」のプルダウンが“画像”になっていることを確認し、書き出し後の名前を決めておく。

あとは手順2と手順3の繰り返し。

【書き出し】
1.前準備(適宜)
「ファイル」メニューの“Webおよびデバイス用に保存”をクリックし、出てきたウィンドウの右上にある小さなアイコン「最適化メニュー」から、“出力設定の編集”を選択。

デフォルトで「HTML」となっているプルダウンを「ファイルの保存」に変更し、「最適化ファイル」項目の“画像をフォルダに保存”のチェックを外す。これは適宜。
これをしない場合、余分にフォルダが作られてしまう。たとえば、”images/images/xxx.jpg”みたいなことになる。

2.書き出しをするスライスを選択する
「Webおよびデバイス用に保存」画面に戻る。スライスした部分は青く囲まれているので、複数選択ですべてのスライスを選び、保存ボタンをクリック。
「最適化ファイルを別名で保存」画面で「スライス」が選択できるようになっているので、“選択したスライス”に変更する。

保存ボタンをクリックすると、選択したスライスのみが書き出される。