Фотошоп как изменить размер гифки

Как уменьшить размер файла анимации GIF в Photoshop при минимальных потерях качества? Советы по сохранению и оптимизации анимации GIF в Photoshop.

На чтение 5 мин Просмотров 2.6к.
Обновлено 06.12.2021

Продолжение советов по оптимизации и уменьшению объёма анимированного файла GIF, начало смотрите здесь.

1. Подбор оптимальной модели редукции цвета

Всего в Photoshop имеется четыре модели:
Перцепционная (Perceptual) — для создания пользовательской таблицы цветов, наиболее гармоничных для восприятия

Селективная (Selective) — по умолчанию создает таблицу цветов, схожую с перцепционной, но основанную на ключевых цветах изображения, причём предпочтение отдается web-цветам. Эта таблица обычно делает изображение с наибольшей достоверностью цветов. Эта модель выбрана по умолчанию.

Адаптивная (Adaptive) — для создания пользовательской таблицы цветов спектра путём выборки из тех цветов,которые чаще повторяются в изображении. Например, изображение только с оттенками зеленого и синего цвета создаёт таблицу в основном из оттенков синего и зеленого. Большинство цветов изображения концентрируется в определённой области спектра

Ограниченная (Restrictive) — использует стандартную палитру из 216 безопасных Web-цветов.

Справка: Безопасные веб-цвета рекомендуются для экранного дизайна. Они всегда неизменны при переходе от одного браузера к другому, от одного монитора к другому, или от одной платформы к другой, с их различными разрешениями и возможностями цветопередачи.

Если ваше изображение имеет меньше, чем 216 цветов, неиспользуемые цвета удаляются из таблицы.

Ели говорить откровенно, то я всегда подбираю эти модели методом научного тыка.

цветовые модели gif анимации

2. Замена цветов анимации на Web-цвета

Выше мы рассмотрели модели редукции цвета, последней из которых является «Селективная», меняющая ве цвета изображения на Web-безопасные. Это уменьшает объём файла, но и почти всегда ухудшает качество изображения.

Есть другой вариант — использовать одну из первых трёх моделей и заменять не все цвета на Web, а только часть. Делается это с помощью опции «Web-цвета» (Web Snap).

Чем больше значение процентов, тем меньше размер выходного файла, но и хуже качество. Вё зависит от исходных цветов, а, самое главное, переходов между цветами и светами изображения. Так что опять-таки, значение опции определяется эмпирически, в зависимости от каждого конкретного изображения.

3. Дизеринг (сглаживание, Dithering)

В официальных русскоязычных версиях Photoshop с незапамятных времён опция «Dithering» переводится как «Дизеринг», что является, мягко говоря, неточностью. В данном контексте «Dithering» означает «сглаживание», сглаживание переходов от одного цвета к другому.
Поскольку GIF-файлы содержат ограниченное количество цветов, для улучшения вида рисунка может понадобиться создание переходов между отдельными цветами, а для этого нужно имитировать недостающие цвета. Для создания этих цветов и существует опция «Дизеринг». Всего имеется четыре алгоритма для подобной имитации сглаживания — «Без дизеринга», «Случайное», «Регулярный» и «Шум»:

алгоритмы сглаживания цветов

Рассмотрим алгоритмы подробнее (надеюсь, с режимом «Без дизеринга» всё понятно).

Используя алгоритм «Случайное» (Diffusion), мы, можем регулировать количество сглаживания.
В алгоритмах «Регулярный» (Pattern) и «Шум» (Noise) настройки отсутствуют, Photoshop всё делает автоматически.

Для некоторых изображений «Дизеринг» просто необходим, но следует помнить, что чем больше его значение, тем больше размер файла, т.к. он добавляет разноцветные пиксели в непосредственной близости друг от друга, для имитации вторичных цветов или гладких цветовых градаций.

4. Другие настройки

«Потери» (Lossy) — управление уровнем потерь визуальной информации при сглаживании, которые могут уменьшить размер файла, но также и ухудшить качество картинки. Доступна при отключенной опции «Чересстрочно» (Interlaced).

«Прозрачность» (Transparency) — имеет смысл включить в том случае, если изображение содержит прозрачные участки. Алгоритмы сглаживания работают по принципу опции «Дизеринг» (Dithering) и называются так же.

5. Сравнение исходной и оптимизированной версий

После того, как Вы добавили свои настройки в диалоговое окно сохранения для Web, с оптимизированной версией произошли изменения, и, почти всегда, в сторону ухудшения качества. Тщательно проверьте полученный результат, сравните его с исходником:

как уменьшить объём файла анимации GIF в Photoshop

Вы можете просмотреть анимацию, а также задать параметры повторов — один раз, постоянно или задать собственное количество повторов:

изменить повторы анимации

Если результат Вас удовлетворил, переходите к следующему действию — сохранению анимации.

6. Подогнать оптимизацию анимации под указанный объём файла

Такая опция тоже имеется при сохранении анимации в Photoshop. Вы можете задать размер выходного файла, и исходя из этого Photoshop сам произведёт оптимизацию, подогнав размер файла под указанный Вами.

Нажимаем на кнопку в правом верхнем углу и выбираем строку «Оптимизировать по размеру файла» (Optimize to File Size)

подгон анимации под заданный объём файла

7. Предварительный просмотр анимации в браузере, сохранение параметров оптимизации

После того, как Вы подобрали нужные настройки, сохраните их в наборе. Кликните по значку в правом верхнем углу окна сохранения для Web и нажмите на строку «Сохранить настройки»:

сохранение набора анимации

Анимацию с нашими настройками мы можем предварительно просмотреть в браузере, нажав на кнопку в левом нижнем углу окна:

воспроизвести анимацию в браузере Photoshop

Будет показана не только анимация, но и все данные по файлу GIF — объём, линейные размеры и т.д., а также HTML-код. Для примера я взял анимацию из этого урока:

воспроизвести анимацию в браузере Photoshop

Если всё нравится, то сохраняем файл. Для этого нажимаем кнопку «Сохранить» в правом нижнем углу диалогового окна. Открывается новое окно, где выбираем путь, ставим настройки, как показано на рисунке (это настройки по умолчанию), нажимаем кнопку «Сохранить»:

сохранить анимацию Photoshop

Анимация будет сохранена. Если сё-таки что-то не понравится, то можно будет произвести оптимизацию заново, используя сохранённый набор настроек.

Содержание

  • Как изменить размер GIF
    • Способ 1: GIMP
    • Способ 2: Adobe Photoshop
    • Заключение
  • Вопросы и ответы

как изменить размер рисунка гиф

Анимированные графические файлы с расширением GIF очень популярны в интернете. Однако на многих сайтах всё ещё существуют ограничения на размер загружаемых ГИФ. Потому сегодня мы хотим представить способы, которыми можно изменить высоту и ширину таких изображений.

Как изменить размер GIF

Поскольку GIF представляет собой последовательность кадров, а не отдельную картинку, изменять размер файлов в таком формате непросто: понадобится продвинутый графический редактор. Самыми популярными на сегодняшний день являются Adobe Photoshop и его свободный аналог GIMP – на их примере мы покажем вам эту процедуру.

Читайте также: Чем открыть GIF

Способ 1: GIMP

Свободный редактор графики ГИМП отличается обширным функционалом, который мало чем уступает платному конкуренту. Среди опций программы есть и возможность изменения размера «гифок». Это делается так:

  1. Запустите программу и выберите вкладку «Файл», затем используйте опцию «Открыть».
  2. Открыть GIF-анимацию для редактирования в GIMP

  3. С помощью встроенного в GIMP файлового менеджера доберитесь до каталога с нужным изображением, выделите его мышкой и воспользуйтесь кнопкой «Открыть».
  4. Выбрать GIF-анимацию для редактирования в GIMP через встроенный файловый менеджер

  5. Когда файл будет загружен в программу, выберите вкладку «Изображение», затем — пункт «Режим», в котором отметьте вариант «RGB».
  6. Установить режим пространства RGB для редактирования GIF-анимации в GIMP

  7. Далее зайдите во вкладку «Фильтры», щелкните по опции «Анимация» и выберите вариант «Разоптимизировать».
  8. Установить фильтр разоптимизации для редактирования GIF-анимации в GIMP

  9. Обратите внимание, что появилось новая открытая вкладка в рабочем окне GIMP. Все последующие манипуляции следует проводить только в ней!
  10. Вкладка с готовой для редактирования GIF-анимацией в GIMP

  11. Снова используйте пункт «Изображение», но на этот раз выберите опцию «Размер изображения».
    Приступить к изменению размера GIF-анимации в GIMP

    Появится всплывающее окно с настройками высоты и ширины кадров анимации. Введите нужные значение (вручную или с помощью переключателей) и нажмите на кнопку «Изменить».

  12. Изменить размер анимации GIF в GIMP

  13. Чтобы сохранить результаты, перейдите по пунктам «Файл»«Экспортировать как…».
    Экспортировать редактированную в GIMP GIF-анимацию
    Появится окно выбора места хранения, имени и расширения файла. Проследуйте к каталогу, куда хотите сохранить изменённый файл и переименуйте его, если потребуется. Затем щёлкните «Выберите тип файла» и отметьте в появившемся списке вариант «Изображение GIF». Проверьте настройки, после чего нажмите на кнопку «Экспортировать».
  14. Настройки экспорта редактированной в GIMP GIF-анимации

  15. Появится окно настроек экспорта. Обязательно отметьте пункт «Сохранить как анимацию», остальные параметры можете оставить без изменений. Воспользуйтесь кнопкой «Экспорт», чтобы сохранить изображение.
  16. Экспорт изменённого изображения в анимацию GIF в GIMP

  17. Проверьте результат работы – изображение уменьшилось до выбранных размеров.

Готовая изменённая в GIMP анимация GIF

Lumpics.ru

Как видим, с задачей изменения размеров GIF-анимации GIMP справляется великолепно. Единственным недостатком можно назвать сложность процесса для неопытных пользователей и тормоза в работе с объёмными изображениями.

Способ 2: Adobe Photoshop

Photoshop новейшей версии является самым функциональным графическим редактором среди представленных на рынке. Естественно, в нём присутствует возможность изменения размеров GIF-анимаций.

  1. Откройте программу. Первым делом выберите пункт «Окно». В нём зайдите в меню «Рабочая среда» и активируйте пункт «Движение».
  2. Включить среду движения для редактирования GIF в Adobe Photoshop

  3. Далее откройте файл, размеры которого хотите изменить. Для этого выберите пункты «Файл»«Открыть».
    Открыть GIF для редактирования в Adobe Photoshop
    Запустится «Проводник». Проследуйте к папке, в которой хранится целевое изображение, выделите его мышкой и нажмите на кнопку «Открыть».
  4. Выбрать ГИФ-анимацию в проводнике для ресайза в Adobe Photoshop

  5. Анимация будет загружена в программу. Обратите внимание на панель «Шкала времени» — на ней отображены все кадры редактируемого файла.
  6. Раскадровка редактируемой GIF в Adobe Photoshop

  7. Для изменения размера используйте пункт «Изображение», в котором выберите вариант «Размер изображения».
    Редактировать размеры GIF в Adobe Photoshop
    Откроется окошко настройки ширины и высоты картинки. Убедитесь, что единицы измерения установлены в положение «Пиксели», затем введите в поля «Ширина» и «Высота» нужные вам значения. Остальные настройки можно не трогать. Проверьте параметры и нажимайте «ОК».
  8. Изменить размеры ГИФ-анимации для ресайза в Adobe Photoshop

  9. Чтобы сохранить полученный результат, воспользуйтесь пунктом «Файл», в котором выберите вариант «Экспортировать», а далее — «Экспортировать для Web (старая версия)…».
    Экспорт отредактированной GIF в Adobe Photoshop
    Настройки в этом окне тоже лучше не менять, потому сразу нажимайте на кнопку «Сохранить» внизу рабочей области утилиты экспорта.
  10. Сохранить отредактированную GIF в Adobe Photoshop

  11. Выберите в «Проводнике» местоположение изменённого GIF, переименуйте при необходимости и нажмите «Сохранить».
    Выбрать место хранения изменённой ГИФ-анимации в Adobe Photoshop
    После этого Photoshop можно закрывать.
  12. Проверьте результат в указанной папке при сохранении папке.

Изменённаяв Adobe Photoshop ГИФ-анимация, открытая в Проводнике

Фотошоп представляет собой более быстрый и удобный способ изменения размера GIF-анимации, но недостатки тоже имеются: программа платная, а срок действия пробной версии слишком короткий.

Читайте также: Аналоги Adobe Photoshop

Заключение

Подводя итоги, отметим, что изменять размеры анимации ненамного сложнее, чем ширину и высоту обычных картинок.

Еще статьи по данной теме:

Помогла ли Вам статья?

Настроить размер изображения и обрезать GIF очень просто. Поскольку все ваши кадры находятся на своем собственном слое, у вас, по сути, открыто только одно изображение в Photoshop, поэтому, чтобы обрезать изображение, вам нужно всего лишь взять инструмент кадрирования и использовать его, как обычно для фотографии.

Kapwing позволяет вам обрезать любой GIF онлайн всего за несколько простых шагов и совершенно бесплатно. Просто загрузите GIF, который хотите отредактировать, и редактор автоматически позволит вам обрезать GIF до идеального размера. Вы также сможете выбрать один из множества предустановленных размеров для размера обрезки.

Можно ли изменить размер GIF в Photoshop?

1) Выберите «Файл» > «Импорт» > «Видеокадр в слои…»… 3) Откроется окно «Импорт видео в слои». Нажмите ОК. 4) Анимация будет загружена, и вы можете перейти в «Изображение» > «Размер изображения…» или «Изображение» > «Размер холста», чтобы изменить или обрезать изображение до нужного размера.

Как обрезать и изменить размер GIF?

Чтобы обрезать или изменить размер анимированного GIF с помощью EZGIF.COM, все, что вам нужно сделать, это:

  1. Загрузите движущийся клип со своего ПК или мобильного устройства (вы также можете вставить URL-адрес типа изображения).
  2. Выберите инструмент «Обрезка» или «Изменить размер», расположенный на верхней панели.
  3. Установите ширину, высоту и отрегулируйте соотношение сторон по мере необходимости.

30.03.2021

Как обрезать GIF в круг?

Чтобы обрезать GIF, сначала загрузите GIF и перейдите в «Правка»> «Обрезать изображение». Затем вы можете выбрать форму обрезки: прямоугольник, квадрат, эллипс и круг.

Как изменить размер GIF?

Как изменить размер анимированного GIF онлайн?

  1. Нажмите кнопку «Обзор…», чтобы выбрать GIF.
  2. В разделе «Изменить размер GIF» введите его новые размеры в поля «Ширина» и «Высота». Чтобы изменить пропорцию GIF, снимите флажок «Зафиксировать пропорцию».
  3. Нажмите кнопку «Сохранить GIF», чтобы загрузить GIF с измененным размером.

Как уменьшить размер GIF в Photoshop?

Если вы используете Photoshop, создайте файл GIF с помощью пункта меню «Экспортировать как». Выберите «Файл» > «Экспортировать как». Когда откроется меню, выберите GIF в качестве формата файла и уменьшите физические размеры (ширину и высоту) изображения.

Как изменить размер GIF в Photoshop без потери качества?

Вот обзор:

  1. Начните с правильного типа изображения. GIF означает формат обмена графикой. …
  2. Уменьшите количество цветов. Чем меньше цветов вы используете, тем меньше размер файла. …
  3. Выберите палитру уменьшения цвета. …
  4. Уменьшите количество дизеринга. …
  5. Добавьте сжатие с потерями.

18.11.2005

Как обрезать GIF-изображение?

Просто загрузите GIF и используйте мышь или трекпад, чтобы выбрать часть изображения, которую вы хотите обрезать/обрезать. Вы также можете заполнить нужные размеры (в пикселях) вручную. Вы можете выбрать одно из предустановленных соотношений сторон: квадратное, 4:3, 16:9, 3:2, 2:1, золотое сечение или свободно выбрать область, которую хотите обрезать.

Как сделать GIF?

Как сделать GIF из видео на YouTube

  1. Зайдите на GIPHY.com и нажмите «Создать».
  2. Добавьте веб-адрес видео, которое хотите преобразовать в GIF.
  3. Найдите часть видео, которую вы хотите снять, и выберите длину. …
  4. Необязательный шаг: украсьте свой GIF. …
  5. Необязательный шаг: добавьте хэштеги в свой GIF. …
  6. Загрузите свой GIF в GIPHY.

Как уменьшить анимированную картинку

Порядок уменьшения анимированной картинки в редакторе Adobe Photoshop такой же, как и у остальных видов изображений. Единственное ограничение – эта картинка должна быть в формате GIF.

Как уменьшить анимированную картинку

Вам понадобится

  • Adobe Photoshop

Инструкция

Откройте Adobe Photoshop и загрузите в него нужную анимированную картинку (помните, она должна иметь формат GIF). Для этого нажмите пункт меню File > Open (или используйте горячие клавиши Ctrl+O), выберите нужный файл и нажмите «Открыть». Анимационная картинка появится в рабочей области программы.

Вызовите меню настроек размера изображения. Сделать это можно двумя способами. Первый – нажмите пункт главного меню Image > Image Size. Второй – кликните горячие клавиши Alt+Ctrl+I.

В полях Width и Height введите необходимые значения, отталкиваясь от уже имеющихся. Справа от этих полей находятся выпадающие меню, в которых можно поменять единицу измерения: пиксели или проценты.

Обратите внимание на пункт Constrain Proportions, который находится в нижней части окна. Если поставить рядом с ним галочку, то анимационная картинка сохранит свои пропорции при изменении. Также имеет смысл поставить галочку возле пункта Resample Image, а затем выбрать в выпадающем меню Bicubic Sharper (best for reduction). Это позволит сделать итоговую картинку более четкой. Чтобы изменения вступили в силу, нажмите ОК.

Если результат вас не устроил, повторите описанный выше порядок действий. Чтобы сохранить результат, нажмите пункт меню File > Save For Web & Devices (или используйте горячие клавиши Ctrl+Shift+Alt+S), а в следующем окне сразу нажмите Save. Появится еще одно окно, выберите в нем путь для сохранения файла, по желанию поменяйте ему название и нажмите «Сохранить».

Видео по теме

Полезный совет

Если вы в чем-нибудь ошиблись, не обязательно выходить из программы и загружать ее заново. Чтобы вернуться на шаг назад, используйте горячие клавиши Ctrl+Z, а чтобы снова пройти на шаг вперед – Ctrl+Shift+Z. Для того чтобы вернуться на более чем один шаг назад, используйте панель History (пункт главного меню Window > History).

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

  1. Photoshop Elements User Guide
  2. Introduction to Photoshop Elements
    1. What’s new in Photoshop Elements
    2. System requirements | Photoshop Elements
    3. Workspace basics
    4. Guided mode
    5. Making photo projects
  3. Workspace and environment
    1. Get to know the Home screen
    2. Workspace basics
    3. Tools
    4. Panels and bins
    5. Open files
    6. Rulers, grids, and guides
    7. Enhanced Quick Mode
    8. File information
    9. Presets and libraries
    10. Multitouch support
    11. Scratch disks, plug-ins, and application updates
    12. Undo, redo, and cancel actions
    13. Viewing images
  4. Fixing and enhancing photos
    1. Resize images
    2. Cropping
    3. Process camera raw image files
    4. Add blur, replace colors, and clone image areas
    5. Adjust shadows and light
    6. Retouch and correct photos
    7. Sharpen photos
    8. Transforming
    9. Auto Smart Tone
    10. Recomposing
    11. Using actions to process photos
    12. Photomerge Compose
    13. Create a panorama
    14. Moving Overlays
    15. Moving Elements
  5. Adding shapes and text
    1. Add text
    2. Edit text
    3. Create shapes
    4. Editing shapes
    5. Painting overview
    6. Painting tools
    7. Set up brushes
    8. Patterns
    9. Fills and strokes
    10. Gradients
    11. Work with Asian type
  6. Guided edits, effects, and filters
    1. Guided mode
    2. Filters
    3. Guided mode Photomerge edits
    4. Guided mode Basic edits
    5. Adjustment filters
    6. Effects
    7. Guided mode Fun edits
    8. Guided mode Special edits
    9. Artistic filters
    10. Guided mode Color edits
    11. Guided mode Black & White edits
    12. Blur filters
    13. Brush Stroke filters
    14. Distort filters
    15. Other filters
    16. Noise filters
    17. Render filters
    18. Sketch filters
    19. Stylize filters
    20. Texture filters
  7. Working with colors
    1. Understanding color
    2. Set up color management
    3. Color and tonal correction basics
    4. Choose colors
    5. Adjust color, saturation, and hue
    6. Fix color casts
    7. Using image modes and color tables
    8. Color and camera raw
  8. Working with selections
    1. Make selections in Photoshop Elements
    2. Saving selections
    3. Modifying selections
    4. Move and copy selections
    5. Edit and refine selections
    6. Smooth selection edges with anti-aliasing and feathering
  9. Working with layers
    1. Create layers
    2. Edit layers
    3. Copy and arrange layers
    4. Adjustment and fill layers
    5. Clipping masks
    6. Layer masks
    7. Layer styles
    8. Opacity and blending modes
  10. Creating photo projects
    1. Project basics
    2. Making photo projects
    3. Editing photo projects
  11. Saving, printing, and sharing photos
    1. Save images
    2. Printing photos
    3. Share photos online
    4. Optimizing images
    5. Optimizing images for the JPEG format
    6. Dithering in web images
    7. Guided Edits — Share panel
    8. Previewing web images
    9. Use transparency and mattes
    10. Optimizing images for the GIF or PNG-8 format
    11. Optimizing images for the PNG-24 format
  12. Keyboard shortcuts
    1. Keys for selecting tools
    2. Keys for selecting and moving objects
    3. Keys for the Layers panel
    4. Keys for showing or hiding panels (expert mode)
    5. Keys for painting and brushes
    6. Keys for using text
    7. Keys for the Liquify filter
    8. Keys for transforming selections
    9. Keys for the Color Swatches panel
    10. Keys for the Camera Raw dialog box
    11. Keys for the Filter Gallery
    12. Keys for using blending modes
    13. Keys for viewing images (expertmode)

Формат GIF

Формат GIF использует 8-битные цвета и эффективно сжимает однотонные области с сохранением резких ясных контрастов, имеющихся в шрифтовых фрагментах, логотипах, и прочих изображениях без полутонов. Формат GIF можно эффективно использовать для создания анимированных изображений и сохранения прозрачности в изображении. Формат GIF поддерживают большинство веб-браузеров.

В формате предусмотрено сжатие без потерь (LZW). Однако в силу ограничения палитры используемых цветов (не более 256 оттенков цвета) оптимизация оригинального 24-битного изображения в формат GIF с глубиной цвета 8 бит может привести к потере оттенков в изображении.

Изображение в формате GIF с использованием селективного алгоритма сокращения цветов (слева) и изображение в формате GIF с использованием стандартной таблицы цветов, поддерживаемых в вебе (справа)

Можно выбрать количество используемых цветов в изображении в формате GIF и задать метод смешения цветов в веб-браузере (способ имитации отсутствующих цветов). GIF поддерживает прозрачность фона, т.е. незаметный переход кромки изображения к фоновому цвету веб-страницы.

Формат PNG-8

Формат PNG-8 использует 8-битные цвета. Как и формат GIF, PNG-8 эффективно сжимает однотонные области с сохранением резких ясных контрастов, имеющихся в шрифтовых фрагментах, логотипах и прочих изображениях без полутонов.

Поскольку PNG-8 поддерживают далеко не все веб-браузеры, лучше воздержитесь от сохранения изображения, предназначенного для широкой аудитории, в данном формате.

Функция компрессии у формата PNG-8 имеет улучшенные характеристики, чем у формата GIF, при этом изображение в формате PNG-8 меньше по размерам того же изображения в формате GIF (от 10% до 30%, в зависимости от цветового узора). Несмотря на то, что алгоритм сжатия PNG-8 является методом сжатия без потерь, оптимизация оригинального 24-битного изображения в формат GIF с глубиной цвета 8 бит может привести к потере оттенков в изображении.

При сохранении некоторых изображений, в особенности рисунков с простыми узорами и небольшим количеством цветов, сжатие в формат GIF даст файл меньшего размера, чем сжатие в формат PNG-8. Для сравнения размеров оптимизированного изображения в формате GIF и PNG-8 оцените результаты в окне предварительного просмотра.

Равно как и для формата GIF можно выбрать количество используемых цветов изображения и задать метод смешения цветов в веб-браузере (способ имитации отсутствующих цветов). Формат PNG-8 поддерживает прозрачность фона, т.е. позволяет создавать незаметный переход кромки изображения к фоновому цвету веб-страницы.

PNG-8 с использованием 256 цветов без смешения (слева) и PNG-8 с использованием 16 цветов и смешением (справа)

Оптимизация изображения в формат GIF или PNG-8

GIF эффективно сжимает однотонные области с сохранением резких ясных контрастов, имеющихся в шрифтовых фрагментах, логотипах и прочих изображениях без полутонов. Как и формат GIF, PNG-8 поддерживает прозрачность и эффективно сжимает однотонные области с сохранением резких ясных контрастов, имеющихся в шрифтовых фрагментах, логотипах, и прочих изображениях без полутонов; однако, не все веб-браузеры способны отображать файлы в формате PNG-8.

  1. Откройте изображение и выберите «Файл» > «Сохранить для Web».

  2. Выберите «GIF» или «PNG-8» из списка форматов оптимизации.

  3. Для постепенного улучшения разрешения изображения в процессе загрузки установите флажок «Чересстрочная развертка». Чересстрочная развертка увеличивает скорость загрузки изображения и уже после первого этапа развертки пользователь сможет получить представление о том, что, собственно, изображено на картинке.

  4. В списке «Алгоритм сокращения цветов» под списком форматов можно выбрать параметр создания цветовой таблицы, или алгоритм цветовой редукции:


    Перцепционная

    Создает пользовательскую палитру, отдавая предпочтение цветам, к которым человеческий глаз имеет наибольшую чувствительность.


    Выборочная

    Создает таблицу цветов, аналогичную таблице «С учетом восприятия», но отдает предпочтение областям большого размера и сохранению цветов Веб. Обычно при использовании этого параметра получаются изображения с наибольшей достоверностью цветов. (По умолчанию установлена «Выборочная».)


    Адаптивная

    Создает палитру на основе выборки цветов спектра, которые наиболее часто встречаются в изображении. Например, для изображения, в котором присутствуют только зеленый и синий цвета, палитра будет состоять в основном из синего и зеленого оттенков. В большинстве изображений цвета сконцентрированы в определенных областях спектра.


    Ограниченная (Веб)

    Использует стандартную таблицу из 216 цветов, включающую 8-битные цвета (256 цветов), используемые в операционных системах Windows и Mac OS. Выбор данного варианта исключает необходимость имитации отсутствующих цветов на основе смешения имеющихся при отображении изображения, использующего 8-битные цвета. Если изображение имеет менее 216 цветов, неиспользуемые цвета удаляются из таблицы.

  5. Чтобы задать максимальное количество цветов в таблице, выберите число в раскрывающемся списке «Цвета», введите значение в текстовом поле или щелкайте стрелки для изменения количества цветов. Если изображение содержит меньше цветов, чем имеется на панели, в цветовой таблице отображается фактическое число цветов в изображении.

  6. При использовании алгоритма сокращения цветов «Ограниченная (Веб)» в меню «Цвета» можно выбрать вариант «Автоматически». Выберите вариант «Автоматически», если вы хотите, чтобы программа Photoshop Elements обеспечила использование только цветов, имеющихся в исходном изображении.

  7. Выберите значение смешения в процентах, указав его в числовом поле или щелкнув на стрелках и перетащив всплывающий ползунок на нужное значение.

  8. Если изображение содержит прозрачные области, установите флажок «Прозрачность», который позволяет обеспечить прозрачные области в изображении, сквозь которые просвечивает фон веб-страницы; снимите флажок «Прозрачность», чтобы заполнить полностью или частично прозрачные пикселы цветом подложки.

  9. Чтобы создать анимацию в формате GIF, выберите «Анимация».

  10. Чтобы сохранить оптимизированное изображение, нажмите «ОК». В диалоговом окне «Сохранить оптимизированное изображение» укажите имя файла и нажмите кнопку «Сохранить».

Создание анимированного GIF-файла

  1. Расположите изображения, которые должны появляться в каждом кадре анимации на отдельных слоях панели «Слои». Например, чтобы создать анимацию с моргающим глазом, поместите изображение с закрытым глазом на одном слое, а с открытым глазом — на другом.

  2. Выполните команду «Файл» > «Сохранить для Web».

    Если изображение имеет несколько слоев, можно открыть диалоговое окно «Сохранить для Web» из диалогового окна «Сохранить как», выбрав «CompuServe GIF format» и установив флажок «Слои как кадры».

  3. Настройте параметры оптимизации изображения в формате GIF.

  4. Задайте дополнительные параметры в разделе «Анимация» диалогового окна:


    Параметры повтора

    Непрерывно повторите анимацию в веб-браузере или примените анимацию только один раз. Также можно выбрать параметр «Другое», чтобы указать количество повторов анимации.


    Задержка кадра

    Указывает число секунд, которое анимация воспроизводится в веб-браузере. Для определения долей секунд используйте десятичные значения. Например, чтобы задать полсекунды, укажите значение 0,5.

Понравилась статья? Поделить с друзьями:
  • Фотошоп как изменить размер выделенной области
  • Фотошоп как изменить прозрачность слоя
  • Фотошоп как изменить прозрачность выделенной области
  • Фотошоп как изменить перспективу объекта
  • Фотошоп как изменить перспективу картинки