Модуль Save for Web. Особенности сохранения изображений для Internet

Модуль Save For Web & Devices (Сохранить для Веб и устройств), который сильно облегчает работу, обеспечивает большую гибкость и лучшее качество экорта изображений в форматы GIF, JPEG и PNG. Главное окно модуля изображено на рис. 15.10. Оно открывается одноименной командой из меню File (Файл). Волните эту команду для файла БАРЕЛЬЕФ1_НА_ДОМЕ_ЗИНГЕР.jpg.

Рис. 15.10. Диалоговое окно Save For Web & Devices (вкладка 4-Up )

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

± Original (Оригинал). Изображение в исходном виде.

± Optimized (Оптимизированное). Вид изображения после оптимизации. Именно так оно и будет выглядеть в браузере.

± 2-Up (Два). Одновременный просмотр оригинала и оптимизированного изобрения. Впрочем, оба окна в области просмотра могут отображать оптимизиранное изображение, но с различными параметрами оптимизации.

± 4-Up (Четыре). В этом режиме область просмотра делится на четыре окна, в которых можно заказать демонстрацию оригинала и оптимизированного изображения с разными параметрами оптимизации. Такой режим удобно иользовать для выбора наилучших параметров. Он позволяет визуально оцивать влияние сжатия или уменьшения палитры на качество изображения и его размер.

Управление масштабом отображения в области просмотра организовано так же, как и в самом Photoshop: с помощью списка масштабов в левом нижнем углу окна и инструментов Zoom (Масштаб) и Hand (Рука).

Под каждым окном области просмотра указываются формат файла изображия (GIF, JPEG или PNG), параметры оптимизации, размер файла и время его зрузки в браузер при заданной скорости модема. Выберите ее в меню просмотра, открывающегося нажатием круглой кнопки с треугольной стрелкой. Там же вы найдете и варианты отображения цветов:

± Browser Dither (Плавный переход цветов в браузере). Если изображение сержит больше цветов, чем может отобразить монитор, то в браузере они будут аппроксимироваться, если включить флажок.

± Hide Auto Slice (Скрыть деление на фрагменты). Применяется для изображий, которые "разрезаны" на фрагменты.

± Uncompensated Color (Без корректировки). Цвета отображаются в области просмотра "как есть", без поправок.

± Standard Windows Color (Стандартные цвета Windows). Таким образом отражаются цвета на мониторах компьютеров, работающих под управлением системы Windows.

± Standard Macintosh Color (Стандартные цвета Macintosh). На компьютерах Macintosh изображения выглядят несколько светлее, поскольку Mac OS иользует иное значение гаммы (1,8), чем Windows (2,2). Выбрав этот вариант, вы сможете оценить, как будет выглядеть изображение для пользователей Macintosh.

± Use Document Color Profile (Использовать профиль документа). Вид изобрения корректируется в соответствии с установками системы управления цвом, сделанными в Photoshop.

В этой же области просмотра можно указать параметры используемого модема.

Опробуем эту команду в действии на изображении барельефа из файла БАРЕЛЬЕФ2_НА_ДОМЕ_ЗИНГЕР.jpg.

1. Откройте файл БАРЕЛЬЕФ2_НА_ДОМЕ_ЗИНГЕР.jpg.

2. Выберите команду Save For Web & Devices (Сохранить для Веб и устройств) из меню File (Файл).

3. Выберите режим 2-Up (Два), перейдя на соответствующую вкладку (рис. 15.11).

Рис. 15.11. Диалоговое окно Save For Web & Devices (вкладка 2-Up )

4. В правой части окна находятся элементы управления параметрами экспорта. В списке Preset (Предлагаемые установки) выберите формат сохранения JPEG Medium (рис. 15.12).

5. Список Preset (Предлагаемые установки) предлагает несколько типичных знений качества изображения: JPEG High (Высокое), JPEG Low (Низкое), JPEG Medium (Среднее). Более тонкая регулировка осуществляется ползунком Quality (Качество), расположенным правее. Для начала установите с его помью максимальное качество, 100%. При столь высоком значении изображение в правой части области просмотра (оптимизированное) практически не отличтся от оригинала в левой части. Уменьшите качество изображения с помощью

