Из Photoshop 5.5 — в Web
1. Оптимизация полутоновых изображений
3. Оптимизация векторных рисунков
10. Связывание анимационных кадров
11. Использование команды Extract
12. Автоматическое создание Web-галереи
В версии 5.5 этой гениальной программы фирмы Adobe появились новые возможности, связанные с подготовкой графики для Web. Наши уроки помогут вам ознакомиться с этими замечательными и полезными функциями...
1. Оптимизация полутоновых изображений
Приступая к занятию откройте одно из цветных изображений, с которыми вы обычно работаете...
1. Это полноцветное изображение мы хотим поместить на Web-страницу. Предварительно мы уменьшили его размер, и теперь ширина картинки составляет 800 пикселов. Однако такой файл будет загружаться полдня, так как его объем составляет почти 1 Мбайт.
2. В прежних версиях Photoshop для определения оптимальных методов компрессии и сокращения цветов, которые обеспечивали бы наименьший размер файла и, соответственно, скорейшую его загрузку, приходилось идти долгим путем проб и ошибок. Причем до тех пор, пока окончательный вариант изображения не сохранялся на диске, размер его был неизвестен.
3. Благодаря новой команде File>Save for Web, появившейся в Photoshop 5.5, эта процедура значительно упрощается. В большом диалоговом окне оптимизации вы можете интерактивно управлять параметрами оптимизации.
4. Окно содержит четыре вкладки, позволяющие увидеть различные версии изображения: оригинал, результат, оригинал плюс результат, три оптимизированных варианта с разными установками плюс оригинал для сравнения.
5. Мало того, любой из вариантов можно просмотреть непосредственно в окне Web-браузера: щелчком выделите один из вариантов (вокруг картинки появляется рамка), затем нажмите кнопку в нижней части окна. Из раскрывающегося списка можно выбрать любой из установленных у вас браузеров, слева от его имени появляется пиктограмма браузера.
6. По каждой версии изображения предлагается информация: размер файла, время загрузки и т.д. Время загрузки зависит от скорости указанного вами модема. Нажмите кнопку с треугольником вверху справа над картинкой и выберите из списка скорость модема: 14,4, 28,8 или 56,6 Кбит/с. Самым надежным вариантом будет 28,8 Кбит/с, так как связь со скоростью 56,6 Кбит/с (или выше) есть далеко не у всех.
7. Если у посетителя сайта есть возможность загружать изображения высокого разрешения, вы можете воспользоваться методом сжатия с меньшими потерями в качестве. Для полутоновых изображений лучше всего подходит метод JPEG. Щелкните на корешке Optimized (Оптимизированный), и вы увидите результат в полноэкранном режиме просмотра.
8. Вверху справа в списке Settings (Установки) вы найдете перечень предустановленных вариантов сжатия. Выберите из списка JPEG High.
9. Теперь размер оптимизированного изображения составляет одну десятую от размера оригинала, а качество картинки пострадало лишь незначительно. Выберите вариант Medium и оцените эффект — левая часть изображения выглядит смазанной, зато картинка будет загружаться вдвое быстрее.
 |
