本日これから自分のブログをサイトを作っていこうと思い自分の手順を書き綴って行きたいと思います。最終的にはデザインを販売できるところまでチャレンジしてみようと思います。
使ったソフトはこちら 無料体験版あり
■photoshop CC あとDWも。
※この記事はあくまでも私個人的な作成方法であります。そこだけ予めご了承ください。
★1.まずphotoshopで基本の設定
環境設定からグリットをピクセル表示にする。
「単位・定規」の個所をpixel表示で。
次に「ガイド・グリッド・スライス」の個所のグリッド線と分割線を好みのものへ。
さてファイルを新規作成します。
まず私はコンテンツの大きさでサイズを決定します。この場合画面サイズはノートでも問題なく見えるように1280pxとして、ホームページのコンテンツの大きさは1200pxとして計ります。
まず1200pxで作成します。
そしてレイヤー化にしてからサイズ変更で1280pxにします。
そうすると、こんな感じでレイヤー個所と背景が分かれて、コンテンツ内でデザインが私個人的に使い易くなる訳です。
次にグリッドを設定しますが、一応２パターンの方法があり１つめは先ほど環境設定をしたもので整える方法から説明していきます。
表示 ＞ 表示・非表示 ＞ グリッドを選択しクリックします。
そうするとこのようにグリッドが出てきます。簡単な方法です。キーボードの「command」＋「＠」で切り替えることができます。
次の方法はレイヤーでグリッドを表示させる方法ですが少々面倒です。しかし私は上記のグリットの色が苦手なのでパターン化をレイヤーにして使っています。
まずグリットをここからダウンロードします。そして解凍します。
http://www.premiumpixels.com/freebies/20-seamless-photoshop-grid-patterns
解凍したら、このパターンのオブジェクトをクリックしてPhotoshopに読み込みます。
「command」＋「A」で全体を選択して、塗りつぶしツールからパターン化を選択して先ほどのグリッドを選択します。そうするとこんな感じでさっきより見やすくないですか？？
以上で基本設定は終わりなので任意の名前で保存して下さい。
★デザインを作る。
デザインは経験ですよね、私のじじいセンスではかっこいいものができないと思ったときかっこいいサイトをみて歩くのが一番です。ここでは私のブクマの一部をご紹介
アイデアが浮かんだらPhotoshopで作成していきます。ウェブの基本構造を設定します。レイヤーからフォルダを新規作成して好きな名前をつけて下さい。
フォルダを色別にしてわかり易くしておくのもいいでしょうね。
こんな感じになりました。
シェイプを利用してヘッダーを作成していきます。まずレイヤーのヘッダーをクリックして、パレットから図形四角を選択します。この時にストロークは0pxまたは指定なしにして下さい。
基点となる部分をクリックします。基点から右と下へ図形を作成します。
サイズをコンテンツの指定内通りに指定します。この場合1200pxと縦を40pxにします。
以上です。そうするとヘッダーのフォルダの中にこんな感じで仕上がると思います。
だいたいコツはわかったと思いますので、まず各部品の配置をこれでしていきます。各部品ごとにざっくりとしたレイアウトを作成します。
とりあえずはヘッダーやロゴの部分を作ってみます。
一応こんな感じのものが完成したとします。これをウェブ用の画像に保存する方法はいろいろありますが、基本的な方法としてスライスを使った保存をしてみたいと思います。まず最初にレイアウトを決めたときに作成したレイヤーを選択します。
レイヤー ＞ レイヤーに基づく新規スライスを選択するとスライスされます。
次にメニューから「ウェブ用に保存」を選択して下さい。
左側のスライスをマークを選択します。次に右側から保存形式を選択します。今回はPNGの背景を透明しています。これで保存をクリックします。
保存先と保存方法についてきかれますので、とりあえず指定通りに保存して下さい。そうするとスライスした個所が全て切り抜かれて保存されます。
ちなみに、選択したスライスだけ保存したいときは保存時に以下の個所を選択して下さい。
以上ですがPhotoshopのこれが基本的な操作です。
一つずつ部品を作っていき全体のイメージを完成させます。
とりあえずは以上でデザインは作り終えました。次はスタイルシートと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 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;} とスタイルシートにいろいろ書いて終わり。あとはお好きにどうぞ。
