Уроки Фотошоп
Прозрачность
(продолжение)
Выбор назначения изображения
8. Нажмите кнопку Next
9. Третье окно мастера экспорта (рис. 9.12) позволяет вам выбрать формат файла для размещения на Web-странице. Поскольку браузеры поддерживают прозрачность только для двух форматов (GIF или PNG), выбор невелик. Пойдем по более длинному пути: выберите формат GIF.
Рис. 9.12. Третье диалоговое окно мастера Export Transparent Image.
Выбор формата файла
10. Четвертое окно предупреждает вас о том, что формат GIF поддерживает только восьмибитные изображения и следующим шагом будет сокращение числа цветов в изображении.
11. Нажмите кнопку Next.
12. Перед вами знакомое окно преобразования полноцветного изображения в индексированное. По умолчанию мастер устанавливает палитру Web и случайное сглаживание. Оставьте значения по умолчанию.
13. Нажмите кнопку ОК.
14. В появившемся стандартном окне сохранения файлов укажите имя GlF-файла и папку, в которую его следует поместить.
15. Нажмите кнопку Save.
16. Следующее окно тоже вам знакомо и предлагает выбрать способ развертки изображения в браузере, нормальный (Normal) или чересстрочный (Interlaced). Если бы на 9-м шаге вы выбрали формат PNG, то следующим после него шагом сразу был этот, поскольку для формата PNG не требуется преобразование в индексированный цвет.
17. Нажмите кнопку ОК.
18. Последнее окно мастера поздравляет вас с успешным экспортом изображения. Нажмите кнопку Finish.
19. Мастер экспорта оставляет открытым окно с рабочей копией изображения. Его можно закрыть без сохранения.
В новой версии Photoshop появился модуль Save For Web, который сильно облегчает работу, обеспечивает большую гибкость и лучшее качество экспорта изображений в форматы GIF, JPEG и PNG. Главное окно модуля изображено на рис. 9.13. Оно открывается одноименной командой из меню File.
Основную часть окна занимает область предварительного просмотра. Она может находиться в одном из четырех режимов, устанавливаемых с помощью вкладок:
Original. Изображение в исходном виде.
Optimized. Вид изображения после оптимизации. Именно так оно и будет выглядеть в браузере.
2-Up. Одновременный просмотр оригинала и оптимизированного изображения. Впрочем, оба окна в области просмотра могут отображать оптимизированное изображение, но с различными параметрами оптимизации.
4-Up. В этом режиме область просмотра делится на четыре окна, в которых можно заказать демонстрацию оригинала и оптимизированного изображения с разными параметрами оптимизации. Такой режим удобно использовать для выбора наилучших параметров. Он позволяет визуально оценивать влияние сжатия или уменьшения палитры на качество изображения и его размер.
Рис. 9.13. Окно фильтра экспорта Save For Web
Управление масштабом отображения в области просмотра организовано так же, как и в самом Photoshop: с помощью списка масштабов в левом нижнем углу окна и инструментов Zoom и Hand.
Под каждым окном области просмотра указываются формат файла изображения (GIF, JPEG или PNG), параметры оптимизации, размер файла и время его загрузки в браузер при заданной скорости модема Выберите ее в меню просмотра, открывающегося нажатием круглой кнопки с треугольной стрелкой. Там же вы найдете и варианты отображения цветов:
Uncompensated Color. Цвета отображаются в области просмотра "как есть", без поправок.
Standard Windows Color. Таким образом отображаются цвета на мониторах компьютеров, работающих под управлением системы Windows.
Standard Macintosh Color. На компьютерах Macintosh изображения выглядят несколько светлее, поскольку MacOS использует иное значение гаммы (1,8), чем Windows (2,2). Выбрав этот вариант, вы сможете оценить, как будет выглядеть изображение для пользователей Macintosh.
Photoshop Compensation. Вид изображения корректируется в соответствии с установками системы управления цветом, сделанными в Photoshop.
Опробуем новый фильтр экспорта в действии на изображении самолета из файла plane.tif.
1. Откройте файл plane.tif.
2. Выберите команду Save For Web из меню File.
3. Выберите режим 2-Up, перейдя на соответствующую вкладку.
4. Увеличьте масштаб демонстрации в области просмотра до 300%. Это позволит лучше оценить качество оптимизации.
5. В правой части окна находятся элементы управления параметрами экспорта. В списке Settings выберите формат сохранения JPEG (рис. 9.14).
Рис. 9.14. Установки экспорта в формат JPEG модуля Save For Web
6. Список Compression quality предлагает несколько типичных значений качества изображения от Low до Maximum. Более тонкая регулировка осуществляется ползунком Quality, расположенным правее. Для начала установите с его помощью максимальное качество, 100%. При столь высоком значении изображение в правой части области просмотра (оптимизированное) практически не отличается от оригинала в левой части. Взгляните на информационные поля в соответствующих частях области просмотра. Оригинал, не сжатое изображение, занимает 120 Кбайт, а сжатое — 34,54 Кбайт. Даже столь низкий коэффициент сжатия обеспечивает почти четырехкратный выигрыш в размере файла.
7. Посмотрите на оценку времени загрузки сжатого изображения. Оно составит 13 секунд при скорости модема 2,88 Кбайт/сек. Теперь представьте себя читателем Web-страницы, на которой находится пять таких изображений. Будете ли вы дожидаться пока страница загрузится целиком? Скорее всего нет. Чтобы удержать читателя, требуется делать изображения как можно более компактными. В случае формата JPEG нужно просто понизить качество, увеличив коэффициент сжатия. Установите ползунок Quality посередине, примерно на 50%. Очевидно, качество ухудшилось, появилась характерная "грязь". Но так ли уж плохо дело?
8. Установите масштаб отображения 1:1 двойным щелчком на инструменте Zoom. Даже внимательный просмотр не позволяет обнаружить различия между оригиналом и сжатым изображением.
9. Уменьшайте качество изображения с помощью ползунка Quality до тех пор, пока не заметите отличий от оригинала. Это должно произойти при качестве приблизительно 20%. Заметьте, что размер файла с таким сжатием составляет всего 5 Кбайт, а время загрузки сократилось до 3 секунд!
10. Теперь отыграем еще одну секунду для читателя Web-страницы. Коэффициент сжатия можно повысить за счет предварительного размывания изображения. Ползунок Blur в области Settings избавит от необходимости покидать окно фильтра экспорта. Разумеется, размывка должна быть не слишком значительной, чтобы качество изображения не пострадало. Значение 0,2 вполне удовлетворяет этому требованию.
11. Еще уменьшите качество изображения с помощью ползунка Quality до 15—18%. Это сократит размер файла еще на килобайт, а время загрузки на секунду. Теперь самому нетерпеливому посетителю вашей Web-страницы будет не в чем упрекнуть ее автора.
12. Флажок Progressive задает чересстрочную развертку изображения при загрузке в браузере. Она слегка увеличивает размер файла, но и дает возможность читателю страницы самому определять, стоит ли дожидаться полной загрузки. Установите его.
13. Флажок ICC Profile позволяет внедрить в файл изображения цветовой профиль. Устанавливайте этот флажок только если у вас есть для этого весьма веские причины, поскольку внедренный профиль увеличивает размер файла на 3—4 килобайта.
14. Флажок Optimized включает дополнительную оптимизацию внутренней структуры JPEG, что иногда еще сильнее сокращает размер файла. Побочный эффект оптимизации может сказаться только при использовании очень старых версий браузеров. Все новые браузеры нормально обрабатывают такие файлы.
15. Правильность сделанных установок легко проверить, загрузив готовое изображение в браузер. Для этого вам даже не придется покидать окно модуля экспорта. Нажмите кнопку Preview in <имя браузера>, и модуль откроет браузер с загруженным в него изображением. Ниже изображения вы увидите HTML-код, который сгенерирован модулем экспорта для демонстрации этой страницы (рис. 9.15). Цвет фона страницы можно предварительно задать с помощью списка Matte.
Примечание
Если вы занимаетесь Web-дизайном, то, скорее всего, на вашем компьютере установлены как минимум два браузера: Internet Explorer и Netscape Communicator Кнопка Select Browser Menu, расположенная рядом с кнопкой Preview in, открывает меню, позволяющее выбрать для просмотра любой из установленных на компьютере браузеров.
Рис. 9.15. Предварительный просмотр оптимизированного изображения а окне браузера
Продолжение
|
 |
Уроки Фотошоп
|
