検索

ページ制作部分のPSカット

技術的なレベルから見ると、Webデザインの最初のステップはアーティストがWebページのレンダリングを作成することであり、第2ステップはWebページのフロントエンドでWebページをカットすることです。 Web ページをカットするために一般的に使用されるツールには、Fireworks と PS が含まれます。

デザイン案からご希望の出力物(.png、.jpgファイルなど)を取得し、Webページ用の画像素材(HTML:img、CSS:background)をご提供させていただきます。

1. PS ツールを使用します

1.1 PS 環境設定

編集 -> 環境設定 -> 単位とルーラーを選択し、ピクセルに変更します。

フロントエンド技術-PS切断

1.2パネル

「ウィンドウ」メニューの下で開きます:

ツール(デフォルトで有効)

オプション(デフォルトで有効)

レイヤー(デフォルトで有効)

情報(手動で有効)

履歴(手動でオン)

他の不要な機能を閉じ、上記の機能を適切な領域に配置し、ウィンドウ-「ワークスペース」-「ワークスペースを保存」、設定されたワークスペースは次のとおりです:

フロントエンド技術-PS切断

1.3 カット用の共通ツール写真

▪移動ツール

はチェックボックスを自動的に選択し、グループをレイヤーに変更します

フロントエンド技術-PS切断

▪長方形マーキーツール

▪魔法の杖ツール

▪トリミングツール+スライスツール

▪ズームツール

-ズームイン: Ctrl+プラス記号

-ズームアウト: Ctrl+マイナス記号

▪カラーピッカー

1.4 補助ビュー

「表示」メニューで有効にします:

▪整列 (デフォルトで有効) ) (基準線と境界に遭遇すると吸着力が発生します)

▪ ルーラー Ctrl+R

▪ 基準線 Ctrl+; (追加のコンテンツを表示する必要があります)

2. 情報を取得します

デザインドラフト、情報の取得:

▪ サイズ情報: 測定

▪ カラー情報: 色を選択

情報を取得するために最も重要なことは、誤差を最小限に抑えるためにキャンバスをできるだけ大きく伸ばすことです。

測定

2.1 すべての数値を測定する必要があります

ツール:

長方形マーキーツール+情報パネル

測定内容:

幅、高さ

内側マージン、外側マージン

境界線

ポジショニング

文字サイズ

行の高さ

背景画像の位置

2.2 選択範囲を測定する(長方形マーキーツール)

選択範囲に追加:Shiftを押したまま

選択範囲から削除:Altを押したまま

選択範囲で十字:Shiftを押したまま+Alt

フロントエンド技術-PS切断

2.3 テキスト関連の測定
2.3.1 テキストレイヤーを分離

レイヤーを選択し、ツールTをクリックすると、上部のオプションエリアが次のように表示されます:

フロントエンド技術-PS切断

サイズを直接取得できますテキストの;

行の高さなど、他の信頼度を取得するには、フロントエンド技術-PS切断

2.3.2 非分離テキスト レイヤー (測定値として大きいテキストを選択します)

フロントエンド技術-PS切断 長方形のマーキー ツールを使用し、選択します。テキスト、高さがフォント サイズです。

行の高さの測定

長方形のマーキー ツールを使用すると、前のテキスト行の一番下からこの行のテキストの一番下までの高さが行の高さになります。以下に示すように:

色を選択します

フロントエンド技術-PS切断2.4 すべての色を選択する必要があります

ツール:

カラーピッカー+スポイトツール

色の選択コンテ​​ンツ:

境界線の色

背景色

文字の色

キャンバスをできるだけ拡大して、実線の点を取得し、ギザギザの点を避けてください。

2.5 別のテキストレイヤーで直接色を取得でき、他の色は「カラーピッカー+スポイトツール」で取得できます

特別な注意は、レイヤーのオーバーレイ効果により、表示される色が実際の色と一致しないことです。これは、カラーピッカーを使用して色を取得することです

2.6 カラー選択ツールの賢い使い方
2.6 .1 背景が単色かどうかを判断します (カラーピッカー + スポイトツール)

さまざまな領域をクリックして色が変化するかどうかを確認します

2.6.2 線形グラデーションかどうかを判断します (魔法の杖)

最初にレイヤーを選択してから、[魔法の杖ツールを使用する] を選択し、クリックして上の行を選択すると、次のように表示されます:

フロントエンド技術-PS切断

クリックを続けて、一度に 1 行ずつ下の行を選択します

フロントエンド技術-PS切断

それを確認します直線的な勾配です。

3. スライス

3.1 スライスする必要があるコンテンツ

変更 (通常は背景属性で使用されます):

アイコン、ロゴ

特殊効果のあるボタン、テキストなど

非ソリッド背景色

コンテンツ(一般的にimgタグで使用されます)

バナー、広告写真

記事内の画像...

たとえば、下の図では、赤いボックスを切り取る必要があり、黒いボックスは切り取る必要がありますボックスは背景から取得されます カットする必要はありません

フロントエンド技術-PS切断

3.2 カットされた写真の保存タイプ

コンテンツは通常 .JPG として保存されます

変更は通常 .PNG8、.png24 として保存されます

、そのうち PNG8 と PNG24 がサポートされています。 完全に透明です。PNG24 は半透明 (高画質) をサポートしますが、ie6 は PNG24 の半透明をサポートしていないため、互換性が必要です。

3.3. 画像を切り取る

テキストを非表示にして背景のみを残す

3.3.1 テキスト独立レイヤー(テキストレイヤーを非表示)

テキストレイヤーを見つける

メガネアイコンを削除する

フロントエンド技術-PS切断

3.3 .2 テキストを画像と結合します (背景をテキストの上にタイル表示します)

背景画像は拡大できます

長方形のマーキーツールで領域を選択します

自由変形 Ctrl+T

背景画像は拡大できません(背景にはテクスチャ効果などがあります)

長方形のマーキーツールで領域を選択

移動ツール+Altを使用

3.3.3 スライスを取得

Cut.PNG24

• で必要なレイヤーを選択します移動ツール (Ctrl キーを押しながら複数選択)

•右クリックしてレイヤーを結合します (Ctrl+E)

•描画レイヤーを新しいファイルにメールで送信するか、既存のファイルに直接ドラッグします (新規: Ctrl+N)

.PNG8 にカット (背景付きでカット)

• 表示されているレイヤーを結合 (Shift+Ctrl+E)
• コンテンツを選択するための長方形のマーキーツール
• 余分な部分を削除するための魔法の杖ツール (選択範囲から削除: Alt キーを押したままにする) )

3.3.4 タイル化可能 背景をカットします

長方形のマーキーツールで領域を選択します

コピーして新しいファイルに貼り付けます

幅 (x 軸) または高さ (y 軸) を満たすようにコンテンツをタイル表示しますファイルの -axis): たとえば、x 軸をタイリングするための新しいファイルを作成します。切り取った画像の幅は新しいファイルと一致する必要があります

フロントエンド技術-PS切断

3.4.全面的にカットします)

基準線を引く

フロントエンド技術-PS切断

▪スライスツールを選択

▪オプションバーの「ガイドに基づいてスライス」ボタンをクリック

フロントエンド技術-PS切断

▪スライス選択ツールを選択

フロントエンド技術-PS切断

スライスをダブルクリックし、ファイル名やその他の情報を変更

▪保存

すべてのスライスを選択し、保存形式を均一に設定します

4.保存

必要なコンテンツを保存します (通常、背景は透明です)

▪ コピー、作成、貼り付け (Ctrl+C、Ctrl+N、Ctrl+V、またはコンテンツを新しいファイルにドラッグします)

独立したレイヤー: コンテンツを新しいファイルに直接ドラッグします

結合: 長方形マーキーツールの選択、魔法の杖の抽出、Ctrl+C、Ctrl+N、Ctrl+V

▪Web で使用される形式で保存します (Alt+Shift+Ctrl+S)

4.1 保存タイプ 1 (JPG)

画像の色が豊富で、透明度の要件がない場合

ですJPG 形式で保存し、適切な品質を選択することをお勧めします

注: 品質: 60-80; 100 は使用できません。80 はすでに良好です

4.2 保存タイプ 2 (PNG8)

透明度要件があるかどうかに関係なく、あまりカラフルではありません

PNG8 形式で保存します

注: 保存するときは、ディザリングなしとマットなしをリセットする必要があります

フロントエンド技術-PS切断

4.3 保存タイプ 3 (PNG24)

画像に半透明の要件がある場合

PNG24 形式で保存します

デフォルト設定。

4.4 保存タイプ 4 (PSD)

画像の品質を確保するため

PSD ファイルを保存し、将来の変更はすべて PSD ファイル上に行われます

5 つの変更とメンテナンス

プロジェクトの進行に合わせて、アイコンの位置を変更したり、新しいアイコンを追加したり、古いアイコンを削除したり、キャンバスのサイズを変更したりする必要があるため、変更してメンテナンスする必要があります。

5.1 キャンバスサイズを変更する
5.1.1 キャンバスを拡大する

画像→キャンバスサイズ、状況に応じてアンカーポイントを選択

フロントエンド技術-PS切断

5.1.2 キャンバスを縮小する

最初の方法: 選択長方形選択ツール「エリア」、「画像」→「トリミング」でキャンバスをトリミングします。

2 番目の方法: トリミング ツールを直接使用してトリミングします。

5.2 アイコンを移動します

アイコンが独立したレイヤーの場合

移動ツールを使用してドラッグします

アイコンが独立していない場合

選択ツールを使用して、アイコン領域

移動ツールを使用します アイコンをドラッグします

注: アイコンが独立していない場合は、選択ツールを使用してアイコン領域を選択し、Ctrl+Xを押して切り取り、貼り付けて回転させることができますアイコンを独立したレイヤーに追加します。

5.3 アイコンを追加する

アイコンを整理し、対応する位置に配置します。

注:

PNG8 画像を変更するには、カラーモードを RGB カラーに変更する必要があります。方法: [画像] -> [モード] -> [RGB カラー]。

6これにより、ページに含まれる散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。全体像上の特定のアイコンの位置に応じて背景を配置します。

スプライト パズルの利点: ネットワーク リクエストを削減し、Web ページの読み込み速度を向上させます。

6.1 サイズと品質 (バランスとトレードオフ)

フロントエンド技術-PS切断圧縮ツール:

▪Lossy TinyPng: https://tinypng.com/
▪Lossless Minimage: https://github.com/ NetEaseWD /minimage

6.2 結合

6.2.1 配置

画像間に適切な間隔を確保する必要があります (画像の変更と CSS コードの記述を容易にするため)
アイコンの配置: 水平および垂直

6.2

フロントエンド技術-PS切断▪同じモジュールに属する写真を結合(機能化)

▪同じサイズの写真を結合(スペースを節約)
▪同じ色の写真を結合(色数とファイルサイズを削減)比較的小さくなります)

▪上記の方法と組み合わせて結合します

6.2.3 結合の推奨事項

▪このページで使用されている画像のみが結合されます
▪ステートフルな画像結合(マウスはステータス変更などを通過します)

7 つのブラウザ互換性ソリューションフロントエンド技術-PS切断

7.1 IE6 は PNG24 の半透明性をサポートしていません

解決策: sprite.png (24) と sprite_ie.png (8) の 2 つのコピーを保存します

7.2 Css3

▪高度なブラウザは css3 を使用します

低レベルのブラウザはカット画像を使用します
7.3 グレースフルダウングレード

▪サポートされている表示効果

▪効果はサポートされていません

さらなるフロントエンドテクノロジー - PS カット画像 関連記事はPHP中国語サイトにご注目ください!

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
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。「周波数分離」テクノロジーを使用して画像を正確にレタッチします。これらの関数は、画像処理効果を最適化するためのアルゴリズムと画像処理テクノロジーを通じて実装されます。

Photoshopの重要な機能:ディープダイビングPhotoshopの重要な機能:ディープダイビングApr 19, 2025 am 12:08 AM

Photoshopの主な機能には、レイヤーとマスク、調整ツール、フィルター、エフェクトが含まれます。 1。レイヤーとマスクにより、画像パーツの独立した編集を可能にします。 2.明るさ/コントラストなどのツールの調整により、画像のトーンと明るさを変更できます。 3。フィルターとエフェクトは、視覚効果をすばやく追加できます。これらの機能を習得すると、創造的な専門家が創造的なビジョンを達成するのに役立ちます。

Photoshop and Digital Art:絵画、イラスト、および合成Photoshop and Digital Art:絵画、イラスト、および合成Apr 18, 2025 am 12:01 AM

Digital ArtのPhotoshopのアプリケーションには、絵画、イラスト、画像の統合が含まれます。 1)塗装:ブラシ、鉛筆、ミキシングツールを使用して、アーティストは現実的な効果を生み出すことができます。 2)イラスト:ベクトルと形状のツールを使用すると、アーティストは複雑なグラフィックを正確に描き、効果を追加できます。 3)合成:マスクとレイヤーブレンディングモードを使用して、アーティストはさまざまな画像要素をシームレスにブレンドできます。

高度なPhotoshopチュートリアル:マスターレタッチと合成高度なPhotoshopチュートリアル:マスターレタッチと合成Apr 17, 2025 am 12:10 AM

Photoshopの高度な写真編集および合成技術には、次のものが含まれます。1。基本操作にレイヤー、マスク、調整層を使用します。 2。画像ピクセル値を使用して、写真編集効果を実現します。 3.複雑な合成のために複数の層とマスクを使用します。 4.「液化」ツールを使用して、顔の特徴を調整します。 5.「周波数分離」テクノロジーを使用して、繊細な写真編集を実行すると、これらのテクノロジーは画像処理レベルを改善し、専門レベルの効果を達成できます。

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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

Safe Exam Browser

Safe Exam Browser

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

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)