Архив за Март 2009

  • Полезный плагин для фотошопа

    В третьей части статьи о PNG я упоминал о редакторе Seashore под Mac, в котором можно увидеть то, что скрыто в прозрачных областях изображения.

    Наконец-то нашел плагин к фотошопу, который позволяет сделать то же самое. Называется Remove Transparency из набора Photo Freebies. Есть версия под Mac и PC, абсолютно бесплатен.

    Этот плагин понадобится для следующей статьи из серии «Фотошоп для веб-разработчиков».

    Метки: ,
  • Почему сайты на флэше — это плохо

    Давно хотелось поделиться соображениями и опытом использования флэша на сайте. А также объяснить позицию Студии Лебедева в этом вопросе.

    Предыстория

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

    Из-за этого у многих людей возникло ощущение, что студия ненавидит флэш. Это в корне не верно — к флэшу студия относится так же, как и к любой другой технологии. А именно: применяет её там, где это действительно необходимо.

    У студии особый подход к созданию сайтов, приходится учитывать массу факторов, порой не заметных даже профессионалу: начиная от разного размера шрифта в браузере пользователя, заканчивая возможным желанием заказчика добавить ещё 10 пунктов в горизонтальное меню. Молчу про то, что все сайты должны растягиваться, причем растягиваться должен не только контентный блок, как это привыкли делать на Западе, а вообще весь сайт. В какой-то момент мы поняли, что заточить флэш-ролики под эти нужды гораздо сложнее и дольше, чем сделать анимации на JS.

    Так в чем проблема?

    Хочу сразу оговориться: в этой заметке я не затрагиваю промо-сайты вроде dexter.ru или Mitsubishi Lancer Sportback — это как раз примеры правильного использования флэша для создания нужного вау-эффекта у пользователя. Речь пойдет о тех случаях, когда флэш используют для моргающего и прыгающего меню, а также о сверхидиотских случаях создания информационных ресурсов полностью на флэше ради двух-трех примитивных эффектов (вспомните хотя бы top4top).

    Итак, какие же сложности возникают при использовании флэша?

    Наиболее актуальная и коварная проблема — внедрение флэша на страницу и использование альтернативного контента на случай отсутствия флэш-плагина. Да-да, я знаю, что есть SWFObject, но он не решает очень серьезную проблему, о которой многие даже не догадываются.

    В свое время я довольно много поработал с большими компаниями (несколько тысяч сотрудников). И практически у всех этих компаний была одна особенность: они активно боролись с распиздяйством своих сотрудников в рабочее время. Руководство искренне верило в то, что на работе нужно работать, а не видео смотреть и в игрушки играться. А в чем нынче распространяется весь развлекательный контент? Правильно, во флэше. Поэтому суровые админы таких компаний просто блокируют подобные файлы на уровне корпоративного файервола.

    Как это выглядит на практике с точки зрения веб-разработчика. После загрузки страницы SWFObject радостно сообщает: «Флэш-плагин у пользователя есть!». Разработчик без тени сомнения заменяет html-меню на флэшовое: это ведь так просто, написал swfobject.embedSWF() и все само работает. Но не тут-то было: между браузером пользователя и интернетом стоит злобный файервол, который, сверившись со своим черным списком, просто блокирует доступ к swf-файлу. В итоге пользователь остался и без html, и без флэша. И это при том, что у него может стоять самая последняя версия флэш-плагина.

    It’s always lupus

    Ещё одна проблема, которая возникает при использовании флэшовых компонентов на сайте, это их «чужеродность» по отношению к html. Для флэша необходимо создать некую прямоугольную область, в пределах которой будет происходить вся анимация. Например, для того, чтобы переместить картинку размером 100×100 из левого верхнего угла браузера в правый нижний необходимо создать блок размером со страницу. Естественно, в этот момент будет заблокирован весь интерфейс сайта без видимых на то, с точки зрения пользователя, причин.

    Зато на флэше проще делать сайты

    Одна из самых тупых отмазок, которые сегодня можно услышать. Обычно в таких случаях флэшер за 10 секунд создает какой-нибудь полупрозрачный градиентный блок со скругленными уголками и текстом внутри и с надменным видом спрашивает у бедного html-кодера: «Ну и сколько тебе времени нужно, чтобы это кроссбраузерно заверстать?».

    Что ж, давайте вернемся, так сказать, к самым примитивным вещам, о которых мы даже не думаем. Вот я верстаю простейший сайт: одна колонка шириной 70%, располагается по центру экрана. Контента в этом сайте уже на три экрана. Что делает браузер в таком случае? Показывает мне вертикальную прокрутку. Я могу прокрутить страницу любым известным мне способом: колесом мыши, пробелом, стрелками вверх/вниз, подергать за ползунок, в конце концов. То есть я уже на подсознательном уровне, ни секунды не задумываясь, листаю документ и получаю необходимую информацию.

    Что же происходит на флэшовом сайте? Начнем с того, что если контент не поместится в видимую область экрана, то не произойдет ровным счетом ничего, если об этом не позаботился флэшер. То есть флэшеру нужно воссоздать механизм прокрутки документа. Другой вопрос, как он воссоздаст этот механизм. Как правило, все ограничивается лишь созданием говеного скроллбара, который является единственным способом прокрутить документ. Флэшер помещает меня — пользователя — в абсолютно чужеродную среду, где мои инстинкты больше не действуют. Вместо того, чтобы получать удовольствие от проекта, мне необходимо сосредоточится на процессе получения необходимой информации. Это такая сломанная машина времени: меня хотят отправить в светлое будущее, но попадаю я в мрачное прошлое, когда мышек с колесиком ещё не изобрели.

    Дальше — больше. Простейшее желание вставить нумерованный список или таблицу в середину текста оборачивается настоящей головной болью для флэшера. Потому что у него есть TextField, который способен отображать только обычный текст и картинки, но никак не структуры данных. Чтобы создать хоть сколько-нибудь интересный текстовый эффект, нужно потратить несколько часов работы флэшера, а не 5 минут кодера на работу с CSS. Именно поэтому отличить флэшовые сайты от нефлэшовых можно по абсолютно уебанской текстовой работе — всем лень тратить время на то, что уже много лет нормально работает в браузерах.

    Можно долго хвастаться тем, что десятый флэш плеер умеет круто работать с 3D графикой, только он до сих пор не в состоянии открыть ссылку в новом табе по моему требованию. Сколько лет существуют табы в браузерах? Это — наглядный пример нарушения так называемого user experience. На флэшовых сайтах пользователь не может стандартными средствами увеличить размер шрифта, не может сохранить понравившуюся картинку на рабочий стол, не может использовать любимый плагин для автоматической прокрутки длинных текстов. Много чего из того, к чему он привыкал годами, нельзя сделать на флэшовых сайтах. Зато можно увидеть, как прикольно выезжает картинка, да. Или подолгу пялиться на прелоудер после каждого клика.

    ***

    Действительно ли проще и быстрее делать качественные сайты на флэше? Как вы считаете?

    Метки:
  • Пузырьки

    Пузырьки

    По-настоящему оценят страничку владельцы Маков.

    Метки:
  • Аккуратней с zoom

    Кто бы мог подумать: волшебное CSS-свойство zoom, которым мы привыкли «лечить» баги IE, поддерживается Safari 4 (надо полагать, Chome тоже его поддерживает или будет поддерживать). Подтверждение в баг-трекере Webkit.

    Метки:
  • Фотошоп для веб-разработчика. Каналы и маски: теория

    В скринкасте к статье «Про PNG, часть 4» я продемонстрировал, так сказать, пять минут своей работы по оптимизации изображения, вогнав в ступор даже видавших виды студийных арт-директоров :) Тогда я написал, что не планирую объяснять, что и зачем я там делал. Сейчас я собираюсь исправиться и подробно описать все показанные способы оптимизации графики.

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

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

    about-masks

    Маски бывают двух типов — векторные и растровые. Первый тип нас пока не интересует, рассматрим второй тип. Растровая маска представляет из себя черно-белое изображение. Черный цвет означает, что соответствующий пиксель изображения будет абсолютно прозрачным, белый — абсолютно непрозрачным. Все промежуточные цвета соответствуют разным степеням прозрачности. Таким образом, всего у изображения может быть 256 градаций прозрачности, а не 100, как привыкли думать веб-разработчики.

    Хозяйке на заметку

    Утверждение про 256 градаций справедливо для изображений с 8 битами на канал (28 = 256), для изображения с 16 битами на канал будет 65 536 градаций.

    Маска удобна тем, что она не вносит изменений в исходное изображение. На маске можно использовать любые инструменты рисования (кисть, карандаш, штамп и так далее), не опасаясь допустить необратимых ошибок.

    Каналы — это тоже черно-белые изображения, но отвечают они за интенсивность цветового компонента в текущей цветовой модели. Например, в цветовой модели RGB есть три канала: красный, зеленый и синий. Соответственно, пиксели в этих каналах отвечают за интенсивность того или иного цвета. Посмотреть на них можно в палитре Channels.

    about-channels

    Казалось бы, что общего между каналами и масками, помимо того, что они черно-белые? Ну, во-первых, они все отображаются в палитре Channels:) Второе, и самое важное, Ctrl+клик или ⌘-клик по слою с каналом/маской создаст выделение. И наоборот — из выделения можно создать канал с маской и подкорректировать её с помощью инструментов рисования.

    Чтобы объяснить, зачем это все нужно знать разработчикам, я продемонстрирую трюк, известный любому уважающему себя дизайнеру. Этот трюк я видел в нескольких пособиях по фотошопу.

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

    Логотип отеля «Феликс Завойский»

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

    Переходим в палитру Channels и смотрим внимательно на каналы.

    demo2

    Обратите внимание на зеленый канал (просто кликните на него): мы видим практически ровную черно-белую маску.

    demo3

    Только есть небольшая проблема: сам логотип не белого, а светло-серого цвета. То есть не получится с помощью одного клика создать правильное выделение и залить его оранжевым цветом. Исправим это.

    Выделяем все изображение (Ctrl+A или ⌘+A), копируем, создаем новый документ и вставляем туда нашу картинку. Помним, что черный цвет — абсолютно прозрачные пиксели, белый — не прозрачные. Но для начала нам нужно убедиться, что на фоне сплошной черный цвет, без каких-либо незаметных глазу переходов. Для этого в палитре Layers жмем на иконку Create new fill or adjustment layer и выбираем Threshold. Дизайнеры почему-то незаслуженно обходят стороной этот настроечный слой, хотя лично для меня это архиважный инструмент для анализа изображения. Смысл его довольно прост: с помощью ползунка мы устанавливаем пороговое значение яркости изображения (threshold по-английски «пороговое значение»). Все, что выше (правее) этого значения будет отображаться абсолютно белым, что ниже (левее) — абсолютно черным. Передвигаем ползунок в крайнее левое положение и начинаем потихонечку двигать его вправо (а вы знаете, что в фотошопе в полях ввода цифр можно увеличивать и уменьшать значения с помощью стрелок вверх и вниз на клавиатуре?). Так и есть — до третьего уровня мы видим, что фон меняется:

    demo4

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

    Сам слой Threshold нам больше не нужен — удаляем его. Теперь необходимо сделать так, чтобы серые пиксели логотипа стали белыми, а фон — абсолютно черным. Для этого очень хорошо подходит инструмент Levels. Вызываем его через Image → Adjustments → Levels.

    demo5

    Этот инструмент чем-то похож на Threshold с той разницей, что сохраняет полутона. У него уже три ползунка: тени (shadows), средние тона (midtones) и светлые тона (highlights). Относительно черно-белого изображения: все пиксели, яркость которых ниже (левее) точки теней, будут черными, выше (правее) светлых тонов станут белыми. Точка средних тонов управляет, как распределить яркость между белым и черным цветом (больше темных или светлых пикселей). Нам необходимо сделать так, чтобы серые пиксели логотипа стали точкой ярких тонов, а черный фон, располагающийся ближе к низу изображения (помните, что показал нам Threshold?) — точной теней. Выбираем черную пипетку dark и тыкаем в черный фон ближе к низу изображения, затем выбираем светлую пипетку light и тыкаем в серый цвет логотипа. В итоге гистограмма уровней должна выглядеть вот так:

    demo6

    Наша маска готова. Переводим изображение в модель RGB (Image → Mode → RGB Color) и в палитре Channels делаем Ctrl+клик или ⌘-клик на любом канале. В палитре Layers создаем новый слой и заливаем выделение цветом логотипа:

    demo7

    А теперь коротко: что же произошло и почему это сработало. Проанализировав каналы, мы выяснили, что именно на зеленом компоненте содержится меньше всего информации о градиентном фоне (что вполне логично, фон ведь красный), при этом сам логотип смотрится довольно контрастно. Этот канал послужил нам основой для создания маски. Мы увеличили яркость серых пикселей, сделав их белыми, с помощью инструмента Levels. А инструмент Threshold помог нам найти незаметные цветовые переходы, от которых также избавил нас инструмент Levels (в качестве нижней границы теней мы выбрали «самый яркий» черный цвет, сделав, тем самым, менее яркие оттенки тоже черными).

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

    Что следует запомнить из этого урока:

    • Каналы и маски — инструмент не только для дизайнеров. Экспериментируйте с разными цветовыми моделями (CMYK, Lab) для достижения нужного результата в сложных случаях.
    • Обязательно освойтесь с Levels и Threshold. Вы должны четко понимать, как они работают, когда и ради чего их нужно вызывать. Поэкспериментируйте с Curves.

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

← cтарое