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

    В этой статье я полностью продемонстрирую процесс создания красивых кнопочек — от получения макета до готового решения.

    button-example

    Дизайнер хочет, чтобы на сайте было 10 разных цветов таких кнопок, причем при наведении курсора цвет должен немного бледнеть. Вариант «в лоб» — нарезать кучу картинок под каждый цвет — нам, как правильным разработчикам, не подходит, поэтому мы создадим специальную маску, под которую будем класть разные градиенты. В итоге можно будет обойтись всего двумя небольшими картинками. А если постараться — то и одной.

    Открываем макет и анализируем изображение. Кнопка представляет из себя обычный векторный шэйп, у которого заданы эффекты:

    ss11

    Первое, что бросается в глаза, это размытая верхняя и левая границы кнопки. Дизайнер не очень-то старался, и нам нужно это исправить.

    Давайте рассмотрим подробнее слой shape. Это специальный векторный слой, состоящий из двух частей: цвет и маска.

    ss3

    Дважды кликнув на первый квадратик мы можем поменять цвет шэйпа, кликнув на второй — отредактировать его внешний вид.

    Кликаем на маску и выбираем Direct Selection Tool:

    ss2

    Выделяем все верхние узлы:

    ss4

    Теперь с помощью стрелок вверх/вниз на клавиатуре перемещаем узлы в нужное положение, чтобы верхняя граница стала четкой. Помните, что шаг смещения зависит от текущего масштаба. Я рекомендую увеличить масштаб до 500%. Вы можете временно включать/отключать отображение векторной рамки с помощью Ctrl+H/⌘+H, это поможет вам точнее разместить узлы.

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

    ss5

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

    Разбираем шэйп на составляющие. У нас есть градиент (тело кнопки), обводка и тень, все это указано с помощью фильтров слоя. Для дальнейшей работы нам нужно сделать дубликат слоя shape, чтобы перед глазами всегда был оригинал, на который будем ориентироваться.

    Делаем правый клик на иконке fx у дубликата и в меню выбираем Create Layers. Мы превратили все эффекты в полноценные слои, с которыми можно работать. 

    Сразу же обращаем внимание на то, что обводка стала чуть темнее:

    ss7

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

    Исправим эту проблему. Выделяем слой с обводкой (у меня он называется shape copy’s Inner Stroke) и обесцвечиваем его: Image → Adjustments → Desaturate. Обводка стала черно-белой — как раз то, что нам нужно — но все равно слишком темной. Снизим прозрачность у обводки: выставим параметр Opacity в 60%. Теперь дубликат практически не отличить от оригинала (учитывайте, что на скриншоте масштаб 400%):

    ss8

    Тень (shape copy’s Drop Shadow) тоже имеет зеленоватый оттенок, обесцветим и ее с помощью команды Desaturate.

    Осталось вырезать внутренности кнопки, чтобы тень была поверх белого фона, а обводка — поверх прозрачного. Сейчас все слои эффектов, кроме Drop Shadow, находятся в режиме маски отсечения (clipping mask): слои накладываются поверх пикселей основного слоя. Нам нужно перевести их в нормальный режим, для этого делаем Alt-click на линии между слоями shape copy и shape copy’s Gradient Fill. Получим вот такой результат:

    ss9

    Отключаем слои с Color Fill и Gradient Fill — они нам больше не нужны. Теперь нам нужно наложить на оставшиеся слои маски. Делаем Ctrl-click/⌘-click по маске слоя shape copy, выделяем слой Layer 1 и нажимаем на иконку mask-icon в палитре слоев. Проделываем такую же операцию для слоев shape copy’s Inner Stroke и shape copy’s Drop Shadow. Получим вот такой результат:

    ss10

    Конечно же, это не то, что мы хотели получить: прозрачной должна быть внутренняя часть кнопки, а не внешняя. Чтобы исправить это, нужно инвертировать маску в слоях shape copy’s Drop Shadow и Layer 1. Выделяем маску каждого слоя и выполняем Ctrl+I/⌘+I, отключаем слой shape copy. Получилось то, что нам нужно:

    ss111

    Теперь необходимо обрезать ненужные белые пиксели. Не торопитесь выбирать инструмент Crop и прицельно выделять блок — есть более простой и красивый способ. Выбираем Image → Trim, в окне выбираем Based On: Top Left Pixel Color .

    Осталось подготовить картинку для использования на странице. Для создания кнопки хорошо подойдет способ «звездочка», нужно только правильно спозиционировать уголки. Объединяем все слои (Layer → Merge Visible) и вызываем Filter → Other → Offset. В диалоговом окне указываем смещение по горизонтали и вертикали в 9 пикселей, в качестве значения Undefined Areas выбираем Wrap Around:

    ss12

    Так как правильные мальчики и девочки верстают сайты с учетом изменения размера шрифта, нужно добавить нашей картинке запас прочности. Для этого увеличиваем размер холста до 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.
    • Работа с эффектами слоев.
    • Фильтры нужны не только дизайнерам.

    Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.

  • 40 комментариев

    1. 13 марта 2009

      столько букв с утра! о-ёй. доберусь до шопа и испробую. а курс вообще верный — больше умений и автоматики!

    2. 13 марта 2009

      > Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.

      Конечно, пиши еще 🙂
      Хорошо бы еще табы с переключением исходник/что получилось.

    3. nqst
      13 марта 2009

      Очень интересно, спасибо. С удовольствием почитаю ещё.

    4. Слава
      13 марта 2009

      Здравствуйте!
      Конечно, нравится! 🙂
      Можно перерыть сотни популярных англиканских сайтов и все равно не найти столь ёмких уроков по-существу, как у Вас.
      Да и вообще, предлагаю 17 февраля (день «открытия» блога общественности) сделать красным днем календаря в отечественном здравоосмысленном сайтостроении!
      Спасибо! И пишите, пишите — все очень интересно 🙂

    5. Сергей Чикуенок
      13 марта 2009

      Значит будем продолжать 🙂

    6. Олег Подчашинский
      13 марта 2009

      Сражен наповал офсетом с Wrap Around. Спасибо!

    7. Глеб Арестов
      14 марта 2009

      Эмуляция свойства right создана против однопиксельного бага?

    8. Сергей Чикуенок
      14 марта 2009

      Да

    9. Глеб Арестов
      14 марта 2009

      ой. похоже, что совсем нет :))

    10. Сергей Чикуенок
      14 марта 2009

      Почему нет? У меня все работает

    11. Глеб Арестов
      14 марта 2009

      нет в другом смысле. я сначала подумал, что это небольшой фикс для бага, но потом понял, что это совершенной другой способ абсолютного позиционирования, однако, по прежнему всё ради ие. (просто раньше не видел этого способа)

      очень-очень круто!

      может быть теперь по человечески сделаю другое меню: с неровным светом, с тенью и градиентом 🙂 http://img.picbite.com/2009/03/14/62958qgqfb.png

    12. MFD
      17 марта 2009

      спасибо, примерно так и делаю, спасибо что все расписали 🙂

      выравнивать по пикселам удобно если открыть рядом копию этого же документа в 100% масштабе

    13. 18 марта 2009

      Серега, как тут френдить? 🙂

    14. Сергей Чикуенок
      18 марта 2009

      хз 🙂 я начинающий блоггер. Проще будет на RSS подписаться.

    15. 18 марта 2009

      А ито же у тебя какой-нибудь вордпресс? Там какой-то ljcrossposter есть 😉
      В гугльридер уже загрузил.

    16. Слава
      20 марта 2009

      а обещали продолжить… 🙁

    17. Сергей Чикуенок
      20 марта 2009

      Продолжу обязательно. К сожалению, сейчас времени не хватает.

    18. Сергей
      30 марта 2009

      Большое спасибо, все изложенное прекрасно усваивается.
      Пожалуйста, не забрасывайте, пишите дальше, как время свободное появиться.

    19. 30 марта 2009

      Большое спасибо! Буду ждать продолжения 🙂

    20. 2 апреля 2009

      Офигенный туториал! Спасибо огромное!

      Присоединяюсь к комментарию Олега Подчашинского насчет офсет+врап 🙂

    21. Стас
      3 апреля 2009

      Только непонял в чем проблемма в конечной верске кнопки.
      Везде нармально, помимо оперы.
      http://www.picamatic.com/view/3134093_button/

    22. Стас
      3 апреля 2009

      Сорри все нармально )

    23. 5 апреля 2009

      >> Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.

      Именно то о чем надо писать :)… Подписываюсь.

      Я бы до такого никогда недошел. А вот еще вопрос, мне требовалось сделать кнопки/метки маленьких размеров высота кнопки 12 пикселей. Парился долго, но потом подумал что есть шрифты наверное специальные который как бы квадратные такие, для мелкого текста. Вот пока незнаю как сделать.

    24. Сергей Чикуенок
      5 апреля 2009

      Парился долго, но потом подумал что есть шрифты наверное специальные который как бы квадратные такие, для мелкого текста.

      Можно посмотреть на шрифты из серии kroeger

    25. Дмитрий
      8 апреля 2009

      если залинковать слово Кнопка, то ссылка будет не доступна. это я про верстку

    26. Сергей Чикуенок
      8 апреля 2009

      если залинковать слово Кнопка, то ссылка будет не доступна. это я про верстку

      В каком браузере? Можно, как вариант, саму кнопку сделать ссылкой

    27. Дмитрий
      9 апреля 2009

      в IE =)

      Подскажите пожалуйста как?

    28. Сергей Чикуенок
      9 апреля 2009

      Можно <div class=»styled-button»> заменить на <a class=»styled-button»>
      А вообще вы, похоже, столкнулись со стандартной проблемой фильтров в IE. Иногда помогает position:relative; zoom:1 у вложенного элемента (который не кликается).

    29. Дмитрий
      13 апреля 2009

      именно так и сделал =) (position:relative; zoom:1)
      спасибо

    30. 30 апреля 2009

      Мда круто конечно же, сколько читал уроков по фотошопу, этот 10 самых лучших точно войдет

    31. 3 мая 2009

      Очень интересно!

    32. rmaksim
      16 июня 2009

      есть небольшой косячОк:
      прозачные пиксели нижнего левого уголка «наезжают» на прозрачные пиксели верхнего левого (и соотв. нижн.прав. наезжает на верх.прав.)
      в данном примере почти незаметно — тень в этих местах становится чуть-чуть темнее, но при определенных цветах и например немного другом дизайне кнопки — бросается в глаза 🙁

    33. Сергей Чикуенок
      16 июня 2009

      Можете скриншот и html-код прислать? Иногда бывают баги в браузерах, когда уголки смещаются на пиксель меньше, либо неправильно указаны размеры шрифтов.

    34. rmaksim
      16 июня 2009

      послал тебе скриншотик
      посмотри в файрбаге на span class=»cn tl»
      он высотой 80px и соотв. нижний уголок в любом случае ложиться поверх него и прозрачные пиксели накладываются…
      как решение: просто поменять высоту верхних уголгов с 80px на 2.3em

    35. 2 июля 2009

      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!

    36. Сергей Чикуенок
      2 июля 2009

      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.

    37. 3 июля 2009

      Got it! You da man.

    38. Александр
      4 сентября 2009

      Спасибо!

    39. GreLI
      13 ноября 2009

      Для выравнивания по пикселям, на мой взгляд, удобнее пользоваться сеткой, задав шаг кратный одному пикселю, и используя привязку. Тогда достаточно включить трансформирование и потянуть два противоположных угла при помощи инструмента «выделение контура» (Path Selection Tool). Также сетку можно использовать для выровненного по пикселям рисования и тому подобных вещей.

    40. Александр
      14 ноября 2011

      Я правильно понял: этот способ отлично подходит когда задний фон однородный и наперед известный (конкретно в примере — белый)?
      За статью спасибо.