検索
ホームページウェブフロントエンドPS チュートリアル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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ 1

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

ステップ 2

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

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

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

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

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

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

これが私の結果です(美しいフェード効果):PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站



ステップ3

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 ステップ 4

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

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

ステップ4

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

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

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

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ 5

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

ステップ5

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 ステップ 6

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

ステップ 7

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

ステップ 7

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 ダイレクト選択ツールの四角形、右下の点を右下に向かって少しドラッグします

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

効果は次のとおりです:

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ 8

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

ステップ 8

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 「ツール」と入力して、黄色の領域にテキストを追加します。そして、次のレイヤー スタイルを追加します:

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 私の結果:

結果は次のとおりです: PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ 9

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

ステップ 10

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

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

) を作成します。ボタンのテキストは「もっと見る…」ですPS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ11

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ 12

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 (590, 502, 140, 20)、カラー: #f3f2d6、インナーシャドウ付きレイヤースタイル

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

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

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

ステップ 13

文字ツールを使用して、その上にテキストを追加しますPS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ 13

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

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 テキスト ツールでテキストを追加します

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

ステップ 14

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

ステップ 14PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

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

ステップ 15

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

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

このパラメータはまだ考慮する必要があります、私は20pxを使用しますPS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 )

ステップ16

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

ステップ 16

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 次に、これを繰り返して別の 5 を作成し、写真のサムネイルをいくつか追加します

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 ステップ 17

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

ステップ 17

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站 ステップ 18

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

ステップ 18

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

ステップ 19

プレミアム ファイルから – 食品ベクトル アイコンと健康/フィットネス ベクトル アイコンいくつかのベクトル アイコンを追加しますPS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

経験:

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

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

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

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

PS网页设计教程II——在Photoshop中创建健康及营养或健身的网站

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

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Photoshop:画像操作のための汎用性の高いツールPhotoshop:画像操作のための汎用性の高いツールApr 27, 2025 am 12:13 AM

Photoshopは、その汎用性と直感的な動作インターフェイスのため、画像処理の分野で非常に強力です。 1)基本的な調整から、明るさやコントラストの調整などの複雑な合成まで、さまざまなタスクを処理できます。 2)レイヤーとマスクに基づいて機能すると、非破壊的な編集が可能になります。 3)使用の例には、カラーバランスの調整とレイヤーマスクの作成が含まれます。 4)過度の編集などの一般的なエラーは、履歴パネルを介して回避できます。 5)パフォーマンス最適化の提案には、スマートオブジェクトとショートカットキーの使用が含まれます。

Photoshopトライアルと代替案:無料アクセスの探索Photoshopトライアルと代替案:無料アクセスの探索Apr 26, 2025 am 12:23 AM

Photoshopは、無料の7日間の試用期間を提供します。トライアル期間の使用を最大化するには、1)複数のAdobeアカウントにサインアップし、2)学生または教育バージョンを使用し、3)Adobe CreativeCloudを購読します。無料の代替品には、1)GIMP、2)Photopea、3)Krita、これらのソフトウェアは毎日の画像編集ニーズを満たすことができます。

写真家のためのPhotoshop:画像の強化とレタッチ写真家のためのPhotoshop:画像の強化とレタッチApr 25, 2025 am 12:01 AM

Photoshopの写真の強化とレタッチは、修理ブラシツールを使用して輝度とコントラストを調整することで実現できます。 1)明るさとコントラストを調整します:輝度とコントラストを増やして、画像 - >調整 - >明るさ/コントラストメニューを介して露出しない写真を改善します。 2)修理ブラシツールを使用します。ツールバーでHealingBrushToolを選択し、適用して画像のその他のポイントまたは傷跡を削除します。

Photoshopへのアクセス:方法と可用性Photoshopへのアクセス:方法と可用性Apr 24, 2025 am 12:07 AM

Photoshopは、恒久的なライセンスを購入したり、CreativeCloudを購読したりすることで取得できます。 1.長期使用のために恒久的なライセンスを購入し、毎月の支払いはありませんが、最新の更新は利用できません。 2. CreativeCloudを購読して、最新バージョンやその他のAdobeソフトウェアにアクセスすると、毎月または年会費を支払う必要があります。選択は、使用頻度と要件に基づいている必要があります。

Photoshopが最善を尽くすこと:一般的なタスクとプロジェクトPhotoshopが最善を尽くすこと:一般的なタスクとプロジェクトApr 23, 2025 am 12:06 AM

Photoshopは、画像編集、レイヤー化とマスキング、デジタルペインティング、さまざまなデザインアプリケーションに特化しています。 1)画像の編集と修復:欠陥を削除し、色と明るさを調整します。 2)レイヤーとマスク:非破壊的な編集と作成。 3)デジタル絵画とイラスト:アート作品を作成します。 4)実用的なアプリケーション:グラフィックデザイン、Webデザイン、デジタルアート作成。

Photoshopの使用:創造的な可能性と実用的な用途Photoshopの使用:創造的な可能性と実用的な用途Apr 22, 2025 am 12:09 AM

Photoshopは、実用的なアプリケーションで非常に実用的で創造的です。 1)初心者や専門家に適した基本的な編集、修理、合成機能を提供します。 2)コンテンツ認識の塗りつぶしやレイヤースタイルなどの高度な機能により、画像効果が向上します。 3)ショートカットキーの習得とレイヤー構造の最適化により、作業効率が向上します。

Photoshop:高度なテクニックとツールPhotoshop:高度なテクニックとツールApr 21, 2025 am 12:08 AM

Adobe Photoshopの高度な機能には、高度な選択ツール、レイヤーブレンディングモード、アクションとスクリプトが含まれます。 1)クイック選択ツールやカラーレンジ選択ツールなどの高度な選択ツールは、画像領域を正確に選択できます。 2)「オーバーラップ」モードなどのレイヤーブレンドモードは、一意の視覚効果を作成できます。 3)アクションとスクリプトは、タスクの繰り返しを自動化し、作業効率を向上させることができます。

Photoshopの主な機能:レタッチと強化Photoshopの主な機能:レタッチと強化Apr 20, 2025 am 12:07 AM

写真の編集と強化におけるPhotoshopの強力な機能には、次のものが含まれます。1。「修理ブラシツール」を使用してにきびを削除する、2。「液化ツール」を使用してスリムな顔、3。「周波数分離」テクノロジーを使用して画像を正確にレタッチします。これらの関数は、画像処理効果を最適化するためのアルゴリズムと画像処理テクノロジーを通じて実装されます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール