新米webデザイナーおつぶのメモブログ

未経験からwebデザイナーを目指す人へ

【photoshop】画像を書き出す方法とそのポイント①

-----

 

制作会社に入ってすぐ大量に画像の書き出しを頼まれました。

もちろんphotoshopの使い方も分からない初心者の私はただ困るだけ。。。

書き出し方も知らないなんて、、なんと恥ずかしい。。

しかし、色んな書き出し方を覚えておくとすぐに先輩方に喜ばれると思います。

というか、デザイナーからしたらこれはもう"作業"なのでいかに効率よくできるかってだけですけど。

 

今回はphotoshopでの書き出し方・ショートカットキー・その他のポイントを3記事にわたってご紹介します。

他に書き出し方を知っていたら新米の私にも是非教えて欲しいです。

 

【1. photoshopでの書き出し方】

 

やり方は1つだけではないので、幾つか紹介します。

①web用に保存する

②スライスツール

③画像アセット

 

 

※まず、書き出したい画像を選択して別ファイルに貼り付ける

1)長方形選択ツール(M)で画像を選択し、コピー(command + shift + C)します。

2)新規ドキュメントを開きます。(command + N)

3)新規ドキュメントに貼り付けます。(command + V)

 

これで準備完了、そしたら下記の好きなパターンで書き出してください。

(多分この辺も人によって様々ですが、初心者が一番分かりやすそうなので載せておきました)

 

 

①web用に保存する

ファイル➡︎書き出し➡︎Web用に保存(従来)

command + alt(option) + shift + S です。

このショートカットキーはすぐ覚えちゃいます。

なぜ ”(従来)”とつくのかは是非後でググってください。

私は保存する前に細かい画像の設定をしたい時に使ってます。

f:id:tsublog:20170322001432p:plainf:id:tsublog:20170322001439p:plain

 

 

②スライスツール

ルールバーにある、スライスツールを使用します。

ショートカットキーがCで押すだけ。

個人的にはあまり好きではないので使用頻度は低めです。。。

f:id:tsublog:20170322001938p:plain

 

 

③画像アセット

私はこの書き出し方が一番好きです!!簡単で、かつ便利!!

大量に画像を保存したいとき本当にオススメです。

上記2つの書き出しをするときにはじめは「アクション」機能を使うこともあったのですが。。これを知ってからはもう使ってません。

 

1)まず、保存したいレイヤーの名前の語尾にファイル形式の名前をつけます。

ここが割とポイントですが、、

JPEGの最高画質100%で書き出したいときは「.jpg10」とつけます。

他にもパターンがあるので、その辺は必要なときにググってみてください。

基本はpngで書き出したいなら「.png」、jpgで書き出したいなら「.jpg」です。

初心者ははじめはこの辺しか使いません、本当に。

 

f:id:tsublog:20170322002933p:plain

 

2)ファイル➡︎生成➡︎画像アセットを選択します。これで終了!!!

f:id:tsublog:20170322002945p:plain

 

3)同じ階層に「-assets」みたいなフォルダ名で勝手にまとめられて保存されているので探してみてください。

 

f:id:tsublog:20170322002926p:plain

 

 

他にも「クイック書き出し」とか「書き出し形式」とかありますけど、

その辺は仕事ではあまり使用してないです。。

 

大量にある時はアセットが一番楽だしオススメです。

私は特に大量にバナー広告のデザインを任された時とかに使ってます。

 

-----

--

 

次の記事は続けてこの辺載せていこうと思います。👇

【2. jpegpng、ai、svgなど画像のファイル形式のちがいと使用方法】

【3. 画像の書き出しサイズの決め方】