
Photoshopのデザインカンプをもとにコーディング中。画像アセットで画像を書き出したら、バラバラに書き出されてしまった。1つの画像としてまとめて書き出す方法を教えて。
このような疑問に答えます。
こんにちは、フリーランスエンジニアの涼です
今回、Photoshopのpsdデータのレイヤーを結合して書き出す方法を紹介します。
【Photoshop】レイヤーを結合して画像を書き出す方法
下の写真は、4つのレイヤーが表示されてます。
複数のレイヤーをShiftキーを押しながら選択。そして右クリックを押し、「レイヤーを結合」を選びます。
これで各レイヤーとして結合され、1つの画像として書き出せます。
余談を話します。
コーダーが画像を書き出しやすいように、デザイナーがレイヤーを結合しておくのが通常です。
しかし、以前私がクラウドソーシングで受注した案件は、すべてのレイヤーが結合されていませんでした。結果、画像の書き出しにすごく時間がかかりました。(他にも、画像を切り抜いたりと加工も必要だった)
コーディングの見積をするときは、デザインカンプを受領し、すぐに画像を書き出せる状態になっているか確認しましょう。結合されていなければ、工数を多めに想定したほうがいいです。