GIFをPhotoshopに保存する方法

Anonim

GIFをPhotoshopに保存する方法

Photoshopでアニメーションを作成した後、それは利用可能なフォーマットの1つに保存されなければなりません。そのうちの1つはGIFです。このフォーマットの特徴は、ブラウザに表示(再生)することを目的としています。

アニメーションを保存するための他のオプションに興味がある場合は、この記事を読むことをお勧めします。

レッスン:Photoshopでビデオを保存する方法

GIFアニメーションを作成するプロセスが以前のレッスンの1つで記述され、今日、私たちはファイルをGIF形式と最適化設定で保存する方法について説明します。

レッスン:Photoshopで簡単なアニメーションを作成します

節約GIF。

まず最初に、[資料]を繰り返して[設定の保存]ウィンドウを読んでください。 [ファイル]メニューの[Web用の保存]項目をクリックして開きます。

POINTSHOPでGIFを保存するために、Web用のPOINT SAVE FILEメニュー

ウィンドウは2つの部分で構成されています。プレビューブロック

PhotoshopにおけるGIFの保存のパラメータの設定における払計単位

そして設定ブロック。

PhotoshopのGIFKI保存設定ウィンドウのブロック設定

ブロックプレビュー

ブロックの上部に表示されているビューのオプションの数を選択します。ニーズに応じて、目的の設定を選択できます。

PhotoshopのGifki保全設定ウィンドウの表示オプションの選択

元のウィンドウの画像は別々に設定されています。これは最適なオプションを選択できるように行われます。

ブロックの左側には、小さなツールセットがあります。 「手」と「スケール」のみを使用します。

Photoshopのgifki保全設定ウィンドウの手とスケールツール

「手」を使うと、選択したウィンドウ内の画像を移動できます。このツールによっても選択されています。 「スケール」は同じ行動を実行します。ブロックの下部にあるボタンでも画像を削除することもできます。

Photoshopのgifki保全設定ウィンドウのイメージスケール

下の値は「閲覧」のボタンです。デフォルトのブラウザで選択したオプションを開きます。

Photoshopのギフトパラメータの設定ウィンドウのブラウザの画像表示ボタン

パラメータの設定を除いて、ブラウザウィンドウで、HTML GIFコードも取得できます。

PhotoshopのGIFを維持しながら、デフォルトのブラウザの画像のプレビュー

ブロック設定

このブロックでは、画像パラメータが設定され、それを考慮してください。

  1. カラースキーム。この設定は、最適化時にインデックス付き色のどのテーブルを画像に適用するかを決定します。

    PhotoshopでGIFを維持しながら色の索引付け方式の選択

    • 知覚、そして単に「認識の計画」使用されると、Photohopは、画像の現在の色合いによって導かれた色の表を作成します。開発者によると、この表は人間の目が色をどのように見ているかにできるだけ近いです。 Plus - 画像はオリジナルに最も近いので、色は最大限に保存されています。
    • 選択的スキームは前のものと似ていますが、Web用のWeb Secureに関連する色は主に使用されます。それはまた最初のものに近い色合いの表示に焦点を当てました。
    • 適応的です。この場合、テーブルは画像内でより一般的な色から作成されます。
    • 限定。 77色で構成されており、そのサンプルのいくつかはポイント(穀物)の形で白で置き換えられます。
    • カスタム。このスキームを選択するとき、あなた自身のパレットを作成することが可能です。
    • 白黒。この表は、穀物を使用して2色(白黒)のみを使用します。
    • グレイのグレードで。灰色の色合いの様々な84レベルがあります。
    • MacOSとWindows。テーブルデータは、これらのオペレーティングシステムを実行しているブラウザのマッピング画像の機能に基づいてコンパイルされます。

    これはスキームを適用するいくつかの例です。

    PhotoshopでGIFを維持しながらさまざまな色の索引付けテーブルを使用した画像サンプル

    ご覧のとおり、最初の3つのサンプルは非常に許容可能な品質を持っています。視覚的に彼らがほとんど互いに異ならないという事実にもかかわらず、さまざまな画像でこれらのスキームは異なって動作します。

  2. カラーテーブル内の最大色数。

    PhotoshopのGIFを維持しながら、インデックステーブル内の最大色数を設定する

    画像内の色合いの数はその重みに直接影響を与え、したがって、ブラウザのダウンロード速度で。 GIFの重量を減らす一方で、この設定はほとんどの品質に影響を与えないため、128の値が最もよく使用されます。

    PhotoshopのGIFを維持しながら、インデックステーブル内の最大色数の設定例

  3. Webカラー。この設定は、シェードが安全なWebパレットと同等に変換される許容範囲を確立します。ファイルのフィールドは、スライダによって設定された値によって決まります。値が大きい - ファイルは少なくなります。 Web-Colorsを設定するときは、品質についても忘れないでください。

    PhotoshopでGIFを維持しながらWeb-Colorsに画像変換許容誤差を設定する

    例:

    PhotoshopでGIFを維持しながら、WEEBへの色変換の設定例

  4. DySrying選択したインデックステーブルに含まれているシェードをミキシングして、色の遷移をスムーズ外にすることができます。

    PhotoshopのGIFを維持しながらキジング設定

    また、設定では、グラデーションや単色のサイトの健全性を維持するためにどのように役立ちます。分配を使用する場合は、ファイルの重量が増えます。

    例:

    PhotoshopでGIFを維持しながらディジーレーション設定を適用する例

  5. 透明性GIFフォーマットは、絶対的に透明な、または絶対に不透明なピクセルのみをサポートします。

    PhotoshopでGIFを維持しながら背景の透明性を設定します

    このパラメータは、追加の調整なしで、線の曲線を除く、ピクセルのレディースを残します。

    PhotoshopにGIFを維持しながら調整マットの使用例

    調整は「Matte」と呼ばれます(一部の編集者「カイマ」)。これにより、それが配置されるページの背景とピクセルの写真を混合するように構成されています。最良の表示のために、サイトの背景の色に対応する色を選択します。

    Photoshopのプレスページの背景を持つピクセル画像のミキシングの調整

  6. インターレースWeb設定に最も役立つ1つ。ファイルがかなりの重みを持つ場合は、その品質の向上に負荷をかけるため、すぐにページに画像を表示することができます。

    PhotoshopのGIFを維持しながらインターレースを設定する

  7. SRGB変換は、保存中に最大原画像の色を保存するのに役立ちます。

    PhotoshopでGIFを維持しながら、SRGBに色の変換を設定します

