これからをもっと自由に生きるために! | LIFE CAMPER(ライフキャンパー)

【初心者向け】はじめてPhotoshopでWebデザインを始めるときの設定

Webサイトのデザインには何を使っていますか?
Photoshop・illustrator・XD…いろいろなツールがありますが、僕はAdobe Photoshopを使うことが多い。みんな大好きフォトショ。

今回は、PhotoshopでWebデザインをする前に、必ずやっておく設定をご紹介。

PhotoshopでWebデザイン 3つの設定

単位をピクセル(pixel)に

Webデザインの場合、単位はピクセル(pixel)に統一。
Photoshopを開いたら、上部メニューから「編集 > 環境設定」へ。

環境設定を開いたら、左の「単位・定規」を開き、下のように単位を「pixel」に統一。

グリッド線を調整

次に、同じ環境設定の「ガイド・グリッド・スライス」で、グリッド線を10pixelに変更。
ただ、ここは目指すデザインよって変わるところなので、好みに合わせて設定して欲しい。

ちなみにグリッドとは、アートボード状に表示される格子状の線のこと。
コイツを表示しておくと、オブジェクト間の間隔も見やすくなる。
(グリッドを表示するには、上部メニューの「表示 > 表示・非表示 > グリッド」)

レイヤーの『〜のコピー』をつけさせない

個人的にはココが意外と重要

Webデザインを進めていくと、レイヤーをコピーして再利用することがよくあるんだけど、こんな風に「のコピー」が自動的に付いてくる。
気にならない人はそのままでいいけど、せっかくなので『〜のコピー』をつけさせない方法をご紹介。

レイヤーのパネルオプション

Photoshopを開いた状態で、レイヤーパネル右上をクリックして「パネルオプション」を開く。(下の赤線で囲ってあるところ)

「パネルオプション」を開いたら、一番下の『コピーしたレイヤーとグループに「コピー」を追加』のチェックを外してOK。

これで、レイヤーをいくつコピーしても「〜のコピー」がつかなくなる。

まとめ

以上、Photoshopで初めてWebデザインをする前の3つの設定。
どうだったでしょう?

これからWebデザインを始める方は、一度この設定を試してみてはいかがでしょう。もちろん、この設定が全てではないので、自分流にアレンジして、デザインしやすい設定をぜひ見つけてほしい。

tips

こちらの記事もご興味あるかも!

プラグインはいらない - chromeで縦長のWEBページ全体をスクリーンショット
Macが起動しない。クリーンインストールで絶望から脱出。
Macのプレビューが便利。アイキャッチ画像も作成できる。