ползунка Quality (Качество) до 15-18%. Взгляните на информационные поля в соответствующих частях области просмотра. Оригинал, несжатое изображение, занимает 3,21 Мбайт, а сжатое - 109 Кбайт. Даже столь низкий коэффициент сжатия обеспечивает почти четырехкратный выигрыш в размере файла.

6. Посмотрите на оценку времени загрузки сжатого изображения. Оно составит 40 секунд при скорости модема 28,8 Кбайт/с. Теперь представьте себя читателем веб-страницы, на которой находится пять таких изображений. Будете ли вы дидаться, пока страница загрузится целиком? Скорее всего, нет. Чтобы удержать читателя, требуется делать изображения как можно более компактными. В случае формата JPEG нужно просто понизить качество, увеличив коэффициент сжатия. Установите ползунок Quality (Качество) ближе к левому краю. Очевидно, качтво ухудшилось, появилась характерная "грязь". Но так ли уж плохо дело?

7. Теперь отыграем еще несколько секунд для читателя веб-страницы. Коэффицнт сжатия можно повысить за счет предварительного размывания изображия. Ползунок Blur (Размытие) в области Preset (Предлагаемые установки) избавит от необходимости покидать окно фильтра экспорта. Разумеется, раывка должна быть не слишком значительной, чтобы качество изображения не пострадало. Значение 0,2 вполне удовлетворяет этому требованию.

8. Флажок Progressive (Постепенный) задает чересстрочную развертку изображия при загрузке в браузере. Она слегка увеличивает размер файла, но и дает возможность читателю страницы самому определять, стоит ли дожидаться поой загрузки. Установите его.

9. Флажок ICC Profile (Профиль ICC) позволяет внедрить в файл изображения цветовой профиль. Устанавливайте данный флажок, только если у вас есть для этого весьма веские причины, поскольку внедренный профиль увеличивает размер файла на 3-4 Кбайт.

10. Флажок Optimized (Оптимизированное) включает дополнительную оптимизию внутренней структуры JPEG, что иногда еще сильнее сокращает размер файла. Побочный эффект оптимизации может сказаться только при использании очень старых версий браузеров. Все новые браузеры нормально обрабывают такие файлы.

11. Правильность сделанных установок легко проверить, загрузив готовое изобрение в браузер. Для этого вам даже не придется покидать окно модуля экорта. Нажмите кнопку Device Central (Центр устройств), и модуль откроет браузер радиотелефона с загруженным в него изображением (рис. 15.13). Цвет фона страницы можно предварительно задать с помощью списка Matte (Цвет фона страницы).

Рис. 15.13. Предварительный просмотр оптимизированного изображения в окне браузера

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

· 1. Панель инструментов.

· 2. Параметры отображения

· 3. Область комментариев

· 4. Масштаб

· 5. Информация о цвете

· 6. Просмотр в браузере

· 7. Палитра оптимизации

· 8. Метаданные

· 9. Таблица цветов

· 10. Размер изображения

· 11. Элементы управления анимацией

· 12. Кнопки подтверждения отмены операции

· 13. Область предварительного просмотра

Область предварительного просмотра

Если Вам кажется, что картинка великовата для размещения на веб-странице, откройте вкладку «Размер Изображения» (Image Size) - (№10 в описании диалогового окна)- и уменьшите её ширину и высоту.

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

 1. Меню "Оптимизировать"

 2. Меню "Формат файла"

 3. Алгоритм редукции цвета

 4. Алгоритм дизеринга

Примечание: Сохранение изображений с помощью диалога «Сохранить для Web и устройств (Save for Web)» (часто называемое «экспортом») подразумевает создание «облегчённой» и несколько «ухудшенной» копии, предназначенной именно для публикации в Web. Ни в коем случае не сохраняйте оптимизированную копию поверх исходного изображения!

