※回答一覧

 出題者   カテゴリ   作成日

浅野　桜		 デザイン　－鉄則と時短テクニック担当 2015-12-28 11:55:01
 問題   ヒント   回答数 
■より効率的に素早く画像を書き出す方法

WebデザインをPhotoshopやIllustrator、Fireworksなどでまず制作をする方は多いと思います。
Photoshopで作成したWebデザインは1枚の画像ファイルとなり、そのままの状態ではWebページには使えません。画像として利用する領域をバラバラに書き出す作業が必要になります。

そこで問題です。

1. バナーやWeb用の画像の書き出し(jpegやpng,gifなど)を行う際に、注意していることはありますか?
2. どのようなツールのどの機能を使って画像書き出しを行っていますか?		 5

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
0 yukko
1. バナーやWeb用の画像の書き出し(jpegやpng,gifなど)を行う際に、注意していることはありますか?
ファイルサイズを大きくし過ぎないこと

2. どのようなツールのどの機能を使って画像書き出しを行っていますか?
Fireworksのスライスツールを使って書き出し		 銅 (浅野　桜)
やはり皆さん、重さには気を使われるようです。拡張子ごとに向いている絵柄や特性などの違いもあるので、注目してみましょう！
0 kamino
1.
画質、重さ、色味などをとくに注意しています。
出来るだけキレイで軽いとなお良いと思います。

2.
Fireworks
バナーをつくるときに、色の濃淡がはっきりしているときは自動選択ツールでバサッと。
スライスツールで書き出したい画像を選択、とか。		 銅 (浅野　桜)
絵柄に合わせてツールを意識して切り分けていてGOODです。Fireworks はWebに特化したツールなので、サクッと切り出せるのもいいですよね！
0 鷲尾
1. バナーやWeb用の画像の書き出し(jpegやpng,gifなど)を行う際に、注意していることはありますか?
・画質
・カラーモード

画質については、画像サイズを極力軽くできるように画像によって最適化している。
カラーモードは必ずRGBで切り出す。


2. どのようなツールのどの機能を使って画像書き出しを行っていますか?
・Photoshopのスライスツール		 銅 (浅野　桜)
うっかりCMYkにしてしまうとせっかく作ったデザインが台無しですよね。カラーモードには気をつけましょう！画質の最適化はシビアなバナーなどでは必須ですね！
0 awk
〈1の答え〉
・ファイルサイズをなるべく小さくする。
・ファイルサイズを優先させ過ぎて、画像の劣化が目障りにならないように配慮する。
・管理しやすいようにファイル名にルールを設ける。

〈2の答え〉
Photoshopのスライスを使用し、書き出しで「Web用に保存を使用」しています。		 銀 (浅野　桜)
ファイル名について言及されていたのが大変良いと思いました。管理しやすい＝検索性などを考慮するような命名規則は簡単なようで難しいですよね。私も数字は001にしようか、01にしようか、1にしようか悩みます^^;
0 chichichi
1.ファイルサイズを必要以上に大きくしない(jpgは劣化があまりわからない程度に)。
2.Photoshop CCであれば、アセット機能をよく使っています。
・jpeg最高画質でも、web用保存と比べ軽くなる
・ファイル→web用に保存…としなくても書き出しされ、便利なため。		 金 (浅野　桜)
「アセット機能」は大変便利ですよね。現在のWebデザインのスタンダードな手法を活用されているとのことで、金に選ばせていただきました！