webサイト制作の勉強@迅

webサイト制作の基本やホームページ制作を学ぶ、webサイト制作の勉強@迅。webサイト制作に必要なイラストレーター|フォトショップ|Dreamweaver|HTML5|CSS3|javascript|jQuery|の基本を紹介しています。

photoshopデザインカンプ制作のための環境設定(cs6)

デザインカンプ制作におけるphotoshop環境設定

イラストレーターでのワイヤーフレーム制作同様、1pxにこだわる作業をしたいためピクセルベースの環境設定をフォトショップにおいてもやっていきたいと思います。

 

環境設定の単位をピクセルベースにする

①編集→環境設定→単位・定規→単位→定規をpixelに、文字をpixelに変更する

f:id:zinnteitan:20161101162422j:plain

②編集→環境設定→ガイド・グリッド・スライス→グリッド線を10px、分割数を10に変更する

f:id:zinnteitan:20161101162456j:plain

 

定規やグリッドを表示させる

③表示→表示・非表示→グリッドにチェックを入れる。

④次に、表示→エクストラにチェックを入れる。

これで、環境設定で指定したグリッド線が表示される状態となります。

さらに定規も表示させておくと便利なので、表示→定規にチェックを入れて、定規も表示させておきましょう。これで下記画像のような状態になると思います。

f:id:zinnteitan:20161101163014j:plain

 

環境設定以外で気をつけるポイント

⑤シェイプツールを使用する際は、エッジを整列にチェックを入れる。(シェイプの幅高さが小数点の時に発生する境界線のぼやけを防止するため。)

f:id:zinnteitan:20161101163728j:plain

⑥新規ドキュメント作成時、カラープロファイルをsRGBに。

 

f:id:zinnteitan:20161101163633j:plain

 

以上になります。

こちらでも分かりやすく解説されておりますので、ご参考までに。

blogs.adobe.com