PS Web デザイン チュートリアル II – Photoshop で健康と栄養またはフィットネスの Web サイトを作成する

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

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

お約束:

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

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

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

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

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

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

チュートリアルを始めましょう。

チュートリアルを始めましょう

Photoshopを開いて、1020 x 1550pxの新しいドキュメントを作成します

Photoshopを開いて、新しいドキュメントを作成します。サイズ: 1020*1550px

ステップ 1

ペイント バケツ ツールを選択し、前景色を #76b8b9 に設定し、ドキュメントを 1 回クリックします。ワンクリックでドキュメントの背景色を設定します。

ステップ 2

楕円ツールを選択し、前景色が白に設定されていることを確認し、次の白い図形を作成します:ガウスぼかしを適用するには、[フィルター] > [ぼかし] > [ガウスぼかし] に移動します。

必要に応じて不透明度を下げることもできます。

それぞれの楕円に対して、 50 – 60px のガウスぼかし。ガウスぼかしを適用します。 [フィルタ] > [ぼかし] > [ガウスぼかし]

(ガウスぼかしを実行する前に、形状をラスタライズするように求められます。確認してください)

必要に応じて、不透明度を下げることができます。

(基本的にはもう不透明度を下げる必要はありません)

これが私の結果です(美しいフェード効果):

ステップ3

ここで線ツールを選択し、これらの2つの線を作成します。スクリーンショットを参照してください。最初の線にはこの色: #669495 を使用し、2 番目の線にはこの色: #9cd8d9 を使用しましたステップ 3

サンプルを参照して、直線ツールを選択して 2 つの直線を作成します。最初の直線、色: #669495、2 番目の直線、色: #9cd8d9

ステップ 4

文字ツールを選択し、ロゴを追加します:「健康的なヒント」。

健康のために、このレイヤースタイルを適用します:

ステップ4

テキストツールを使用して、ロゴを追加します。 「健康」と「ヒント」というテキストを書きます。

healthyにレイヤースタイルを適用します: カラー: # 698c8e

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

元のチュートリアルのフォントが見つからなかったので、より近いフォントしか見つかりませんでした

ヒントのフォント設定は次のとおりです: また、元のチュートリアルのフォントを置き換えるために近いフォントも見つけました。フォントの色: # fcf30b

これが私の結果です。私が作ったエフェクト

ステップ 5

文字ツールを選択した状態で、ナビゲーション用のリンクを追加します。ロゴの「healthy」という単語に使用されているのと同じレイヤー スタイルと同じフォントを使用します。

ステップ5

テキストツールを使用してナビゲーションリンクを追加します。ヘルシーと同じレイヤースタイルと同じフォントを使用します。

実は私はBrush Script MTフォントを使用しています

。

ステップ 6

長方形ツールを選択し、使用する色: #edec62 の形状を作成します。色: #edec62

ステップ 7

ダイレクト選択ツールを選択し、図形の右隅の下から少しドラッグします

ステップ 7

ダイレクト選択ツールの四角形、右下の点を右下に向かって少しドラッグします

原文では説明がありませんが、個人的にはここに影を付けるべきだと思います

効果は次のとおりです:

ステップ 8

文字ツールを使用して、次のレイヤー スタイルを適用しました:

ステップ 8

「ツール」と入力して、黄色の領域にテキストを追加します。そして、次のレイヤー スタイルを追加します:

カラー オーバーレイの色: # b3b303

私の結果:

結果は次のとおりです:

ステップ 9

文字ツールを使用して、さらにテキストを追加し続けます。ボタン上のテキストには、再度長方形ツールとダイレクト選択ツールを使用します。ステップ 8 のレイヤー スタイルを適用しました。私の結果

。

ステップ 10

ステップ 8 と同じ方法を使用してボタン (

(347,415 , 140, 20)、色: #ffde00

) を作成します。ボタンのテキストは「もっと見る…」です

ステップ11

このステップでは、「プレミアム ファイル」セクションからいくつかのアイコンを使用します。「ヘルス/フィットネス ベクター アイコン」に移動し、リンゴを示すアイコンを選択してドキュメントに配置します。気に入ったものができるまで、自由変形ツール (Ctrl + T) を少し使ってみましょう。結果は次のとおりです。

