PS Web デザイン チュートリアル VII — Photoshop で漫画のストア レイアウトをデザインする

プログラマーとしての私の芸術の基礎は弱いです。設計能力を向上させるために、いくつかの成熟した Web PS チュートリアルを参照できます。文を言い換えれば、「唐の詩三百首を知っていれば、作り方を知らなくても暗唱できる」ということだ。

このシリーズのチュートリアルはオンラインの PS チュートリアルから来ており、すべて海外のもので、すべて英語です。これらの優れたチュートリアルを翻訳してみます。翻訳能力が限られているため、翻訳の詳細はまだ検討する必要があります。大部分のネチズンが私にアドバイスをくれることを願っています。

お約束:

1. この記事で使用するソフトウェアはPhotoshop CS5バージョンです

2. オリジナルのチュートリアルのスクリーンショットは、再制作したものに基づいて中国語版を再上映しました

3。原文にはいくつかの操作があります。パラメータは指定されていません。テストを繰り返して測定したいくつかのパラメータは、赤字で示されています。いくつかの間違ったパラメータがあります。正しいパラメータは赤いテキストで直接表示されます

例: (90, 22, 231, 77)。これは、長方形の左上隅の座標が (90, 22) であることを意味します。 、幅 231、高さ 77

例: (90, 22) 、これは、長方形の左上隅の座標が (90, 22) であることを意味します。チュートリアル

4. チュートリアルの最後に私の経験を添付します。チュートリアルなどの一部のステップを最適化したものもあります。

1. まず、グリッド システムをダウンロードし、ダウンロードしたアーカイブ ファイルを解凍し、「テンプレート」フォルダーに移動して、12 グリッド ファイルを選択します。PSD ファイルには、あらかじめ作成されたグリッド ガイドが付属しています。ウェブサイトを整理するには、[表示] > [ガイド] に移動します。

[画像] > [キャンバス サイズ] に移動して、以下の新しい幅と高さを入力します。

1. まずグリッド システムをダウンロードし、ダウンロードしたファイルを解凍して、テンプレート フォルダーに移動し、Photoshop サブフォルダーに移動します。 12 個のグリッド ファイルを選択します。この PSD ファイルには、Web レイアウトを調整するのに役立つ既製のグリッド ガイドが付属しています。ガイドをアクティブにして、[表示] > [ガイド] をクリックします。

キャンバスを大きくする必要があります。[画像] > [キャンバス サイズ] をクリックして、以下に示すように新しい幅と高さを設定します。

この翻訳チュートリアルではグリッド システムを使用しません。したがって、この手順は、以下に示すように、ドキュメント サイズ: 1200px*1480px の新しいドキュメントを作成するように変更されます。

2. 背景レイヤーのロックを解除するには、レイヤーをクリックし、ロックアイコンを押してロックを解除します。

2. 背景レイヤーのロックアイコンをダブルクリックして、背景レイヤーのロックを解除します

3. 長方形ツールを使用して、青い線をガイドとして使用して、以下のような長方形を描きます。 alt キーを押しながらレイヤーをダブルクリックして、以下の設定を行います:

3. 長方形ツールを使用して長方形を描きます

(132, 200) , 936, 135)

, 下の図のような青いガイドラインを参照してください。 Ctrl+T を押して変換モードに入り、次に Alt キーを押したまま、以下に示すように上部の 2 つのコントロール ポイントをドラッグします (Ctrl+T の後にある必要があり、右クリックして Perspective を選択し、左上のコントロール ポイントをドラッグします) 70ピクセル内側に移動します) 。レイヤーをダブルクリックしてレイヤーブレンドオプションを開き、以下に示すようにスタイルを設定します。 このレイヤーに屋根という名前を付けます

グラデーションオーバーレイの色: #7e1416, #ee2a28

4. Shift キーを押しながら、以下のような図形を描きます。ブレンドオプションを選択し、新しいレイヤーアイコンに円をドラッグして1ピクセルのストロークを作成します。円が収まらない場合は、Ctrlキーを押しながらすべての円レイヤーを選択します。それらをすべて新しいフォルダーのアイコンにドラッグします。フォルダー上で Ctrl+T を押し、Shift キーを押しながら下隅を横にドラッグします。

Shiftキーを押しながら楕円ツールを使用し、画像をクリックして円を描きます。ダブルクリックしてレイヤースタイルを開き、1ピクセルのストロークを追加します。レイヤーを [新規レイヤーの作成] アイコンにドラッグして、レイヤーを複数回複製します。これらの円が濃い赤と白で交互になるようにしてください。円が正しい場所に表示されない場合は、Ctrl キーを押しながらすべての円を選択し、新しいグループ アイコンにドラッグし、グループ上で Ctrl+T を押し、Shift キーを押したまま下部の制御点をドラッグします。適切な位置に移動します

元の図を参照してください。計算すると、各円の直径は 78 ピクセルになります

最初に を使用します。左側の楕円 ツールを使用して円 (132、296、78、78) を作成し、濃い赤で色を付けます: #7e1416

レイヤーをダブルクリックして次のスタイルを追加します

Ctrl+J レイヤーを複製し、Ctrl+T で自由に変形し、新しいレイヤーを元のレイヤーの右側の 156 ピクセルに移動します

Ctrl+Shift+Alt+T を押してコピーします新しいレイヤーを作成し、適切な位置に移動します (レイヤーの右側の元の 156px に自動的に移動します)

6 つの濃い赤の円が作成されるまで、今の操作を繰り返します

同じ方法を使用して 6 つの白い円を作成します

これらの円を円という名前の新しいグループに結合し、[レイヤー]>[レイヤーマスク]>[すべてを表示]をクリックします

以下に示すように、長方形の選択範囲を使用します。ボックスを使用して長方形の選択範囲を作成します

背景レイヤーに移動し、[ブレンド オプション] > [グラデーション オーバーレイ] をダブルクリックして、以下の色を入力します。

5. 背景レイヤーに戻り、ダブルクリックしてレイヤー スタイル ウィンドウを開きます。グラデーション オーバーレイ スタイルを追加します。スタイルは以下のように設定されています

カラー オーバーレイ カラー: #09a0df 、 #80ddff

6 を使用して、「屋根」の上部を描画します。赤い屋根と同じグラデーション オーバーレイの色を使用します。 Bebe Neue フォントを使用してメニューを書き出し、[ブレンド オプション] > [ドロップ シャドウ] をダブルクリックして、以下の設定を入力します。

6. 長方形ツールを使用して屋根の上に長方形 (202, 142, 796, 58) を作成し、屋根レイヤーと同じグラデーション オーバーレイ スタイルを追加します。 (屋根レイヤー スタイルを直接コピーし、ストローク スタイルを含めてこのレイヤーに貼り付けます)

長方形にメニュー テキストを追加します。フォント: Bebe Neue (フォントが見つかりません。Arial を使用してください)代わりに丸みを帯びた MT 太字、フォント色: 白)。テキストレイヤーをダブルクリックし、以下に示すように投影されたレイヤースタイルを追加します:

フォントの関連設定は次のとおりです:

各メニューの位置を調整すると、結果は次のようになります。

7. 長方形ツールを使用して検索ボックスを描画し、ダブルクロックしてブレンド オプションに移動し、以下の設定を入力します。 次に、カスタム形状ツールに移動し、Shift キーを押しながら虫眼鏡アイコンを選択します。キーを押してアイコンを描画します

7. 長方形ツールを使用して検索ボックス(770, 152, 210, 36)を描画し、レイヤーをダブルクリックしてレイヤー スタイルを追加し、設定します。以下に示すようなスタイル。次に、カスタム形状ツールを選択し、虫眼鏡アイコンを選択し、Shift キーを押したまま (形状を維持するため) アイコンを描画します

ここにテキストを追加し、Enter キーを押します検索ボックスの設定は次のとおりです。形式、フォントの色: #6d6d6d

最終結果は次のとおりです:

8. 次に、長方形ツールを使用してページの背景を描画し、ダブルクリックします。 [ブレンド オプション] > [グラデーション オーバーレイ] に移動し、以下の色を入力してから、濃い灰色の 1 ピクセルのストロークを配置します

(132、335、936、1070)

、ダブルクリックしてレイヤー スタイルを開き、グラデーション オーバーレイを設定し、以下に示すように 1px のダーク グレーのストロークを追加します

グラデーション オーバーレイの色: #4b3226、#2b1915

ストロークの色: #343434

9. 再び長方形ツールを使用して白い「ウィンドウ」を描画し、[ブレンド オプション] をダブルクリックして以下の設定を入力し、ダブルクリックしてレイヤー スタイルを開き、スタイルを次のように設定します。以下に示します

10. 次に、アイスクリームの画像を用意しました。(前に使用した Ctrl+T メソッドを使用して) 画像を縮小しました。画像の白い背景を透明にします。すべてのアイスクリーム画像をフォルダーに入れ、ブレンド モードを乗算に設定しました。

10. 次に、左側でいくつかのアイスクリーム画像を使用し、縮小します (前の Ctrl キーを使用) +T法）。白い背景を透明に見せるために、これらの画像をグループ化し、グループのブレンド オプションを Multiply

11 に設定しました。スライダーにはフォント Heartbreak を使用し、テキストを回転しました。 Ctrl+T を押してエッジを回転することで Hand Drawn を取得し、それをキャンバスにコピーして貼り付け、Ctrl+T メソッドを使用してサイズを変更し、回転し、[ブレンド オプション] > をダブルクリックして色を変更しました。 ; カラーオーバーレイ

11. 反対側では、Heartbreak フォントを使用します

(Pristina フォントに置き換えます。具体的な設定は次のとおりです)

テキストを追加し、Ctrl+T を押してテキストを回転します。手描きのパターンをいくつか取得し、キャンバスにコピーし、Ctrl+T を使用してサイズを調整し、角度を回転し、ダブルクリックしてレイヤー スタイル ウィンドウを開き、カラー オーバーレイ スタイルを設定して色を変更します

テキストの書式は以下の通りです

比較的シンプルなパターンなので、自分で手描きしました。まず新しいレイヤーを作成し、次にブラシ ツールを使用して新しいレイヤー上に描画します。慎重にクリックするだけです

12。 次に、角丸長方形ツールでボックスを描画し、ブレンド オプションをダブルクリックして、以下の設定を行い、ボックスを回転します。円ツールを使用して黒い円を描き、青い標識レイヤーをフォルダーに配置します。

12. 角丸長方形のボックスを描きます

高さ 60px)

、ダブルクリックしてレイヤー スタイル ウィンドウを開き、以下に示すようにスタイルを設定します。正方形を回転し、楕円ツールを使用して小さな黒い円を描き、線ツールを使用して 2 本の直線を描きます。これらの青いシンボルのレイヤーをグループに結合します

グラデーション オーバーレイの色: #3789cd、#2f6ba3、#3789cd

計算により、159 度はグラデーションの方向が一致していることがわかります。ブロックの方向

13. 青い標識フォルダーを新しいレイヤーアイコンにドラッグして複製し、矢印を選択し、各青い標識に白い矢印を描きます。

13. 青い標識フォルダーをレイヤーアイコン上の新しいレイヤーアイコンにドラッグしてコピーします。次に、長方形ツールを使用して「タイトル」ボックスを描画し、「ブレンド オプション」をダブルクリックして、「屋根」と同じ赤色のグラデーションを入力し、1 ピクセルのストロークで白いボックスを描画します。 Ctrl キーを押しながら、作成した 2 つの図形を選択し、さらに 4 回複製します。ボックスを大きくするには、Ctrl+T を押してボックスを拡張します

14。タイトル ボックス

(168, 630, 264, 45)

を描画し、ダブルクリックしてレイヤー スタイル ウィンドウを開き、屋根レイヤーと同じグラデーション オーバーレイを作成し、1 ピクセルのダーク グレー

(#343434) を追加します

ストロークしてから、1px のストロークで白い正方形

(168, 675, 264, 195)

を描きます。

Ctrl キーを押しながら 2 つのレイヤーを選択し、4 回複製します。各ブロックを適切な場所に移動します。次に、Ctrl+T を使用してブロックのサイズを変更します

以下に示すように、5 つのタイトル ブロックの位置は (168, 630)、(468, 630)、(768, 630)、(168, 900) です。 , (768 , 900)左下の大きな四角の幅は564px、大きな四角の白い四角の高さは416

15です。 Bebe Neue フォントで見出しを入力し、Arial フォントでコンテンツを書き出します。アイコンはデンマークのロイヤルティ フリー アイコン セットから入手しました。

15. Bebe Neue フォントを使用して、各ボックスにタイトルを書き込みます。 Arial フォントを使用してコンテンツを書き込みます。デンマークのロイヤリティフリーアイコンからいくつかの無料アイコンを入手しました

屋根レイヤー上のテキストレイヤーを直接コピーし、適切な位置に移動し、タイトルテキストを変更します。デンマークのロイヤリティ フリー アイコンへのリンクは期限切れになっています。代わりに、他の場所からアイコンを取得し、角丸四角形ツールでボタンを描画し、赤いタイトル ボックスと同じグラデーションとストロークを配置します。 .

16. 長方形ツールを使用して、連絡先フォームにいくつかの正方形を描画します。色は以下に示すようになります (#ebebeb)。ダブルクリックしてレイヤー スタイル ウィンドウを開き、1 ピクセルの暗い (#343434)

ストロークを追加します。角丸長方形ツールを使用してボタンを追加し、そのボタンにタイトル バーと同じグラデーション オーバーレイとストローク スタイルを与えます

17, 次に、Shift キーを押しながら、以下のように長方形ツールで 2 つのボックスを描画します。1 つは白で小さく、2 つ目は大きいボックスで [ブレンド オプション] をダブルクリックし、以下の設定を行います。

17. 次に、長方形ツールを使用し、Shift キーを押しながら、下の図に示すように、小さな白い点と大きな白い点のある 2 つの正方形を描きます。大きい方の四角をダブルクリックしてレイヤースタイルを開き、以下のようにスタイルを設定します

目を引くために、小さな白い四角の色を赤に変更します

投稿のタイトルと説明の例を書き込みます。

ブログのタイトルと説明を書き込みます。タイトルのフォントはタイトルバーのフォントと同じで、説明のフォントは赤です。他の列のフォントと同じです

18. 次に、サンプル画像をコピーして貼り付け、右クリックしてクリッピングマスクを作成します(これにより、画像が白い正方形のサイズにトリミングされます)。 18. 次に、サンプル画像をコピーして貼り付け、右クリックしてクリッピング マスクを作成します (これによりトリミングされます。画像は白い正方形に限定されています。

この例は、目を引く目的で赤に変更されています

)

19. 前に作成した送信ボタンを複製し、投稿の下にボタンとして配置し、「送信」を「続きを読む」に変更します。

19. 前に作成した 2 番目のボタンをコピーし、ボタンを投稿の下に移動します。説明テキストを変更して、続きを読むように送信してください

20. 次に、氷のようなポールのソーシャル アイコンをいくつか取得し、レイアウトの上に配置しました。

次に、Web サイトのタイトルを書き出します。フォント「ハートブレイカー」を使用しました。タイトルをダブルクリックして「ブレンディングオプション」に設定し、以下の設定を行います:

次に、Web サイトのタイトル「フォント: ハートブレイカー」を追加し、テキストレイヤーをダブルクリックしてレイヤースタイルを開きます。 、以下に示すようにスタイルを設定します:

カスタムシェイプツールに移動し、この雪の結晶のシンボルを選択し、Shiftキーを押しながら雪の結晶をいくつか描きます。

カスタムシェイプツールに切り替え、雪の結晶の形状を選択し、Shift キーを押しながら雪の結晶を追加します

22. 最後に、フッターの著作権の詳細を書き込みます。

22.詳細はフッターへ お知らせ

最終結果

追記:

夏の涼しさ。このチュートリアルは 960 レイアウト システムを参照して完了しているため、一部のパーツのサイズはより任意になります。翻訳時にこれらの寸法を計算するには多大な労力がかかりました。

デザイナーの場合、マウスでドラッグしてもサイズを適切に把握できるのは当然です。

プログラマーの場合、学習の初期段階では、各部分のサイズを慎重に計算することをお勧めします。今後多くのことをやり遂げ、それが整っていると感じたら、もっとカジュアルになるのに遅すぎるということはありません。

PS Web デザイン チュートリアル VII - Photoshop での漫画ストア レイアウトのデザインおよび関連記事の詳細については、PHP 中国語 Web サイトに注目してください。