В самом начале работы с сайтом, столкнулась с тем, что нужно было нарисовать кнопку для второго сайта. В интернете есть ресурсы, которые позволяют это сделать чуть ли не автоматически. Но иногда хочется, что бы кнопка была только твоя, неповторимая. Как всегда на помощь приходит программа фотошоп.
Как рисовать в фотошоп кнопки?
1. Создадим документ. Я взяла 1000 на 1000 пикселов.
2. Делаем активным инструмент Прямоугольник со скругленными краями. Выбираем в настройках контур. Ставим радиус скругления. Чем больше значение, тем больше будет радиус.
3. Я взяла радиус 100 пикселов, 50 и 10. Как выглядят нарисованные прямоугольники с таким скруглением, видно ка картинке. Рисуем кнопку со своим значением скругления. Можно попробовать сделать как у меня несколько штук на выбор.
4. Кликаем ПКМ (правой кнопкой мышки) по прямоугольнику, в выпавшем окне выбираем "образовать выделенную область". Растушевка ноль.
5. Заливаем цветом выделения.
-Идем в РЕДАКТИРОВАНИЕ — ВЫПОЛНИТЬ ЗАЛИВКУ- выбираем цвет. (Потом его можно будет подкорректировать)
6. Рисуем блик на кнопке.
-Нажимаем клавиши CTRL + R (для того, что бы активировать линейки). Если посмотрим верхний и левый края окна, то увидим там циферки. Это линейки или направляющие. Что бы нарисовать блик ровно, они нам понадобятся.(1)
-Зажимаем ЛКМ и тянем вниз линейку.
-Выставляем горизонтальную направляющую по центру кнопки.
— Создаем новый слой (2)
-Берем круглую мягкую кисть с размером примерно 1/3 ширины кнопки (3-4)
7.Рисуем блики.
-Создаем новый слой для каждого блика (1)
-выбираем белый цвет (2)
— Ставим белую точку с одной стороны кнопки на направляющей, зажимаем SHIFT и ставим такую же точку в другом конце кнопки- получается ровная белая линия- блик.
-рисуем белые полоски на каждой кнопке.
8. Теперь нам нужно разделить кнопки так, что бы они были каждая на своем слое.
-Берем инструмент "прямоугольная область" и выделяем кнопку 1 (на рисунке средняя) с прилегающими областями, но не залезая на другие кнопки.
-Кликаем ПКМ на выделении и в выпавшем окне выбираем "Скопировать на новый слой" (4)
— Так же поступаем с остальными двумя кнопками.
9. Распределим слои так, что бы каждому слою с кнопкой, соответствовал свой слой с бликом. После чего, делая активными оба слоя (кнопка- блик), создадим группу. Просто зажимаем ЛКМ и тащим выделенные слои к иконке "группа" (5)
-теперь видимость основного слоя с кнопками можно отключить.
10. Выделим любую группу и применим к ней параметры наложения (жмем на иконку fx)
-делаем тиснение (1), обводка (2), внутренее свечение (3) и тень (4)
11. Теперь мы можем изменить цвет кнопки, если захотели другой.
-жмем на корректирующий слой (1)
-выбираем цветовой тон/ насыщенность (2)
-Двигая ползунок добиваемся нужного цвета (3)
12. Применим стили слоя для остальных кнопок.
-делаем активной слой группы, в котором мы налаживали стили.
— кликаем по ней правой кнопкой и выбираем "скопировать стиль слоя"
-выделяем остальные слои с группами, кликаем и выбираем "вклеить стиль слоя"
-Наши кнопочки стали одинаковыми по стилю.
13. Пишем надпись на кнопке.
-Выбираем инструмент "текст" (1)
-Настраиваем размер, шрифит и т.п. (2)
-Пишем надпись (3). Если вышло криво, не страшно: активируем инструмент перемещение и сдвигаем надпись как нужно.
Можно применить к буквам тот же стиль, как и у кнопок: выделяем слой с текстом, кликаем по слою ПКМ, выбираем "вклеить стиль слоя" (4). Я только убрала тень и тиснение (жмем на глазик)
-Если немного промахнулись с размером, то нам поможет трансформация: жмем CTRL + T и придаем тексту нужный размер.(5)
14. осталось только правильно сохранить кнопки, что бы можно было отредактировать.
— Идем в ФАЙЛ (1) — СОХРАНИТЬ КАК (2) — выбираем папку и формат (3). Я всегда сохраняю в формате tiff.
Ну вот, кнопочки готовы и можно ими пользоваться.
Сегодня мы рассмотрели как рисовать в фотошоп кнопки для сайта.
Если Вам понравилась статья, шлепните по социальным кнопочкам.
Если хотите получать все новости сразу и на почту, подпишитесь на обновления.
Наталья большое спасибо .Очень интересная статья. Я только учусь фотошопу. и мне это интересно .
Валентина, я тоже учусь =) Надеюсь, что то, что я знаю, поможет Вам.
О. классный дизайн у тебя на ФШ. Я сюда давненько не заходила. Наташа, вот про кнопочки понятно, а как сделать чтоб вверх кнопка была и вниз такая же? Ты случаем не знаешь?
Эм.. Ален, не поняла немного. Что значит вверх кнопка и вниз? Отражение что ли? Если отражение, то там все элементарно делается. Или ты что — то другое имела ввиду? А на ФШ дизайн уже пора менять. Весна скоро =) На нитке поменяла. Теперь пока раздумываю, как тут сделать.
Кнопки очень красивые и реалистичные, вызывают желание на них нажать.
Спасибо, Надежда.
Я имела кнопку вниз и вверх как на блоге у Влада, например (ссылку можешь удалить) http://www.chelpachenko.ru. Кстати, присоединяйся с ФШ, ведь прекрасно с ним по всем параметрам к марафону подходишь
Ален, это что бы интформация прокручивалась вверх — вниз? Вроде бы это ставится плагином (прокрутка) а картинку можно поставить любую свою хоть стрелку, хоть гитару.
Поздравляю с вашим новым сайтом. Фотошоп — классная штука, только с ним разбираться нужно долго.
Марина, он не новый =) Это наоборот первый сайт, который у меня появился. На самом деле они родились один за другим с разницей меньше месяца. Просто на нитке у меня больше опыта по контенту. А тут постоянный кризис идей.
Кнопки еще не делала. Интересно будет сделать. Очень красиво получаются.
Конечно, попробуйте. Всегда приятно знать, что твоя кнопка — только твоя.
Рано или поздно столкнёшься с тем, что надо поставить кнопку на сайт. Теперь я знаю, как мне сделать свои оригинальные кнопки для сайта.
Спасибо, Вера, за комментарий.
сейчас без фото шопа ни куда, все собираюсь но не могу решиться . Благодарю, буду чаще заглядывать к Вам на уроки.
Решайтесь. Программа очень хорошая. Не такая сложная, что бы нельзя было разобраться. Если что, всегда помогу.
Наташа, вы молодец, такие кнопочки придадут индивидуальности сайту! Спасибо за отличный урок.
Спасибо, Наталья.
Наташа, спасибо за урок. Я хочу себе баннер нарисовать в виде таких кнопочек. Займусь в скором будущем.
Интересно будет посмотреть, что получится. =) Покажете?
Преклоняюсь перед людьми, которык и сами работают в фотошопе и могут понятно рассказать об этом
Наталья, я надеюсь, что понятно рассказываю. Спасибо за комментарий.
Отличные кнопки, но сними надо разобраться посидеть с налету ничего не получится… Спасибо за классный урок!
Да ладно, Вам , Людмила. Разве очень сложно? Нарисовал, применил градиент и стили. и все..
Your posting really srtagihtneed me out. Thanks!
Прекрасный и очень нужный урок. Как раз к стати. Буду разбираться и обязательно сделаю.
Уверена, что все у Вас получится, Галина.
А я взяла кнопочки стандартные-))Кстати, по шаблону: если есть возможность установить фон и заголовок, то естественно можно устанавливать свои.
Юль, у меня так же стандартные, но только потому, что никак не могу разобраться с кодами. Совершенно! А так бы ух… наменяла все свое.
Да, пора начинать осваивать фотошоп… Спасибо за подробный урок.
Конечно =) пора 😉
плагин не хочу, хочу коды кнопочек
Ален, я могу только нарисовать. В кодах я настолько чайник =( что себе ничего не могу с кодами сделать.
Ладно, буду иметь ввиду.
Эх,мне проще разобраться с кодом,чем окунуться в фотошоп
А я с кодами никак не могу подружиться.. Ну хоть тресни.=(
That inigsht’s just what I’ve been looking for. Thanks!
Наташа, у меня с пункта 10 ничего дальше не получается. Не нажимается кнопка стилей fx ну никак. Что не так я делаю?
Наташ, скрин мне можешь кинуть на почту? Или еще лучше, запиши мой скайп natalya9736. Добавляйся. Созвонимся. Сегодня будет некогда. А вот в субботу после 13 (до часа работаю) и в воскресенье, свистни. Посмотрим. Скорее всего, или не на том слое стоишь, или еше что — то. Сколько кнопок ты делаешь- одну или несколько?