Photoshop CS6できれいでエレガントなブログのレイアウトをデザインする

このチュートリアルでは、そのプロセスを説明します。 シンプルできれいなデザインのブログを作る 最新のPhotoshopを使用する。私たちは新しいを使うつもりです 文字スタイル そして 段落スタイル プロセスを合理化するために.

このチュートリアルに従うには、以下のリソースが必要です。

• Bernd MontagからのフリーフォントSansation.
• PSDfreemiumからの26の反復可能なピクセルパターン.
• Daniele Selvitellaから無料のソーシャルメディアのアイコン.

• デモ

キャンバスを準備する

ステップ1

この設計では、フレームワークとして960 gsを使用します。メインページからzipファイルをダウンロードし、photoshopファイルを探します。 Photoshopで '12 Column Grid'ファイルを開く.

非表示にするには、12 Col Gridレイヤーの目のアイコンをクリックします。今のところ必要ないと思います.

ステップ2

現在のキャンバスサイズが小さすぎます。クリック 画像>キャンバスサイズ （またはCtrl + Alt + C）より大きなサイズを追加し、そのアンカーポイントを中心に設定してください.

ステップ3

支配者を明らかにするためにCtrl + Rを押してください。クリック 表示>新規 正確にデザインするのに役立つ新しいガイドを作成するためのガイド。選択する 垂直 そしてポジションで： 185ピクセル キャンバスの左上隅から垂直ガイド185ピクセルを作成する.

ステップ4

位置に別の垂直ガイドを描く 150ピクセル, 1095ピクセル そして 1130ピクセル.

以下はキャンバスの中の私達の最終的なガイドです.

色のテーマを準備する

ステップ5

このデザインでは、Colorlouverの素敵な色の組み合わせを使用します。プレビューリンクをクリックして、カラーコンビネーションをJPEGファイルとして開きます。.

色の組み合わせを保存して、それをPhotoshopファイル内に配置します。画像をキャンバスの中に直接配置することで、色をより早く簡単にサンプリングできます。.

背景を準備する

ステップ6

選択する バックグラウンド 層 レイヤーパネルの上部にあるロックアイコンをクリックしてロックを解除します。サムネイルをダブルクリックして色を変更します.

2色目をクリック, ＃948371, それを選択する.

ステップ7

キャンバスの上に長方形を描きます。これが2番目の背景になります.

ステップ8

図形を選択したままにします。の中に オプションバー, 開いた 塗りつぶし 色 ボックスをクリックしてから カラーホイールのアイコン. カラーピッカーダイアログボックスが開いたら、最初の色をクリックして選択します。そのために ストローク カラーセレクト 無し.

ステップ9

新しいレイヤーを作成してから、長方形のマーキーツールを使用して上部のキャンバスを選択します。有効にする グラデーションツール そして記入してください ラジアル 勾配 白から黒へ。グラデーションがキャンバスの上の中央にくるようにします.

その変更 ブレンド モード に 画面 そしてそれを減らす 不透明度 に 37％.

ステップ10

新しいレイヤーを作り、それに 'shadow'という名前を付けます.

図のように2次背景の下部に長方形の選択範囲を描きます。クリック 編集：塗りつぶし. セット つかいます に ブラック. クリック OK 選択範囲を黒で塗りつぶす.

ステップ11

ガウスぼかしを使って柔らかくします。クリック フィルタ>ぼかし>ガウスぼかし.

ステップ12

Altを押しながらカーソルを 影 そして 上の背景 層。 Altキーを離さずにクリックして レイヤーをクリッピングマスクに変換します. クリッピングマスクに変換することで、影は上部の背景の内側に入ります.

ステップ13

影を降ろす 不透明度 に 50％ 微妙にします。下の写真は、100％の倍率です。.

ステップ14

これらのレイヤーを1つのグループにまとめることは常に良い考えです。これをする, すべてのレイヤーを選択 Ctrl + G.

ヘッダ

ステップ15

図のように上のキャンバスに長方形を描きます.

ステップ16

の中に オプションバー, セット ストローク 色まで ＃af9f8e.

ステップ17

そのために 塗りつぶし 色、選択 線形グラデーション から ＃d0c4b9〜＃a89c91.

以下は100％表示の結果です。.

サイト名

ステップ18

デザインの左側にサイトの名前を追加します。下の図のように配置を確認してください。テキストをダブルクリックして追加 影を落とす. そのフォントにはSansationを使う.

メニュー

ステップ19

メニューバーの反対側にメニューを描画します。フォントSansation 14 ptを使用してください。繰り返しますが、プレースメントに注目してください.

ステップ20

アクティブメニューの場合は、フォントタイプを太字に設定します。.

ステップ21

有効にする 多角形ツール と設定 側面 に 3. で三角形を描く 塗りつぶし：＃3d3123 そして ストローク：なし. 追加する レイヤースタイル >ドロップシャドウ.

ステップ22

その下に行を追加してアクティブメニューを強調しましょう。有効にする 線ツール そしてその重みを 5ピクセル. 選択する ＃f76b6a その塗りつぶしのために、ストロークなし.

