-
Фотошоп для веб-разработчика. Кнопочки
В этой статье я полностью продемонстрирую процесс создания красивых кнопочек — от получения макета до готового решения.
Дизайнер хочет, чтобы на сайте было 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.
Несмотря на то, что я написал тут много букв, способ довольно простой и выполняется очень быстро. Просто я хотел, чтобы даже новички поняли, что вообще происходит.
На что нужно обратить внимание в этом уроке:
- Базовое сведения о работе векторных и растровых масок.
- Некоторые не очевидные способы решения стандартных задач, типа Image → Trim или Single Row Marquee Tool.
- Работа с эффектами слоев.
- Фильтры нужны не только дизайнерам.
Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.
39 комментариев
столько букв с утра! о-ёй. доберусь до шопа и испробую. а курс вообще верный — больше умений и автоматики!
> Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.
Конечно, пиши еще
Хорошо бы еще табы с переключением исходник/что получилось.
Очень интересно, спасибо. С удовольствием почитаю ещё.
Здравствуйте!
Конечно, нравится!
Можно перерыть сотни популярных англиканских сайтов и все равно не найти столь ёмких уроков по-существу, как у Вас.
Да и вообще, предлагаю 17 февраля (день “открытия” блога общественности) сделать красным днем календаря в отечественном здравоосмысленном сайтостроении!
Спасибо! И пишите, пишите - все очень интересно
Значит будем продолжать
Сражен наповал офсетом с Wrap Around. Спасибо!
Эмуляция свойства right создана против однопиксельного бага?
Да
ой. похоже, что совсем нет :))
Почему нет? У меня все работает
нет в другом смысле. я сначала подумал, что это небольшой фикс для бага, но потом понял, что это совершенной другой способ абсолютного позиционирования, однако, по прежнему всё ради ие. (просто раньше не видел этого способа)
очень-очень круто!
может быть теперь по человечески сделаю другое меню: с неровным светом, с тенью и градиентом
http://img.picbite.com/2009/03/14/62958qgqfb.png
спасибо, примерно так и делаю, спасибо что все расписали
выравнивать по пикселам удобно если открыть рядом копию этого же документа в 100% масштабе
Серега, как тут френдить?
хз
я начинающий блоггер. Проще будет на RSS подписаться.
А ито же у тебя какой-нибудь вордпресс? Там какой-то ljcrossposter есть
В гугльридер уже загрузил.
а обещали продолжить…
Продолжу обязательно. К сожалению, сейчас времени не хватает.
Большое спасибо, все изложенное прекрасно усваивается.
Пожалуйста, не забрасывайте, пишите дальше, как время свободное появиться.
Большое спасибо! Буду ждать продолжения
Офигенный туториал! Спасибо огромное!
Присоединяюсь к комментарию Олега Подчашинского насчет офсет+врап
Только непонял в чем проблемма в конечной верске кнопки.
Везде нармально, помимо оперы.
http://www.picamatic.com/view/3134093_button/
Сорри все нармально )
>> Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.
Именно то о чем надо писать :)… Подписываюсь.
Я бы до такого никогда недошел. А вот еще вопрос, мне требовалось сделать кнопки/метки маленьких размеров высота кнопки 12 пикселей. Парился долго, но потом подумал что есть шрифты наверное специальные который как бы квадратные такие, для мелкого текста. Вот пока незнаю как сделать.
Можно посмотреть на шрифты из серии kroeger
если залинковать слово Кнопка, то ссылка будет не доступна. это я про верстку
В каком браузере? Можно, как вариант, саму кнопку сделать ссылкой
в IE =)
Подскажите пожалуйста как?
Можно <div class=”styled-button”> заменить на <a class=”styled-button”>
А вообще вы, похоже, столкнулись со стандартной проблемой фильтров в IE. Иногда помогает position:relative; zoom:1 у вложенного элемента (который не кликается).
именно так и сделал =) (position:relative; zoom:1)
спасибо
Мда круто конечно же, сколько читал уроков по фотошопу, этот 10 самых лучших точно войдет
Очень интересно!
есть небольшой косячОк:
прозачные пиксели нижнего левого уголка “наезжают” на прозрачные пиксели верхнего левого (и соотв. нижн.прав. наезжает на верх.прав.)
в данном примере почти незаметно - тень в этих местах становится чуть-чуть темнее, но при определенных цветах и например немного другом дизайне кнопки - бросается в глаза
Можете скриншот и html-код прислать? Иногда бывают баги в браузерах, когда уголки смещаются на пиксель меньше, либо неправильно указаны размеры шрифтов.
послал тебе скриншотик
посмотри в файрбаге на span class=”cn tl”
он высотой 80px и соотв. нижний уголок в любом случае ложиться поверх него и прозрачные пиксели накладываются…
как решение: просто поменять высоту верхних уголгов с 80px на 2.3em
Great stuff, but im stuck at: “растягиваем последний горизонтальный и вертикальный пиксели (тут очень удобно воспользоваться инструментами Single Row Marquee Tool и Single Column Marquee Tool).”
Can you please explain how to do that?
Thanks a lot!
It says that “…we need to stretch the last horizontal and vertical pixels (Single Row Marquee Tool and Single Column Marquee Tool are best tools to do this)”. You have to select the last pixel group with either of this tools and stretch this group with Transform tool to fill the space.
Got it! You da man.
Спасибо!
Для выравнивания по пикселям, на мой взгляд, удобнее пользоваться сеткой, задав шаг кратный одному пикселю, и используя привязку. Тогда достаточно включить трансформирование и потянуть два противоположных угла при помощи инструмента «выделение контура» (Path Selection Tool). Также сетку можно использовать для выровненного по пикселям рисования и тому подобных вещей.