プログラマーとしての私の芸術の基礎は弱いです。設計能力を向上させるために、いくつかの成熟した Web PS チュートリアルを参照できます。文章を言い換えると、「唐の詩三百首を知っていれば、作り方を知らなくても暗唱できる」ということです。
このシリーズのチュートリアルはオンライン PS チュートリアルから来ており、すべて海外のもので、すべて英語です。これらの優れたチュートリアルを翻訳してみます。翻訳能力が限られているため、翻訳の詳細はまだ検討する必要があります。大部分のネチズンが私にアドバイスをくれることを願っています。
お約束:
1. この記事で使用しているソフトウェアはPhotoshop CS5バージョンです
2. オリジナルのチュートリアルのスクリーンショットは、再制作したものに基づいて中国語版を再上映しました
3。原文にはいくつかの操作があります。パラメータは指定されていません。テストを繰り返して測定したいくつかのパラメータは、赤字で示されています。一部の間違ったパラメータについては、正しいパラメータが赤いテキストで直接表示されます
例: (90, 22, 231, 77)は、長方形の左上隅の座標が (90, 22) であることを示します。幅 231、高さ 77
例: (90, 22) 、これは、長方形の左上隅の座標が (90, 22) であることを意味します。チュートリアル
4. チュートリアルの最後に私の経験を添付します。チュートリアルなどの一部のステップを最適化したものもあります。
この Photoshop チュートリアルでは、Web 2.0 レイアウトを作成する方法を学習します。チュートリアルを進めていくと、非常に詳細なため、かなり長く感じられます。簡単に理解して完了できると思いますので、ぜひ試してみてください
この PS チュートリアルでは、Web 2.0 レイアウトの作成方法を学び、このチュートリアルを進めながら多くの PS スキルを学びます。長すぎるように思えますか？非常に詳しい内容になっているためです。以下の手順に従えば簡単にできると思いますので、ぜひ試してみてください。
ステップ 1
すべての位置を揃えるために、960s Grid System (ここから入手) を使用します。ダウンロードしたら、ファイル「960_grid_24_col.psd」を開きます。まず、レイヤーを作成します。背景を選択し、レイヤー「背景」を右クリックして、「背景からレイヤー」を選択し、「bg」という名前を付けます。
ステップ 1
要素を整列させるために、960 のグリッド システムを使用します (取得します)。ここ)、ダウンロードしてから、960_grid_24_col.psd ファイルを開きますまず背景からレイヤーを作成し、背景を右クリックして背景レイヤーを選択し、bg という名前を付けますこの翻訳では 960s グリッド システムを使用していないため、このステップは、新しいドキュメントを作成するように変更されます。サイズ：1020px*1800px
ステップ2
ガイドを多用するので、そのためにはルーラーを表示する必要があります。 [表示] > [ルーラー] に移動します。ステップ 2
ガイドラインが必要です。ルーラーを表示する必要があります。これを行うには、次をクリックします: [表示] > [ルーラー]ステップ 3
ヘッダー領域の下の境界線を設定する必要があるため、[表示] > [新規] に移動します。ガイド、位置: 100.ステップ 3
これを行うには、100 ピクセルの位置に水平のガイドラインをドラッグする必要があります。クリック: [表示] > [新しいガイド]、位置: 100
ステップ 4
ヘッダーを作成しましょう。まず 1020x100 ピクセルの選択範囲を作成し、Shift+Backspace をクリックしてそれを塗りつぶします。ステップ 4
次に、頭の領域を作成します。最初に 1020px*100px の選択範囲を作成します。次に、Shift+Backspace を押して塗りつぶします (現在の前景色で塗りつぶします)推奨: あまり一般的ではないアプローチですが、通常は長方形ツールを使用して長方形 (0、0、1020、100) を作成します。違いは、長方形であることです。ツールは新しい画像レイヤーを作成します
次の画像に従ってグラデーションオーバーレイを与えます:次の画像に従って長方形のグラデーションオーバーレイのレイヤースタイルを設定します
このレイヤーを「header_bg」と呼びます。
フォントファミリー: Rockwell (ここから入手)
フォントサイズ: 30px
ステップ5
フォロー以下の設定テキストツールを使用してウェブサイトのタイトルを追加しますフォント:
Rockwellフォントサイズ: 30px
次の設定でテキストにグラデーション オーバーレイを追加します:
: [レイヤー] > [配置] > [垂直方向の中心])
ステップ6
フォントファミリー
: Arial
: 20px
フォントウェイト
: Regular
アンチエイリアス設定
: スムーズ
カラー: #ffffff
ステップ 6
フォント:
フォントサイズ:
フォントスタイル:
アンチエイリアススタイル:
カラー: #ffffff
角丸長方形を作成します。ホバーされたリンクになります。サイズは約 65x35 ピクセル – 半径 5 ピクセルになります (今のところ任意の色で塗りつぶします)。
(551,33) を追加します。サイズ: 65px*35px、半径5px、(任意の色で塗りつぶします)
に従って角丸長方形のストロークとグラデーションオーバーレイのレイヤースタイルを設定します。下の画像:
ストロークの色: #9dca5dグラデーションエディターの色: #528037、#84ac49 次のステップに進む前に、レイヤーをよく整理しておいてください。私の場合は次のようになります。 実行する前に!次のステップでは、レイヤーが適切に整理されていることを確認します (これらのレイヤーをヘッダー グループに結合します)。これが私が行った方法です。 ステップ 7 430 ピクセルの後に新しい水平ガイドを追加して、下枠を設定することから始めます。 ステップ 7 。境界線を設定するには、前の水平ガイドの 430 ピクセル下に水平ガイドを追加します。 提案: 長方形ツールを使用して新しい長方形 (0、100、1020、430) を作成します
グラデーション エディターの色: #528037、#84ac49 推奨: 長方形ツールを使用して新しい長方形 (0、410、1020、120) を作成します
グラデーション エディターの色: #81aa48、#84ac49 ステップ 8 単一行マーキーツールを使用してタッチを追加しましょう! 1 ピクセルの選択範囲を作成し、次のように配置します: 次に、いくつかのタッチを追加します。単一行選択ツールを使用して、次のように配置された 1 ピクセルの選択範囲を作成します 前景色を #acd86e に設定し、Shift+Backspace をクリックして塗りつぶしオプションとして前景色を使用してください。風景を #acd86e に設定し、Shift+Backspace を押して、塗りつぶしモードが前景色であることを確認します。 背景要素を完成させます。必ず理想的な名前を付けて整理し、グループ化してください。 次の画像に従って 2 つの新しいガイドをドラッグしてみましょう より正確な位置決めを行うには!以下に示すように 2 つのガイドラインをドラッグします (前の 2 つのガイドラインの内側に 50 ピクセル) 次の設定で歓迎の言葉を書きます: フォントファミリー: Rockwell フォントサイズ アンチエイリアス設定 カラー フォント: フォントサイズ: アンチエイリアススタイル: カラー: この手順を完全に解決するには、テキスト ツールを使用して「Here's our brand new work」と「Oops and Welcome!」と書き、グラデーション オーバーレイ レイヤー スタイルを「Welcome!」に追加します。 editor : #2f3032, #2f3336 次に、次の画像に従って 2 つの新しい水平ガイドをドラッグします 位置を合わせ、もう 1 つは前のガイドラインの 50 ピクセル下にあります)、 このステップに別れを告げる前に、必ずテキストレイヤーを整理してください ステップ 10 提案: 長方形ツールを使用して新しい長方形 (100、299) を作成します。そして、以下に示すようにストロークのレイヤー スタイルを追加します ストロークの色: #496d23
「pic」レイヤーを右クリックして、「クリッピングマスクの作成」を選択します。 ステップ 11
「シャドウ」レイヤーを選択し、（レイヤーパネルの下部にある）レイヤーマスクの追加をクリックします シャドウレイヤーを選択し、レイヤーマスクの追加（レイヤーパネルの下部) ステップ 12 画像に説明を追加する必要があるので、240x25px の選択範囲を作成し、この色の値で塗りつぶします: #1a1919、これは説明の背景として機能します。 . ステップ 12 画像にキャプションを追加する必要があります。そこで、サイズ: 240px*25px の選択範囲を作成し、それを色: #1a1919 で塗りつぶします。これはキャプションの背景として機能します。 この手順の代わりに、長方形ツールを使用して新しい長方形 (105、419) を作成し、色: #1a1919 これらの文字設定で説明を書きます: フォントファミリー : Arial
文書を整理整頓してください! ステップ 13 注目のデザイン画像のコピーをもう 1 つ作成し、右に配置します。 以下に示すようにストロークを追加します。
画像ブロックに画像と影を追加します できました! レイヤーを整理してグループ化してください。私が個人的に作成したグループは次のとおりです 図のレイヤーを整理し、適切に統合します。グループ。 3 つの写真の各レイヤーを 3 つのグループに結合しました ステップ 14 スライド ボタンを作成しましょう。まず、楕円形マーキー ツール (M) を使用して 50x50 ピクセルの楕円を作成し、それを塗りつぶします。任意の色です。 次の画像に従ってレイヤー スタイルをいくつか与えます ステップ 14 スライド ボタンを作成するには!楕円選択ツールを使用して、楕円選択範囲を作成します。サイズ: 50px*50px、任意の色で塗りつぶします 楕円ツールを直接使用して、楕円 (28、220)、サイズ: 50px*50px、任意の色を作成します。 以下に示すように、このレイヤーにレイヤースタイルを追加します ストロークの色: #6f9941 グラデーションエディターの色: #ffffff、#f3f3f3 グラデーション エディターの色: #619145 , #8cb352 ステップ 15 1020x815px の選択範囲を作成することから始めましょう Shift+Backspace をクリックして選択範囲を次の色で塗りつぶします: #e8e8e8 ステップ 15 提案: 次のコマンドを使用して直接作成します。長方形ツール Rectangle (0, 530, 1020, 810)、color: #e8e8e8 Single Row Marquee Tool (M) で 1px の選択範囲を作成し、次の画像のように配置し、塗りつぶします白 ( #ffffff) で塗りつぶします。 提案: 直線ツールを使用して水平直線 (0、530、1020、1) を描くのは比較的簡単です。色: #ffffff
ステップ 16 コンテンツエリアに上枠を設定する必要があるため、50ピクセルの後に新しい水平ガイドをドラッグします ステップ16 コンテンツ領域の境界を設定する必要があります。新しい水平ガイドを前の水平ガイドの 50 ピクセル下にドラッグする必要があります アイコンをダウンロードします: Basic Set – Pixel Mixer で、以下に示すように配置します アイコンの下部に新しい水平ガイドをドラッグし、 20 ピクセルのままにして、新しいものをドラッグします。 アイコンの下部に水平ガイドラインをドラッグし、水平ガイドラインを 20 ピクセル下にドラッグします 次に、次の設定で見出しを作成します。 フォントファミリー: Rockwell フォントサイズ: 29px フォントウェイト: Regular アンチエイリアス設定: Sharp カラー: #81aa48 以下の設定に従ってヘッダーテキストを追加します: フォント: Rockwell フォントサイズ: 29px フォントスタイル: Regular : #81AA48 次に従ってさらに 2 つのガイドをドラッグします画像の水平方向のガイド (テキストの下部に 1 つとさらに 20 ピクセル下に 1 つ) 次の設定でテキストを書きます: フォントファミリー フォントサイズ フォントの太さ アンチエイリアス設定 カラー 次の設定に従ってテキストを追加します: フォント: フォントサイズ: フォント スタイル: アンチエイリアス スタイル: #2f3235 に従ってさらに 3 つのガイドをドラッグします次の画像に 3 本の水平ガイドをドラッグします (1 つはテキストの下部、1 つは 20 ピクセル下、もう 1 つは 30 ピクセル下)。 「続きを読む」ボタン。角丸長方形ツール (U) を使用して、半径 100x30 ピクセルの長方形を作成し、任意の色で塗りつぶします。 ステップ 17 次に、「続きを読む」ボタンを作成します。 。角丸長方形ツールを使用して、角丸長方形 (100、790)、サイズ: 100px*30px、半径 5px を作成し、任意の色で塗りつぶします
この長方形にいくつかのレイヤー スタイルを与えます。参考として以下の画像を使用します。#66923e、#76a150 それを正しく位置合わせするには、そのレイヤーと長方形のレイヤーを選択し、両方のレイヤーを選択した状態で [垂直方向の中心を揃える] をクリックします ) 「+」を入力し、白(#ffffff)で塗りつぶして、次のように配置します
フォントファミリー : 12px フォントウェイト 設定: なしカラー フォント: フォントサイズ: フォントスタイル: アンチエイリアス スタイル: カラー: テキストにドロップ シャドウを追加するには、下の画像を使用してください。以下に示すように投影と投影の色を設定します。 #7c7c7c 垂直の分割線を作成するには、線ツール (U) を使用して 2 本の垂直線を作成します。それぞれの横に次の値を入力します: #ffffff – #b3b3b3. ステップ 18 垂直分割線を作成し、直線ツールを使用して 2 本の垂直直線 ((270, 600, 1, 200) と (271, 600, 1, 200)) を作成します。色は #ffffff と #b3b3b3 です。次の画像のように線を配置します ! レイヤーを整理することを忘れないでください。私と同じように。 水平基準線の下にセパレーターを作成しましょう 50px で新しい水平ガイドラインを作成します 前景色を黒 (#000000) に設定し、Shift+Backspace キーを押して選択範囲を塗りつぶします。このレイヤーに separator_bg という名前を付けます 提案: 楕円ツールを使用して楕円 (30、870、960、10)、色: #000000 を作成します ぼやけて見えるようにするには、[フィルター] > [フィルタ] に移動します。ぼかし > ガウスぼかし – 半径: 3pxが選択されている場合は、以下に示すように選択範囲を作成し、削除を押します。 [レイヤーマスクを追加] アイコンをクリックし、グラデーションエディターを黒、白、黒に設定します。 [レイヤーマスクを追加] アイコンをクリックします。そして、グラデーション エディターを黒-白-黒に設定します 下の画像に従って線形グラデーションをドラッグします。グラデーション (右から左へ水平方向にドラッグし、Shift キーを押しながらドラッグします) 線ツール (U) を使用して 2 本の水平線を重ねて配置し、セパレーターの真上に配置します。 #b3b3b3 – #ffffff で塗りつぶし、同じレイヤー マスクを追加します。 を区切り記号のすぐ上に作成します それぞれの色を #b3b3b3 と #ffffff で塗りつぶし、同じものを追加しますレイヤーマスクをセパレーターとして使用します
次の文字設定のタイトル: フォントファミリー: Rockwell フォントサイズ: 30px フォントウェイト フォント: フォントサイズ: フォントスタイル: カラー: 次の画像に従って、2 つの新しい水平ガイドをドラッグします。 フォントファミリー フォントサイズ フォントの太さ : #505150 次のようにテキストを追加します:フォント: Arial フォントサイズ: 14px フォントスタイル: 通常 アンチエイリアススタイル: なし カラー: コンテンツ領域の下端として 160 ピクセルの下に新しい水平ガイドラインを作成します ステップ 22 前のステップで使用したのと同じ文字設定を使用して、別のタイトルとテキストを作成します。
: Arial フォントサイズ: 200px フォントウェイト: Regular アンチエイリアシング設定: Smooth カラー: #505150 フォント スタイル: 通常 スムーズ #505150
: スムーズ : #81aa48 フォント: ステップ 23 ステップ 23 ((509, 940, 1, 215) と (510, 940, 1, 215)) レイヤーを整理してください。これが私がそれらを整理した方法です。チームを表すものを書いてください。たとえば、「私たちのチーム」と書きました) 長方形ツール (U) を使用して、 90x90 ピクセルの長方形を作成し、このレイヤーを「photo1_holder」と呼びます。これは、チーム メンバーの写真のホルダーとして機能します。下の画像を参考にしてください。 90px*90px の長方形 (546, 1011) チームメンバーの写真用のピクチャーブロックになります。次に、以下に示すようにストローク レイヤー スタイルを追加します グラデーション エディターの色: #4d4d4d、#3b3b3b メンバーの写真を配置し、そのレイヤーに「photo1」という名前を付けます「photo1」レイヤーが「photo1_holder」レイヤーのすぐ上にあることを確認して、「photo1」レイヤーを右クリックして「クリッピングマスクの作成」を選択します。以下のようなものを思いつくはずです。 メンバーの写真用にカットします。 、このレイヤーに「photo1」という名前を付けます。 photo1 レイヤーが photo1_holder レイヤーの真上にあることを確認します。 photo1 レイヤーを右クリックし、「クリッピングマスクの作成」を選択します。あなたの作品は次のようになります ステップ25 ステップ25 次の文字設定を使用して、メンバーに関するテキストを書きます: フォントファミリー : エリアル フォントサイズ: 14px フォントウェイト: 標準 アンチエイリアス設定: スムーズ カラー: #7ba34 4 メンバーのメッセージテキストを入力します、以下の設定に従ってください: フォント: Arial フォントサイズ: 14px フォントスタイル: Regular 別名スタイル: スムーズ カラー: #7ba344 Twitter から始めましょう。次の文字設定で「t」文字を入力します: フォント ファミリー : Pico-Black (ここから入手) フォントサイズ: 30px フォントウェイト: Regular アンチエイリアシング設定: Smooth カラー: # 2fcfff 次の画像に従ってストロークを与えてください。 ソーシャル メディア アイコンを自分で作成しましょう! Twitter で開始し、次のように文字 t を入力します: フォント: Pico-Black (ここから入手) フォントサイズ: 30px フォントスタイル: Regular アンチエイリアススタイル: スムーズ カラー: #2fcfff 次に、以下に示すようにストロークを追加します LinkedIn を作成しましょう!チャッパー設定で「in」単語を入力します: フォントファミリー: Myriad Pro (ここから入手) フォントサイズ: 30px フォントの太さ カラー🎜: #0081ac🎜 LinkedIn を作成します!次のように文字を入力します: フォント: Myriad Pro (ここから入手) フォントサイズ: 30px フォントスタイル: 太字 アンチエイリアススタイル：smooth Color：＃0081AC : 30px : 太字 : スムーズ : #395796 フォント: 30px 太字 スムーズ #395796 ステップ26 同じ文字設定を使用して、以前に書いた同じテキスト、ソーシャルメディアレターを入力しますが、すべてこの色の値 #505150 を与えます。 同じテキストを入力し、前の設定でソーシャル メディア アイコンのテキスト設定を構成します。同じ色を指定するだけです: #505150 レイヤーを整理しました、あなたは? レイヤーをこのように整理しました、あなたはどうですか? ステップ 27 約 940x70px の選択範囲を作成し、下の画像のように配置します。 任意の色で塗りつぶし、下の画像を参照してグラデーション オーバーレイを適用します。 以下に示すように、寸法が長方形の選択範囲を作成します。 940px*70px 任意の色で塗りつぶし、以下に示すようにグラデーション オーバーレイを追加します 推奨: 長方形ツールを使用して長方形 (46、1220、940、70) を作成し、以下に示すようにグラデーション オーバーレイを追加します グラデーションエディターの色: #71953b、#7ea547 (36,1236)
グラデーションエディターの色: #202020、#323232 自由に作業できるようにレイヤー「tw_bg」を非表示にします。 別のレイヤーを作成します10x43 ピクセルの長方形を作成し、コントロール バーで次のオプションを調整します。 「tw_bg」レイヤーからレイヤースタイルをコピーし、レイヤー「effect」に貼り付けます。 : Pico-Black (ここから入手) : 35px : スムーズ また、次の画像に従っていくつかのレイヤースタイルを指定します。 次のように文字 t を入力します: フォント: Pico-Black (ここから入手) フォント サイズ: 35px フォント スタイル: Regular アンチ-aliased スタイル: Smooth カラー: グラデーションオーバーレイを追加するので心配しないでください 次に、以下に示すようにレイヤースタイルを設定します。 外側のグローカラー: #83ab48 グラデーションエディタカラー: #71963c、#84ac49 ステップ 28 繰り返しますステップ 20 で別のセパレーターを作成するか、コピーして次のように配置します。 ステップ 28 ステップ 20 を繰り返して別のセパレーターを作成するか、コピーします。次に、以下の位置に移動します: ここでの手順を繰り返し、楕円ツールを使用して新しい楕円を作成し、半径 3 ピクセルのガウスぼかしを追加します。適切な位置とサイズを調整します 。長方形の右側の部分をカットする必要があります。そのためには、「tw_bg」レイヤーを選択し、[レイヤーマスクの追加] をクリックします。 長方形の右半分を切り取る必要があります。 ?このためには、tw_bg レイヤーを選択し、[レイヤーマスクの追加] をクリックします 長方形の右側 (切り取りたい部分) に選択範囲を作成し、前景色を黒 (#000000) に設定し、Shift+Backspace を押して塗りつぶします。それ ステップ29 ステップ29 次の文字設定でテキストを書きます – これは実際にはツイートでなければなりません – フォントファミリー: Arial フォントサイズ: 15px フォントウェイト: Regular アンチエイリアシング設定 カラー: #222222 以下の設定にテキストを入力します - ツイートのようになります: フォント: Arial フォントサイズ: 15px フォントスタイル: Regular アンチエイリアススタイル: スムーズ カラー: #222222 テキストを適切に配置するには、テキストレイヤーと緑色のバーレイヤーを選択した状態で、垂直方向の中心を揃えます。 テキストを完全に揃えるには、テキストレイヤーと緑色のバーレイヤーが選択されているときに、「垂直方向の中央揃え」をクリックします (クリック: [レイヤー]>[配置]>[垂直方向の中心]) ステップ 30 ステップ 27 を繰り返して、下の画像のようなものを作成します。また、長方形を作成し、#334814 で塗りつぶし、そのレイヤーの不透明度を 40% に下げます。 ステップ 27 を繰り返して、下の画像のようなものを作成します。そして、長方形を作成し、色: #334814 で、不透明度を 40% に設定します まず、長方形ツールを使用して新しい長方形 (701、1213、46、46) を作成し、次に右側に三角形の影を作成します(多くの方法があります。ここではこれ以上リストしません)、新しい四角形 (710、1220、42、44) を作成し、色: #334814、不透明度を 40% に変更し、レイヤーの順序を適切に調整し、効果を適用します。は次のとおりです
次に、この値の暗い色で歪んだ長方形を塗りつぶします: # 2a6788 次の文字設定で「t」文字を書きます: フォントファミリー : Regular アンチエイリアス設定: スムーズ カラー フォントサイズ: 35px フォントスタイル: 通常 アンチエイリアススタイル: Smooth カラー: #2fcfff
ステップ 31 Twitter アイコンのコピーをもう 1 つ作成し、カラー オーバーレイ (大きな長方形の) を #0080ab に変更し、歪んだ長方形をこのカラー値 #00526d で塗りつぶします。 Twitter アイコンの別のコピーを作成し、カラー オーバーレイ (大きな長方形) の色を #0080ab に変更し、塗りつぶしのベベル長方形 を #00526d 次の文字設定で単語「in」を書きます: : Myriad Pro : 35px :古い : スムーズ : #ffffff Myriad Pro 35px 太字 スムーズ #ffffff Twitter の 3 番目のコピーを作成するか、 LinkedIn アイコンで、カラー オーバーレイ (大きな四角形の場合) を #395796 に変更し、歪んだ四角形をこの色の値 #263e6f で塗りつぶします。 3 番目の Twitter または LinkedIn アイコンを作成し、カラー オーバーレイの色を変更します (大きな四角形の場合)。大きな長方形) を #395796 に、塗りつぶされたベベル長方形 の色は次のとおりです: #263e6f これらの文字設定で「f」文字を書きます: : Klavika : 35px : 太字 : スムーズ : #ffffff Klavika 35px 太字 スムーズ #ffffff 最後のコピーを作成し、カラー オーバーレイ (大きな長方形の) を #e8e8e8 に変更し、歪んだ長方形をこのカラー値 #cdcdcd で塗りつぶします。 (三角形の影) の色: #cdcdcd フォントサイズ カラー: f: #0079d2 – r: #ff3093
フォント スタイル: 太字 アンチエイリアス スタイル: スムーズ カラー: f カラー: #0079d2 および r カラー: #ff3093 置く各アイコンを別のグループに入れ、4 つを選択しながら左端を分散をクリックします 各アイコンを別のグループに入れ、左側のコントロール ボタンをクリックするだけで選択できます ステップ 32 このままにしておきます! 残りは 1020x460 ピクセルの選択範囲を作成し、任意の色で塗りつぶします。 ステップ 32 続けてください。フッターのみが残ります。サイズ: 1020px*460px の長方形の選択範囲を作成し、任意の色で塗りつぶします 推奨事項: 長方形ツールを使用して長方形 (0、1340、1020、460) を作成し、任意の色で塗りつぶします それにグラデーション オーバーレイを適用します。下の画像を参考にしてください。 単一行マーキー ツール (M) を使用して、素敵な影が得られます。 単一行マーキーツール (M) を使用して 1 ピクセルの選択範囲を作成し、それを白で塗りつぶします 推奨: 直線ツールを使用して白い水平線 (0、1340) を作成します、1020、1) ステップ 33 以下に示すように、2 つの新しい水平ガイドをドラッグします (1 つは下に 50 ピクセル)前のガイドライン、下の残りの 50 ピクセル)
フォントファミリー: Rockwell フォントサイズ: 30px アンチエイリアス設定 カラー: #7ea547 次のようにタイトルを追加します: フォント: Rockwell フォントサイズ: 30 ピクセル フォント スタイル: 通常 アンチエイリアス スタイル: カラー: #7ea547 フォント ファミリー フォントサイズ: 15px フォントウェイト: 標準 アンチエイリアス設定: なし カラー: #d3d 3 フォローする以下の設定 字幕テキストを追加します: フォント: Arial フォントサイズ: 15px フォントスタイル: Regular ased スタイル: なし カラー: #d3d3d3 線ツール (U) を使用して 2 本の水平線を重ねて作成し、次の色の値で塗りつぶします: #151515 – #2f2f2f。線ツール (U) このツールは、#151515 (上) と #2f2f2f (下) の色を使用して、隣り合う 2 本の水平直線を作成します。次の画像に従って水平ガイドを作成します。 角丸長方形を使用ツール (U) は、半径 210x25px – 5px の長方形を 2 つ作成し、#141313 で塗りつぶし、インナー シャドウ 37, 1496))
次の文字設定を使用して 2 つの四角形の内側にテキストを書き込みます: フォントファミリー: Arial フォントサイズ アンチエイリアス設定 カラー フォント: フォントサイズ: アンチエイリアススタイル: カラー: 上のような四角形をもう 1 つ作成します。ただし、今回の高さは 110px になります。また、その中に上記と同じ文字設定でテキストを書き込みます。 ボタンのコピーを作成します。ステップ 17 で作成したものを次の画像のように配置します 、高さ: 110px。そして、同じテキスト設定で内部にテキストを追加します 手順 17 で作成したボタンをコピーします。以下に示すように、適切な位置に配置します ステップ 35 左側のような別のタイトルを追加します テキストを書き込みます ステップ 36 右側の部分に 3 番目のタイトルとテキストを入力します。50 ピクセルの後に新しい水平ガイドをドラッグします。 まだそこにあります。新しい水平ガイドを 50 ピクセル下にドラッグします 水平線を隣り合わせて 2 本の水平線を作成します次の色の値を使用します: #181818 (上) – #2f2f2f (下)。
次の文字設定で著作権テキストを書き込みます:
フォントファミリー : 15px
これで、プロフェッショナルな外観の Web 2.0 レイアウトが作成できました。ご覧のとおり、ここで使用したテクニックはシンプルですが、素晴らしい結果が得られます。 それは私たちが所有しています! プロ仕様の Web 2.0 レイアウトを作成します。 ここでは単純なテクニックが使用されていることがわかります。 しかし、彼らは良い結果をもたらします。 2. ソーシャルメディアアイコンの制作は完全に手作りであり、プロセスはありません画像のインポートについて PS Web デザイン チュートリアル XII - PS でプロフェッショナルな Web2.0 Web ページ レイアウトを作成するには、PHP 中国語 Web サイトに注目してください。 
: 40px: 通常
フォントスタイル: Regular
注目のデザインの画像を追加しましょう。これを行うには、[ファイル] > [ファイル] > [gt;] に移動します。画像を配置して選択し、そのレイヤーを「pic」と呼び、必ずレイヤー「pic_holder」の真上に配置します。
レギュラー
アンチエイリアス スタイル:
参考として次の画像を使用します
中央に大きな画像を追加し、大きな選択範囲を作成し、サイズ: 340px*200px に配置します。以下に示すように、任意の色で塗りつぶします
このアイコンセットをダウンロードして、次のように配置します。
精密に位置合わせするには、このレイヤーと角丸長方形のレイヤーを選択し、垂直方向の中央揃えをクリックします (
: Tahoma
以下に示すように、楕円形選択ツールを使用して作成します。楕円形の選択範囲
直線ツールを使用して、 2 本の水平直線 
Regular: スムーズ
アンチエイリアス スタイル: スムーズ
: 標準: なし
アンチエイリアス スタイル:
: Italic
垂直の境界線を作成する線を区切るには、2 つの隣接する垂直直線を作成します (#b3b3b3 は左側にあります) #ffffff の)
写真レイヤーを選択しながら、メンバー写真の別のコピーを作成し、[レイヤー] > [レイヤー] に移動します。新しい調整レイヤー>白黒
「前のレイヤーを使用してクリッピングマスクを作成する」がチェックされていることを確認してください
それらが配置されていることを確認するには、次のコマンドを使用します。 4 つの個別のグループ。各 A グループにはメンバーのコンテンツが含まれており、各グループはレイヤー グループの左側にあるコントロール ボタンをクリックして選択されます。 
フォントサイズ: Regular
長方形の右側の部分 (カットする必要がある部分) を選択し、設定します。前景色を黒 (#000000) に変更し、Shift+Backspace をクリックして塗りつぶします。
: Pico-Black
フォントサイズ
次の文字設定で単語「fr」を書きます:: Frutiger Black
次の図に従って、2 つの新しい水平ガイドをドラッグします。
次の文字設定でタイトルを作成します:
フォントウェイト
: 5px: 標準
フォントスタイル: Regular
2 つの水平線を重ねて作成し、次の色の値で塗りつぶします: #181818 – #2f2f2f.
フォント体重アンチエイリアス設定
標準
アンチエイリアススタイル:
これは、あらゆる小さなステップに至るまで、私が翻訳した中で最も詳細なチュートリアルです。このチュートリアルは、初心者が真似して学ぶのに非常に適しています。 このチュートリアルのハイライトは2つあります
1. 新鮮で徹底的な感覚を持つフィーチャーエリアの写真スライダーの制作
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
