【Photoshop】アートボードの背景が透明にならない時の対処法 #photoshop

こんにちは。
デザイナーのスタミです。
最近ちょっとサボり気味だったのでデザインネタでも。

Photoshopに導入された「アートボード」について

今更感満載ですが、Adobe Photoshop CC 2015からアートボード機能が導入されましたね。
「何それおいしいの?」という方のために軽く説明しておくと、アートボード機能は、1つのファイル内にたくさんの画面を作ることができる機能です。
もともとは1ファイルに1デザイン、またはレイヤーをうまく使うことによって複数の画面デザインを収めたりしていたんですよね。
同じタイミングにたくさんの画面をデザインする必要のあるWebやアプリの仕事に携わるユーザーが増え続けた結果、このような仕様になったということで。

Adobe Photoshop でのアートボードの使用

Adobe Photoshop でアートボードを使用して、さまざまなデバイスと画面に合わせてデザインをレイアウトする方法を学習します。幅広いプリセットサイズから選択したり、独自のカスタムアートボードサイズを定義したりできます。

アートボード機能単体で言うと、私は今デザインツールとしてSketchとIllustratorをメインに採用していることもあり、もう無かった時代には戻れないなぁといったどっぷり具合ですが、一方遠ざかり気味のPhotoshopではあまり馴染みがなかったりして、実装されたことを知ってありがたいなとは思いつつ詳しい使い方は置き去りになっていました。

おぼつかない状態でなんとなくアートボードを使っていたら早速こんなことに


背景透過のpng画像として書き出したいのに背景が自動的に白。。アートボードにあまり馴染みのない人的にはびっくりな状況だと思います。
アートボード機能を使っているわけだからどこかに背景色を設定したり背景色を含んだ状態で書き出す設定があるんだろうなと思ったのですが、どこで操作すればいいかはよくわかりませんでした。

特段難しいことでも何でもないので調べたらすぐにわかりましたよ。
レイヤーパネルでアートボード層を選択すると、「属性」のところに設定項目が現れるんですね。
「白」「黒」「透明」「その他」と色を選ぶことができます。

背景色は白にしておいて、スライスしたパーツを書き出す時は背景色を含まない設定にできれば便利なんですけど、どうやらその機能は無さそうですね。
最近はアセット書き出しの昨日もでてきた様なのでそちらで対応しているのかもしれませんが、スライスだってまだまだ使うケースはあるのでぜひどうにかしていただきたい。
Sketchはその辺の気遣いが最高なのでまだまだPhotoshopには戻って来られないなーと実感しつつ、この件については解決したのでした。

UXデザインの教科書
UXデザインの教科書

posted with amazlet at 17.04.21
安藤 昌也
丸善出版
売り上げランキング: 41,463
Adobe Creative Cloud コンプリート 2017年版 |12か月版|オンラインコード版
アドビシステムズ (2013-10-01)
売り上げランキング: 94