このPhotoshopのwebデザインチュートリアルでは、Photoshopでスマッシング、クリーン、プロのwebサイトのレイアウ 私たちは、このチュートリアルでやっているレイアウトは、個人や企業のウェブサイトのデザインとして使用することができます。 このデザインは非常にユーザーフレンドリーなので、あなたのサイトの評判に最適なはずです。
更新: これは、Photoshopでレイアウトを作成する方法と、標準に準拠した（X）HTML webデザインに変換する方法を教える2部構成のシリーズの最初の部分です。
“クリーンでプロフェッショナルなWebデザイン”シリーズ
- パート1:PhotoshopでクリーンでプロフェッショナルなWebデザインを作成
- パート2:クリーンでプロのWebデザイ あなたは下の画像の最終的なプレビューを見るか、フルサイズのバージョンについてはここをクリックすることができます。
Photoshopドキュメントを準備する
1次の画像の設定を使用してPhotoshopで新しいドキュメントを作成します(Ctrl/Cmd+N)。
単位と定規の設定
2webデザインの標準固定単位であるピクセル単位で作業していることを確認してください。
環境設定ダイアログウィンドウ(Ctrl/Cmd+K)から定規の次の設定を設定します。Units&Rulersをクリックし、下の図に示すようにすべてが設定されていることを確認してください。
コンテンツ領域を指定するためのガイドを追加する
3ビュー>ルーラーからPhotoshopルーラーを有効にします。
“Ctrl/Cmd+R”を押して定規の表示を切り替えます。
また、ウィンドウ>情報から情報パネルを開きます（ショートカットキー：F8）。
情報パネルは、選択したツールに応じて有用な情報を提供します。
“M”を押して、長方形のマーキーツールを選択し、キャンバスの左隅から幅120pxのボックスを作成します。 サイズを調整するには、選択中に情報パネルを調べます。
左のルーラーをクリックし、下の画像に示すように、マーキー選択範囲の右側にガイドをドラッグします。
4この選択範囲をキャンバスの右端に移動します。 選択範囲の左側に別のガイドを割り当てます。キャンバスは次のようになります。
ロゴの作成
5次に、ウェブサイトのロゴを作成します。
ロゴは非常にシンプルになり、色のグラデーション効果があります。 新しいグループ（レイヤー>新しい>グループ）を作成し、”logo”という名前を付けます。
6水平タイプツール(T)を選択し、”SMASHING”(またはウェブサイトの名前)を大文字で入力します。
7文字パネルで、フォントをArialに、スタイルを太字に、サイズを42ptに設定します。 また、anti-aliasing methodオプションをSharpに設定し、color#101112を使用します。
タイプツールがアクティブなツールの場合は、オプションバーでこれらのオプションを設定することもできます。
8ダブルクリックしてレイヤースタイルダイアログボックスを開きます。 グラデーションオーバーレイを選択し、グラデーションエディタをクリックし、以下に示すように設定を使用します。
9″スマッシング”タイプのレイヤーを上から35px、左ガイドから0pxの距離に置きます。 これは、移動ツール（V）と矢印キーを使用して正確に行うことができます。 このタイプのレイヤーを複製します(Layer>Duplicate Layer)。複製されたレイヤーを”SMASHING”という単語のすぐ隣に移動し、テキストを”Dzine”に編集します。 ステップ6、7、8を繰り返しますが、”Dzine”という単語には異なるグラデーション色（左の色停止：#b27625、右の色停止：#e5ad27）を使用します。
10水平タイプツール(T)を選択し、以下の設定でロゴの下にタグラインを追加します。
11最終的なロゴは下の画像のようになります。ガイドを有効/無効にするには、表示>表示>グリッドに移動するか、ショートカットCtrl/Cmd+を使用します ;
ナビゲーションバーの作成
12新しいグループを作成し、”navigation”という名前を付けます。 ガイドを上のルーラーから、キャンバスの上端の150px下にドラッグします。 長方形ツール（U）を選択し、キャンバス全体に#e3ab27の色で高さ4pxの水平線を描画します。
13この水平線から12pxの高さにナビゲーションリンクを追加し、左ガイドの右側に20pxを追加します。
角丸矩形ツール(U)を選択し、72px x35pxのサイズのボックスを描画します。 このレイヤーをテキストリンクの下に移動し、レイヤーに”ホバー”という名前を付けます。
ポイント変換ツールを使用して、下の丸い角をまっすぐにします。 不均一なエッジの側面を8pxのマージンで下に移動して、エッジを下の他の内側のエッジと等しくします。
“ホバー”レイヤーをダブルクリックしてレイヤースタイルダイアログボックスを開き、グラデーションカラーを追加します（左の色停止：#e5ad27、右の色停止：#b27625）。 水平タイプツール（T）を選択し、テキスト、”ホーム”を選択し、#ffffff（白）に色を変更します。
“call us”セクションの作成
14次に、デザインの右上（ロゴの正反対側）に”call us”セクションを作成します。
この携帯電話のアイコンをダウンロードし、右のガイドの近くにこれを配置します。 このレイヤーに”電話アイコン”という名前を付けます。 水平タイプツール(T)を選択します。
フォントArialを使用して電話アイコンの左側に電話番号を追加し、サイズを20pt、色#292929に設定します。
電話番号の下に関連するテキストを追加するには、フォントArialを太字に設定し、サイズは11pt、色は#595959に設定します。
ヘッダーの作成
15ここでは、ヘッダーセクションの作成に行きます。 新しいグループを作成し、”header”という名前を付けます。
16矩形ツール(U)を選択し、1200px x440pxのサイズの矩形形状を作成します。
この長方形をナビゲーションバーの下に1pxの距離に置き、このレイヤーに”header bg”という名前を付けます。 “Header bg”レイヤーをダブルクリックし、グラデーションオーバーレイレイヤースタイルを選択し、グラデーションエディタでこれら二つの色を持っています（左の色停止：#2e2226、右の色停止：#7a7556）。
長方形の位置と色の詳細については、下の画像を参照してください。
17長方形ツール(U)から960px x360pxのサイズの別の長方形を作成します。この長方形を”header bg”レイヤーの上部から40px、左ガイドから0pxの距離に置きます。 このレイヤーの名前を”ヘッダーコンテナ”にします。 私たちはデザインで今までやっていることの下にプレビューします。
“注目プロジェクト”セクションの作成
18次に、注目プロジェクトセクションを作成します。 ヘッダーグループ内に新しいグループを作成し、”fp”という名前を付けます。 長方形ツール（U）を選択し、ヘッダーコンテナの上部と左側から10pxの距離で630px x340pxのサイズの長方形を作成します。
このレイヤーの色を#000000にし、”fp container”という名前を付けます。
19Photoshopで画像を開き、注目のプロジェクトとしてここに配置します。 すべてを選択（Ctrl/Cmd+A）、編集（Ctrl/Cmd+C）に移動します。“fpコンテナ”レイヤーの上に新しいレイヤーを作成し、編集>貼り付け（Ctrl/Cmd+V）に移動して、注目のプロジェクトイメージに貼り付けます。 このレイヤーの名前を”fp image”に変更します。 “Fpイメージ”レイヤーを右クリックし、クリッピングマスクの作成を選択します。
今、画像は長方形（”fpコンテナ”）の内側にのみ表示されます。
注目のプロジェクトイメージが以下のようになるように調整します。
20編集>変換>スケールCtrl/Cmd+Tに移動します。 オプションバーから、回転ボックスをクリックして-4と入力し、enterキーを2回押して角度を調整します。同じレイヤー（”fp画像”）に滞在し、このレイヤーのブレンドモードとして明るさを選択します。
21次に、注目のプロジェクトイメージのタイトルと説明バーを作成します。 長方形ツール（U）を選択し、カラー＃161718を使用して630px x90pxのサイズの長方形形状を作成します。このレイヤーの不透明度を90%に変更し、”title bg”という名前を付けます。 下の画像に示すように、この四角形を配置します。
22color#9c9c9cを使用して630px x1pxのサイズの別の矩形を作成し、”タイトル水平線”という名前この長方形を”title bg”レイヤーのコンテンツの上端に配置します。
23手順21で作成した四角形の内側にタイトルと説明を追加します。タイトルの
:
- フォント:Arial、色:#ffffff、サイズ:25ptおよびアンチエイリアシング方法オプション:説明のためのSharp
:
- フォント:Arial、色:#a4a4a4、サイズ:12ptおよびアンチエイリアシングメソッドオプション: なし
“クイッククォート”セクションの作成
24ヘッダーグループ内に別のグループを作成し、”クイッククォート” 長方形ツール（U）を選択し、300px x340pxのサイズの長方形を作成します。 注目のプロジェクトセクションの右側に10pxの距離にこの長方形を配置し、”qqコンテナ”という名前を付けます。
25前のステップで作成した別のレイヤーからレイヤースタイルをコピーします。
“ナビゲーション”グループ内に移動し、”ホバー”レイヤーを右クリックし、レイヤースタイルのコピーを選択し、”qqコンテナ”レイヤーに戻り、右クリックしてレイヤースタイ 私たちは今、私たちの”qqコンテナ”のための”ホバー”層の同じレイヤースタイルを持っています。
26 水平タイプツール(T)を選択します。
“qq container”の中に”Quick Quote”と書いて、包含ボックスの上端と左端から20pxの距離に置きます。 フォントファミリをTrebuchet MS（またはお好みのwebセーフフォント）に設定し、白の色（#ffffff）とアンチエイリアシングメソッドオプションをSharpに設定します。 Rounded Rectangleツール（U）を使用して、3つのフォームフィールドを作成します。
角丸矩形ツール(U)を選択し、半径を3pxに設定します。 次に、白（#ffffff）の色を使用して、サイズが260px x35pxの2つの角丸長方形を作成します。 次に、シェイプレイヤーにそれぞれ”field1″と”field2″という名前を付けます。
白い色(#ffffff)を使用して260px x75pxのサイズの3番目の角丸矩形を作成し、”field3″という名前を付けます。 水平タイプツール(T)を選択し、各フォームフィールドのラベルを作成します。
27角丸矩形ツール(U)を選択し、80px x35pxのボックスを作成し、”submit btn”という名前を付けます。28レイヤーをダブルクリックしてレイヤースタイルダイアログウィンドウを開き、左からグラデーションオーバーレイチェックボックス
グラデーションエディタをクリックし、以下のようにグラデーションの色を変更します。
29 水平タイプツール（T）を選択し、フォントArial、スタイル太字、13ptのサイズを使用して”Submit”と入力します。 レイヤーパネルで両方のレイヤーを選択します（”btnを送信”と”テキストを送信”）。
30ツールパネルから移動ツール(V)を選択し、オプションバーから垂直中心の整列と水平中心の整列をクリックします。
（または、レイヤー>整列>垂直中心とレイヤー>整列>水平中心に移動することで同じ結果を得ることができます）。
メインコンテンツエリアの作成
31新しいグループを作成し、”content”という名前を付けます。 長方形ツール(U)を選択します。
300px x175pxの長方形を作成し、”c01″という名前を付けます。 このレイヤーをヘッダーの下に30px、左側のガイドから0pxに配置します。 レイヤーをダブルクリックし、次の画像の設定を使用します。
32 私たちは今、このボックスにコンテンツを追加しようとしています。 水平タイプツール（T）を選択し、”About SmashingDzine”というテキストを追加します。 水平タイプツール（T）を使用して”About”という単語を選択し、その色を#b47825に変更します。
次に、”Smashing”という単語を選択し、色を#2f2f2fに変更します。 タイトル、説明、リンクテキストには、次のオプションが使用されました。
(必要に応じてこれらのオプションを調整できます)。
を作成します:
- フォント:Trebuchet MS、スタイル:ノーマル、サイズ:24pt、アンチエイリアシング方法:Sharp
説明用:
- フォント:Arial、スタイル:ノーマル、サイズ:12pt、アンチエイリアシング方法:なし、カラー: #767676
リンクテキストの場合:
- フォント:Arial,スタイル:太字,サイズ:13pt,アンチエイリアシング方法:なし,色:#252525,下線
33 ここで、説明の横に正方形のボックスを追加します。 長方形ツール（U）と色＃ffffffを選択し、shiftキーを押したまま比率を維持し、サイズが88px x88pxの正方形を作成します。 この正方形を長方形（”c01″）の左から10pxの距離に移動します。
このレイヤーに”境界線”という名前を付けます。 レイヤーをダブルクリックしてレイヤースタイルダイアログウィンドウを開き、次の設定でストロークレイヤースタイルを追加します。
34 82px x82pxのサイズの別のボックスを作成し、それを”境界線”レイヤーの中央に配置します。 このレイヤーに”ボックス”という名前を付け、この正方形の色を#d5d5d5に変更します。
このグループ内のすべてのレイヤー（”コンテンツ”グループ）を選択し、レイヤーからレイヤー>新しい>グループに移動し（Ctrl/Cmd+G）、この新しいグループの名前を”about”に変更し
メモ: 中の灰色の正方形箱はイメージのためのプレースホルダーで、あなたの選択のあらゆるイメージと取り替えることができる。35″about”グループを複製し(グループを右クリックして”Duplicate Group”を選択)、”services”という名前を付けます。 「サービス」グループを右クリックし、「グループの複製」を再度選択し、「portfolio」という名前を付けます。
現在、三つのグループ（”about”、”services”、”portfolio”）があります。 下に示すように、最後のグループ（”ポートフォリオ”）を右のガイドに移動します。
36レイヤーパネルで三つのグループすべてを選択し、レイヤー>分散>水平中心に移動して、それらを均等に配置します。以下の画像のフルサイズの画像を見るにはここをクリックしてください。
37″サービス”グループ（中央）と”ポートフォリオ”グループ（右）のタイトルを以下のように変更します。 （あなたの条件に従ってこれらのタイトルを変えることができます。)
フッターの作成
38新しいグループを作成し、”フッター”という名前を付けます。
長方形ツール（U）を選択し、デザインレイアウトの下部に1200px x100pxのサイズの長方形を作成します。 このレイヤーに”フッター bg”という名前を付けます。 “Header bg”レイヤーを右クリックし、”レイヤーのスタイルをコピー”を選択して、”header bg”レイヤーと同じグラデーションオーバーレイスタイルを使用します。
フッターグループに戻り、”フッター bg”レイヤーを右クリックし、レイヤースタイルを貼り付けを選択します。
39水平型ツール(T)を選択し、フォントArial、サイズ12pt、灰色(#dddddd)を使用して、左側に著作権テキストとフッターリンクテキストを追加します。 
40 私たちは、右側の電子メールサブスクリプションのセクションを追加しようとしています。
“footer”グループ内に新しいグループを作成し、”subscribe”という名前を付けます。 角丸長方形ツール(U)を選択し、85px x35pxの長方形を作成します。 このレイヤーに「subscribe btn」という名前を付けます。
41フォームフィールドとラベルを追加するには、手順26を繰り返します。
42水平型ツール(T)を選択し、フォントArialを使用して”Subscribe”と入力し、スタイルを太字に設定し、サイズを13ptに設定します。
両方のレイヤーを選択します（”btnを購読する”と”テキストを購読する”）。
43subscribeボタンを作成するために、ステップ28を繰り返します。
44角丸矩形ツール(U)を選択し、半径を3pxに設定します。 白い色（#ffffff）を使用してサイズ210px x35pxの角丸長方形を作成し、このシェイプレイヤーに”電子メールフィールド”という名前を付けます。 “電子メールフィールド”の上にテキスト行を追加します。
最終結果
OK、それだけで終わりです。 これが最終結果です。
下の画像をクリックすると、フルサイズのレイアウトが表示されます。 私のチュートリアルと一緒に次のためのおかげで。 私はあなたのすべてを楽しんで、このチュートリアルから何か新しいことを学んだことを願っています。
以下のコメントを残して、あなたの考えや意見を共有してください、私はそれらを聞いてみたいと思います。 あなたはそれが彼らに役立つかもしれないと思う場合は、また、お友達にこのデザインのチュートリアルを共有することができます！
ソースファイルのダウンロード
このチュートリアルのPhotoshopファイル（PSD）は、以下のリンクからZIPアーカイブとしてダウンロードできます。
- clean-professional-weblayout(ZIP,2.4MB)
概要
このデザインを使用する場合は、読み込み時間を短縮するために画像を最適化してください。 これは、シンプルで使いやすく、ユーザーフレンドリーなので、ゴルフコースのような小さなサイトに最適である必要があります。
関連コンテンツ
- Photoshopできれいなブログデザインを作成する方法
- きれいなウェブをコーディング2.フォトショップから0スタイルのWebデザイン
- Photoshopで滑らかでミニマリストのWebレイアウトを作成
著者について
Waheed Akhtarはドバイ、アラブ首長国連邦 彼は彼がインスピレーションのためのデジタルアート、グラフィックデザイン、イラスト、写真やタイポグラフィの異なる創造的なリソースを展示ブー あなたはTwitterやFacebook経由で彼に到達することができます。