「解管透明性」を設定すると、画質が大幅に悪化し、レッスンの実際的な部分における「損失」パラメータについて説明します。

PhotoshopでGIFを維持しながら、透明性とデータ損失のための解析設定

PhotoshopでGIFの保存を設定するプロセスを最大限に理解するためには、練習する必要があります。

練習

インターネットの画像を最適化するという目的は、品質を維持しながらファイルの重みの最大限を低減します。

  1. 画像を処理した後は、「ファイル - Web用の保存」メニューに進みます。
  2. "4オプション"ビューモードを表示します。

    PhotoshopでGIFを維持しながら結果を表示するためのオプション数を選択する

  3. 次に、オリジナルに最も似たオプションの1つが必要です。ソースの右側にある写真にしましょう。これは、最大品質のファイルのサイズを推定するために行われます。

    設定設定は次のとおりです。

    • 配色「選択的」
    • "色" - 265。
    • 「ダイアーリング」は「ランダム」、100%です。
    • 画像の最終画像は非常に小さくなるため、「インターレース」パラメータの反対側のDAWを取り外します。
    • 「Webカラー」と「損失」 - ゼロ。

      PhotoshopのGIFを維持しながら参照画像のパラメータを設定する

    結果を元のものと比較してください。サンプルウィンドウの下部に、現在のGIFサイズと指定されたインターネット速度でのロード速度が表示されます。

    PhotoshopのGIFを維持しながら、画像の最適化の結果の比較

  4. 設定したばかりの写真に行きます。最適化しようとしましょう。
    • スキームを変更しないでください。
    • 色の数は128まで減少します。
    • Dysmering値は90%に減少しました。
    • この場合、Web-Coloundは触れません。この場合、品質を保持するのには役立ちません。

      PhotoshopのGIFを維持しながらターゲット画像パラメータを設定する

    GIFサイズは36.59 KBから26.85 KBに減少した。

    PhotoshopでGIFを維持しながら最適化後の画像サイズの縮小

  5. いくつかの粒状性と小さな欠陥がすでに写真に存在しているので、「損失」を増やそうとしましょう。このパラメータは、GIFを圧縮するときの許容レベルのデータ損失を定義します。値を8に変更します。

    GIFをPhotoshopに保存するためにGIFを圧縮するときの許容データ損失のレベルを設定する

    私たちはまだファイルのサイズを減らすことができず、少し質が低下しました。 GIFSは現在25.9キロバイトの重さです。

    PhotoshopでGIFを維持しながら損失を設定した後の画像サイズ

    合計、私たちは30%以上の画像のサイズを小さくすることができました。非常に良い結果。

  6. さらなる行動は非常に単純です。保存ボタンをクリックしてください。

    PhotoshopのGIFKI保全設定ウィンドウの保存ボタン

    保存する場所を選択し、GIFの名前を付けて、もう一度「保存」を押す。

    PhotoshopにおけるGIFの保存の場所と名前を選択する

    GIFとともに、私たちの写真が構築されるHTML文書を作成する機会があります。これを行うには、空のフォルダを選択することをお勧めします。

    PhotoshopのHTML文書と一緒にGIFを保存する

    その結果、ページとフォルダが表示されます。

    Photoshopに保存されたGIFを持つフォルダ

ヒント:ファイル名を割り当てるときは、すべてのブラウザがそれらを読むことができるわけではないため、キリル文字を使用しないでください。

GIF形式で画像を保存するためのこのレッスンは完了です。それでは、インターネット上の配置のためにファイルを最適化する方法を見つけました。

続きを読む