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

プログラマーとしての私の芸術の基礎は弱いです。設計能力を向上させるために、いくつかの成熟した 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 の新しいドキュメントを作成するように変更されます。

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

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

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

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

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

(132, 200) , 936, 135)

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

グラデーションオーバーレイの色: #7e1416, #ee2a28 PS Web デザインチュートリアル VII — Photoshop で漫画のストアレイアウトをデザインする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PS Web デザインチュートリアル VII — Photoshop で漫画のストアレイアウトをデザインするカラーオーバーレイカラー: #09a0df 、 #80ddff

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(132、335、936、1070)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

比較的シンプルなパターンなので、自分で手描きしました。まず新しいレイヤーを作成し、次にブラシツールを使用して新しいレイヤー上に描画します。慎重にクリックするだけです PS Web デザインチュートリアル VII — Photoshop で漫画のストアレイアウトをデザインする

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

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

高さ 60px)

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

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

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

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

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

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

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

(168, 630, 264, 45)

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

(#343434) を追加します

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

(168, 675, 264, 195)

を描きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

)

19. 前に作成した送信ボタンを複製し、投稿の下にボタンとして配置し、「送信」を「続きを読む」に変更します。 PS Web デザインチュートリアル VII — Photoshop で漫画のストアレイアウトをデザインする