Для многих вебмастеров оптимизация изображений для WEB-среды представляет собой обработку картинок и сохранение их в разных форматах: gif (1-256 цветов), png-8 (1-256 цветов), png, jpeg. После оптимизации картинок их вес должен быть наименьшим. Обычно страница сайта вместе с картинками не должна быть более 600 Кбайт. Размер картинок напрямую зависит от её качества. Чем меньше вес картинки, тем хуже её качество и наоборот. Если картинка содержит в себе 2-3 цвета, то её можно сохранить в форматах: gif, png-8. Если сайт содержит в себе много не оптимизированных картинок, то происходит большая нагрузка на сервер и пользователь с медленным интернетом может так и не дождаться загрузки страницы. В таких случаях пользователь уходит на другой сайт с "лёгкими" страницами. Одной из главных целей любого вебмастера является удержание посетителя на своём сайте.

Можно настроить качество изображения и количество цветов. Чем меньше цветов, тем меньше вес картинки. Но не увлекайтесь. Фотографии не стоит сохранять в gif и png-8 форматах. Для них подойдет jpeg c алгоритмами сжатия и png-24 с поддержкой прозрачных областей. Сохраним картинку для веб-среды. В строке меню выберем пункт "Сохранить для WEB и устройств" или "save for web" .

В выпадающем списке выберем "jpeg". Поставим галочку у режима "Прогрессивный". В поле качество поставим значение 80%. Для сайтов хорошо подойдёт такая оптимизация. Алгоритмы сжатия jpeg портят качество картинки , но именно они позволяют уменьшить вес картинки. При оптимизации внимательно смотрите на то, как будет выглядеть ваша картинка с алгоритмами сжатия. Для этого в окне найдите вкладку "2 варианта". Если изображение не содержит в себе фотографий, то его можно сохранить в разных форматах и сравнить полученные варианты между собой по качеству и по весу.

Тут придётся искать золотую середину между качеством и весом картинки. Форматы gif, png-8, png-24 позволяют использовать прозрачность. Формат jpeg не поддерживает прозрачность. Если вы пытаетесь сохранить картинку с прозрачностью в jpeg формате, то photoshop автоматически сохранит картинку с белым фоном. В том месте, где вы планировали прозрачный участок, появится белое поле. Все картинки, которые вы планируете закачать на сайт, должны иметь разрешение в 72 dpi. Именно такое разрешение должно быть у картинок.

Компания Adobe внесла некоторые незначительные изменения в популярную и всем полюбившуюся функцию Сохранить для сети в Photoshop CC 2015. Эта функция используется для многих задач - от подготовки ресурсов для размещения на веб-сайте до оптимизации фотографий высокого разрешения для создания анимированных GIF-файлов. Поскольку команда «Сохранить для сети» создана на основе ранее выпускаемого продукта ImageReady (срок его эксплуатации истек), ее код технически слишком устарел для дальнейшего поддержания и разработки новых элементов.

Была ли команда «Сохранить для сети» удалена из Photoshop CC 2015?

Я использую команду «Сохранить для сети» каждый день. Не будет ли мой рабочий процесс замедляться из-за изменений в системе меню?

Можно полностью пропустить данное меню путем использования существующего сочетания клавиш:

(Windows) Ctrl + Alt + Shift + S
(Mac) Cmd + Opt + Shift + S

При необходимости можно настроить сочетания клавиш. Для этого необходимо выбрать «Редактирование» > «Сочетания клавиш».

Были ли удалены какие-либо особенности команды «Сохранить для сети»?

Означает ли пометка «Устаревшие» то, что в будущем команда «Сохранить для сети» будет удалена?

Возможно. Тем не менее, будьте уверены, что компания Adobe не удалит команду «Сохранить для сети», не предоставив соответствующую функцию в новом, улучшенном формате рабочего процесса. Например, мы знаем, что многим пользователям требуются такие функции, как вид 2up , целевой размер файла, преобразование в формат sRGB, параметры метаданных и анимированные GIF-файлы. Команда «Сохранить для сети» не будет удалена без предоставления соответствующих возможностей в новом, улучшенном формате рабочего процесса.

