| ||||||||||||||||
 | ||||||||||||||||
| ||||||||||||||||
 | ||||||||||||||||
| ||||||||||||||||
|
|
Средство Save for Web: графика должна быть стройной Итак, оригинал-макет вашего сайта готов. На деньги, полученные от сдачи использованных в творческом процессе пивных бутылок, покупаются новые. Заплеванный в минуты отчаяния потолок вновь приобретает естественный желто-коричневатый оттенок, и отчаяние сменяется радостью за соседей сверху: живы еще, сволочи! Сметаются со стола горы бумаг вперемешку с небольшими холмами отгрызенных от ручек колпачков. Тихо, без помпы выносятся во двор два больших пакета с сигаретными бычками. Идут приготовления к последнему марш-броску на линию е-фронта: верстке сайта. И именно на этом этапе вспоминаешь, что живешь в России и что полуторамегабайтный макет из 47 слоев сядет на мель в наших знаменитых каналах связи. Но сотрудники из Adobe к версии Photoshop 5.5 дозрели до истинного космополитизма и облегчили нам жизнь, создав мощный инструмент для сжатия изображений - Save for Web. Мало кто знает, что это средство было заимствовано из Adobe Image Ready в рамках продолжающейся интеграции двух программных пакетов. Image Ready - очень мощное средство для нарезки макета на части, их оптимизации и автоматической генерации HTML-кода таблицы с фрагментами изображения. Это очень удобно: в макете одни области могут состоять из плоских цветов и стерпят сильное GIF-сжатие, а другие могут содержать сложные фотографические текстуры. Степень сжатия последних для пристойного качества должна быть ниже, да и алгоритм сжатия - совершенно другим. В итоге соотношение качество графики/размер страницы оказывается лучше, чем если бы мы загнали всю болванку макета в один файл и определили для него карты ссылок. Но если проводить аналогии с автотранспортом, то Save for Web - небольшой пикап, в то время как Image Ready - громадный автопоезд, который никто не будет гонять с одним бочонком самогона в сельсовет. Поэтому, Save for Web используется, если надо быстро оптимизировать набор уже готовых изображений. Несмотря на разные возможности, интерфейс модуля Save for Web и палитры Optimize в Image Ready очень схож, поэтому вам не придется изучать все дважды. Итак, запасшись скальпелем, спиртом и банальным огурчиком, приступим к препарированию этой "серебряно-металлической штуковины". Она вызывается нажатием клавиш Ctrl+Alt+Shift+S или через меню File/Save for Web... Надо заметить, что модуль достаточно требователен к ресурсам, поэтому дожидаться появления окна придется несколько секунд, особенно в случае большого изображения. В окне три вкладки: Original, Optimized, 2-Up и 4-Up. Само собой разумеется, что на вкладке Original можно лицезреть оригинал изображения, его рекламное "До", а на вкладке Optimized - шокирующее "После". А вкладки 2-Up и 4-Up демонстрируют просмотр рекламы после неумеренного потребления спиртного: областей для предварительного просмотра сразу две или четыре, причем для каждой можно указывать свои параметры оптимизации и наслаждаться результатом. Под каждой областью просмотра выводится служебная информация о изображении: количество цветов, тип палитры, степень dither, качество сжатия (для формата JPEG), размер в килобайтах и время загрузки изображения из сети на заданной скорости соединения. Ее можно указать в выпадающем меню, которое вызывается нажатием круглой кнопки с треугольником справа вверху. Слева от области предварительного просмотра - набор стандартных инструментов Photoshop для управления масштабом изображения и его перемещения в окне просмотра, а также инструмент Eyedropper, позволяющий выбрать текущий цвет, который отображается под панелью инструментов. А в самом низу окна находится строка состояния, где можно справиться о цвете под курсором, его номере в палитре (Index) и о масштабе изображения. Также на строке состояния находится кнопка со списком, позволяющая просмотреть готовое изображение в любом из установленных браузеров. Справа от области предварительного просмотра - собственно рычаги для контроля процесса оптимизации. Для GIF- и JPEG- графики элементы управления существенно различаются, поэтому рассмотрим их по очереди. Начнем с GIF. Пресс, выжимающий все соки из несчастных изображений - это список для выбора количества цветов в палитре (напомню, что формат GIF сжимает изображения путем уменьшения числа используемых цветов). Оптимальное сжатие достигается путем выбора нужного количества цветов и визуального контроля за качеством изображения на вкладке Optimized и его размером в строке состояния. Следует отметить, что наибольшее соотношение качество/размер вы получите при использовании числа цветов, входящего в ряд степеней двойки: 2, 4, 8, 16 и т.д. Другой важный параметр при переводе полноцветного изображения в режим индексированных цветов - это тип палитры, который определяет алгоритм сокращения количества цветов. Системные палитры Windows и Macintosh используются редко. Для нас большое значение имеют типы палитры Web, Adaptive, Selective, Perceptual и Custom. Палитра Web подгоняет цвета изображения к тем 216, которые одинаково выглядят на всех платформах (если не считать разницу яркости Win и Mac), во всех браузерах и на абсолютном большинстве дисплеев. Это, конечно, замечательный архаизм. Сегодня большая часть посетителей web-страниц обладают High-color или True color видеокартами, а разница в отображении цветов между Netscape и Internet Explorer может не удовлетворить лишь Артемия Лебедева с его легендарным "спектрофотометром". (Хорошая, кстати, вещь. Признак истинного таланта обладателя :-> ) Поэтому не воспринимайте стандартные цвета Web как догму. Иногда уход от них может дать даже положительный результат. Случай из личного опыта: я использовал в качестве фона страницы очень интересный сам по себе цвет. На моем 32-битном видеоадаптере все смотрелось превосходно, и я решил взглянуть на страницу глазами "счастливых" обладателей 256-цветных видеокарт. Переключив режимы, я обнаружил, что фон стал материальным. Он чувствовался на ощупь, его хотелось потрогать! Заинтригованный, я увеличил участок фона с помощью утилиты Eyedropper (кстати, после обновления дизайна сайта рассылки ждите там раздел с необходимой софт-мелочевкой). Оказалось, что причиной шероховатости был diffusion dither, производимый браузером в попытке подогнать цвет под исходный в столь экстремальных условиях. Представляете, я, не затратив ни байта на сложную графику, осчастливил несчастных владельцев старых видеосистем прекрасной ненавязчивой материальной текстурой! Но, прочь лирические отступления! На чем мы остановились? Ах, да, палитра Adaptive. Она - наилучший выбор, если вы хотите как можно меньше навредить такому беззащитному результату своего труда. Компьютер сам проведет расчет и выберет из миллионов цветов исходного изображения самые важные, причем ровно столько, сколько вы указали в списке. Режим Perceptual действует так же, но цвета будут подобраны для улучшения восприятия изображения человеком. Режим Selective комбинирует два вышеперечисленных. Но зачем же тогда режим Custom, если все можно сделать автоматически? Все очень просто. на картинке могут быть небольшие, но крайне важные для ее восприятия области цвета. К примеру, темно-зеленые глаза любимой женщины, с цветом которых вам так не хочется расставаться. Если вы позволите Photoshop самому обработать рисунок и сильно ограничите количество цветов, то он посчитает небольшие глаза незначительными и уберет темно-зеленый цвет из палитры, поставив на вакантное место дополнительный оттенок телесного для более точной передачи большого по цвету лица. Исправить положение можно, отредактировав палитру вручную. Выбирать в списке слово "Custom" вам не придется, оно появится само при первом внесении изменений в палитру цветов справа внизу. Процесс ручной корректировки палитры в техническом отношении прост, но весьма утомителен. В оригинальном изображении пипеткой набирается искомый цвет и бережно переносится в палитру щелчком по кнопке "New color" внизу. Вновь созданный цвет будет таким же, как и текущий, видный под панелью инструментов слева. А если задача обратная: в палитре присутствует ярко-фиолетовый цвет, а на фото - та же зеленоглазая дамочка, и ни капли фиолетового без "спектрофотометра" не сыщешь. В таком случае, выберите ненужный цвет в палитре и нажмите кнопку "Delete color" (с мусорной корзиной). Несколько десятков байт за счет удаления этого цвета из палитры вы выиграли. Только, пожалуйста, не думайте, что я иронизирую. К мелочам надо относиться серьезно. Когда их много (а так обычно и бывает) они складываются в большую и непристойно выглядящую кучу, способную закрыть все плюсы вашего изображения. Полезная возможность режима свободного редактирования палитры - запирание отдельных цветов. Это означает, что выделив нужные цвета и нажав кнопку "Lock Color", вы прикажете Photoshop обязательно сохранять их при изменении общего количества цветов в палитре. Пользуясь этой возможностью, в нашем примере с зеленоглазой девушкой можно было пойти от противного: свести палитру к минимуму (два цвета), добавить необходимые оттенки зеленого, запереть их и после этого в автоматическом режиме догнать палитру до нужного размера. Помимо запирания, создания и удаления цветов, в нижнем ряду есть еще одна кнопка, позволяющая подобрать для выделенных цветов ближайшие аналоги из 216 стандартных цветов Web. Это может быть полезным, когда вы, чтобы избежать шероховатого dither браузера на старых мониторах, хотите сделать только один цвет (фоновый) Web-безопасным. С палитрами разобрались. Теперь пресловутый Dither. Функция эта весьма противоречива и в большинстве случаев бесполезна. Ведь имитация цветового перехода за счет "разбрызгивания" пикселов одного цвета с разной плотностью (это и есть Dither) мешает встроенной в формат GIF системе сжатия LZW (когда несколько идущих подряд одноцветных пикселов кодируются одним числом). Dither стоит включать лишь тогда, когда удельный вес изображения в байтах очень невелик и выгоднее воспользоваться Dither, чем вводить новый цвет в палитру. Назначение движков Dither и Web Snap, я думаю, понятно, а вот про движок Lossy хочется сказать пару ласковых. Он позволяет уменьшать размер файла за счет простого удаления части пикселов. Эту опцию иногда полезно применять к черно-белым изображениям для имитации осыпания и деградации. Флажок Interlaced включает режим чересстрочной записи изображения. Это проявляется на экране как постепенное увеличение четкости изображения при загрузке и незначительно увеличивает размер файла. Полезно применять эту опцию для больших изображений, чтобы посетитель мог оценить их содержание до полной загрузки. Галочка Transparency, само собой, включает или отключает поддержку прозрачных пикселов в изображении. Но здесь есть очень важное обстоятельство: в формате GIF существует только одна градация прозрачности, то есть пиксел может быть либо полностью прозрачным, либо полностью непрозрачным. Для имитации плавного перехода от цвета объекта к прозрачному окружению Photoshop использует цвет Matte, который можно указать самому. Этот цвет должен точно совпадать с фоном веб-страницы, поэтому нет реальных оснований для применения прозрачности в GIF. Есть два альтернативных пути. Можно вместо прозрачности использовать цвет фона страницы, а в HTML-тэге background указать в качестве заполнителя однопиксельный GIF этого цвета. (Но не указывать цвет напрямую в HTML-кодах. Если сделать это, на некоторых мониторах может появиться граница между фоном изображения и фоном веб-страницы.) А если требуется полная мощь эффекта прозрачности, то используйте формат PNG (читается - "пинг"). В нем можно создавать до 256 градаций прозрачности, но для вставки в страницу файла этого типа необходимо пользоваться специальными HTML-конструкциями. Верите ли вы, читатель, что до конца этой статьи осталось лишь несколько абзацев? Моя рука, вот уже два дня выводящая всю эту околонаучную ересь, уже не верит. Поэтому сейчас я ставлю точку и делаю перерыв. А вы, как говорится, откиньтесь на спинку кресла и наблюдайте за процессом установки автора на умные мысли. В конце концов, просто отдохните. Неподвижное сидение в одной позе - оно ведь тоже вредно. "Хрю!" - робко донеслось из-под подушки полузадушенное мною любопытство. Как у вас там, читатель? Готовы вновь кинуться в море (скорее, в омут) проблем сохранения графики для Web? На сладкое у нас - грамотная работа с JPEG. В отличие от GIF, этот формат лучше сжимает фотографии с множеством плавных цветовых переходов. А параметр сжатия у JPEG всего один - качество. Оно варьируется в пределах от нуля до ста или в градациях "Low", "Medium", "High" и "Maximum". Никаких рекомендаций по установке этого параметра дать нельзя: значения подбираются эмпирически. Кроме задания качества можно размывать изображение (движок blur), что существенно уменьшает размер файла. Действие флажка Progressive аналогично флажку Interlaced для GIF: изображение будет загружаться в несколько проходов. Но, в отличие от Interlaced, установка опции Progressive уменьшает объем файла. Галочка Optimized включает усовершенствованный алгоритм сжатия, который на сегодня поддерживают все популярные браузеры, так что лучше оставить ее включенной. В формате JPEG тоже можно указывать цвет Matte, только он будет заменять собой все области прозрачности, если таковые имеются (JPEG не поддерживает прозрачность). Все настройки можно сохранить, а затем использовать для нескольких файлов. Это можно сделать, выбрав пункт Save Settings... в меню, которые вызывается щелчком по треугольнику справа вверху над параметрами оптимизации. Сохраненные настройки будут доступны в списке слева от кнопки, вызывающей меню их сохранения. Но я не рекомендую вам использовать стандартные значения параметров оптимизации для разных файлов: ведь каждое изображение индивидуально, следовательно и оптимально сжиматься должно по-своему. Кроме того, все настройки можно подогнать под требуемый размер файла в килобайтах Кроме перечисленных выше функций Save for Web позволяет компенсировать цвета в изображении и просматривать dither браузера - все эти функции можно использовать, если щелкнуть по кнопке с треугольником в правом верхнем углу области предварительного просмотра. Напоследок отметим, что Save for Web позволяет сохранять изображения в формате PNG, но поскольку это редко используемый формат, то его настройку мы описывать не будем. Ну что, прониклись мощью чудо средства Save for Web? Поверьте, для реализации существующих стандартов его хватит с головой. Выбросите в форточку все мелкие и хлопотные утилитки вроде Ulead Smart Saver или DeBabelizer: их время прошло. Теперь модно иметь все в одном флаконе. Кстати, эта тенденция проявляется и в постепенной интеграции Photoshop с Image Ready. Вот и все. Я свое дело выполнил. А за вами - не дать посетителям ваших страниц скучать в ожидании загрузки. Все. Ручка кончилась.. Когда изображение носит вуаль Любой дизайнер когда-нибудь перерастает использование в своем творчестве картинок из коллекций бесплатной графики и web-галерей. Обычно это происходит когда после многомесячной работы над коллажем для сайта обнаруживается, что до боли знакомые фотографии использованы в качестве фона странички безвестного дилетанта. Итак, большую часть сборников бесплатных изображений отдаем на растерзание любителям. Что же остается? Конечно же, сканирование реальных предметов и печатных материалов. Но, в полном соответствии с законами Мерфи, проблем меньше не становится. На сканированных изображениях появляется муар. Муар - это оптическая иллюзия, возникающая при совмещении типографского растра со столь же регулярной структурой пикселов экрана. В результате на изображении появляются отвратительные криволинейные фигуры, убрать которые обычными методами не удается. Если вы никогда не сталкивались с муаром, то попробуйте посмотреть на мир сквозь сложенный вдвое нейлоновый тюль - перед вами появятся линии, напоминающие картину интерференции, а, по сути, ей и являющиеся. Муар - очень подлая штука, способная проявляться не только на сканированных изображениях, но и на объектах, имеющих регулярную структуру: кусках ткани, решетках колонок и микрофонов, листах ДСП и т.п. Ваш покорный слуга сталкивался с муаром, причиной которого была обивка чемодана на фотографии.. После масштабирования отверстия в ткани стали сравнимы с единичными пикселами экрана и, накладываясь на них, образовывали причудливые, но совершенно ненужные узоры. Бороться с муаром можно по-разному. Самый кардинальный способ - просто отсканируйте изображение заново, положив его в сканер под углом 10-15 градусов к его краям. Только не вздумайте в Photoshop поворачивать фотографию обратно - муар вернется с прежней силой. Тут весь фокус в том, что придется мириться с незначительным наклоном картинки для устранения муара. Но если вас не устраивает легкий наклон изображения, то попробуйте второй способ. Сканируйте изображение с удвоенным относительно необходимого разрешением. Графика на экране монитора (в том числе и в Сети) обычно имеет разрешение 72 пиксела на дюйм, так что сканируйте с разрешением 144 точки на дюйм. После этого выделите область концентрации муара любым инструментом и сделайте растушевку краев выделения (Select/Feather...) радиусом в 10-12 пикселов, чтобы не было резкого контраста между областями после удаления муара. Примените к выделенной области фильтр Gaussian Blur с такой интенсивностью, чтобы муар размылся, но мелкие детали изображения не потерялись. После завершения размытия командой Image/Image Size... доведите изображение до нужного разрешения (в веб-графике это 72 пиксела на дюйм). Последним штрихом будет использование фильтра Filter/Sharpen/Unsharp Mask... для восстановления резкости изображения. Муар побежден. А вы наслаждаетесь качественно отсканированной фотографией и больше не опасаетесь встретить ее в другом месте. А если и встретите, то претензии будут явно не к вам. Удачного сканирования! Выбор инструментов Выбор инструментов (Большие Буквы в названиях инструментов поставлены для облегчения запоминания комбинаций):
Переключаться между инструментами в одной группе можно, добавляя Shift к указанным комбинациям.
Коала не спит. Коала все видит Коала - млекопитающее семейства сумчатых, внешне очень схоже с плюшевым мишкой, обитает в Австралии, питается листьями эвкалиптов.. Какое отношение это милое животное имеет к дизайну, графике и Photoshop? Оказывается, метафорическая мысль творческого человека может зайти и так далеко. "Коала" - это проект сетевого искусства, созданный известным питерским дизайнером Даниилом Васильевым и проживающий по адресу . Великий штангенциркуль "рунета" - Артемий Лебедев - в своем дал Даниилу такую оценку: "безбашенный и почти панковский мультимедийщик". Порадуемся за Тему: в оценке других людей ему иногда удается быть удивительно точным. Даниил Васильев действительно сорвиголова. В своем творчестве он умудряется ставить рядом несопоставимые вещи из разных веков, разных стилей и цветов, причем все вместе получается очень устойчиво и естественно. Ну и, конечно, не без иронии. Сам Даниил характеризует свой стиль как "эклектичный трэш-арт". "Коала" и ее владелец - явление в русскоязычном Интернет уникальное. В то время как профессионалы, отпочковавшиеся от дилетантов, стали с ненавистью взирать на любые проявления объема, блеска и трехмерности, украшая свои страницы мудреными коллажами с подразумеваемым скрытым смыслом, в то время как другие дизайнеры пошли aka Marylin Manson и задались целью выплеснуть на зрителя максимум негативных эмоций, в то время как оставались такие приверженцы строгого академического стиля как и Даниил Васильев был другим. Все забыли про искренность. Он выбрал GIF. Выжимая из этого формата все возможное с помощью Java Script и прочих нехитрых премудростей каменного века вебстроительства, Даниил превратил свой проект в цветной, забавный и постоянно движущийся лабиринт инсталляций, которые, по утверждению автора, имеют между собой скрытые смысловые связи. Страницы обращаются к посетителю на простом и непринужденном языке цвета, движения и человеческих слов. "My name is Hot Dog!" - и ничего, что горячая собака - синяя, художнику дозволено все.. А вы не задумывались, что Любовь можно искать на Яндексе? Ведь там найдется все. Даже заблудившийся колобок.. Люди относятся к "Коале" по-разному. Меня, например, никогда не восхищал "мультяшный" стиль. Но это дело субъективных вкусов и мнений. Истинно же то, что ресурс оригинален, и, насколько мне известно, у автора нет подражателей. (Только вот в Питере подворотни неофициальной Мекки неформалов - Пушкинской 10 - исписаны url'ом проекта.) А быть гордым одиноким рифом в бескрайнем море - почетно. |
|
|
| ||||||||||||||||
| ||||||||||||||||
| ||||||||||||||||
|