初心者から始めるPhotoshopでWEBデザインその①

どうもこんにちは。 WEBデザイナー・ディレクターのやったんです。

今日は、初心者・未経験から始めるPhotoshopデザインについて紹介していきたいと思います。
複数回に分けて、Photoshopで作るWEBデザインの基本を見ていきたいと思います。

※Photoshopは最新版を使用してください(執筆時のバージョンはCS6)。記事では、Mac OS Xを基本に解説しています。ショートカットは、「command(Ctrl)」のように、Windowsの場合を括弧内で表記しています。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!

WEBデザインの準備をしよう

1.環境設定をしよう

まず始めに環境設定を開いてください。上部メニューの[Photoshop]から[環境設定][一般]と開いていってください。

環境設定の画面が開きますので、左のメニューから[単位・定規]を選択します。そうすると上記の画面が出てきます。ここで[定規]を[pixel]として[文字]を[point]としてください。


次にまた左メニューから[ガイド・グリッド・スライス]を選択しますと上記画面になります。画面の中央あたりに[グリッド]の設定箇所がありますので、[スタイル]を[破線]にします。
次に[グリッド線]を[1]pixelに設定し、その下の[分割数]を[1]とします。こうすることで、1pixelの線がキャンバスに表示できるようになります。
WEBデザインでは、1px(pixel)を非常に沢山使いますので、作っていくときに最初に設定することで線を引いたり、図形や写真の位置を合わせる際に非常に便利になります。

2.キャンバスを作ろう

環境設定が完了したら、photoshopの上部メニューから[ファイル] [新規]と開いていきましょう。そうすると上部のように新規のキャンバス設定画面が出てきます。

ここで画面サイズを決めます。おすすめのサイズは、[幅]を[1400]pixelとして[高さ]を[5000]としておきます。(6000でもよいです。後から変更もできますので)
その他の設定は、デフォルトでOK。[解像度]が[72]pixel/inchになっていることは確認しておいてください。それでOKと押してください。すると、画面に白いキャンバスが出てくるのが確認できると思います。

3.ガイドを引いておこう

次にキャンバスにガイドを引いていきます。ガイドを引くことで、デザインの横幅や位置がずれなくなりますので、絶対にやっておきましょう。

まず画面左端にある定規の上にカーソルを合わせてクリックします。そしてクリックしたまま、右にスライドしていくとガイドの表示が出てきます。[x:100]とか出ますので、ここでは3本のガイドを引きます。[x:100]と[x:700]と[x:1300]の位置にそれぞれ引きます。1回ずつ左の定規からクリックして引っ張ってきてください。

3本のラインが引けたと思います。このガイドが意味するのは、左と右のガイドの内側部分が1200pxとなってコンテンツの幅となります。僕がデザインするときは、基本横幅を1200pxとしています。1000pxの時もありますし、1400pxの時もありますが、だいたい1200pxが一番多いです。左右の100pxは余白(マージン)としてとっておいています。

真ん中の700pxの位置にあるガイドは、コンテンツの中心線です。これがあると図形や写真の中心位置が簡単に合わせられます。

4.グリッド線を表示しよう

ここまで来たらもうあと1歩で準備完了です。最後に「command(Ctrl)」+「@」を押すとキャンバスに1pxのグリッド線が表示されます。もう一度「command(Ctrl)」+「@」を押すと非表示になります。上部メニューの[表示]の[エクストラ]からも同様の操作ができますが、よく使うのでショートカットに慣れておきましょう。(ショートカットに慣れておくと、格段に作業が早くなりますので)

以上で、PhotoshopでのWEBデザインの準備は完了です。
いかがでしょうか、ここまではほぼ全てのWEBデザインを作る際に僕が実際にやっている手順ですので、ぜひ皆さんも覚えておいていただけると良いかと思います。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!


スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク