フロントエンド技術-PS切断-PS チュートリアル-php.cn

ページ制作部分の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 カット用の共通ツール写真

▪移動ツール

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

▪長方形マーキーツール

▪魔法の杖ツール

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

▪ズームツール

-ズームイン: 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 線形グラデーションかどうかを判断します (魔法の杖)

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

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

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

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 軸をタイリングするための新しいファイルを作成します。切り取った画像の幅は新しいファイルと一致する必要があります

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

▪基準線を引く

▪スライスツールを選択

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

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

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

▪保存

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

4.保存

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

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

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

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

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