Градиент – очень мощный инструмент, это знают все. Но управление переходом из одного цвета в другой функционал градиента не ограничивается. Комбинируя градиенты (не цвета) можно добиться всевозможных иллюзий объёма. Как вариант: использование ломанного градиента добавляет ощущение угловатой объемности элемента. Вариантов для экспериментов много, причём они могут зависеть не только от выбора цветов, но и от расположения и формы линии излома.

Прямой излом

Самый простой способ создать ломаный градиент в Photoshop – это применение стиля Gradient Overlay к слою с объектом. Настраивается градиент примерно так:

1. Открываете окно со стилями слоя и выбираете стиль Gradient Overlay
2. Устанавливаете линейный градиент
3. Выбираете цвета и растанавливаете ползунки примерно так:

В итоге получается так:

По краям выбраны основные цвета градиента. В центре переходные цвета но не очень сильного контраста соедены вместе – получается преломление. Оно и создаёт иллюзию излома поверхности.

Но этот излом очень небольшого контраста без содержимого в объекте и без фона, конечно же, ничего из себя не представляет. Поэтому попробуем используя стандартные эфекты Photoshop’a изобразить, что-то существенное.

Стеклянная кнопка

Для начала уясним, что же создаёт этот эффект “стеклянности”? А создают его два параметра: прозрачность и глянец.

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

Глянец создаётся очень просто: градиент от светло-серого к тёмно-серому с Blend Mode: Screen. Причём, чем светлее оттенки серого, тем ярче кажется освещение отражаемое от кнопки.

Наглядным примером может послужить создание кнопки на подобие используемых в Mac OS X. Для освоения этого простого урока вам понадобится всего пара минут и Adobe Photoshop.

Рисуем

1. Создаём новый документ (не важно какого размера). И заливаем его светлосерым фоном.
2. Создаём новый слой. Выделяем область как показано ниже (это увеличенное изображение, реальный размер 71х19)

   

   т.е. выделение должно быть закруглено, но для этого не используйте Select -> Modify -> Smooth, а используйте к примеру инструмент Rounded Rectangle Tool, чтобы нарисовать векторный путь, а потом его выделить или сделайте это с помощью Marquee Tool скомбинировав два закруглённых выеления по-краям и одно прямоугольное по-середине.

3. Заливаем выделение любым сплошным но контрастным с фоном цветом.
4. Убираем выделение (Ctrl + D). Дублируем слои два раза. В итоге должны получиться три слоя (кроме фона).
5. Верхний слой называем “Glance”. Средний – “Volume”. Нижний – “Button”. Верхний и средний слой пока скрываем.
6. Открываем Blending Options у слоя “Button” и устанавливаем Gradient Overlay. Цвета конечно же выбираются наугад, главное чтобы в итоге верхний цвет был более тёмным, а нижний более светлым и ярким.

   

   

   Получаем следующее:

   

7. Добавляем стиль Stroke и выставляем параметры как показаны ниже:

   

   

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

   

8. Добавляем стиль Drop Shadow. Небольшая тень от кнопки, тоже добавит иллюзию объёма.

   

   

9. Выбираем слой “Volume”. Влючаем его видимость. Открываем Blending Options. С самого начала ставим Fill Opacity на 0%.
10. Добавляем стиль Gradient Overlay:

    

    

    Обратите внимание на то как расположены ползунки у этого градиента. Подвигайте их так, чтобы получить примерно такой результат:

    

    т.е. края у кнопки должны быть затемнены.

11. Ну и последнее: глянец. Показываем слой “Glance”. И изменяем его форму и расположение, чтобы получилось примерно так (увеличенное изображение):

    

12. Обрезаем нижнюю часть:

    

13. Устанавливаем Fill Opacity на 0%. Применяем стиль Gradient Overlay:

    

    

    Получаем глянцевый эффект:

    

14. Можно добавить надпись:
    Для Windows (Tahoma):

    

    Для Mac OS X (Lucida):

    

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

Готовая кнопка в psd-формате: mac_button.zip