Adobe Photoshop с нуля. Меню File #3. Оптимизация изображений

При подготовке изображений для публикации в Интернете или в качестве других электронных материалов часто приходится искать компромисс между качеством и размером файла изображения. Всем вам наверное не нравятся сайты, которые долго грузятся) Поэтому я опишу команду меню и диалоговое окно Save For Web and Devices (Сохранить для Web и устройств).

Функция "Сохранить для Web и устройств"

Для предварительного просмотра оптимизированных изображений в различных форматах и с применением различных атрибутов можно использовать возможности оптимизации, задаваемые в диалоговом окне "Сохранить для Web и устройств". Имеется возможность одновременного просмотра нескольких вариантов изображения и изменения их настроек оптимизации для выбора наилучшего сочетания параметров в соответствии требованиями. Кроме того, можно задать параметры прозрачности, изменить размер изображения (в пикселах или процентах от исходного размера) и др.

При сохранении оптимизированного файла при помощи команды Save For Web and Devices (Сохранить для Web и устройств) можно задать создание файла HTML для изображения. Этот файл будет содержать всю информацию, необходимую для отображения изображения в веб-браузере.

Описание диалогового окна "Сохранить для Web и устройств"

В диалоговом окне Сохранить для Web и устройств (File>Save For Web and Devices (Файл > Сохранить для Web и устройств)) можно выбрать настройки оптимизации и предварительного просмотра для оптимизированных графических объектов.

less_4_0.jpg

Диалоговое окно "Сохранить для Web и устройств"
1. Панель инструментов.
2. Параметры отображения
3. Область комментариев
4. Масштаб
5. Информация о цвете
6. Просмотр в браузере
7. Палитра оптимизации
8. Метаданные
9. Таблица цветов
10. Размер изображения
11. Элементы управления анимацией
12. Кнопки подтверждения отмены операции
13. Область изображения

Просмотр изображений в диалоговом окне

Чтобы выбрать вариант отображения, щелкните вкладку над областью изображения.
Original (Исходное/Исходное изображение) Отображение изображения без оптимизации.
Optimized (Оптимизированный) Отображение изображения, к которому применены текущие настройки оптимизации.
2-Up (2 варианта) Одновременное отображение двух вариантов изображения.
4-Up (4 варианта) Одновременное отображение четырех вариантов изображения.

Навигация в диалоговом окне

Если в диалоговом окне "Сохранить для Web и устройств" графический объект отображается не полностью, то с помощью инструмента Hand Tool (Рука) можно перемещать область просмотра для отображения нужной его части.

Для увеличения или уменьшения масштаба изображения используется инструмент Zoom Tool(Масштаб).

  • Чтобы перемещаться по изображению для отображения нужной его части, выберите инструмент "Рука" (или удерживайте клавишу "Пробел") и перетащите область просмотра.
  • Чтобы увеличить масштаб, выберите инструмент "Масштаб" и щелкните в области просмотра. Чтобы уменьшить масштаб, щелкните в области просмотра, удерживая клавишу Alt (Windows) или Option (Mac OS).

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

Просмотр информации об оптимизированном изображении и времени загрузки

В области комментариев, расположенной под изображениями в окне "Сохранить для Web и устройств", приводится информация об оптимизации. В комментариях к исходному изображению указываются имя и размер файла. В комментариях к оптимизированному изображению указываются текущие настройки оптимизации, размер оптимизированного файла и предполагаемое время загрузки при выбранной скорости модема. Скорость модема можно указать в раскрывающемся меню Select Download Speed (Выбор скорости загрузки).
Просмотр гаммы изображения с различными значениями

Значение гаммы монитора компьютера влияет на отображение светлых и темных тонов в браузере. В Windows используется значение гаммы 2.2, поэтому изображения в этих операционных системах выглядят темнее, чем в Mac OS, где значение гаммы равно 1.8. В Photoshop можно просмотреть внешний вид изображений в системах с различными значениями гаммы и компенсировать разницу путем коррекции гаммы. Включение параметра просмотра не влияет на окончательный вывод изображения.

В диалоговом окне "Сохранить для Web и устройств" в меню "Просмотр" выберите один из приведенных ниже параметров

Monitor Color (Цвет монитора) Гамма изображения не изменяется. Значение "Цвет монитора" задано по умолчанию.
Macintosh (No Color Management) (без управления цветом) Значение гаммы соответствует значению по умолчанию в Macintosh.
Windows (No Color Management) (без управления цветом) Значение гаммы соответствует значению по умолчанию в Windows.

Use Document Profile (Использовать профиль документа) Задает значение гаммы в соответствие с цветовым профилем прикрепленного документа, использующего систему управления цветом.

Оптимизация изображения для Интернета

1. Выберите File>Save For Web and Devices (Файл > Сохранить для Web и устройств).
2. Чтобы выбрать вариант отображения, щелкните вкладку в верхней части диалогового окна:
"Оптимизированный", "2 варианта" или "4 варианта". В режиме отображения "4 варианта" щелкните изображение, которое нужно оптимизировать.
3. Если изображение содержит несколько фрагментов, выберите для оптимизации нужные (Необязательно).

4. В меню Preset(Наборы/Наборы параметров) выберите предопределенные настройки оптимизации или укажите собственные. Доступность параметров зависит от выбранного формата файла.

5.Подберите настройки оптимизации, чтобы добиться нужного баланса качества изображения и размера файла. Если изображение содержит несколько фрагментов, убедитесь, что все они оптимизированы.

6.При оптимизации изображения со встроенным цветовым профилем, отличным от sRGB, перед сохранением этого изображения для Интернета следует преобразовать его цвета в sRGB. Это позволяет гарантировать, что цвета в оптимизированном изображении будут выглядеть одинаково в различных браузерах. Параметр Convert to sRGB(Преобразовать в sRGB) выбран по умолчанию.

7. В меню "Метаданные" выберите, какие метаданные нужно сохранять в оптимизированном файле. Метаданные полностью поддерживаются форматом JPEG и частично поддерживаются форматами GIF и PNG. Можно включать любые метаданные, указанные в окне Metadata(Метаданные) и добавленные в документ.

None (Нет) - Метаданные не сохраняются. Позволяет сохранить наименьший размер файла.

Copyright (Авторские права) - Сохраняет сведения об авторских правах, условия использования, состояние авторских прав и адрес в Интернете, по которому находятся сведения об авторских правах.

Copyright and Contact Info (Авторские права и контактная информация) - Сохраняет все сведения об авторских правах, а также следующую информацию: автор, должность автора, адреса электронной почты, адрес, город, область, почтовый индекс, страна, телефоны и веб-сайты.

All Except Camera Info (Все, кроме данных камеры) - Сохраняет все метаданные, кроме данных EXIF. EXIF включают настройки камеры и такие сведения о кадре, как выдержка, время и дата, фокусное расстояние, компенсация экспозиции, схема измерения и информация об использовании вспышки.

All (Все) Сохраняет в файл все метаданные.
8. Нажмите кнопку Save(Сохранить).

9. В диалоговом окне Save Optimized As(Сохранить оптимизированный как) выполните приведенные ниже действия, затем нажмите кнопку Save(Сохранить).

  • Введите имя файла и выберите расположение для конечных файлов.
  • В меню Format(Формат) укажите формат сохраняемых файлов: HTML-файлы и файлы изображения, только файлы изображения или только HTML-файлы.
  • Если изображение содержит несколько фрагментов, выберите в меню Slices (Фрагменты) параметры для сохранения фрагментов. All Slices(Все фрагменты) или Selected Slices (Выделенные фрагменты).

Чтобы сбросить настройки оптимизации и восстановить последнюю сохраненную версию, нажмите клавишу "Alt" (Windows) или "Option" (Mac OS), затем нажмите кнопку Reset(Сбросить). Для использования этих же настроек при следующем открытии диалогового окна "Сохранить для Web и устройств", нажмите клавишу "Alt"/"Option", затем нажмите кнопку Remember(Запомнить).

Сохранение или удаление наборов оптимизации

Настройки оптимизации можно сохранить как именованный набор и применять их к другим изображениям. Сохраняемые настройки отображаются в раскрывающемся меню Preset (Наборы/Наборы параметров) вместе с предопределенными именованными настройками. При изменении именованного набора или предопределенного набора в меню "Наборы"/"Наборы параметров" отображается значение Unnamed(Безымянный).

1. Установите необходимые настройки оптимизации и выберите в меню палитры "Оптимизировать" пункт Save Settings(Сохранить настройки).
2 . Укажите имя для настроек и сохраните набор в соответствующей папке
3. Чтобы удалить стиль, выберите его в меню "Наборы"/"Наборы параметров", затем в меню палитры "Оптимизировать" выберите пункт Delete Settings(Удалить настройки).

Работа с фрагментами в диалоговом окне "Сохранить для Web и устройств"

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

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

  • Чтобы показать или скрыть фрагменты, нажмите в панели инструментов кнопку Toggle Slices Visibility (Переключить видимость фрагментов).
  • Чтобы выбрать фрагменты в диалоговом окне "Сохранить для Web и устройств", выберите инструмент Slice Select Tool (Выделение фрагмента) и щелкните нужный фрагмент. Для выбора нескольких фрагментов выделите их щелчками мыши, удерживая клавишу "Shift".

>

Примечание. Невыделенные фрагменты в диалоговом окне "Сохранить для Web и устройств" отобразятся как недоступные для выбора. Это действие не влияет на цвет конечного изображения.

  • Чтобы просмотреть параметры фрагмента в диалоговом окне "Сохранить для Web и устройств" выберите инструмент "Выделение фрагмента" и дважды щелкните нужный фрагмент.
  • Чтобы связать фрагменты, выделите нужные фрагменты, затем выберите в раскрывающемся меню палитры "Оптимизировать" (справа от меню Preset (Наборы/Наборы параметров) пункт Link Slices (Связать фрагменты). На связанных фрагментах отображается значок связи.
  • Чтобы отменить связь между фрагментами, выберите фрагмент, затем в раскрывающемся меню палитры "Оптимизировать" выберите пункт Unlink Slices(Снять ссылку с фрагмента).
  • Чтобы отменить связь между всеми фрагментами изображения, в раскрывающемся меню палитры "Оптимизировать" выберите пункт Unlink All Slices(Снять ссылки со всех фрагментов).

Сжатие веб-графики до заданного размера файла

1. Выберите "Файл" > "Сохранить для Web и устройств".

2. Чтобы выбрать вариант отображения, щелкните вкладку в верхней части диалогового окна "Сохранить для Web или устройств": "Оптимизированный", "2 варианта" или "4 варианта". В режиме отображения "4 варианта" выберите изображение для оптимизации.

3. В меню палитры "Оптимизировать" (справа от меню Preset(Наборы)) выберите пункт Optimized to File Size(Оптимизировать по размеру файла).
Появится следующее окошко

less_4_1_0.jpg

4. Введите нужный размер файла.
5. Выберите параметр Start With(Начать с).
Current Settings (Текущие настройки) Используется текущий формат файла.
Auto Select GIF/JPEG (Автовыбор формата GIF/JPEG) Автоматический выбор оптимального формата в зависимости от содержимого изображения.

6. Выберите параметр Use(Использование), который определяет применение указанного размера файла только к Current Slice(Текущему фрагменту), к Each Slice(Каждому фрагменту) в изображении или Total of All Slices (Ко всем фрагментам). Нажмите кнопку "ОК".

Изменение размера графического объекта при оптимизации

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

1. В диалоговом окне "Сохранить для Web и устройств найдите панель размера изображения (на картинке под цифрой 10)
2. При необходимости задайте следующие параметры.
Сохранить пропорции Сохраняются текущие пропорции ширины и высоты.
Qualiry (Качество) Задает метод интерполяции. Метод "Бикубическая, четче" в основном дает лучшие результаты при уменьшении размера изображения.

Просмотр оптимизированных изображений в веб-браузере

Оптимизированное изображение можно просмотреть в любом установленном веб-браузере, используя диалоговое окно "Сохранить для Web и устройств" ("Файл" > "Сохранить для Web и устройств"). Просмотр в браузере позволяет вывести изображение с сопроводительной подписью, где будет указан тип файла изображения, размеры в пикселах, размер файла, характеристики сжатия и другая информация о формате HTML.

  • Для просмотра изображения в веб-браузере по умолчанию щелкните значок браузера в нижней части диалогового окна "Сохранить для Web и устройств".
  • Чтобы использовать другой браузер, выберите Other(Другой) в раскрывающемся меню браузеров (рядом со значком браузера).
  • Чтобы добавить, изменить или удалить браузер, выберите Edit List(Редактировать список) в раскрывающемся меню браузеров. В диалоговом окне "Браузеры" можно найти все установленные браузеры и задать браузер по умолчанию для просмотра изображений.

Параметры оптимизации JPEG

Формат JPEG является стандартом сжатия нерастрированных изображений, например фотографий. Оптимизация изображения в формате JPEG основана на сжатии с потерями вследствие выборочного удаления данных.

Примечание. Поскольку при сохранении файла в формате JPEG данные теряются, рекомендуется сохранять исходный файл в первоначальном формате (например Photoshop .PSD), если в будущем планируется редактировать его или создавать дополнительные JPEG-версии.

Настройки оптимизации для формата JPEG

less_4_2_0.jpg

1. Меню "Оптимизировать"
2. Формат файла
3. Качество изображения/фрагмента

Качество Определяет уровень сжатия. Чем выше значение параметра "Качество", тем больший уровень детализации сохраняется при сжатии. Однако чем выше значение параметра "Качество", тем больше размер файла. Чтобы определить наилучшее соотношение качества и размера файла, рекомендуется просмотреть оптимизированное изображение с различными настройками качества.

Optimized (Оптимизированный) Создается улучшенный файл JPEG с незначительно меньшим размером файла.

Progressive (Прогрессивный) Изображение в веб-браузере отображается прогрессивно. Изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки. Для параметра "Прогрессивный" необходимо использование формата "Оптимизированный JPEG".

Blur (Размытие) Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру "Размытие по Гауссу", и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.

Embed Color Profile (Встроенный профиль) Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции применяются цветовые профили.

Matte (Подложка) Задается цвет заливки для пикселов, которые в исходном изображении были прозрачными.

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

Параметры оптимизации для форматов GIF и PNG-8

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

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

Настройки оптимизации для формата GIF

less_4_3_0.jpg

1. Меню "Оптимизировать"
2. Меню "Формат файла"
3. Алгоритм редукции цвета
4. Алгоритм дизеринга

Lossy (Потери) (только GIF) Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра "Потери", тем больший объем данных удаляется. Обычно сохранить качество изображения позволяет установка для параметра "Потери" значения в диапазоне от 5 до 10, иногда до 50. Изменение значения параметра "Потери" может привести к уменьшению размеры файла на 5 — 40%.

Colors (Цвета) Определяет метод создания таблицы цветов изображения и необходимое количество цветов в таблице. Доступны следующие методы редукции цвета.

  • Perceptual (Перцепционная) Создает пользовательскую таблицу цветов, отдавая предпочтение цветам, к которым человеческий глаз наиболее чувствителен.
  • Selective (Селективная) Создает таблицу цветов, аналогичную таблице "Перцепционная", но предпочтение отдается областям большого размера и сохранению цветов Web. Обычно при использовании этой таблицы получаются изображения с наибольшей достоверностью цветов. Значение "Селективная" задано по умолчанию.
  • Adaptive (Адаптивная) Создает таблицу путем выборки цветов из преобладающего спектра в изображении.
  • Restrictive (Ограниченная )(Web) Используется стандартная таблица из 216 цветов, применяемая в Windows и Mac OS в палитрах с 8-разрядной глубиной цвета (256 цветов). При выборе этого параметра дизеринг в браузере не применяется при отображении с 8-разрядной глубиной цвета (такая палитра также называется "безопасной палитрой Web"). Использование палитры Web может приводить к увеличению размера файла, и рекомендуется только в тех случаях, когда крайне важно исключить дизеринг в браузере.
  • Custom(Заказная) Применяется палитра цветов, созданная или измененная пользователем. При открытии существующего файла GIF или PNG-8 в нем будет пользовательская палитра цветов.Таблица цветов изображения настраивается с помощью палитры "Таблица цветов" в диалоговом окне "Сохранить для Web и устройств".
  • Black-White, Graysvale, Mac OS, Windows(Черно-белый, Градации серого, Mac OS, Windows ) Используется готовая палитра цветов.

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

less_4_4_0.jpgless_4_5_0.jpg

GIF-изображения с 0% дизеринга (слева) и 100% дизеринга (справа)

Доступны следующие методы дизеринга.

  • Diffusion (Случайный) Применяется случайный узор, менее заметный, чем в режиме "Регулярный дизеринг". Эффекты дизеринга распространяются на смежные пикселы.
  • Pattern(Регулярный/Узор) Для имитации цветов, отсутствующих в таблице цветов, применяется квадратный узор наподобие полутонового.
  • Noise (Шумовой/Шум) Применяется случайный узор, подобный методу дизеринга "Случайный", но без распространения на смежные пикселы. При использовании метода дизеринга “Шумовой"/"Шум" швы не возникают.

Transparency and Matte (Прозрачность и Подложка) Определяет способ оптимизации прозрачных пикселов в изображении.

  • Чтобы сделать полностью прозрачные пикселы прозрачными и смешать частично прозрачные пикселы с цветом, выберите "Прозрачность" и укажите цвет подложки.
  • Чтобы заполнить полностью прозрачные пикселы цветом и наложить частично прозрачные пикселы на этот же цвет, выберите цвет подложки и отмените выбор параметра "Прозрачность".
  • Для выбора цвета подложки щелкните стрелку рядом с образцом цвета "Подложка" и выберите нужный цвет в палитре цветов.

Примеры использования прозрачности и подложки

less_4_6_0.jpg 1 less_4_7_0.jpg 2

less_4_8_0.jpg 3 less_4_9_0.jpg 4

1. Исходное изображение 2. Выделена прозрачность с цветом подложки 3. Выделена прозрачность без подложки 4. Отменено выделение прозрачности с цветом подложки

Дизеринг прозрачности При выборе параметра "Прозрачность" можно указать метод дизеринга частично прозрачных пикселов.

  • При выборе параметра No Transparency Dither (Без дизеринга прозрачности) дизеринг к частично прозрачным пикселам в изображении не применяется.
  • В режиме Diffusion Transparency Dither (Случайный дизеринг прозрачности) используется случайный узор, менее заметный, чем в режиме "Регулярный дизеринг". Эффекты дизеринга распространяются на смежные пикселы. При выборе этого алгоритма необходимо указать процент дизеринга, управляющий степенью дизеринга, который применяется к изображению.
  • В режиме Pattern Transparency Dither (Регулярный дизеринг прозрачности) применяется квадратный узор наподобие полутонового для частично прозрачных пикселов.
  • В режиме Noise Transparency Dither (Шумовой дизеринг прозрачности) применяется случайный узор, подобный узору в режиме "Случайный дизеринг", но без распространения на смежные пикселы. При использовании алгоритма "Шум" швы не возникают.

Interlaced (Чересстрочно) До полной загрузки файла изображение в браузере отображается в низком разрешении.

Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается. Однако чересстрочное отображение также увеличивает размер файла.

Web snap (Web-цвета) Определяется уровень изменения цветов на ближайшие эквивалентные цвета палитры Web (с отменой дизеринга в браузере). Чем выше значение, тем больше изменяется цветов.

Просмотр таблицы цветов для оптимизированного фрагмента

Таблица цветов для фрагмента отображается на панели Color Table ("Таблица цветов") диалогового окна "Сохранить для Web и устройств".

Выберите фрагмент, оптимизированный в формате GIF или PNG-8. Таблица цветов для выбранного фрагмента отобразится на палитре "Таблица цветов" диалогового окна "Сохранить для Web и устройств".

Если изображение содержит несколько фрагментов, то цвета в таблице цветов могут изменяться в различных фрагментах (чтобы избежать этого эффекта, свяжите слои между собой). При выборе нескольких фрагментов с различными таблицами цветов таблица цветов становится пустой, и в строке состояния выводится сообщение "Смешанная".

Настройка таблицы цветов для изображений GIF и PNG-8

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

Цвета в таблице цветов можно добавлять или удалять, заменять выбранные цвета на безопасные Web-цвета, а также блокировать выделенные цвета, чтобы предотвратить их удаление из палитры.

Сортировка таблицы цветов
Выберите порядок сортировки в меню палитры "Таблица цветов".

  • При выборе параметра Unsorted (Без сортировки) восстанавливается исходный порядок.
  • Команда Sorted By Hue (Сортировать по тону) сортирует цвета по положению на стандартном цветовом круге (в градусах от 0 до 360). Нейтральным цветам присваивается тон 0 и они помечаются красным.
  • Команда Sorted By Luminance (Сортировать по светимости) сортирует цвета по степени яркости.
  • Команда Sorted By Popelsrity (Сортировать по частоте использования) сортирует цвета по частоте их использования в изображении.

Добавление нового цвета в таблицу цветов

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

палитре. При добавлении цвета в фиксированную или пользовательскую таблицу в палитру добавляется дополнительный цвет.

1. Если в таблице цветов выделены какие-либо цвета, выберите в палитре "Таблица цветов" пункт Deselect All Colors (Отменить выделение всех цветов), чтобы отменить их выбор.

2. Выберите цвет. Для этого выполните одно из следующих действий:

  • В диалоговом окне "Сохранить для Web и устройств" щелкните значок "Цвет пипетки" и выберите цвет из палитры.
  • В диалоговом окне "Сохранить для Web и устройств" выберите инструмент "Пипетка" и щелкните изображение.

3. Выполните одно из следующих действий:

  • Нажмите кнопку New Color(Новый цвет) в таблице цветов.
  • Выберите команду New Color(Новый цвет) в меню палитры "Таблица цветов".

Чтобы переключить таблицу цветов на палитру Custom(Заказная), удерживайте при добавлении нового цвета клавишу "Ctrl" (Windows) или "Command" (Mac OS).

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

Выбор цветов в таблице цветов
В "Таблице цветов" вокруг выделенного цвета появляется белая рамка.

  • Чтобы выбрать цвет, щелкните его в "Таблице цветов".
  • Чтобы выбрать в таблице цветов несколько цветов, удерживайте клавишу "Shift". Будут выбраны все строки между первым и вторым выделенными цветами. Чтобы выбрать несмежную группу цветов, нажмите клавишу "Ctrl" (Windows) или "Command" (Mac OS) и щелкните нужные цвета. Кроме того, в меню палитры "Таблица цветов" доступны команды выбора цветов.
  • Чтобы выбрать цвет в изображении предварительного просмотра, щелкните его инструментом "Пипетка" в диалоговом окне "Сохранить для Web и устройств". Чтобы выбрать несколько цветов, удерживайте клавишу "Shift".
  • Чтобы отменить выделение всех цветов, выберите в меню палитры "Таблица цветов" пункт Deselect All Colors (Отменить выделение всех цветов).

Замена цвета

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

1. Для отображения палитры цветов по умолчанию дважды щелкните цвет в таблице цветов.
2. Выберите цвет.

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

3. Чтобы отменить замену цвета, выполните одно из следующих действий:

Дважды щелкните образец замененного цвета. Исходный цвет выделится в палитре цветов. Чтобы восстановить цвет, нажмите кнопку "OK".
Чтобы отменить выделение всех замененных цветов (включая замененные Web-цвета), выберите в меню палитры "Таблица цветов" пункт "Отменить замену всех цветов".

Замена цветов на ближайшие эквивалентные цвета палитры Web

Чтобы в браузере не выполнялся дизеринг, можно заменить цвета на ближайшие эквивалентные цвета в палитре Web. Это позволяет предотвратить выполнение дизеринга в браузерах операционных систем Windows или Macintosh, в которых доступно только 256 цветов.

1. Выберите один или несколько цветов в оптимизированном изображении или в таблице цветов.
2. Выполните одно из следующих действий:

  • Нажмите кнопку Shift/Unshift Selected Colors to/from web (Заменить на Web) в палитре "Таблица цветов".
  • В меню палитры "Таблица цветов" выберите пункт Shift/Unshift Selected Colors to/from web (Заменить/Отменить замену выделенных цветов на цвета палитры Web). Исходный цвет отобразится в левом верхнем углу образца, а новый цвет - в правом нижнем углу. Небольшой белый ромб в центре образца показывает, что цвет является веб-цветом.

Небольшой квадрат в правом нижнем углу образца показывает, что цвет заблокирован.
3. Чтобы задать допуск для замены, введите значение параметра "Web-цвета". Чем выше значение, тем больше изменяется цветов.
4. Чтобы вернуть цвета, замененные на Web-цвета, выполните одно из следующих действий:

  • Выделите в таблице цветов цвет, замененный на Web-цвет, и нажмите кнопку Shift/Unshift Selected Colors to/from web (Заменить на Web) в палитре "Таблица цветов".
  • Чтобы отменить в таблице цветов замену всех цветов на Web-цвета, выберите в меню палитры "Таблица цветов" пункт "Отменить замену всех цветов".

Преобразование цветов в прозрачность

Чтобы добавить в оптимизированное изображение прозрачность, нужно преобразовать существующие цвета в прозрачность.

1. Выберите один или несколько цветов в оптимизированном изображении или в таблице цветов.
2. Выполните одно из следующих действий:

  • Нажмите кнопку Maps Selected Colors to Transparent(Преобразовать прозрачность") в палитре "Таблица цветов".
  • В меню палитры "Таблица цветов" выберите пункт Map/Unmap Selected Colors to/from Transparent(Преобразовать/Отменить преобразование выделенных цветов в прозрачность).

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

  • Выберите цвет, для которого нужно отменить преобразование в прозрачность, и нажмите кнопку "Преобразовать прозрачность" либо в меню палитры "Таблица цветов" выберите пункт "Преобразовать/Отменить преобразование выделенных цветов в прозрачность".
  • Чтобы вернуть все преобразованные цвета в исходное состояние, выберите пункт "Отменить преобразование цветов прозрачного объекта".

Блокировка или снятие блокировки цвета

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

Примечание. Блокировка цветов не отменяет дизеринг в браузере.
1. Выберите нужные цвета в таблице цветов.
2. Чтобы заблокировать цвет, выполните одно из следующих действий:

  • Нажмите кнопку Lock (Закрепить).
  • В меню палитры "Таблица цветов" выберите пункт Lock/Unlock Selected Colors (Закрепить/Отменить закрепление выделенных цветов).

В правом нижнем углу каждого заблокированного цвета отобразится белый квадрат .
3. Чтобы разблокировать цвет, выполните следующие действия.

  • Нажмите кнопку "Закрепить" .
  • В меню палитры "Таблица цветов" выберите пункт "Закрепить/Отменить закрепление выделенных цветов".

Белый квадрат исчезнет из образца цвета.

Удаление выделенных цветов

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

После удаления цвета таблица цветов автоматически превращается в палитру "Заказная".
1. Выберите нужные цвета в таблице цветов.
2. Чтобы удалить цвет, выполните одно из следующих действий:

  • Щелкните значок Delete (Удалить) .
  • В меню палитры "Таблица цветов" выберите пункт Delete Color(Удалить цвет).

Сохранение таблицы цветов

Таблицы цветов оптимизированных изображений можно сохранять для последующего использования с другими изображениями, а также для загрузки таблиц цветов, созданных в других приложениях. После загрузки новой таблицы цветов в изображение цвета оптимизированного изображения изменяются в соответствии с новой таблицей цветов.

1. В меню палитры "Таблица цветов" выберите пункт Save Color Table(Сохранить таблицу цветов).
2. Присвойте таблице цветов имя и выберите папку для сохранения. По умолчанию файлу таблицы цветов присваивается расширение .act (Adobe Color Table).

Чтобы использовать таблицу цветов при выборе параметров оптимизации для изображения GIF или PNG, сохраните таблицу цветов в подпапке Optimized Colors папки приложения Photoshop.

3. Нажмите кнопку Save(Сохранить).
Загрузка таблицы цветов

1. В меню палитры "Таблица цветов" выберите пункт Load Color Table (Загрузить таблицу цветов).
2. Перейдите к файлу с таблицей цветов, которую нужно загрузить. Это может быть файл Adobe Color Table (.act), файл Adobe Color Swatch (.ace) или GIF-файл (для загрузки встроенной таблицы цветов).
3. Нажмите кнопку "Открыть".

Параметры оптимизации PNG-24

Формат PNG-24 подходит для сжатия нерастрированных изображений. Однако размер файлов в этом формате больше размера JPEG-файлов. Преимущество формата PNG-24 заключается в возможности сохранять в изображении до 256 уровней прозрачности.

Transparency and Matte (Прозрачность и Подложка) Определите способ оптимизации прозрачных пикселов в изображении.
Interlaced (Чересстрочно) До полной загрузки файла изображение в браузере отображается в низком разрешении.

Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается. Однако чересстрочноое отображение также увеличивает размер файла.

Параметры оптимизации WBMP

Формат WBMP является стандартным форматом оптимизации изображений для мобильных устройств, например сотовых телефонов. Формат WBMP поддерживает 1-битный цвет, то есть изображения WBMP содержат только черные и белые пикселы.

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

Доступны следующие методы дизеринга.
No Dither (Без дизеринга) Дизеринг не применяются, изображение выводится с использованием только черных и белых пикселов.
Diffusion (Диффузия) Применяется случайный узор, менее заметный, чем в режиме "Регулярный дизеринг". Эффекты дизеринга распространяются на смежные пикселы. При выборе этого алгоритма необходимо указать процент дизеринга, управляющий степенью дизеринга, который применяется к изображению.
Примечание. В режиме "Случайный дизеринг" по границам фрагментов могут возникать видимые швы.
Связывание фрагментов распространяет узор дизеринга на все связанные фрагменты, что устраняет швы.
Pattern (Регулярный/Узор) Значения пикселов определяются с помощью квадратного узора наподобие полутонового.

Noise (Шумовой/Шум) Применяется случайный узор, подобный узору в режиме "Случайный дизеринг", но без распространения на смежные пикселы. При использовании алгоритма "Шум" швы не возникают.

Комментарии
Пользователь: zetix2 08.03.2010 18:01
Аватар пользователя zetix2

сайт офигенный - создателю респект!

Пользователь: Я 25.03.2010 10:48
Аватар пользователя Я

Может, вы мне поможете?
Я пытаюсь сделать анимацию, но вот что в итоге
http://i069.radikal.ru/1003/8c/93f5b09cda2e.gif
Качество ужасное, в некоторых пробах вообще кошмарное.
Не подскажете, какую функцию нужно изменить/включить/отключить, в диалоговом окне "Сохранить для web и устройств", чтобы качество было нормальное? Пробовала все подряд - не изменяется, только хуже.
И еще... эту пробу сделала по-быстрому, там что-то она исчезает постоянно, это я напутала с создание анимации) Меня больше качество волнует.

Пользователь: mrkaktooz 25.03.2010 14:15
Аватар пользователя mrkaktooz

Вопросы не по теме урока задавайте пожалуйста на форуме. Я не сталкивался с созданием анимации, поэтому пока ответа на ваш вопрос у меня нет( Постараюсь в ближайшее время разобраться.

Пользователь: TeXnolog 11.09.2010 17:34
Аватар пользователя TeXnolog

Можно ли картинку, порезанную на фрагменты (slices), сделать "резиновой" (то есть с размером, изменяющимся по размеру окна браузера)?

Пользователь: mrkaktooz 11.09.2010 18:41
Аватар пользователя mrkaktooz

можно. но это уже CSS, а не фотошоп. пишите background:url('Путь к картинке, которая должна тянуться') repeat-x или repeat-y в зависимости от направления резины. И вообще вопросы не по теме задавайте на форуме)

Пользователь: Гость 17.11.2011 15:08
Аватар пользователя Гость

Да

Пользователь: Гость 13.04.2012 17:10
Аватар пользователя Гость

по описанию мне нравится...хочу попробовать

Пользователь: Евгений Царь 19.06.2013 23:10
Аватар пользователя Евгений Царь

Уточните ещё один момент пожалуйста!
У меня шаблон сайта с фрагментами в диалоговом окне "Сохранить для Web и устройств" распилен на множество частей, как изменить ТО КАК Photoshop их пилит?
То-есть иногда не точно как мне нужно построена коричневая или синяя рамка >>>

Cпасибо!

Пользователь: Валентина 05.01.2016 21:12
Аватар пользователя Валентина

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

Добавить комментарий