2016年6月16日木曜日

Photoshopのスライスを使わない書き出し方

今回はPhotoshopのスライスツールを使わずに画像を書き出してみましょう。
みなさんはPhotoshopのスライスツールは使っていますか?

自分の場合はPhotoshopで上がってきたデザインから画像パーツを書き出すときは
ほとんどスライスツールは使いません。

ドロップシャドウとか多様されている場合にスライスツールを使うと非常に手間がかかり、
たとえCSSでシャドウをいれるにしてもレイヤーからシャドウだけ消したりと
結構大変です。

それではどうやってスライスツールを使わずに書き出すのかというと
1枚物の画像にして選択ツールを使って書き出します。

順を追っていきましょう。

例えば下記のようなデザインがデザイナーから上がってきたとします。


 


このデザインでロゴとボタンを画像で書き出したい場合には
まず背景を非表示にします。




背景を非表示にしたら、レイヤーで分かれているデザインを表示部分をスタンプ
(Ctrl+Shift+Alt+Eキー)で1枚物の画像にします。

この場合一番上のレイヤーでかつ表示されているレイヤーを選択してから
Ctrl+Shift+Alt+Eキーで表示部分をスタンプしましょう。

すると選択レイヤーの上に1枚物のレイヤーが作成されます。

続いて1枚物のレイヤーを選択し、長方形選択ツールでロゴが全て入るように囲みましょう。



分かるでしょうか?ロゴ画像を選択ツールで囲んでいます。


選択ツールで囲んだらコピー(Ctrl+C)して新規(Ctrl+N)そのままOKでエンターを押すと
下記のように新しいドキュメントが作成されます。




そこでペースト(Ctrl+V)すればロゴ画像だけが抜き出せました。



あとはこれを書き出せばロゴ画像パーツの完成です。

自動で画像に合わせて新規ドキュメントを作ってくれるのでスライスする手間が省けましたね。


ドロップシャドウがかかったボタン画像も同じようにドロップシャドウも含めて選択ツールで
囲んでやれば自動でサイズ調整して新規ドキュメントを作ってくれます。




どうでしたでしょうか?

パーツごとにしっかりとデザインしてくれるデザイナーだと書き出しが表示に簡単にできます。





ブログランキング・にほんブログ村へ ブログランキング

ブログ王ランキングに参加中!

0 件のコメント:

コメントを投稿