PhotoShopを使う前に準備すること
単位と定規の設定
画面上タブメニューから編集→環境設定→単位・定規で、「単位」と「文字」を「pixel」表記に直します。

そしたら、ビュー→定規を選択して定規を表示させます。

定規のところの下のスナップもチェックが入っていないようならチェックしておきましょう。ここにチェックが入っているとこの後述べるガイドやグリッドに合わせて選択や変形が行われるため便利です。
フリックパンとアニメーションズーム
同じく環境設定の一般タブから、アニメーションズームとフリックパンのチェックを外す。
フリックパンとは、携帯でスクロールした時のように、指が離れても慣性力で少し移動して止まるあの感じのこと。

グリッドとガイド
編集→環境設定→ガイド・グリッド・スライスで、グリッドの「グリッド線」を10pxに、「分割数」を2に指定します。10とか2は決まりではないですが、余りに細かいと見づらくなるのでこれくらいが良いかと思います。

グリッドは、ここを設定しさえすれば「Ctrl+@」で指定した幅のグリッドが表示されます。
ガイドのほうは新規ガイドボタンで作ってもよいですが、通常は定規の上にカーソルを当ててそこからドラッグして引きます。ガイドの表示・非表示切り替えは「Ctrl+;」です。
サイトの幅に合わせて最初にガイドを引くのは必須です。とはいえめんどくさいので、ガイドが設定されているPSDファイルを落としてそれを使うのがセオリーです。(DLサイト:960GridSystem)

上画像の、ピクセルグリッドにチェックが入っていると、ピクセルとピクセルの間に白い線が入る。気になるようならチェックを外す。
移動ツールのチェックボックス

操作パネルボタンから「移動ツール」を選んだら、
レイヤーを自動選択をチェック→これにより図形にカーソルを合わせればレイヤーが自動で選択されるようになります。
バウンティングボックスを表示にチェック→これにより選択されているレイヤーの周りに点線が表示されて、選択されていることがわかるようになります。
CS6は以下のようにドロップダウンリストからレイヤーを選んでチェックするようになった。

レイヤーコピー

レイヤーをコピーする時に、「~のコピー」と自動的に入らないようにするには、レイヤーパネル右上メニューからレイヤーパネルオプション→コピーしたレイヤーとグループに「コピー」を追加のチェックを外す。
フォント・シェイプ・パターン等の登録
フォントはWindowsであればゴシックかメイリオあたりが基本となりますが、一風変わった文字を使いたい場合はフリーのフォントをDL後、コントロールパネルのフォントフォルダにドラッグしてインストールする必要があります。
グラデーションやシェイプは自分で作って登録することはもちろんできますが、非常に手間なので、他の方が作ってくれたものをDL後、編集→プリセットマネージャから読み込みます。

パターンは自分で作成するか、これも他サイトからDLして、編集→パターン定義にて登録することができます。
いずれも、ホームページを作るのに便利なサイトからDLできます。
とりあえずはこんな感じで作成にしておいてから作成に移ります。
ショートカットを覚える
移動ツール | V |
テキストツール | T |
パスコンポーネント選択ツール | A |
長方形ツール | U |
描画色と背景色の入れ替え | X |
自由変形 | Ctrl+T |
ズームイン,アウト | Alt+マウススクロール Ctrl+± |
手のひら | Space |
レイヤー効果複製 | Alt+ドラッグ&ドロップ |
- 参考・引用元
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>