Save for Web Save for Web JPG, GIF, PNG . Удобство пользования этим модулем заключается в возможности одновременного просмотра нескольких вариантов (от 1 до 3) итогового изображения.

Для Web-дизайна в Photoshop предусмотрены специальные возможности, реализованные в виде модуля сохранения Save for Web . Это очень мощный модуль управления процессом сохранения документов, который позволяет подобрать оптимальные настройки сохраняемого изображения (оптимизировать изображение). Модуль Save for Web поддерживает самые распространённые форматы для Internet - JPG, GIF, PNG . Удобство пользования этим модулем заключается в возможности одновременного просмотра нескольких вариантов (от 1 до 3) итогового изображения. Для более подробного рассмотрения этого модуля предлагаю им воспользоваться. Для этого необходимо иметь открытым какой-либо документ. Запустить эту программу можно командой Save for Web из меню File . У Вас на экране возникнет окно следующего вида:

Общий принцип работы с этим модулем следующий. Вам на выбор Photoshop предлагает несколько вариантов оптимизации (различные соотношения настроек формата) которые демонстрируются в специальных окнах. Под изображением находятся комментарии следующего толка - размер файла после оптимизации, время загрузки при заданной скорости модема и особенности формата (вроде фактора сжатия JPG или количества цветов для GIF). Если Вам понравился один из вариантов оптимизации, то Вы можете его выбрать, щёлкнув на нём левой кнопкой мышки. Далее нажимайте Ok и Ваш оптимизированный файл сохранён. Но если Вас не устроили предложенные варианты, тогда обратите Ваш взор в правую часть окна потому, что именно там сосредоточены Все основные настройки оптимизации. Но прежде чем их рассмотреть, изучим предварительную настройку модуля.

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

• Browser Dither - сглаживание (интерполяция) броузера, даст вам возможность оценить Вашу картинку в Safe-палитре броузера.
• Uncompensated Color - показ без всяческих ограничений.
• Standard Windows Color - стандартные цвета Windows (256 цветов)
• Standard Macintosh Color - стандартные цвета Mac (Макинтош).
• Use Document Color Profile - показ с учётом цветового профиля оборудования.

Закладки вверху окна позволяют вам переключаться между разными режимами просмотра. Существуют следующие режимы:

• Original - в единственном окне демонстрируется оригинал вашей картинки.
• Optimized - в единственном окне демонстрируется "лучший", по мнению Photoshop, результат оптимизации. Замечу, что иногда он очень удачен.
• 2-Up - у Вас появляются два окна: в одном будет оригинал вашего рисунка, в другом результат оптимизации.
• 4-Up - на Ваш выбор представлены три варианта оптимизации и вид оригинала.

Но выбор какого-либо варианта из предложенных трёх - это, в любом случае, удел дилетантов. На этом этапе мы рассмотрим варианты оптимизации "вручную", т.е. будем настраивать сами все параметры оптимизации. Прежде всего вы должны осознавать зависимость размеров конечного файла (занимаемого места на HD) от размеров вашей картинки (сколько на сколько пикселов). Чем больше картинка, тем весомей (больше места занимает на HD) итоговый файл. Для управления размером картинки в управлении оптимизацией выделена целая закладка под названием Image Size .

Изменённые размеры применяются кнопкой Apply ко всем оптимизированным картинкам и не распространяется на оригинал. Что касается параметра Quality , то он был рассмотрен в предыдущей главе этого урока. Попробуйте открыть любую картинку и поиграться с её размерами. В качестве совета скажу следующее: большой размер картинки (в пикселах) не подчиняется зависимости "чем больше, тем лучше". Тут надо искать компромисс в виде золотой середины. Прежде всего необходимо определится с тем, куда вы эту картинку хотите поместить. Учтите, что не у всех в этом мире хорошие мониторы, которые держат разрешение 1280Х960. Большинство людей имеют мониторы размером 15 дюймов, разрешение которых 800Х600 пикселей. Учитывая всё вышеизложенное, можно догадаться, что размеры вашей картинки не должны превышать 800 на 600 пикселей, за исключением особых случаев. Если вы готовите картинки для оформления своего сайта, то вы должны учесть, что окно, предоставляемое броузером, невелико, наша связь хилая, Internet еле ползает, и только самый терпеливый пользователь дождётся, пока ваша картинка загрузится полностью, и всё это для того, чтобы полюбоваться на Ваше произведение, не влазящее ему на экран. Такая ситуация убъёт у кого-либо желание заходить на Ваш сайт повторно.

Откройте файл Flower.psd (файл расположен в папке \\Program Files\\Adobe\\Photoshop\\Samples). Продолжим оптимизацию, исходя из конкретного формата файла изображения:

Правильность сделанных установок легко проверить, загрузив готовое изображение в броузер. Для этого вам даже не придется покидать окно модуля экспорта. Нажмите кнопку Preview in (Просмотр в) \"Ваш броузер\", и модуль откроет броузер с загруженным в него изображением. Ниже изображения вы увидите HTML-код, который сгенерирован модулем экспорта для демонстрации этой страницы. Цвет фона страницы можно предварительно задать с помощью списка Matte (Кайма). Настройки каймы нехитрые. Если Вы выбрали параметр None (нет), то каймы не будет, параметры White (белый) и Black (чёрный) выдадут Вам чёрный и белый цвета соответственно. Параметр Other (иные) позволяет выбрать любой цвет. Пункт Eyedropper Color позволяет выбрать цвет пипеткой прямо из изображения. Если Выбудете занимаеться Web-дизайном, то, скорее всего, на вашем компьютере будут установлены как минимум два броузера: Internet Explorer и Netscape Communicator. Открыв список рядом с кнопкой Preview in (Просмотр в), вы можете выбрать для просмотра любой из установленных на компьютере броузеров.

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

1. Откройте меню Optimize Menu (Меню оптимизации) щелчком на кнопке с треугольной стрелкой в области Settings (Параметры).
2. Выберите команду Save Settings (Сохранить параметры). Она открывает диалоговое окно Save As (Сохранить как), позволяющее сохранить настройки в файл. Введите в поле File name (Имя файла) какое-нибудь имя, например, \"JPEG 18\", и нажмите кнопку Save (Сохранить).

Теперь в списке Settings (Параметры) появится введенное имя. При обработке следующего файла будет достаточно выбрать это имя из списка. Обратите внимание, что список уже содержит несколько наиболее типичных вариантов настроек, предопределенных разработчиками. Ненужные наборы установок, удлиняющие список Settings (Параметры), легко удалить командой Delete Settings (Удалить параметры) меню Optimize Menu (Меню оптимизации). Эта команда удаляет текущий набор установок. Нажмите кнопку ОК (Да). Она откроет стандартное диалоговое окно сохранения файла. По умолчанию предлагается исходное имя документа Photoshop. Выберите вашу рабочую папку и нажмите кнопку Save (Сохранить). Окно модуля экспорта закроется, а в выбранной папке появится оптимизированный JPEG-файл, готовый для размещения на Web-странице.

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