|
2. Фильтр Dither Box
И наконец, как решать проблемы адекватного отображения цветов...
1. Чтобы сайт выглядел хорошо на любых компьютерах, приходится идти на компромиссы. К сожалению, число цветов, которые устойчиво воспроизводятся в Web, ограничено. Например, показанный здесь голубой цвет в этот охват не вписывается. Ближайшим его «интернетовским» эквивалентом является... серый. Если вам нужен именно тот цвет, а не иной, можно использовать растровое изображение, хотя оно поглощает и дополнительные ресурсы.
2. Более удобный способ — представить цвет с помощью контролируемого рассеяния (dither). Фильтр Dither Box из Photoshop 5.5 позволяет имитировать новые цвета на основе «интернетовских» (Web-safe). Залейте объект каким-нибудь «чужим» цветом и выберите команду Filter>Other>Dither Box.
3. Правый образец представляет цвет RGB: чтобы имитировать его «интернетовский» вариант, щелкните на стрелке между образцами. Со своим делом Dither Box справляется неплохо, но при желании вы можете изменить состав цветов в матрице рассеяния, пользуясь инструментом Карандаш. Добившись желаемого результата, нажмите кнопку Fill.
|
|
3. Оптимизация векторных рисунков
Изображения, полученные на основе векторных иллюстраций, требуют несколько иного подхода...
1. Оптимизация графики, подготовленной в векторных программах, с большими областями сплошных цветов, текстом и четкими деталями выполняется несколько иначе. Откройте какую-нибудь картинку вроде этой.
2. Наилучшие результаты с такой графикой дает формат GIF или PNG. Выберите команду Save for Web и включите режим просмотра 2-Up. В списке Settings выберите вариант GIF 128 Dithered. Изображение почти не изменилось, разве что в градиенте слегка обозначились полосы.
3. Теперь размер файла составляет 30 Кбайт. Отлично, но с модемом 28,8 Кбит/с он загружается целых 12 секунд. Вы можете выиграть несколько секунд без особого ущерба для качества изображения. Сократите количество цветов со 128 до 16. Размер файла сокращается до 20,6 Кбайт, а время загрузки — до 8 секунд, картинка же все равно выглядит хорошо.
4. Если вы хотите добиться большей точности, можете поменять палитру цветов, выбрав вместо Selective вариант Adaptive или Perceptual. Иногда это позволяет достичь большего сходства с оригиналом. Заметьте, что вариант Perceptual сохраняет голубые оттенки в накидке, тогда как Selective ведет к их потере.
5. GIF, в отличие от других форматов, предлагает возможность преобразования с потерей цветовой информации (регулятор Lossy). Однако пользоваться ею надо очень осторожно, поскольку такая оптимизация деструктивна. Переместив регулятор вправо, вы сократите время загрузки изображения, но качество его сильно пострадает. Для картинок на базе векторной графики этот способ определенно непригоден.
6. В форматах GIF и PNG предлагается режим чересстрочной загрузки (параметр Interlaced). Это своего рода трюк, благодаря которому кажется, будто изображение открывается быстрее, так как в браузере сначала выводится картинка низкого разрешения, а тем временем продолжает загружаться версия высокого разрешения. В одном файле содержится два изображения, и браузер знает, как с ними обращаться. Размер файла при этом увеличивается, зато посетитель уверен, что процесс пошел. К нашему изображению добавляется секунда, но результат, пожалуй, стоит того.
|
|
4. Другие варианты
Если ни один из предыдущих методов вас не устраивает, попробуйте эти...
1. Форматы GIF и PNG позволяют сохранять в изображениях прозрачные области. Формат JPEG прозрачности не поддерживает. Откройте изображение с прозрачным фоном.
2. Из списка Settings выберите PNG-8 и проверьте, чтобы был включен параметр Transparensy (Прозрачность). Этот вариант предполагает режим случайного распределения (dithering), который имитирует недостающие в файле цвета. Если его отключить, размер файла значительно сократится, и, возможно, вы найдете, что качество картинки особо не пострадает.
3. Круглая кнопка со стрелкой в верхней правой части окна дает доступ к команде Optimize to File Size (Оптимизировать по размеру файла). Выберите Auto Select GIF/JPEG, и Photoshop найдет наилучший вариант сжатия в зависимости от указанного вами размера файла. Это очень удобно, особенно если вы не хотите возиться с настройками. В поле File Size мы ввели значение 32 Кбайт, и через несколько секунд Photoshop предложил готовое решение.
|
|
5. Создание фона
Фон видимых линий стыковки для Web-страницы можно создать с помощью ImageReady...
1. Откройте изображение в ImageReady. В нашем примере это кирпичная стена. Нам предстоит сделать фон, который будет состоять из стыкующихся плиток.
2. Захватив несколько рядов кирпичной кладки, создайте выделение, которое послужит плиткой-образцом. Сделайте это как можно аккуратнее. Выберите команду Filter>Other>Tile Maker и задайте показанные здесь установки.
3. Скопируйте выделение и вставьте его в новый документ. Выберите команду File>HTML Background. Включите параметр View As Background (Показать как фон) — изображение будет использовано как повторяющийся образец. Чтобы увидеть результат в браузере, выберите команду File>Preview In>Intrenet Explorer (Netscape Navigator).
|
|
6. Секции (Slices)
Включите в диалоге File>Preferences>Slices отображение номеров и символов секций...
1. Photoshop и ImageReady предлагают все необходимые средства для создания сайта. В Photoshop вы делаете интерфейс, затем переходите в ImageReady, создаете там ролловеры и оптимизируете страницу для быстрой загрузки.
2. Это — простая Web-страница с индексами. Элементы страницы и текст были созданы в Photoshop, а чтобы дополнить ее необходимыми эффектами, перейдем в ImageReady. Нажмите кнопку перехода в нижней части инструментальной палитры.
3. Любую страницу можно разделить на секции, которые будут загружаться по отдельности. Разделенная на секции страница загружается быстрее, не давая интересу посетителя угаснуть. Нажмите кнопку «Показать секции» или выберите команду Slices>Show Slices.
4. По умолчанию документ состоит из одной секции, но вы можете создать их сколько угодно, разделяя страницу на логические части. Создайте выделение, захватив навигационную графику в верхней части страницы, и выберите команду Slices>Create Slice From Selection (Секции>Секция по выделению). Страница автоматически разбивается на несколько секций.
5. Заметьте, что наша секция включает все четыре кнопки. Мы можем разделить ее на более мелкие. Выделите нужную секцию и воспользуйтесь командой Divide Slice (Разделить секцию).
6. Отключите параметр Divide Horizontally, а в первое поле группы Divide Vertically введите 4. Нажмите ОК. Теперь инструментом Slice Select (выделить секцию) отрегулируйте размер секций по вертикали и горизонтали, чтобы все рамки для всех кнопок были одинаковыми.
|
|
7. Ролловеры
Ролловер (rollover) — элемент пользовательского интерфейса, в основе которого лежит событие, изменяющее состояние графического объекта при попадании на него курсора. Создают их следующим образом...
1. Ролловеры служат для облегчения навигации, позволяя вместо кнопок использовать целые области. Откройте палитру Rollover (из меню Window) и инструментом Slice Select выберите секцию Home. Держите наготове также палитру Options.
2. На палитре Rollover появляется миниатюра секции Home. Нажмите кнопку New Rollover State и удостоверьтесь в том, что из списка над новой миниатюрой выбран вариант Over (Поверх). Тем самым секции присваивается состояние «Поверх» (Over), означающее, что этот элемент будет реагировать на попадание на него курсора.
3. Теперь изменим вид кнопки. Информация об этих изменениях будет сохранена вместе с информацией о состоянии данной секции. С помощью эффекта слоя мы создали желтое свечение вокруг слова Home.
4. Создайте на палитре Rollover еще одно состояние — Down (Вниз). Это означает, что данная область будет реагировать на нажатие посетителем кнопки мыши. Мы заменили сияние на белое, а белое пятно слева от слова Home сделали красным.
5. В ImageReady можно сохранять такие свойства, как прозрачность слоя, позиция, видимость и эффекты слоя, а изменения цвета пикселов существующего слоя не сохраняются. Поэтому мы просто создали новый слой с красным пятном, а видимости слоя присвоили состояние Down.
6. Заготовку файла можно просмотреть и опробовать в браузере, воспользовавшись командой File>Preview In или нажав комбинацию клавиш Command-Option-P (Control-Alt-P).
|
|
8. Оптимизация секций
Оптимизация секций поможет внести разнообразие в страницы...
1. Преимущество разбиения на секции заключается еще и в том, что каждую секцию можно оптимизировать по-разному, в зависимости от ее содержимого. Эта страница открывается нажатием кнопки Gallery из предыдущего примера. Три картинки символизируют три раздела галереи. В Photoshop они были размещены на отдельных слоях.
2. Разобьем страницу на логические секции. Делается это так же, как и в предыдущем примере. Очертите прямоугольное выделение вокруг первой картинки и ее надписи и выберите команду Create Slice From Selection. Разделите секцию по горизонтали и, перемещая разделитель, создайте рамки для текста и изображения.
3. Проделайте те же операции с остальными элементами, оставляя вокруг надписей пространство, чтобы уместился эффект «свечения» ролловеров. Выровняйте края секций.
4. Теперь с помощью вкладки Optimized (в верхней части основного окна документа) оптимизируем каждую секцию. Выделите секцию Home и откройте палитру Optimize. Выберите формат GIF и уменьшите количество цветов до 16. Опробуйте другие варианты и посмотрите, как они влияют на качество/размер секции. Изменять варианты компрессии для каждого состояния в отдельности невозможно, изменения действительны сразу для всех ролловеров.
5. Первая картинка является полутоновым изображением, поэтому в качестве метода сжатия для нее лучше использовать не GIF, а JPEG. Выделите секцию и на палитре Optimize выберите метод компрессии JPEG High.
6. Для второй картинки можно задать GIF с 4, 8 или 16 цветами в зависимости от того, насколько гладкой вы хотите ее сделать. Для третьей снова понадобится JPEG. С текстом можно использовать сжатие GIF с 4 или 8 цветами, а в остальных секциях — даже с двумя, чтобы повысить скорость загрузки до максимума. Проверьте, как страница работает в браузере..
|
|
9. Изменение состояния слоев
Как сделать так, чтобы новые слои не терялись?
1. Если после создания ролловеров вы хотите вернуться в Photoshop и внести в дизайн какие-либо изменения, например сделать новую страницу на основе существующей, в дальнейшем у вас могут возникнуть проблемы. Мы придали фону текстуру, сохранили ее в Photoshop и перешли в ImageReady.
2. Куда девалась текстура? Дело в том, что мы добавили новый слой, но в предыдущих состояниях ролловеров информация о его видимости отсутствует. Можно выругаться про себя и начать сохранять все состояния заново. К счастью, есть более простой способ.
3. Достаточно выделить добавленный слой, задать ему желаемое состояние (например, сделать видимым) и из меню палитры Rollover выбрать команду Match Layer Across All Rollovers (Этот слой для всех ролловеров). Теперь слой будет видим во всех секциях и состояниях.
|
|
10. Связывание анимационных кадров
Определите ключевые кадры, а компьютер автоматически сформирует все, что должно быть в промежутке между ними...
1. Благодаря функции Tween (Связывание) в ImageReady упрощается создание плавной анимации. Наш файл, созданный в Photoshop 5.5, содержит слой с текстом и другой слой с тем же текстом, размытым фильтром Motion Blur (Размытие в движении).
2. Перейдите в ImageReady и создайте на палитре Animation два кадра. В первом невидимым сделайте размытый текст, а во втором — четкий текст. Просмотрите результат в браузере — впечатления никакого...
3. Вернитесь в ImageReady, выберите на палитре Animation первый кадр и из меню той же палитры выберите команду Tween. Включите в диалоговом окне кнопку All Layers (Все слои), параметр Transparensy (Прозрачность), а в списке Tween with (Связать) выберите Next Frame (Со следующим кадром). В поле Frames to Add (Добавить) укажите 8 кадров и нажмите ОК. Программа автоматически добавляет нужное число кадров, формируя плавную анимацию. Полюбуйтесь на результат.
|
|
11. Использование команды Extract
Новая версия Photoshop предлагает еще одну очень удобную вещь...
1. Команда Extract (Извлечь) в Photoshop 5.5 позволяет легко и быстро создавать прозрачные GIF-файлы или прозрачность вокруг объектов, отсекая от них фон. Наилучшие результаты дают изображения с хорошим контрастом между передним планом и фоном.
2. Выберите команду Extract, при этом открывается новое окно во весь экран. Инструментом Highline Pen (Маркер) аккуратно обведите объекты, которые вы хотите выделить. Важно, чтобы края объектов шли посередине контурной линии. Если у вас это не получается, увеличьте размер кисти.
3. Инструментом Paint Bucket (Заливка) залейте области, которые должны быть изолированы, затем нажмите кнопку Preview. Вы можете просмотреть результат на любом цветовом фоне, например, на background’е вашей Web-страницы.
|
|
12. Автоматическое создание Web-галереи
Эта функция помогает сэкономить массу времени...
1. Художника или фотографа, желающего разместить свои работы на Web-сайте, особенно порадует команда Web Photo Gallery из подменю File>Automate. Она создает HTML-документ с системой навигации, связывающей миниатюры с изображениями высокого разрешения.
2. Выберите команду Web Photo Gallery, нажмите кнопку Source: Choose и найдите папку со своими картинками. Нажмите кнопку Destination: Choose, создайте внутри папки с картинками новую папку, например «Моя галерея», и нажмите кнопку Select.
3. Установите остальные параметры и заполните поля так, как посчитаете нужным. Вам предлагается выбрать один из трех размеров для миниатюр, у вас есть также возможность уменьшить основные изображения либо оставить их как есть. В данном случае оставьте их размеры без изменений. Нажмите ОК. После того как команда будет выполнена, автоматически запускается ваш браузер, отображая готовую галерею. При желании вы можете открыть HTML-файл в соответствующей программе, например GoLive, и внести в страницы необходимые коррективы.
КомпьюАрт 1'2000