ステップ 11 このステップでは、プレミアム ファイルからいくつかのアイコンをダウンロードします。 Health/Fitness Vector Icons に移動してダウンロードし、ページに表示する Apple アイコンを選択します。自由変形ツール (Ctrl + T) を使用して、満足のいくまで微調整を加えます。私の結果は次のとおりです:

ステップ 12

ここでステップ 6、7、8 を繰り返し、次の形状を作成します:

(45, 490, 926, 47) )、カラー: #f1c96a

(590, 502, 140, 20)、カラー: #f3f2d6、インナーシャドウ付きレイヤースタイル

上記の図形をコピーし、180 度回転して、カラー: #f3f2d6 レイヤースタイルにインナーシャドウを使用します:

(900, 494, 50, 20)、カラー: #fedd02

(56, 637, 257, 32)、カラー: #ffde00

ステップ 13

文字ツールを使用して、その上にテキストを追加します

ステップ 13

テキスト ツールを使用してテキストを追加します

「もっと健康的なヒントを探していますか? 今すぐ購読してください!」では、次のレイヤー スタイルの「Adventure」フォントを使用しました:

「もっと健康的なヒントを探していますか? 今すぐ購読してください!」のテキストには、 Adventure フォント (実際には Brush Script STD を使用) で、次のレイヤー スタイルを使用しました:

カラー オーバーレイの色: #b3b303

「最新の記事」については、次のようにこのレイヤー スタイルを適用しました:

テキスト ツールでテキストを追加します

ステップ 14

長方形ツールを使用してこの白い図形を作成します

ステップ 14

長方形ツールを使用して次のように白い長方形を作成します: (48, 693, 298, 194)

ステップ 15ペンツールを使用してこの 2 つの黒を作成します三角形を追加し、約 14 ピクセルのガウスぼかしを適用します。結果は次のとおりです

ステップ 15

ペン ツールを使用して 2 つの黒い三角形を追加します。

黒い三角形にガウスぼかしを追加します。パラメータは14pxです(

このパラメータはまだ考慮する必要があります、私は20pxを使用します)

ステップ16

次にいくつかの画像を使用して作成しますさらに 5 つのサムネイルを作成します

ステップ 16

次に、これを繰り返して別の 5 を作成し、写真のサムネイルをいくつか追加します

ステップ 17

ステップ 6、7、8 を再度繰り返し、この形状を作成します:

ステップ 17

ステップ 6、7、8 を繰り返して、次の形状を作成します: (57, 1145, 258, 32)、色: #ffde00

ステップ 18

文字ツールを使用ダミー テキストを追加します

ステップ 18

文字ツールでダミー テキストを追加します

ステップ 19

プレミアム ファイルから – 食品ベクトル アイコンと健康/フィットネス ベクトル アイコンいくつかのベクトル アイコンを追加します

検索いくつかのアイコンをプレミアム ファイルに追加します – 食品のベクトルのアイコンと健康/フィットネスのベクトルのアイコン

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

経験:

PSで単色の直線を描くにはどうすればよいですか?

一般的にPSで直線を描く場合は直線ツールを使用します。ただし、線ツールは、長方形ツールと同様に、デフォルトではシェイプ レイヤとして表示されます。シェイプレイヤーの利点は、エイリアシング感がないように補間によって影の色を計算するアンチエイリアスです。さらに、シェイプ レイヤーは、スケーリング時に優れたアンチエイリアス効果も実現できます。ただし、アンチエイリアス効果は水平線や垂直線に使用すると意味がありません（エイリアスがまったくないため）。PS が水平線（または垂直線）を描画すると、直線の隣に影が追加されます。ちょっと余計な問題。以下に示すように:

PS でアンチエイリアス オプションをオフにできると誰かが言っていましたが、見つけられませんでした。知っているネットユーザーがいたら、教えてください。

何人かに相談した結果、良い解決策が見つかりました

新規レイヤーを作成》ペンツールを使って水平線を描きます》図のようにペンツールの水平線をストロークします:

このチュートリアルでは、直線ツールを使用すると、ステップ 3 の 2 つの直線がぼやけて見えます。ペンツールを使用してストロークを追加すると、よりシャープな印象になります。

PS Web デザイン チュートリアル II - Photoshop での健康と栄養またはフィットネス Web サイトの作成の詳細については、PHP 中国語 Web サイトに注目してください。