フロントエンド Photoshop スライス

スライスとは何ですか? (Photoshop でスライス)

スライス: 写真をいくつかの部分に切り分けて 1 つずつアップロードすると、アップロード速度が速くなります。各スライスは、スライス独自の設定、カラー パレット、リンク、反転効果、およびアニメーション効果を含む独立したファイルとして転送されます。

スライスツール: 主に大きな画像をいくつかの小さな画像に分解するために使用されます。現在の Web ページは写真とテキストでいっぱいであり、そのために時間がかかるため、この機能は主に Web ページで使用されます。ウェブを閲覧する人をあまり長く待たせないように、画像を小さく切り取ります。

スライスは Web ページ制作プロセスにおいて非常に重要なステップであり、スライスが正しいかどうかは Web ページのポストプロダクションに影響を与えることがよくあります。一般的に、Web ページや大規模な画像のレンダリングをカットするには、PS または FW が使用されます。重要な正しいスライスは、Web サイトに非常に良い影響をもたらします。例: Web ページの読み込み時間の短縮、動的な効果の作成、画像やリンクの最適化など。

1. Web ページのスライスの作成

1. Web ページの読み込み時間を短縮します

Web ページには大きなバナー画像が必要になる場合があり、ブラウザーが画像をダウンロードするのに時間がかかります。ユーザーエクスペリエンスに貢献しません。 Web スライシングの登場により、この問題はうまく解決されました。スライスを使用すると、大きな画像全体がさまざまな小さな画像に分割され、ブラウザもこれらの小さな画像をダウンロードするため、ブラウザが画像をダウンロードする時間が大幅に短縮され、時間を大幅に節約できます。

2. 画像を最適化する

一般的に、完成した画像は 1 つの形式 (jpg、gif、png、psd、dpf など) のみです。形式が 1 つである場合、採用できる最適化方法は 1 つだけです。 Web スライスでは、この画像を多数の小さな画像に分割し、個別に最適化できる他の形式で保存できます。これにより、高画質が確保され、画像のメモリが削減され、Web ページの読み込み速度が向上します。

スライス前の準備: Web ページの PSD ファイルを保存し、PS 画像を統合します

スライスの具体的な準備: スライスの分割、スライスの種類 (ユーザー スライス、非ユーザー スライス)

スライスの基本的なポイント:

範囲カット; 2. スリップ サイズ: Web ページのスライスは小さいほど良いです

3. セクション領域が完了しました: 特定の領域のタイトル テキストなど、完全な部分がスライス内にあることを確認します。将来的にはその時点で便利です。

4. エクスポート タイプ:

単一色のトランジションと少数のトランジションは GIF にエクスポートし、より多くのカラー トランジションを JPG にエクスポートし、アニメーション部分は GIF アニメーションにエクスポートする必要があります。

5. ファイルを保持する: ページの準備ができたとしても、テキストなどの特定の部分をいつ変更する必要があるかわかりません。使用するスライスを個別に変更します。

スライスされたレイヤーの表示と非表示: 背景画像のスライス。 ： スリップ編集: サイズ、調整、削除、スライスの削除 (右クリックして 1 つずつ削除するか、すべて削除することを選択できます)、スライスの保存 (Web として保存)

スライスの削除

編集オプション: スライスの種類と名前: 自動生成され、通常は英語で名前が付けられます。 URL: リンクアドレス、ターゲット、ALT タグ: 画像の検索と最適化が可能です。 スライスの分割: 水平分割、垂直分割。 、組み合わせ部門

保存 スライスを保存 (Web 用に Web 用に保存) Ctrl+Shift+Alt+S: 一般的によく使用される形式は、JIF と PNG です。 -24 は背景透明度をサポートします (透明チェックは背景透明度をサポートします)、JPEG (画質は通常 80 以上)。 次に、「保存」をクリックしてフォーマットを保存します。フォーマットには画像制限があり、デフォルト設定に設定されています。スライス（すべてのスライス：ユーザースライスまたは非ユーザースライスがエクスポートされるかどうか、すべてのユーザースライス：カットされたスライスのみ、選択されたスライスのみ） 1. 3 つのスライス形式の紹介: jpg 形式は明るい色の範囲に使用され、png は Web ページの透明度をサポートし、jif は色をサポートします。範囲は比較的単一です。片 2. 3 種類のスライス形式の比較 (適用範囲): JPG Web ページはこの形式をサポートし、PNG は透明性と背景をサポートします。片 3. 3 つのスライスの範囲と長所と短所: PNG: IE6 は画像の透明度をサポートしていません。GIF アニメーションでエクスポートされる色は単一であり、色が明るい場合は鋸歯状になります。及び スライスの保存と名前変更:

1. スライスのエクスポート

2. スライスの名前変更。名前は英語が最適で、特殊な記号で始まらないようにします): 变 グラデーション: スライス シャドウを個別に描画できます。 : Web ページで実現する方法。CSS3 でも影を実現できますが、IE6 と IE8 はサポートしていません。影のみのスライスを作成し、背景を PNG-24 形式で保存します。 ‐ ‐ ‐ ‐ - sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssよりas

スライスを素早く挿入する方法: ハイパーリンクまたは背景リンクとして追加します

まとめ スライスの知識と重要なポイント: スライスの概念、機能、形式の選択

その他のフロントエンド Photoshop スライス関連記事については、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。