WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

Photoshopのスライスとアセットを使い効率よく画像を書き出す方法

Photoshopで画像をスライスして書き出す

Photoshopでのデザインが仕上がったらHTMLに組み込みために画像を切り出していきます。HTMLとCSSの経験が浅いうちは先にコーティングしたほうが切り出す画像サイズが適切にわかるため、ケースバイケースという場合があります。

今回は先にスライスで画像を切り出していくやり方を行います。Photoshop CCからの独自機能の「アセット」を使用した2パターンの画像の切り出し方を組み合わせてみます。

この記事の内容

デザイナーLevel:2 「アルバイト採用レベルのWEBデザイナー」目次

スライスする箇所を確認する

画像は極力少ない方がよい

ファイルのダウンロード

画像の箇所がスライスして切り出す部分になります。これをPhotoshopのスライスツールを使用して切り出していきます。

画像が必要な場所以外はスライスしない

HTMLだけで再現可能である場所は画像にしないのが基本。画像を使えば簡単にレイアウトできますが、文字変更などを行う際にPhotoshopをで編集して画像で書き出さなくはならなくなったり、チームで運用しているとPSDファイルが紛失したりレイヤー結合していまう危険性があるため、保守性がよいとはいえないからです。

よって画像の使用は最低限に抑えます。

WEBサイトの容量を小さくし表示速度を上げ、テキスト量を増やせSEOにも強くなります。これができるWEBデザイナーは腕がいいです。サンプルのデザインカンプのどこをスライスするべきなのかを考えましょう。

従来のスライス方法で切り抜く

従来の方法でスライスする

スライスツールで切り取っていく画像をドラッグ行きます。スライスは縦と横にしかできず、曲線には対応していません。WEBで使える画像はすべて長方形か正方形なのです。ですからスライスツールを使用する場合は予めガイドを引いておくと、スライスツールが近くに来たときに吸い付いてくれますので、作業が捗ります。

1pxまで気をつけてガイドを引く

スライスをする際は1pxのズレが致命傷になることがありますので、Photoshopの画面を1px単位まで表示できるほど拡大してから作業を行うことをおすすめします。

カンプはスライスだらけになる

画像のようにどんどんスライスを書いていき、画像の分割ラインを作っていきます。スライスが全部完了するころにはデザインカンプはガイドラインとスライスだらけになります。
スライス作業が終わったら、JPEGやPNGでの書き出しの設定を行います。

スライスの書き出し設定

スライス選択ツールでスライスをダブルクリックすると書きの設定が行えます。ここでは名前(ファイル名)だけ入力して他はDreamweaverなどのコーディング用ソフトで入力することが多いです。

WEB用に画像を書き出す

WEB用に書き出す

スライス選択ツールでファイル名の入力が終わったら画像の書き出しを行います。

ショートカットキーCtrl+Alt+Shift+S

WEB用書き出し画面でもスライス選択ツールが使用できます。ここで画像をダブルクリックすると、Photoshopの作業画面ではなかった画像の形式やクオリティの書き出し設定を行うことができます。透明な要素があるものはPNG-24、それ以外はJPEGの「やや高画質」で書き出すことが多いです。

書き出すすべての画像の設定が終わったら画面左下の【保存】をクリックします。【完了】をクリックするとここで設定した画像の書き出し設定を引き継いだままPhotoshopの編集画面に戻ります。

WEBデザイナーは画像のみ

書き出し設定は3種類【画像のみ】【HTMLと画像】【HTMLのみ】。
一般的には【画像のみ】を使用して画像を書き出します。HTMLと一緒に書き出すと、HTMLファイルも生成されてPhotoshopと同じレイアウトで表示はできますが、WEBサイトに使えるようなコードではないのでWEBデザイナーや、それを目指す人には不要です。

これが従来の形式のスライスによるHTML用への画像の書き出し方です。しかしこの形式では書き出せない画像があるためデザイナーは個別にPhotoshopのファイルを作ったりしなければなりませんでした。そのケースをご紹介します。

スライスできない画像

メインビジュアルの画像の上に載っている画像、これはスライスの中にあるため個別に書き出すことができません。この画像を細かくスライスして囲むようにしても円形であるたメインビジュアルの一部が切り取られてしまいます。

JPEGでもPNGでもこのように書きだされる

従来のスライスだとこの画像を切り取ることは不可能でした。この縁部分だけ別のPhotoshopのファイルにしてPNGで書き出すなど、WEBデザイナーは四苦八苦しました。それを解決する機能がPhotoshopCCから本格実装された【アセット】という機能です。

アセットを使いレイヤー単位で書き出す

レイヤー1枚単位で書き出せるということは背景がどのようなものであれ、透明(Png)で書き出せるということです。サイズのスライスするまでもなくレイヤーに依存しますので問題ありません。

Photoshopのアセット機能

ファイル>生成>画像アセットを選択すると、PSDが置かれている同じ位置に【slice-assets】というフォルダが自動で作れます。アセットを使用して書きだされた画像はここに保存されます。またPhotoshopで修正した際はそれを反映した画像が上書きされます。

アセットを使って画像を書き出す

やりかたは簡単です。書き出したいレイヤーやフォルダの名前を【 xxx.jpg】【xxx.png】のように変更するだけです。これだけで自動的に書き出されます。

レイヤーフォルダの名前に拡張子をつけるだけ

円形のデザインを収めたフォルダを【bestrate.png】というフォルダ名に変更しました。

アセットで書きだされた画像

slice-assetsフォルダの中に背景が透明な画像が生成されました。
このように背景の上に乗ってしまっていて書き出せない画像はスライスとは別にアセットを使用すると簡単に書き出すことが出来るようになります。この機能は最新のものなので意外としらないWEBデザイアーの方も多いです。

Photoshopで画像のスライスはアセットと連携させるのが最速

WEBデザイン初心者・未経験の方ははじめからアセットを使った画像の書き出し方を覚えましょう。Photoshopの進化は近年すごいスピードで進んでいて新しいバージョンが出たらWEBデザイナーも確認しないと時代に取り残されてしまいます。

逆の考え方をすると機能をしっかりと理解すれば現役のデザイナーよりも効率よくWEBデザインの作業ができるようになるとも言えます。参考書で調べた新機能を実際のWEBデザインでどのように使うかを最速で覚えたいなら、短期集中でオンラインスクールを使用するのも1つの手です。



Photoshopでの画像の書き出しがおわったら、いよいよコーディング作業に入ります。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST