今回はPhotoshopで作ったモック画像からスライスツールを使わないで細かい画像を書き出す方法をご紹介しようと思います。
モック画像からスライスを設定して書き出しするのは地味に大変な作業だと自分は思っているので、できるだけ楽に作業したいと思っていましたが実はスライスツールを使うよりも、もっと楽に細かいウェブデザインのパーツを書き出す方法があったのでご紹介させていただきます。
方法１ 画像アセット機能で書き出す。
２.Photoshopのメニューバーの「ファイル」の「生成」にマウスカーソルを合わせると「画像アセット」という項目が出てくるのでクリックします。
psdファイルを保存している場所に「（書き出したpsdファイル名）-assets」というフォルダーができているので、その中に書き出されています。
書き出せる拡張子はJPEGや透過PNGや透過GIFはもちろんの事、SVGも書き出せるそうです。
個人的にはSVGが書き出せるのがうれしいですね。
詳しい設定などはAdobeのブログで解説されていますので是非参考にしてみてください。
方法２ 選択したレイヤーを「書き出し形式」で書き出す。
2.レイヤーパネルの上で右クリックして出てきたメニューから「書き出し形式」を選択します。
3.画像のサイズや拡張子を選択する画面になるのでお好みで設定を変えてください。
書き出し設定を全て終えたら、右下の全て書き出しボタンを押します。
保存するフォルダーを選択して開くボタンを押すと指定したフォルダー中に書き出されています。
この方法なら色々なサイズのアイコンを一気に書き出せるのでとても便利です。
ただ、この方法で自分が少し躓いたところが一つあります。
画像のサイズや拡張子を選択する画面で画像の解像度を変えたはずなのに、１ファイルのみその拡張子で書き出され、他の画像はもともとの拡張子のままで書き出されていました。
実は左の書き出す画像の一覧の部分で、選択した画像しか設定が反映されないようです。
書き出す画像全ての拡張子を変えたい場合はCtrlキーを押しながら全てクリックして選択してから拡張子を変えてから書き出すと全部同じ拡張子になってくれます。
どちらの機能も背景を消してスライスツールでスライスを引いて……という作業を省略できる素晴らしい機能なのですごい時短になります！
みなさんもぜひ使ってみてください。
Photoshop
0 件のコメント:
コメントを投稿