行をアクティブメニューの真下に置き、メニューバーの下部に1ピクセルスペースを追加します。.

文字スタイルを使う

ステップ23

文字設定を文字スタイルとして保存しましょう。この機能は、InDesignの文字スタイルを簡略化したものです。保存するには、テキストをアクティブにしてから[新しい文字スタイル]アイコンをクリックします.

新しい文字スタイルをダブルクリックして、次の設定を使用します.

ステップ24

他のメニューを選択してから、文字スタイルをクリックして適用します。文字スタイルの横にプラス記号がある場合は、その文字の設定が異なることを意味します。設定を上書きするには、円形の矢印アイコンをクリックします.

ステップ25

前の手順を繰り返して、アクティブメニューの新しい文字スタイルを作成します。.

ステップ26

それでは、文字スタイルを使用するポイントは何ですか？文字スタイルは、文字設定を一元管理するのに役立ちます。文字スタイルを編集するだけで、そのスタイルを使用してすべてのテキストを編集できます。下記の例をご覧ください。フォントスタイルを文字スタイル内で編集した場合 トップメニュー - ノーマル Corbelにすると、通常のメニューはすべて自動的にCorbelに変更されます。.

ステップ27

新しいレイヤーを作り、それをメニューバーの下に置きます。 Ctrlキーを押しながらメニューバーをクリックすると、その形状に基づいて新しい選択ができます。それを記入 黒.

ステップ28

Ctrl + Dを使用して選択を解除します ガウスぼかし, フィルタ>ぼかし>ガウスぼかし.

スライダー

ステップ29

幅10桁の長方形を描きます（下記参照）。.

そのために 塗りつぶしの色 選択する ＃dfd1c2. そのために ストローク 選択する ＃c8baac サイズあり 10ポイント. ラインプレビューの横にある小さなドロップダウン矢印をクリックして、 内側に揃える 選択されています.

ステップ30

フレームの上に絵を貼り付けます。に変換 クリッピングマスク Ctrl + Alt + Gを押すと、画像が自動的にスライダーフレームの内側に入ります。必要に応じて、フレームに影響を与えずに画像を移動してサイズを変更できます。.

ステップ31

同じ色でスライダーの後ろに別の長方形を描きます。必ず一番外側のガイドにはめ込みます。追加する レイヤースタイル>パターンオーバーレイ PSDfreemiumからのピクセルパターンを使用して。トーンダウン 不透明度 微妙にする.

ステップ32

以下の形の上に長方形を描きます。 塗りつぶし：＃b3aca5 そして ストロークなし. Ctrl + Tを押してから 45°回転させる. レイヤー形状をに変換 クリッピングマスク.

ステップ33

図形を複製してサイズを変更します。その変更 塗りつぶし より暗い色に。レイヤー形状をに変換 クリッピングマスク.

ステップ34

反対側に別の矢印を描くために同じ手順を繰り返します.

ステップ35

スライドフレームをCtrlキーを押しながらクリックして、新しい選択を行います。新しいレイヤーを作り、それをに変換する クリッピングマスク. で選択を埋める 黒.

ステップ36

次に選択解除（Ctrl + D） 柔らかくする それを使って ガウスぼかし.

必要に応じて影の不透明度を減らすことができます.

ステップ37

スライダーの角に丸みのある長方形を描く フィル＃c8baac.

ステップ38

図形の内側に円を描きます。その設定 ストローク に 黒 サイズあり 1ポイント そして 塗りつぶしを削除.

ステップ39

を選択 サークル パス使用 パス選択 ツール。 Shiftキーを押しながらAltキーを押しながらパスをドラッグして複製します.

さらに円を描くにはこれを繰り返します。.

ステップ40

サークルパスを1つ選択します。 Ctrl + Shift + Jを押して新しいレイヤーにカットします.

ステップ41

の中に オプションバー, その削除 ストローク そしてそれを変える 塗りつぶし へ ラジアル からの勾配 ＃e38989から＃bb5c5c. 追加する レイヤースタイル>外光 そして 影を落とす.

ステップ42

スライダーの下に楕円形の選択範囲を描きます。新しいレイヤーを作り、塗りつぶします 黒.

ステップ43

選択を解除します（Ctrl + D）。使って柔らかくする ガウスぼかし.

下の背景

ステップ44

下の背景に別の長方形を描きます。同じを使う 塗りつぶし そして ストローク スライダー形状としての色.

いつものように、その配置には細心の注意を払ってください。キャンバス上のすべてのガイドを網羅したい.

追加する レイヤースタイル>パターンオーバーレイ.

下は100％の倍率の結果です。.

ステップ45

長方形マーキーツールを使用して上部領域を選択します.

ステップ46

新しいレイヤーを作り、それをシェイプの後ろに置きます。で選択を埋める 黒. Ctrl + Tを押しながら右クリックして選択 展望.

上隅を外側にドラッグ.

もう一度右クリックして選択 規模. 上部ハンドルを下にドラッグ.

