веб-разработчик
В третьей части статьи о PNG я упоминал о редакторе Seashore под Mac, в котором можно увидеть то, что скрыто в прозрачных областях изображения.
Наконец-то нашел плагин к фотошопу, который позволяет сделать то же самое. Называется Remove Transparency из набора Photo Freebies. Есть версия под Mac и PC, абсолютно бесплатен.
Этот плагин понадобится для следующей статьи из серии «Фотошоп для веб-разработчиков».
Давно хотелось поделиться соображениями и опытом использования флэша на сайте. А также объяснить позицию Студии Лебедева в этом вопросе.
У студии особый подход к созданию сайтов, приходится учитывать массу факторов, порой не заметных даже профессионалу: начиная от разного размера шрифта в браузере пользователя, заканчивая возможным желанием заказчика добавить ещё 10 пунктов в горизонтальное меню. Молчу про то, что все сайты должны растягиваться, причем растягиваться должен не только контентный блок, как это привыкли делать на Западе, а вообще весь сайт. В
Хочу сразу оговориться: в этой заметке я не затрагиваю
Итак, какие же сложности возникают при использовании флэша?
Наиболее актуальная и коварная проблема — внедрение флэша на страницу и использование альтернативного контента на случай отсутствия
В свое время я довольно много поработал с большими компаниями (несколько тысяч сотрудников). И практически у всех этих компаний была одна особенность: они активно боролись с распиздяйством своих сотрудников в рабочее время. Руководство искренне верило в то, что на работе нужно работать, а не видео смотреть и в игрушки играться. А в чем нынче распространяется весь развлекательный контент? Правильно, во флэше. Поэтому суровые админы таких компаний просто блокируют подобные файлы на уровне корпоративного файервола.
Как это выглядит на практике с точки зрения swfobject.embedSWF() и все само работает. Но не
Ещё одна проблема, которая возникает при использовании флэшовых компонентов на сайте, это их «чужеродность» по отношению к html. Для флэша необходимо создать некую прямоугольную область, в пределах которой будет происходить вся анимация. Например, для того, чтобы переместить картинку размером 100×100 из левого верхнего угла браузера в правый нижний необходимо создать блок размером со страницу. Естественно, в этот момент будет заблокирован весь интерфейс сайта без видимых на то, с точки зрения пользователя, причин.
Одна из самых тупых отмазок, которые сегодня можно услышать. Обычно в таких случаях флэшер за 10 секунд создает
Что ж, давайте вернемся, так сказать, к самым примитивным вещам, о которых мы даже не думаем. Вот я верстаю простейший сайт: одна колонка шириной 70%, располагается по центру экрана. Контента в этом сайте уже на три экрана. Что делает браузер в таком случае? Показывает мне вертикальную прокрутку. Я могу прокрутить страницу любым известным мне способом: колесом мыши, пробелом, стрелками вверх/вниз, подергать за ползунок, в конце концов. То есть я уже на подсознательном уровне, ни секунды не задумываясь, листаю документ и получаю необходимую информацию.
Что же происходит на флэшовом сайте? Начнем с того, что если контент не поместится в видимую область экрана, то не произойдет ровным счетом ничего, если об этом не позаботился флэшер. То есть флэшеру нужно воссоздать механизм прокрутки документа. Другой вопрос, как он воссоздаст этот механизм. Как правило, все ограничивается лишь созданием говеного скроллбара, который является единственным способом прокрутить документ. Флэшер помещает меня — пользователя — в абсолютно чужеродную среду, где мои инстинкты больше не действуют. Вместо того, чтобы получать удовольствие от проекта, мне необходимо сосредоточится на процессе получения необходимой информации. Это такая сломанная машина времени: меня хотят отправить в светлое будущее, но попадаю я в мрачное прошлое, когда мышек с колесиком ещё не изобрели.
Дальше — больше. Простейшее желание вставить нумерованный список или таблицу в середину текста оборачивается настоящей головной болью для флэшера. Потому что у него есть TextField, который способен отображать только обычный текст и картинки, но никак не структуры данных. Чтобы создать хоть
Можно долго хвастаться тем, что десятый флэш плеер умеет круто работать с 3D графикой, только он до сих пор не в состоянии открыть ссылку в новом табе по моему требованию. Сколько лет существуют табы в браузерах? Это — наглядный пример нарушения так называемого user experience. На флэшовых сайтах пользователь не может стандартными средствами увеличить размер шрифта, не может сохранить понравившуюся картинку на рабочий стол, не может использовать любимый плагин для автоматической прокрутки длинных текстов. Много чего из того, к чему он привыкал годами, нельзя сделать на флэшовых сайтах. Зато можно увидеть, как прикольно выезжает картинка, да. Или подолгу пялиться на прелоудер после каждого клика.
***
Действительно ли проще и быстрее делать качественные сайты на флэше? Как вы считаете?
По-настоящему оценят страничку владельцы Маков.
Кто бы мог подумать: волшебное CSS-свойство zoom, которым мы привыкли «лечить» баги IE, поддерживается Safari 4 (надо полагать, Chome тоже его поддерживает или будет поддерживать). Подтверждение в баг-трекере Webkit.
В скринкасте к статье «Про PNG, часть 4» я продемонстрировал, так сказать, пять минут своей работы по оптимизации изображения, вогнав в ступор даже видавших виды студийных 
Тогда я написал, что не планирую объяснять, что и зачем я там делал. Сейчас я собираюсь исправиться и подробно описать все показанные способы оптимизации графики.
Не знаю как для вас, а лично для меня маски и каналы — одни из самых востребованных инструментов в фотошопе. Чтобы научиться ими пользоваться, сначала изучим немного теории, а затем перейдем к практике.
Маски используются для скрытия и отображения определенных фрагментов изображения, а также для ограничения области воздействия настроечных слоев.
Маски бывают двух типов — векторные и растровые. Первый тип нас пока не интересует, рассматрим второй тип. Растровая маска представляет из себя
Утверждение про 256 градаций справедливо для изображений с 8 битами на канал (28 = 256), для изображения с 16 битами на канал будет 65 536 градаций.
Маска удобна тем, что она не вносит изменений в исходное изображение. На маске можно использовать любые инструменты рисования (кисть, карандаш, штамп и так далее), не опасаясь допустить необратимых ошибок.
Каналы — это тоже
Казалось бы, что общего между каналами и масками, помимо того, что они
Чтобы объяснить, зачем это все нужно знать разработчикам, я продемонстрирую трюк, известный любому уважающему себя дизайнеру. Этот трюк я видел в нескольких пособиях по фотошопу.
Предположим, дизайнер нам прислал вот такую картинку одним слоем, после чего пропал из поля зрения.
По макету фон под логотипом должен меняться, например, с красного на зеленый. Да и сам логотип лучше вынести в отдельное изображение, под которым будет лежать градиент. Вопрос: как отделить логотип от фона, причем так, чтобы под логотип можно было положить любой фон? Можно, конечно, весь день тыкать волшебной палкой в изображение и обзывать всех дизайнеров пидарасами, но есть более простой и красивый способ решить эту проблему.
Переходим в палитру Channels и смотрим внимательно на каналы.
Обратите внимание на зеленый канал (просто кликните на него): мы видим практически ровную
Только есть небольшая проблема: сам логотип не белого, а
Выделяем все изображение (Ctrl+A или ⌘+A), копируем, создаем новый документ и вставляем туда нашу картинку. Помним, что черный цвет — абсолютно прозрачные пиксели, белый — не прозрачные. Но для начала нам нужно убедиться, что на фоне сплошной черный цвет, без 
и выбираем Threshold. Дизайнеры
Это говорит нам о том, что на фоне у нас не сплошной черный цвет, а незаметный градиент, цвета которого отличаются всего на три градации. Если бы мы просто сделали выделение из такой маски, мы бы захватили и фрагменты фона, что даст не тот результат при заливке цветом, который мы ожидали. Это необходимо учесть на следующем шаге.
Сам слой Threshold нам больше не нужен — удаляем его. Теперь необходимо сделать так, чтобы серые пиксели логотипа стали белыми, а фон — абсолютно черным. Для этого очень хорошо подходит инструмент Levels. Вызываем его через Image → Adjustments → Levels.
Этот инструмент 
и тыкаем в черный фон ближе к низу изображения, затем выбираем светлую пипетку 
и тыкаем в серый цвет логотипа. В итоге гистограмма уровней должна выглядеть вот так:
Наша маска готова. Переводим изображение в модель RGB (Image → Mode → RGB Color) и в палитре Channels делаем Ctrl+клик или ⌘-клик на любом канале. В палитре Layers создаем новый слой и заливаем выделение цветом логотипа:
А теперь коротко: что же произошло и почему это сработало. Проанализировав каналы, мы выяснили, что именно на зеленом компоненте содержится меньше всего информации о градиентном фоне (что вполне логично, фон ведь красный), при этом сам логотип смотрится довольно контрастно. Этот канал послужил нам основой для создания маски. Мы увеличили яркость серых пикселей, сделав их белыми, с помощью инструмента Levels. А инструмент Threshold помог нам найти незаметные цветовые переходы, от которых также избавил нас инструмент Levels (в качестве нижней границы теней мы выбрали «самый яркий» черный цвет, сделав, тем самым, менее яркие оттенки тоже черными).
Как видите, скорость и успех решения этой задачи зависел не от наличия вакома или усидчивости, а от знания основ работы с цифровым изображением. Не зная этих основ, фотошоп останется
Что следует запомнить из этого урока:
В следующей статье на практике рассмотрим использование масок для оптимизации изображений.
В этой статье я полностью продемонстрирую процесс создания красивых кнопочек — от получения макета до готового решения.
Дизайнер хочет, чтобы на сайте было 10 разных цветов таких кнопок, причем при наведении курсора цвет должен немного бледнеть. Вариант «в лоб» — нарезать кучу картинок под каждый цвет — нам, как правильным разработчикам, не подходит, поэтому мы создадим специальную маску, под которую будем класть разные градиенты. В итоге можно будет обойтись всего двумя небольшими картинками. А если постараться — то и одной.
Открываем макет и анализируем изображение. Кнопка представляет из себя обычный векторный шэйп, у которого заданы эффекты:
Первое, что бросается в глаза, это размытая верхняя и левая границы кнопки. Дизайнер не очень-то старался, и нам нужно это исправить.
Давайте рассмотрим подробнее слой shape. Это специальный векторный слой, состоящий из двух частей: цвет и маска.
Дважды кликнув на первый квадратик мы можем поменять цвет шэйпа, кликнув на второй — отредактировать его внешний вид.
Кликаем на маску и выбираем Direct Selection Tool:
Выделяем все верхние узлы:
Теперь с помощью стрелок вверх/вниз на клавиатуре перемещаем узлы в нужное положение, чтобы верхняя граница стала четкой. Помните, что шаг смещения зависит от текущего масштаба. Я рекомендую увеличить масштаб до 500%. Вы можете временно включать/отключать отображение векторной рамки с помощью Ctrl+H/⌘+H, это поможет вам точнее разместить узлы.
Проделайте такую же операцию с левыми узлами. В итоге должна получиться вот такая картинка:
Косяк дизайнера мы исправили, теперь переходим к самой интересной части — реконструкция изображения. Нам нужно сделать так, чтобы вместо зеленого градиента была дырка, под нее мы сможем подкладывать любой другой градиент или картинку.
Разбираем шэйп на составляющие. У нас есть градиент (тело кнопки), обводка и тень, все это указано с помощью фильтров слоя. Для дальнейшей работы нам нужно сделать дубликат слоя shape, чтобы перед глазами всегда был оригинал, на который будем ориентироваться.
Делаем правый клик на иконке fx у дубликата и в меню выбираем Create Layers. Мы превратили все эффекты в полноценные слои, с которыми можно работать.
Сразу же обращаем внимание на то, что обводка стала чуть темнее:
Это объясняется особенностями работы фильтров в фотошопе (вам еще должны были показать сообщение о том, что можете получить не то, чего ожидали). Для того, чтобы добиться правильных цветов, дизайнеру пришлось в качестве цвета обводки указать градиент от светло-зеленого до темно-зеленого. Нас это не устраивает, потому что зеленый градиент будет странно смотреться на красной кнопке
Исправим эту проблему. Выделяем слой с обводкой (у меня он называется shape copy’s Inner Stroke) и обесцвечиваем его: Image → Adjustments → Desaturate. Обводка стала черно-белой — как раз то, что нам нужно — но все равно слишком темной. Снизим прозрачность у обводки: выставим параметр Opacity в 60%. Теперь дубликат практически не отличить от оригинала (учитывайте, что на скриншоте масштаб 400%):
Тень (shape copy’s Drop Shadow) тоже имеет зеленоватый оттенок, обесцветим и ее с помощью команды Desaturate.
Осталось вырезать внутренности кнопки, чтобы тень была поверх белого фона, а обводка — поверх прозрачного. Сейчас все слои эффектов, кроме Drop Shadow, находятся в режиме маски отсечения (clipping mask): слои накладываются поверх пикселей основного слоя. Нам нужно перевести их в нормальный режим, для этого делаем Alt-click на линии между слоями shape copy и shape copy’s Gradient Fill. Получим вот такой результат:
Отключаем слои с Color Fill и Gradient Fill — они нам больше не нужны. Теперь нам нужно наложить на оставшиеся слои маски. Делаем Ctrl-click/⌘-click по маске слоя shape copy, выделяем слой Layer 1 и нажимаем на иконку 
в палитре слоев. Проделываем такую же операцию для слоев shape copy’s Inner Stroke и shape copy’s Drop Shadow. Получим вот такой результат:
Конечно же, это не то, что мы хотели получить: прозрачной должна быть внутренняя часть кнопки, а не внешняя. Чтобы исправить это, нужно инвертировать маску в слоях shape copy’s Drop Shadow и Layer 1. Выделяем маску каждого слоя и выполняем Ctrl+I/⌘+I, отключаем слой shape copy. Получилось то, что нам нужно:
Теперь необходимо обрезать ненужные белые пиксели. Не торопитесь выбирать инструмент Crop и прицельно выделять блок — есть более простой и красивый способ. Выбираем Image → Trim, в окне выбираем Based On: Top Left Pixel Color .
Осталось подготовить картинку для использования на странице. Для создания кнопки хорошо подойдет способ «звездочка», нужно только правильно спозиционировать уголки. Объединяем все слои (Layer → Merge Visible) и вызываем Filter → Other → Offset. В диалоговом окне указываем смещение по горизонтали и вертикали в 9 пикселей, в качестве значения Undefined Areas выбираем Wrap Around:
Так как правильные мальчики и девочки верстают сайты с учетом изменения размера шрифта, нужно добавить нашей картинке запас прочности. Для этого увеличиваем размер холста до 300×80 пикселей и растягиваем последний горизонтальный и вертикальный пиксели (тут очень удобно воспользоваться инструментами Single Row Marquee Tool и Single Column Marquee Tool).
Все, работу над изображением мы закончили. Сохраняем картинку в формате PNG-24 под названием, например, button-mask.png.
Теперь переходим к разметке. Тут все довольно просто: создаем контейнер, в котором размещается 4 уголка. Для того, чтобы надпись была по середине кнопки, мы не будем использовать CSS-свойство height, вместо него воспользуемся свойством line-height.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Styled button example</title>
<style type="text/css">
.styled-button {
text-align:center;
position:relative;
width:6em;
/* Вместо высоты */
line-height:2.3em;
color:#428135;
background:url(green-gradient.png) #8fbd81 repeat-x;
overflow:hidden;
}
.styled-button .cn {
display:block;
background:url(button-mask.png) repeat-x;
width:100%;
height:80px;
position:absolute;
/* Радиус скругления */
left:-9px;
top:-9px;
}
.styled-button .cn.tr,
.styled-button .cn.br {
/* Эмуляция свойства right для IE6 */
margin-left:100%;
}
.styled-button .cn.bl,
.styled-button .cn.br {
/* Такое же значение, как у line-height */
margin-top:2.3em;
}
</style>
</head>
<body>
<div class="styled-button">
Кнопка
<span class="cn tl"></span>
<span class="cn tr"></span>
<span class="cn bl"></span>
<span class="cn br"></span>
</div>
</body>
</html>
Осталось только для IE6 прописать фильтр, чтобы отображался полупрозрачный PNG.
Несмотря на то, что я написал тут много букв, способ довольно простой и выполняется очень быстро. Просто я хотел, чтобы даже новички поняли, что вообще происходит.
Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.
Хочу поделиться своим опытом (а также, по возможности, получить его от читателей) использования фотошопа как инструмента для веб-разработчика. И начну я, пожалуй, с небольшой промывки мозгов насчет этого монстроподобного инструмента. Стандартную для таких статей вступительную часть про то, что такое фотошоп и почему он стал стандартом де-факто в области графического дизайна, я опущу, приступим сразу к делу. Я подразумеваю, что читатель уже работал с этой программой и умеет с ее помощью вырезать картинки.
Считается, что фотошоп слишком «тяжел» для повседневных копи-пэйст нужд веб-разработчика, поэтому им предлагают всякого рода альтернативы: Adobe Fireworks, Paint.NET, Pixelmator и так далее. А также жуткий пиздец под названием Gimp (я считаю, что суровые линуксоиды должны править картинки в командной строке). Я сам давно пытался найти альтернативу фотошопу, но все поиски оказались безуспешны: как ни странно, мне не хватало функциональности.
Я очень люблю графику, а еще больше люблю ее оптимизировать. Я сейчас не говорю о той «оптимизации», где нужно просто подергать слайдеры или запустить программку, я говорю о настоящей оптимизации, когда необходимо реконструировать изображение, чтобы оно меньше весило и выглядело лучше. Я слишком ленив, чтобы создавать сотню похожих картинок разного цвета, я лучше сделаю одну сложную маску и буду менять цвет через CSS. Для достижения этих целей я пользуюсь теми же инструментами, что и дизайнеры. Разница в том, что дизайнер оперирует эмоциями, а я — цифрами. Дизайнер делает так, чтобы картинка нравилась пользователю, а я делаю так, чтобы она лучше сжималась и с ней было удобнее работать в CSS. Дизайнер не знает, как лучше нарисовать тень, чтобы она как можно меньше весила в PNG, а я не знаю, как эту тень сделать похожей на настоящую. Мы дополняем друг друга, при этом каждый делает свою работу и не вмешивается в чужую.
Можно, конечно, полчаса стоять над душой у дизайнера и объяснять ему на пальцах, что нужно сделать с картинкой, но я лучше потрачу 5 минут и сделаю все сам. Если вы разделяете мою точку зрения, значит, мое время будет потрачено не зря.
Наткнулся на занимательную статейку в блоге Мозиллы про то, как решить извечную проблему с float-блоками разной высоты.
В последнее время наблюдаю абсолютно нездоровое стремление некоторых разработчиков делать сайты полностью на аяксе. Это когда нет переходов на разделы сайтов, они просто подгружаются на текущую страницу. Типичный пример использования технологии только ради того, чтобы сказать: она тут используется. Я не нашел ни одной проблемы, которую мог бы решить такой подход.
Может, это я старею? Может, действительно за этим будущее и пора бы уже менять принципы создания сайтов? Вооружившись последним файрфоксом и файербагом решил проверить «под микроскопом» приведенные примеры. Действительно ли это наше будущее, или всего лишь очередной оральный вау-импульс для начинающих гиков?
Основная проблема таких сайтов — сохранение истории навигации по сайту. Посмотрим, как это работает с точки зрения пользователя.
Это те проблемы, которые я увидел как обычный пользователь. Теперь посмотрим, что я получу от такого подхода как разработчик. Иду на форум. Как и ожидалось, разработчики поимели целый букет проблем, которых раньше просто не было: начиная от неправильной инициализации скриптов при загрузке, заканчивая отслеживанием страниц с помощью Google Analytics.
***
Всегда удивлялся тому, как разработчики любят усложнять себе жизнь. Проблемы не существует, но ее обязательно придумывают, не спят ночами чтобы решить ее, а потом радуются как дети работающему через жопу решению. К сожалению, программисты разучились думать как обычные люди — те самые, которые ежедневно ходят на сайты и ради которых эти сайты делаются. У таких разработчиков одна цель — показать, что они умеют пользоваться готовыми библиотеками.
Но что больше всего меня позабавило: Яндекс-карты почему-то не подключаются на страницу, на них просто стоит ссылка. Вот такой вот аякс.
Недавно с коллегой переписывался о том, как нужно делать профайлиг JavaScript-кода. Решил, может информация будет еще кому-нибудь полезна. Предыстория: коллега делает анимацию на JS, пытаемся понять, почему она сильно тормозит.
Внёс изменения. Поставил таймер на
mouseOver. Получается, что функцияcalculateSizeвыполняется 20-23ms. До этого примерно так и было.
Нужно не таймером, а профайлером замерять (есть в Firebug и последних версиях Webkit).
Ну я имею в виду функцию FireBug’а
console.time()иconsole.timeEnd(). Они делают то же, что профайлер, только для определенного куска кода.
Так а зачем тебе для определенного куска в данном случае? Тебе же нужно видеть, какие именно функции у тебя выполняются в данный момент времени и искать проблемные места, а не произвольно замерять функции.
Я просто не могу понять в этом профайлере где именно тормозит. Там всё исписано в
init()
Вот смотри, сейчас профайлер тебе говорит, что во время работы твоего эффекта больше всего ресурсов жрет функция init() из jQuery, которая вызывается почти 6000 раз:
Так как сама по себе эта информация нам мало полезна, тебе нужно найти ту функцию, которая так часто вызывает init(). Для этого отсортируем данные по колонке Time (общее время выполнения функции). Видим, что на первом и втором месте стоит jQuery-функция, а на 3 и 4 — функции calculateSize() и imgSize(), время выполнения которых — 588 и 547 мс соответcтвенно.
Тут явно видно, что сами эти функции выполняются очень быстро (см. Own Time), но вот они вызывают другие функции, которые и дают те самые 588 и 547 мс.
Смотрим calculateSize(), проблемные места:
var prevImg = slctdImg.parent().prevAll(); var nextImg = slctdImg.parent().nextAll();
Это все выборки по дереву, очень тяжелые операции.
Смотрим imgSize(), проблемные места:
imgCont.width(newWidth).height(newHeight);
imgCont.css({
width: newWidth,
height: newHeight,
margin: (!dir) ? "0 0 " + k + "px 0" : k + "px 0 0 0",
zIndex: count - num,
opacity: 1 - (num) / 30
});
два раза устанавливаешь width и height
В целом, чтобы избавиться от этих проблемных мест, нужно полностью переписать логику работы библиотеки. Другой вопрос, даст ли это необходимый прирост производительности. Попробуй временно отключить изменение размеров картинки и opacity, просто сделай перемещение и посмотри, как работает. Если работает медленно, то проблема описана выше. Если работает быстро, значит, проблема в изменении габаритов и opacity, тут уже вряд ли что-то поделаешь.