1. Откройте документ Ducky.psd.
2. Преобразуйте слой Background (Фон) изображения в обычный слой.
3. Выделите белый фон и удалите его.
4. Выберите команду Save for Web (Сохранить для Web) из меню File (Файл).
5. В списке Optimized file format (Формат оптимизированного файла) выберите формат GIF .
6. Наиболее существенный параметр индексированного изображения - это количество цветов в его палитре. Оно задается в поле Colors (Цвета) и должно создавать компромисс между качеством и компактностью. Изображение утёнка содержит совсем немного цветов, и 32-цветная палитра будет для него вполне достаточна.
7. Список Color reduction algorithm (Алгоритм сокращения цветов) содержит перечень алгоритмов генерации индексированной палитры изображения. Все они уже обсуждались в занятии №7. Заметим лишь, что по умолчанию предлагается вариант Selective (Селективная), дающий наилучшие результаты для изображений, содержащих значительное пространство, заполненное близкими цветами. Изображение утёнка как раз и попадает в эту категорию. В нем преобладают оттенки жёлтого цвета.
8. Отсутствующие в палитре изображения цвета лимитируются сочетанием нескольких соседних пиксей близких цветов. Алгоритм имитации выбирается в списке Dithering algorithm (Алгоритм сглаживания). В большинстве случаев используются варианты Noise (Шум) и Diffusion (Диффузия), не дающие такого регулярного узора, как Pattern (Узор). Вариант Diffusion (Диффузия) лучше использовать для фотографических изображений, a Noise (Шум) - для фоновых текстур и градиентов. Выберите в списке алгоритм Diffusion (Диффузия).
9. Степень сглаживания задается ползунком Dither (Сглаживание), расположенным правее. Установите ее такой, чтобы передача оттенков была удовлетворительной.Помните, что чем выше сглаживание, тем больше размер результирующего файла.
10. Модуль Save for Web (Сохранить для Web) предлагает уникальный алгоритм предварительной обработки изображения, повышающий эффективность сжатия. Он управляется ползунком Lossy (Потери качества). Большие значения этого параметра существенно снижают качество изображения. Если же установить его в пределах от 5 до 15%, то снижение качества будет практически незаметным, а размер файла может сократиться на 5-40%. Установите ползунок Lossy (Потери качества) на отметку 30%.
11. Флажок Transparency (Прозрачность) обеспечивает преобразование прозрачных участков слоя Photoshop в прозрачность GIF-файла. Установите его, иначе прозрачные участки окажутся заполненными сплошной заливкой.
12. Список Matte (Кайма) обеспечивает незаметный переход кромки изображения к фоновому цвету страницы. Пикселы кромки выделенного объекта, как правило, полупрозрачные, а это не поддерживается форматом GIF. В результате при экспорте изображения в формат GIF вокруг объектов на прозрачном фоне возникает характерный шум. Чтобы избежать его появления, установите в списке Matting (Обработка краев) цвет фона Web-страницы. Полупрозрачныепиксели будут окрашены программой в этот цвет. При сброшенном флажке Transparency (Прозрачность) цвет, заданный в списке Matting (Обработка краев), считается фоновым и заполняет все прозрачные участки изображения.

Редактирование палитры изображения.

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

