Photoshop: スライス卒業で高速コーディング!効率的な画像切り出し方法2選

初めましてこんにちわ、BPSデザインチームのスギムラです。 マーベルなら断然アイアンマン派。 スパイダーマンの新作が待ち遠しい今日この頃です。シビルウォーのラストでボコボコにされた記憶が新しいので早く活躍する社長が見たいです。 入社して一年以上たっていますが、このたび記事を書くためについにTechrachoアカウントをつくりました。 ことのはじまり 先日、社内でデザイナーとコーダーで打ち合わせをしていたところ、新卒コーダーへ手順説明をしていた先輩コーダーが一言。   「(PSDデータからは)スライスで画像を書き出せばいいよ」 BPSではコーダー側でスライス作業をしているのですが、スライスで書き出ししていたんですね(その時までどう書き出ししていたかは知りませんでした) 「スライス」機能、確かに便利だし利用しているデザイナー、コーダーさんも多いんですが もっと楽な方法、あります。 というわけで、今日はWeb制作で避けては通れない 「PSDデータからの画像切り出しをもっと楽にして時短しよう!残業も減る?みんな嬉しいphotoshopの技」 についてお話します。 目次 そもそもスライスの何が良くないの? 書き出し方法その1 アクションを使って一瞬で切り抜き編 書き出し方法その2 画像アセットの生成編 結局どっちの方法が良いのか 1. そもそもスライスの何が良くないの? スライスとはPhotoshop上で画像を切り分けて、Web用に書き出すためのツールですね。 Web制作を行っている方なら一度は使われているのではないかと思いますので、ここではスライスの細かい説明は省きます。 レイヤー効果がうまく切り抜けてない。 実際にコーディングしてみたら、「ドロップシャドウ」「光彩」などの効果が途切れててデザイナーから「画像差し替えて!」なんて指摘されたことありませんか。 透過pngを作るのが面倒 スライスだと、指定した範囲の表示レイヤーが全て書き出されますよね。透過pngを作るためには、背景にあるレイヤーをわざわざ非表示にしなければいけません。透過と透過じゃない画像が混在していたらレイヤー表示を切り替えてもう一回「web用に書き出し」なんてことも…。 画像サイズを変えて保存できない! 昨今のRetina対応(高解像度ディスプレイへの対応)、psdデータが2倍のサイズで作られていればいいのですが、2倍サイズのpsdは挙動が重くてデザイナーも嫌います。 スライスをすべてのパーツに指定する作業自体、手間がかかって面倒くさい…別に書き出さなくていいパーツまでいつの間にか書き出されている…etc などなど。 慣れているとなんとなく「そういうもの」と思ってデメリットにも感じていない人もいるかもしれませんが、これがもっと簡単にできるのならそれに越したことはないですよね。 では次項からスライスに変わるお手軽な画像書き出し方法を2つご紹介します! 2. 書き出し方法その1 アクションを使って一瞬で切り抜き編 アクション=Photoshopの便利機能の一つ。作業を登録しボタン(またはクリック)一つで登録した作業を自動で再現してくれます。 まずはアクションに登録したい手順の詳しい内容から。 1. 切り出したいレイヤーを選択(複数レイヤー可、フォルダでも大丈夫) 2. レイヤー上で右クリック「レイヤーを複製」 3. 「保存先項目」の「ドキュメント」を「新規」に変更して実行 4. 「イメージ」>「トリミング」で「トリミング対象カラー」に「透明ピクセル」を選択して実行 5. Web用に保存して完了 必要なファイル形式で保存して書き出し完了です。 新規作成したドキュメントは保存せず削除してしまってもOk メリット 透明部分が自動で切り抜かれるので、スライス切り抜きのような手動による切り抜きミスが無い レイヤー、またはフォルダごとに切り抜いているので背景のレイヤーまで一緒に切り抜かれない。透過pngを作るのが簡単! 手順4の後に画像解像度やサイズを変えて保存することもできる (ベクターデータであればRetina対応用に2倍サイズにしてから保存するなど) デメリット … Continue reading Photoshop: スライス卒業で高速コーディング!効率的な画像切り出し方法2選