Автор: Вадим Скротский
http://www.netz.ru/
Заглянув на десктоп я нашел замечательный
ярлычок - Adobe Photoshop :) Вот с ним и поработаем! Много я видел кнопок, кнопель
и им подобных, но в этот момент я подумал рассказать вам о своей небольшой технологии
создания кнопеля. Хотя эту технологию можно применять и в других элементах. Тут
уж на ваше усмотрение, что и где можно применить. Честно говоря я не люблю работать
со всяческими эффектами и фильтрами и предлагаю поработать ручками и мышками. Приступим!
Знаю, что вы уже открыли PS и ждете первых указаний. Ну тогда кликаем File ›
New. Создаем изображение размером 300х300px, хотя это не принципиально. Моим
следующим шагом было расстановка Guide'ов (все знаю что это такое, нет? Тогда кликаем
на линейке и не отпуская кнопки тянем мышь в сторону. Вот и она!). Расставил я их
так: 125, 150, 175px по обеим сторонам. Красной области у вас быть не должно, я
показал то место, где будет сама кнопа.
Теперь все подготовлено, приступим. Выбираем на панели инструментов Rounded Rectangle Tool (U). В параметре Radius выставляем значение 5px. Создаем новый слой с именем 1 (Ctrl+N) и на нем рисуем:
Идем далее и переходим на панель Layers. Зажимаем Ctrl и жмем левой кнопкой мыши по слою 1, теперь кликаем сюда Select › Modify › Contract.... Выставляем значение 2, ok. Теперь переходим к панели цветов и выбираем что-нибудь посветлее (R:53, G:94, B:138). Удаляем половину выделения. Для этого берем инструмент Rect. Marquee Tool (M) и включив Guides удаляем ровно половину выделения зажав Alt. Создаем новый слой 2. Жмем Alt + Backspace и получаем:
Не убирайте выделение. Создаем новый слой 3. Берем в руки Gradient Tool (G). Теперь опять переходим к панели цветов и выбираем R:226, G:233, B:240, увеличиваем изображение и снизу вверх создаем градиент.
Переходим на 1 слой и выделяем всю кнопку (зажав Ctrl кликаем по 1 слою), опять Select › Modify › Contract... и опять выставляем значение 2, ok. Увеличиваем картинку. Переходим на слой 3 и опять создаем градиент от самого низа. Он должен быть менее ярким и броским нежели первый.
Выбираем инструмент Rect. Marquee Tool (M), в параметрах выставляем: Style - Fixed Size, указываем размеры 10х10px. Создаем выделение справа под градиентом, как показано на рис.1, выбираем Ellipt. Marquee Tool (M) и зажав Alt вырезаем окружность из квадрата, как показано на рис.2. Теперь удаляем три вершины и оставляем одну, как показано на рис.3. В итоге у нас остается правая верхняя вершина.
Переходим к панели цветов и выбираем R:226, G:233, B:240. Жмем Alt + Backspace. Теперь нужно слева удалить маленький кусочек градиента. Это делается точно таким же способом что и добавление, только в конце мы не заливаем область, а удаляем.
Ну вот мы и подходим к завершению. Осталось подписать эту кнопелю и всё будет ок! Пишем текст практически белым цветом. Размещаем его посередине кнопы и делаем Rasterize Layer (в панели Layers жмем правой кнопкой мыши по слою с текстом и находим это там). Теперь выделяем текст (зажав Ctrl жмем правой кнопкой мыши по слою с текстом) и идем сюда - Select › Modify › Expand.... Выставляем значение 1, ок. Переходим на слой 3 и нажимаем Delete. Снова на слой с текстом, выделяем его (уже знаете как) и удаляем верхнюю половину выделения, как на рис. 5.
Идем Image › Adjustments › Hue/Saturation.... Ставим птичку рядом с Colorize Выставляем значения - Hue:205, Saturation:25, Lightness:-15. Жмем Ctrl + D. Наслаждаемся...
