*とりあえずPhotoshopからホームページを完成するまでの自分なりの手順

2014.8.27 0Comments Adobe Photoshop ◯◯の方法

本日これから自分のブログをサイトを作っていこうと思い自分の手順を書き綴って行きたいと思います。最終的にはデザインを販売できるところまでチャレンジしてみようと思います。

使ったソフトはこちら 無料体験版あり
photoshop CC あとDWも。

※この記事はあくまでも私個人的な作成方法であります。そこだけ予めご了承ください。

★1.まずphotoshopで基本の設定

環境設定からグリットをピクセル表示にする。

f:id:artcube-yoshida:20140510183021p:plain

「単位・定規」の個所をpixel表示で。

f:id:artcube-yoshida:20140510183157p:plain

次に「ガイド・グリッド・スライス」の個所のグリッド線と分割線を好みのものへ。

f:id:artcube-yoshida:20140510183345p:plain

さてファイルを新規作成します。

f:id:artcube-yoshida:20140510184035p:plain

まず私はコンテンツの大きさでサイズを決定します。この場合画面サイズはノートでも問題なく見えるように1280pxとして、ホームページのコンテンツの大きさは1200pxとして計ります。

まず1200pxで作成します。

f:id:artcube-yoshida:20140510184239p:plain

そしてレイヤー化にしてからサイズ変更で1280pxにします。

f:id:artcube-yoshida:20140510184413p:plain

そうすると、こんな感じでレイヤー個所と背景が分かれて、コンテンツ内でデザインが私個人的に使い易くなる訳です。

f:id:artcube-yoshida:20140510190354p:plain

f:id:artcube-yoshida:20140510184510p:plain

次にグリッドを設定しますが、一応2パターンの方法があり1つめは先ほど環境設定をしたもので整える方法から説明していきます。
表示 > 表示・非表示 > グリッドを選択しクリックします。

f:id:artcube-yoshida:20140510184904p:plain

そうするとこのようにグリッドが出てきます。簡単な方法です。キーボードの「command」+「@」で切り替えることができます。

f:id:artcube-yoshida:20140510185020p:plain

次の方法はレイヤーでグリッドを表示させる方法ですが少々面倒です。しかし私は上記のグリットの色が苦手なのでパターン化をレイヤーにして使っています。

まずグリットをここからダウンロードします。そして解凍します。
http://www.premiumpixels.com/freebies/20-seamless-photoshop-grid-patterns

f:id:artcube-yoshida:20140510185447p:plain

解凍したら、このパターンのオブジェクトをクリックしてPhotoshopに読み込みます。

f:id:artcube-yoshida:20140510185644p:plain

「command」+「A」で全体を選択して、塗りつぶしツールからパターン化を選択して先ほどのグリッドを選択します。そうするとこんな感じでさっきより見やすくないですか??

f:id:artcube-yoshida:20140510190545p:plain

f:id:artcube-yoshida:20140510190551p:plain

以上で基本設定は終わりなので任意の名前で保存して下さい。

★デザインを作る。
デザインは経験ですよね、私のじじいセンスではかっこいいものができないと思ったときかっこいいサイトをみて歩くのが一番です。ここでは私のブクマの一部をご紹介

イデアが浮かんだらPhotoshopで作成していきます。ウェブの基本構造を設定します。レイヤーからフォルダを新規作成して好きな名前をつけて下さい。

f:id:artcube-yoshida:20140510192358p:plain

フォルダを色別にしてわかり易くしておくのもいいでしょうね。

f:id:artcube-yoshida:20140510192457p:plain

こんな感じになりました。

f:id:artcube-yoshida:20140510192733p:plain

シェイプを利用してヘッダーを作成していきます。まずレイヤーのヘッダーをクリックして、パレットから図形四角を選択します。この時にストロークは0pxまたは指定なしにして下さい。
f:id:artcube-yoshida:20140510193348p:plain

 

基点となる部分をクリックします。基点から右と下へ図形を作成します。

f:id:artcube-yoshida:20140510193508p:plain

サイズをコンテンツの指定内通りに指定します。この場合1200pxと縦を40pxにします。

f:id:artcube-yoshida:20140510193611p:plain

以上です。そうするとヘッダーのフォルダの中にこんな感じで仕上がると思います。

f:id:artcube-yoshida:20140510193827p:plain

だいたいコツはわかったと思いますので、まず各部品の配置をこれでしていきます。各部品ごとにざっくりとしたレイアウトを作成します。

f:id:artcube-yoshida:20140510202213p:plain

とりあえずはヘッダーやロゴの部分を作ってみます。

f:id:artcube-yoshida:20140510220148p:plain

一応こんな感じのものが完成したとします。これをウェブ用の画像に保存する方法はいろいろありますが、基本的な方法としてスライスを使った保存をしてみたいと思います。まず最初にレイアウトを決めたときに作成したレイヤーを選択します。

f:id:artcube-yoshida:20140510220422p:plain

レイヤー > レイヤーに基づく新規スライスを選択するとスライスされます。

f:id:artcube-yoshida:20140510225442p:plain

次にメニューから「ウェブ用に保存」を選択して下さい。

f:id:artcube-yoshida:20140510224341p:plain


左側のスライスをマークを選択します。次に右側から保存形式を選択します。今回はPNGの背景を透明しています。これで保存をクリックします。

f:id:artcube-yoshida:20140510224722p:plain


保存先と保存方法についてきかれますので、とりあえず指定通りに保存して下さい。そうするとスライスした個所が全て切り抜かれて保存されます。

f:id:artcube-yoshida:20140510225114p:plain

ちなみに、選択したスライスだけ保存したいときは保存時に以下の個所を選択して下さい。

f:id:artcube-yoshida:20140510225223p:plain

以上ですがPhotoshopのこれが基本的な操作です。
一つずつ部品を作っていき全体のイメージを完成させます。

f:id:artcube-yoshida:20140511015149p:plain


とりあえずは以上でデザインは作り終えました。次はスタイルシートとHTMLですが基本的なことは省いて、私の方法で説明していきます。

スタイルシートの「reset.css」はここからダウンロードして使っています。
html5doctor.com
http://html5doctor.com/html-5-reset-stylesheet/
私の場合はダウンロードしたファイルに「clearfix」を付け足しています。

/* ---------------------------------------------
.clearfix
--------------------------------------------- */
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;} 

とりあえず、Photoshopで作ったレイアウトと同じ雛形をコメントしたスタイルシートを作ります。

そして次にレイアウトとCSSを作成します。ついでにスマホでも見れるようにレスポンシブデザインにしておきます。

CSSサンプルコード

/* CSS Document */
@charset "utf-8";
/* さっきのリセット用スタイルシートを読み込む */
@import url(style_reset.css);
/* ---------------------------------------------
.clearfixを追記
--------------------------------------------- */
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* ---------------------------------------------
float (あらかじめクラスにしておく)
--------------------------------------------- */
.left {float: left;}
.right {float: right;}
/* ---------------------------------------------
.body  a table
--------------------------------------------- */
body {font:14px/1.5 "Lucida Sans Unicode", "Lucida Grande","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","MS Pゴシック","MS PGothic",Sans-Serif;margin: 0;padding: 0;color:#333;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
ol, ul {list-style: none;}
a{margin:0;padding:0;text-decoration:none;outline:0;vertical-align:baseline;
color:#3192FF;
}
a:hover, a:active{outline: none;
color:#5c3d06;
}
a img:hover{opacity:.8;}
とスタイルシートにいろいろ書いて終わり。あとはお好きにどうぞ。