右クリックして選択 ワープ. 左右のセグメントを内側にドラッグ.

使って柔らかくする ガウスぼかし.

トーンダウン 不透明度 に 20％.

ステップ47

背景の中に白い長方形を描きます。これはサイトのメインコンテンツの背景となるでしょう。.

背景の左、右、上側に10ピクセルのスペースを追加します。我々は早い段階でガイドを作成したので、間隔は簡単であるべきです。追加する レイヤースタイル>外光.

ステップ48

図形の上側から25 pxの新しいガイドを追加します。.

セクションタイトル

ステップ49

ページセクションのタイトルとその説明に新しい文字スタイルを追加する.

タイプツールを使用してセクションのタイトルとその説明を追加します。以前に作成したスタイルを適用します。以前に作られたガイドの助けを借りて、背景の上側から25ピクセルのスペースを追加するようにしてください.

ステップ50

サイトの説明の下に5ピクセルの線を引きます。 塗りつぶし：＃938270 そして ストローク：なし.

ブログ投稿

ステップ51

投稿タイトルに別の文字スタイルを作成する.

ステップ52

投稿タイトルを追加して前の文字スタイルを適用する.

ステップ53

タイトルの下に幅4桁の長方形を描きます。セット 白 そのために 塗りつぶし そして #bebebe そのために ストローク. 追加する レイヤースタイル>ストローク.

ステップ54

図形の上に画像を貼り付けます。クリッピングマスクに変換する（Ctrl + Alt + G）.

ステップ55

角丸長方形を描く 塗りつぶし：＃8e8380 そして ストローク：なし. に変換 クリッピングマスク.

ステップ56

ブログメタデータ用に新しい文字スタイルを作成する.

ステップ57

図形の上にメタデータテキストを追加して、先ほど作成した文字スタイルを適用します。.

ステップ58

有効にする タイプ クリックしてテキストボックスを作成します。幅を4列に設定します。クリック Type> Paste Loremイプサム Photoshopから自動生成されたLorem Ipsumで埋めます。.

ステップ59

文字コンテンツに新しい段落スタイルを作成します。段落スタイルパネルの新しいアイコンをクリックします。.

段落スタイルをダブルクリックして、以下の設定を使用します。.

ステップ60

このスタイルを投稿コンテンツに適用します。また、インデントと間隔の設定を試すこともできます。.

Webデザインの場合は、ハイフネーションを無効にします.

ステップ61

角丸長方形を描く 塗りつぶし：＃8e8380 そして ストローク：なし. 追加する レイヤースタイル>パターンオーバーレイ. 一貫性を保つために、スライダーと同じパターンを使用してください。.

ステップ62

ボタンラベルを追加します。文字スタイルとして保存することをお勧めします。これにより、他のボタンにも簡単に使用できます.

ステップ63

前のボタンは通常の状態です。それを複製して色をに変えましょう。 ＃f76b6a. また、ラベルの種類を太字に設定します。.

ステップ64

投稿をグループ内に配置し、Ctrl + Jを押して複製します。 Altキーを押しながらグループを複製する.

さらに投稿するには、同じ手順を繰り返します。各投稿の写真とタイトルを変更することを忘れないでください.

ステップ65

複製する 続きを読む ボタンを押してラベルを数字に変更します。我々はそれをページナビゲーションのために使うつもりです。ボタンの1つをホバー状態に設定することを忘れないでください.

ステップ66：フッター

フッターの作業を始めましょう。ウィジェットのタイトルとその説明を追加する.

ステップ67

リンクを追加し、その下に1ピクセルの線を引きます。セット 塗りつぶし：なし そして ストローク：＃8e8380.

ステップ68

クリック より多くのオプション ボタンと選択 破線.

ステップ69

ウィジェットにさらにリンクを追加する.

ステップ70

ウィジェットを複製する.

ステップ71

ホバー条件も追加する必要があります。リンクの1つを太字に設定.

そのアクティブリンクの下に、5ピクセルの行を追加します。色を ＃f76b6a. 一貫性を保つために、このリンクの外観はメニューバーのアクティブメニューに似ています.

ステップ72

下部に別の長方形を追加します。その設定 塗りつぶし に ＃3d3123.

フッター情報

ステップ73

を使用してフッター情報を追加する タイプ ツール。暗くする 影を落とす 背景にコントラストを加える.

ソーシャルネットワーク

ステップ74

Daniele Selvitellaからソーシャルメディアのアイコンをいくつか追加。追加する レイヤースタイル>外光.

ステップ75

通常のアイコンを 50％. ホバー状態のために、ちょうどそのままにしましょう 不透明度 で 100％.

ステップ76

フリーハンドカーソルアイコンをつかみ、アクティブリンクまたはホバーリンクの上に最小のハンドカーソルを置きます。.

最終結果

これが私たちの最終結果です。最新のPhotoshopバージョンには、Webレイアウトをデザインするための興味深い機能がいくつかあります。文字スタイルと段落スタイルは、すべてのWebデザイナーにとって重要な改善点です。.

• デモ
• ソースをダウンロード