この記事では、現在わたしの主な業務内容の画像の書き出しにおいて気をつけるべき点についてお話しします。
※Photoshopのみ
お恥ずかしい話なのですが、現在書き出しについて技術、早さが足りない状況です。
そんな中で先輩に教えていただいた気をつけるポイントを共有したいと思います。
同じ種類の画像は「高さ」や「横幅」を揃える
同じ種類のアイコンなどは書き出す際に「高さ」を揃える（できれば「横幅」も）
そうすることでコーディングする際に調整しやすくなるためです
アイコンなどは透過して書き出し出来ているか
背景を透明にして書き出すことにより、もしデザインの背景の色が変わっても再度書き出す必要がないので◯
背景がつけられていたらレイヤー上それを目隠しして、白とグレーの市松模様の状態にして書き出します
ちなみに、透過して保存できるのはpng形式になります
書き出す画像のサイズは偶数にする
レティーナディスプレイや様々な高解像度ディスプレイの多様化が背景にあります
ブラウザによって画像の見え方が異なり、ぼやけてしまったりする原因になるからです
しかし、これから先ディスプレイがもっと多様化していくと偶数に限らずそれに応じた対応が必要になってくると思います
SP,PCのデザインカンプを見比べて同じ画像は大きい方を書き出す
わたしが作業する中でSPサイズの方が大きい画像がありました
画像を拡大するとぼやける原因になるので大きい方からとるようにアドバイスをいただきました
以上になります！
作業に慣れていないと「画像の高さ横幅、全部揃えたぞ！」と思い確認したら奇数になっていてまた書き出しし直しになったり・・・
また、「レイヤーに基づく新規スライス」という機能が便利で手動で書き出ししなくても自動的にぴったりなサイズで書き出ししてくれるんですが、これも出来た！と思い確認すると奇数になっていたり・・・
（そのままだとサイズ変更が出来ないのですが、右クリックでユーザー定義スライスに変更をすればサイズ変更出来ます）
今は時間がかかりすぎているので効率のいい方法を覚えて今よりももっと早く作業ができるよう頑張ります！
コメント