1. В полуавтоматическом режиме приведение цветов к палитре Web осуществляется ползунком Web Snap (Приведение к палитре Web). Он задает процент приведенных цветов палитры изображения. Попробуйте перемещать этот ползунок и наблюдайте за изменениями цветов изображения. Текущая палитра изображения показана на вкладке Color Table (Таблица цветов), расположенной в правом нижнем углу окна Save for Web (Сохранить для Web). При изменении значения параметра Web Snap (Приведение к палитре Web) происходящие изменения также отображаются в палитре изображения. Вы наблюдаете изменение некоторых цветов палитры и появление на их образцах белых кружков. Последние помечают цвета, приведенные к палитре Web. Вкладка Color Table (Таблица цветов) полезна не только для наблюдения. Она позволяет управлять отдельными цветами изображения. Это гораздо более хлопотный, но гибкий способ управления.
2. Верните ползунок Web Snap (Приведение к палитре Web) в нулевое положение, чтобы получить возможность ручного редактирования цветов.
3. Если вы хотите избежать существенных цветовых сдвигов в любых броузерах, но не хотите приводить все цвета к палитре Web, то имеет смысл сделать это выборочно. Особенно важно сохранить цвета, превалирующие в изображении. Чтобы определить, какие это цвета, задайте режим сортировки Sort by Popularity (Сортировка по частоте) одноименной командой из меню панели. Наиболее часто встречающиеся цвета расположатся слева.
4. Щелкните мышью на пятом слева образце в палитре. Образец получит белую рамку, показывающую, что он выделен. В строке состояния, расположенной в нижней части окна, отметьте значение компонентов выбранного цвета. Очевидно, он близок к белому, который, конечно, входит в палитру Web.
5. Чтобы избежать цветового сдвига, приведем цвет к белому. Photoshop может сам выбрать наиболее близкий к выделенному цвет из палитры Web. Для этого надо щелкнуть на пиктограмме с изображением кубика в нижней части панели или выбрать команду Shift/Unshift Selected Colors to/from Web Palette (Сместить/Отменить сдвиг выделенных цветов к палитре Web) из ее меню. Образец окрасится в белый цвет, и на нем появится белый кружок, говорящий о том, что цвет входит в палитру Web. Белый квадратик в левом нижнем углу образца указывает, что цвет блокирован. Блокированные цвета сохраняются в неприкосновенности при сокращении цветов в палитре изображения и при просмотре в броузере. Чтобы снять блокировку, щелкните на пиктограмме с изображением замка в нижней части панели.
6. Приведение цветов к палитре Web можно проделать и полностью вручную с помощью окна Color Picker (Палитра цветов). Выделите все цвета в палитре командой Select All Colors (Выделить все цвета) из меню панели и щелкните на пиктограмме приведения цветов. Все цвета изображения будут приведены к палитре Web.
7. Приведение всего изображения к палитре Web сделало плавный переход на изображении монитора чересчур резким. Исправим этот дефект вручную. Сделайте на самом темном из оранжевых образцов в палитре двойной щелчок мышью. Перед вами появится знакомое окно Color Picker (Палитра цветов). Убедитесь, что флажок Only Web Colors (Только цвета Web) в нем установлен. Выберите ближайший к текущему цвету более светлый оттенок и закройте окно нажатием кнопки ОК (Да). Цвет будет отредактирован. Если вы находите его тоже неудачным, снова откройте окно Color Picker (Палитра цветов) и подберите другой.
8. Отредактируйте все оттенки оранжевого цвета в палитре цветов таким образом, чтобы их цвета стали ближе друг к другу. Это уберет резкий переход цветов на изображении.

Многочисленные команды меню панели Color Table (Таблица цветов) позволяют вам быстро выделять в ней приведенные (Select All Web Safe Colors (Выбрать все цвета Web Safe)), неприведенные ( Select All Non-Web Safe Colors (Выбрать все не-Web Safe цвета)) и вообще все цвета (Select All Colors (Выбрать все цвета)). Команды блокировки Lock/Unlock Selected Colors (Заблокировать/Разблокировать выделенные цвета) и Unlock All Colors (Разблокировать все цвета) снимают блокировку с выделенных или всех цветов палитры соответственно. Аналогично команды Web Shift/Unshift Selected Colors (Сместить/Отменить сдвиг выделенных цветов к палитре Web) и Unshift All Colors (Отменить сдвиг всех цветов) возвращают, соответственно, выделенные или все приведенные цвета к оригинальным значениям. Режимы сортировки цветов в палитре не исчерпываются критерием распространенности ( Sort by Popularity (Сортировать по распространенности)). Их можно оставить без сортировки (Unsorted (He сортировать)), а также отсортировать по цвету ( Sort by Hue (Сортировать по цветовому тону)) или яркости (Sort by Luminosity (Сортировать по яркости)).

Оптимизация формата PNG.

Последний обсуждаемый формат - PNG . Это достаточно новый формат, но он уже поддерживается большинством современных броузеров. Он позволяет хранить как индексированные, так и полноцветные изображения. Используемый алгоритм сжатия не приводит к потерям графической информации, поэтому плотность сжатия полноцветных изображений оказывается существенно ниже, чем у JPEG. Модуль Save for Web (Сохранить для Web) реализует экспорт в форматы PNG-8 для индексированных изображений и PNG-24 для полноцветных. Параметры экспорта PNG-8 абсолютно аналогичны GIF , и вам не составит труда разобраться с ними самостоятельно. PNG-24 вообще предлагает только переключение режимов прозрачности (Transparency (Прозрачность)), чересстрочной развертки ( Interlaced ) и параметров Matting (Обработка краев).

Ещё раз обращаю ваше внимание на важность этой информации. Не зная возможностей форматов файлов и возможностей Photoshop по работе с ними, Вы не сможите професионально работать.