検索
ホームページウェブフロントエンド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 12, 2025 am 12:11 AM

Photoshopは無料ではありませんが、低コストまたは無料で使用する方法がいくつかあります。1。無料の試用期間は7日で、この期間中にすべての機能を体験できます。 2。学生と教師の割引はコストを半分に削減でき、学校の証明が必要です。 3. CreativeCloudパッケージは、プロのユーザーに適しており、さまざまなAdobeツールが含まれています。 4。フォトショーペルメントとLightroomは低コストの代替品であり、機能は少なくなりますが、価格は低くなっています。

Photoshopの価値:その機能に対するコストを計量しますPhotoshopの価値:その機能に対するコストを計量しますApr 11, 2025 am 12:02 AM

Photoshopは、強力な機能と幅広いアプリケーションシナリオを提供するため、投資する価値があります。 1)コア関数には、画像編集、レイヤー管理、特殊効果の生産、色の調整が含まれます。 2)プロのデザイナーや写真家に適していますが、アマチュアはGIMPなどの代替案を考慮する場合があります。 3)AdobeCreativeCloudを購読することは、必要に応じて、1回限りの支出を避けるために使用できます。

Photoshopの中核目的:クリエイティブな画像デザインPhotoshopの中核目的:クリエイティブな画像デザインApr 10, 2025 am 09:29 AM

Photoshopのクリエイティブな画像デザインでのコアの使用は、その強力な機能と柔軟性です。 1)設計者は、レイヤー、マスク、フィルターを介して創造性を視覚的現実に変換することができます。 2)基本的な使用には、トリミング、サイズ変更、色補正が含まれます。 3)レイヤースタイル、ブレンドモード、スマートオブジェクトなどの高度な使用法は、複雑な効果を生み出すことができます。 4)一般的な間違いには、不適切な層管理とフィルターの過度の使用が含まれます。これは、レイヤーを整理し、フィルターを合理的に使用することで解決できます。 5)パフォーマンスの最適化とベストプラクティスには、レイヤーの合理的な使用、ファイルの定期的な保存、ショートカットキーの使用が含まれます。

WebデザインのPhotoshop:UI/UXの高度なテクニックWebデザインのPhotoshop:UI/UXの高度なテクニックApr 08, 2025 am 12:19 AM

Photoshopは、Webデザインで使用して、高忠実度のプロトタイプを作成し、UI要素を設計し、ユーザーインタラクションをシミュレートできます。 1.基本設計のためにレイヤー、マスク、スマートオブジェクトを使用します。 2。アニメーションおよびタイムライン関数を介してユーザーの相互作用をシミュレートします。 3.スクリプトを使用して、設計プロセスを自動化し、効率を向上させます。

初心者の記事:PSブラシを使用してフォントに亀裂効果を追加します(共有)初心者の記事:PSブラシを使用してフォントに亀裂効果を追加します(共有)Apr 07, 2025 am 06:21 AM

前の記事「PS(お気に入り)を使用してプレート画像に印刷効果を追加するためのステップバイステップを教える」では、PSを使用してPSを使用してプレート画像に印刷効果を追加するための小さなトリックを紹介しました。次の記事では、PSブラシを使用してフォントに亀裂効果を追加する方法を紹介します。それを行う方法を見てみましょう。

Photoshop Advanced Typography:見事なテキスト効果の作成Photoshop Advanced Typography:見事なテキスト効果の作成Apr 07, 2025 am 12:15 AM

Photoshopでは、レイヤースタイルとフィルターを介してテキストエフェクトを作成できます。 1.新しいドキュメントを作成し、テキストを追加します。 2.影や外側の輝きなどのレイヤースタイルを適用します。 3.波効果などのフィルターを使用し、ベベルとリリーフ効果を追加します。 4.マスクを使用して、効果範囲と強度を調整して、テキスト効果の視覚的影響を最適化します。

写真をカットする方法写真をカットする方法Apr 06, 2025 pm 10:27 PM

切断は、画像の背景部分を削除し、被写体を置き去りにするプロセスです。一般的なカットアウト方法は次のとおりです。マニュアルカットアウト:画像編集ソフトウェアを使用して、サブジェクトのエッジを手動で概説します。自動カットアウト:ソフトウェアを使用して、サブジェクトを自動的に識別し、背景から分離します。サードパーティの切り抜きツールを使用します。特別なツールを使用して画像を切り取ります。チャネルカットアウト:画像のチャネルを使用して、操作のために主題の色と明らかな違いを持つチャネルをセグメント化し、選択します。

PSから透かしを取得する方法PSから透かしを取得する方法Apr 06, 2025 pm 10:24 PM

オンラインツール、画像編集ソフトウェア、ビデオ編集ソフトウェア、透かし削除アプリケーションを使用できます。特定の方法には、オンラインツールの使用、クローニングスタンプツールの使用、スタンプツールのコピーとブラシツールの修理、ぼやけツールの使用、トリミングツールとコンテンツ認識充填ツール、および透かし除去アプリケーションの使用が含まれます。透かしを削除する前に、そうする権利があることを確認してください。

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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません