ページ制作部分のPSカット
技術的なレベルから見ると、Webデザインの最初のステップはアーティストがWebページのレンダリングを作成することであり、第2ステップはWebページのフロントエンドでWebページをカットすることです。 Web ページをカットするために一般的に使用されるツールには、Fireworks と PS が含まれます。
デザイン案からご希望の出力物(.png、.jpgファイルなど)を取得し、Webページ用の画像素材(HTML:img、CSS:background)をご提供させていただきます。
1. PS ツールを使用します
1.1 PS 環境設定
編集 -> 環境設定 -> 単位とルーラーを選択し、ピクセルに変更します。
1.2パネル
「ウィンドウ」メニューの下で開きます:
ツール(デフォルトで有効)
オプション(デフォルトで有効)
レイヤー(デフォルトで有効)
情報(手動で有効)
履歴(手動でオン)
他の不要な機能を閉じ、上記の機能を適切な領域に配置し、ウィンドウ-「ワークスペース」-「ワークスペースを保存」、設定されたワークスペースは次のとおりです:
1.3 カット用の共通ツール写真
▪移動ツール
はチェックボックスを自動的に選択し、グループをレイヤーに変更します
▪長方形マーキーツール
▪魔法の杖ツール
▪トリミングツール+スライスツール
▪ズームツール
-ズームイン: Ctrl+プラス記号
-ズームアウト: Ctrl+マイナス記号
▪カラーピッカー
1.4 補助ビュー
「表示」メニューで有効にします:
▪整列 (デフォルトで有効) ) (基準線と境界に遭遇すると吸着力が発生します)
▪ ルーラー Ctrl+R
▪ 基準線 Ctrl+; (追加のコンテンツを表示する必要があります)
2. 情報を取得します
デザインドラフト、情報の取得:
▪ サイズ情報: 測定
▪ カラー情報: 色を選択
情報を取得するために最も重要なことは、誤差を最小限に抑えるためにキャンバスをできるだけ大きく伸ばすことです。
測定
2.1 すべての数値を測定する必要があります
ツール:
長方形マーキーツール+情報パネル
測定内容:
幅、高さ
内側マージン、外側マージン
境界線
ポジショニング
文字サイズ
行の高さ
背景画像の位置
2.2 選択範囲を測定する(長方形マーキーツール)
選択範囲に追加:Shiftを押したまま
選択範囲から削除:Altを押したまま
選択範囲で十字:Shiftを押したまま+Alt
2.3 テキスト関連の測定
2.3.1 テキストレイヤーを分離
レイヤーを選択し、ツールTをクリックすると、上部のオプションエリアが次のように表示されます:
サイズを直接取得できますテキストの;
行の高さなど、他の信頼度を取得するには、
長方形のマーキー ツールを使用し、選択します。テキスト、高さがフォント サイズです。
行の高さの測定
長方形のマーキー ツールを使用すると、前のテキスト行の一番下からこの行のテキストの一番下までの高さが行の高さになります。以下に示すように:
色を選択します2.4 すべての色を選択する必要があります
ツール:
カラーピッカー+スポイトツール色の選択コンテンツ:境界線の色背景色
文字の色
キャンバスをできるだけ拡大して、実線の点を取得し、ギザギザの点を避けてください。 2.5 別のテキストレイヤーで直接色を取得でき、他の色は「カラーピッカー+スポイトツール」で取得できます
特別な注意は、レイヤーのオーバーレイ効果により、表示される色が実際の色と一致しないことです。これは、カラーピッカーを使用して色を取得することです
2.6 カラー選択ツールの賢い使い方
2.6 .1 背景が単色かどうかを判断します (カラーピッカー + スポイトツール)
さまざまな領域をクリックして色が変化するかどうかを確認します
2.6.2 線形グラデーションかどうかを判断します (魔法の杖)
最初にレイヤーを選択してから、[魔法の杖ツールを使用する] を選択し、クリックして上の行を選択すると、次のように表示されます:
クリックを続けて、一度に 1 行ずつ下の行を選択します
それを確認します直線的な勾配です。
3. スライス
3.1 スライスする必要があるコンテンツ
特別な注意は、レイヤーのオーバーレイ効果により、表示される色が実際の色と一致しないことです。これは、カラーピッカーを使用して色を取得することです
さまざまな領域をクリックして色が変化するかどうかを確認します
最初にレイヤーを選択してから、[魔法の杖ツールを使用する] を選択し、クリックして上の行を選択すると、次のように表示されます:
クリックを続けて、一度に 1 行ずつ下の行を選択します
それを確認します直線的な勾配です。
変更 (通常は背景属性で使用されます):
アイコン、ロゴ
特殊効果のあるボタン、テキストなど
非ソリッド背景色
コンテンツ(一般的にimgタグで使用されます)
バナー、広告写真
記事内の画像...
たとえば、下の図では、赤いボックスを切り取る必要があり、黒いボックスは切り取る必要がありますボックスは背景から取得されます カットする必要はありません
3.2 カットされた写真の保存タイプ
コンテンツは通常 .JPG として保存されます
変更は通常 .PNG8、.png24 として保存されます
、そのうち PNG8 と PNG24 がサポートされています。 完全に透明です。PNG24 は半透明 (高画質) をサポートしますが、ie6 は PNG24 の半透明をサポートしていないため、互換性が必要です。
3.3. 画像を切り取る
テキストを非表示にして背景のみを残す
3.3.1 テキスト独立レイヤー(テキストレイヤーを非表示)
テキストレイヤーを見つける
メガネアイコンを削除する
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 軸をタイリングするための新しいファイルを作成します。切り取った画像の幅は新しいファイルと一致する必要があります
3.4.全面的にカットします)
▪基準線を引く
▪スライスツールを選択
▪オプションバーの「ガイドに基づいてスライス」ボタンをクリック
▪スライス選択ツールを選択
![]()
スライスをダブルクリックし、ファイル名やその他の情報を変更
▪保存
すべてのスライスを選択し、保存形式を均一に設定します
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 形式で保存します
注: 保存するときは、ディザリングなしとマットなしをリセットする必要があります
4.3 保存タイプ 3 (PNG24)
画像に半透明の要件がある場合
PNG24 形式で保存します
デフォルト設定。
4.4 保存タイプ 4 (PSD)
画像の品質を確保するため
PSD ファイルを保存し、将来の変更はすべて PSD ファイル上に行われます
5 つの変更とメンテナンス
プロジェクトの進行に合わせて、アイコンの位置を変更したり、新しいアイコンを追加したり、古いアイコンを削除したり、キャンバスのサイズを変更したりする必要があるため、変更してメンテナンスする必要があります。
5.1 キャンバスサイズを変更する
5.1.1 キャンバスを拡大する
画像→キャンバスサイズ、状況に応じてアンカーポイントを選択
5.1.2 キャンバスを縮小する
最初の方法: 選択長方形選択ツール「エリア」、「画像」→「トリミング」でキャンバスをトリミングします。
2 番目の方法: トリミング ツールを直接使用してトリミングします。
5.2 アイコンを移動します
▪アイコンが独立したレイヤーの場合
移動ツールを使用してドラッグします
▪アイコンが独立していない場合
選択ツールを使用して、アイコン領域
移動ツールを使用します アイコンをドラッグします
注: アイコンが独立していない場合は、選択ツールを使用してアイコン領域を選択し、Ctrl+Xを押して切り取り、貼り付けて回転させることができますアイコンを独立したレイヤーに追加します。
5.3 アイコンを追加する
アイコンを整理し、対応する位置に配置します。
注:
PNG8 画像を変更するには、カラーモードを RGB カラーに変更する必要があります。方法: [画像] -> [モード] -> [RGB カラー]。
6これにより、ページに含まれる散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。全体像上の特定のアイコンの位置に応じて背景を配置します。 スプライト パズルの利点: ネットワーク リクエストを削減し、Web ページの読み込み速度を向上させます。
6.1 サイズと品質 (バランスとトレードオフ)
圧縮ツール:
▪Lossy TinyPng: https://tinypng.com/
▪Lossless Minimage: https://github.com/ NetEaseWD /minimage画像間に適切な間隔を確保する必要があります (画像の変更と CSS コードの記述を容易にするため) アイコンの配置: 水平および垂直6.2 結合
6.2.1 配置
6.2
▪同じモジュールに属する写真を結合(機能化)
▪同じサイズの写真を結合(スペースを節約)
▪同じ色の写真を結合(色数とファイルサイズを削減)比較的小さくなります) ▪上記の方法と組み合わせて結合します6.2.3 結合の推奨事項
▪このページで使用されている画像のみが結合されます
▪ステートフルな画像結合(マウスはステータス変更などを通過します)
解決策: sprite.png (24) と sprite_ie.png (8) の 2 つのコピーを保存します7 つのブラウザ互換性ソリューション
7.1 IE6 は PNG24 の半透明性をサポートしていません
7.2 Css3
低レベルのブラウザはカット画像を使用します▪高度なブラウザは css3 を使用します
7.3 グレースフルダウングレード▪効果はサポートされていません▪サポートされている表示効果
さらなるフロントエンドテクノロジー - PS カット画像 関連記事はPHP中国語サイトにご注目ください!

この記事では、ソーシャルメディアグラフィックスのPhotoshop、セットアップ、設計ツール、最適化技術をカバーすることを使用して詳細に説明しています。グラフィック作成の効率と品質を強調しています。

記事では、PhotoshopでのWeb使用のための画像の準備、ファイルサイズ、解像度、カラースペースの最適化に焦点を当てています。主な問題は、画質と迅速な読み込み時間のバランスをとることです。

記事では、Photoshopのコンテンツを意識した塗りつぶしツールを効果的に使用して、ソース領域の選択、間違いの避け、最適な結果のために設定の調整に関するヒントを提供します。

記事では、Photoshopの正確な色のモニターの校正、キャリブレーションのツール、不適切なキャリブレーションの効果、および再調整頻度について説明します。主な問題は、色の精度を確保することです。

この記事では、ビデオ編集にPhotoshopを使用する方法、ビデオのインポート、編集、エクスポートの手順の詳細、およびタイムラインパネル、ビデオレイヤー、エフェクトなどの重要な機能の強調表示について説明します。

記事では、既存のGIFにフレームを追加するなど、PhotoshopでアニメーションGIFの作成と最適化について説明します。主な焦点は、品質とファイルサイズのバランスをとることです。

記事では、ファイルのサイズと解像度に焦点を当てたPhotoshopを使用して、Webの画像の最適化について説明します。主な問題は、品質と負荷時間のバランスをとることです。

この記事は、Photoshopで印刷するための画像の準備を導き、解像度、色プロファイル、シャープネスに焦点を当てています。 300 PPIおよびCMYKプロファイルが高品質のプリントに不可欠であると主張しています。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
