Как рисовать в фотошоп. Кнопки для сайта.



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

Как рисовать в фотошоп кнопки?

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. 

Ну вот, кнопочки готовы и можно ими пользоваться.

Сегодня мы рассмотрели как рисовать в фотошоп кнопки для сайта.

Если Вам понравилась статья, шлепните по социальным кнопочкам.
Если хотите получать все новости сразу и на почту, подпишитесь на обновления.

На главную

 

Интересное по теме:

Метки: . Закладка Постоянная ссылка.

40 комментариев: Как рисовать в фотошоп. Кнопки для сайта.

  1. Валентина пишет:

      Наталья большое спасибо .Очень интересная статья. Я только учусь фотошопу. и мне это интересно .

  2. О. классный дизайн у тебя на ФШ. Я сюда давненько не заходила. Наташа, вот про кнопочки понятно, а как сделать чтоб вверх кнопка была и вниз такая же? Ты случаем не знаешь?

    • Эм.. Ален, не поняла немного. Что значит вверх кнопка и вниз? Отражение что ли? Если отражение, то там все элементарно делается. Или ты что — то другое имела ввиду? А на ФШ дизайн уже пора менять. Весна скоро =) На нитке поменяла. Теперь пока раздумываю, как тут сделать.

  3. Надежда пишет:

    Кнопки очень красивые и реалистичные, вызывают желание на них нажать.

  4. Я имела кнопку вниз и вверх как на блоге у Влада, например (ссылку можешь удалить) http://www.chelpachenko.ru. Кстати, присоединяйся с ФШ, ведь прекрасно с ним по всем параметрам к марафону подходишь

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

  5. Марина пишет:

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

    • Марина, он не новый =) Это наоборот первый сайт, который у меня появился. На самом деле они родились один за другим с разницей меньше месяца. Просто на нитке у меня больше опыта по контенту. А тут постоянный кризис идей.

  6. Надежда пишет:

    Кнопки еще не делала. Интересно будет сделать. Очень красиво получаются.

  7. Вера пишет:

    Рано или поздно столкнёшься с тем, что надо поставить кнопку на сайт. Теперь я знаю, как мне сделать свои оригинальные кнопки для сайта.

  8. LadyCharm пишет:

    сейчас без  фото шопа ни куда,  все собираюсь  но  не могу решиться .  Благодарю, буду чаще  заглядывать к Вам на уроки.

  9. Наталья пишет:

    Наташа, вы молодец, такие кнопочки придадут индивидуальности сайту! Спасибо за отличный  урок.

  10. Елена пишет:

    Наташа, спасибо за урок. Я хочу себе баннер нарисовать в виде таких кнопочек. Займусь в скором будущем.

  11. Наталья пишет:

    Преклоняюсь перед людьми, которык и сами работают в фотошопе и могут понятно рассказать об этом

  12. Людмила пишет:

    Отличные кнопки, но сними надо разобраться посидеть с налету ничего не получится… Спасибо за классный урок!

  13. Галина пишет:

    Прекрасный и очень нужный урок. Как раз к стати. Буду разбираться и обязательно сделаю.

  14. Юлия пишет:

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

  15. Natabul пишет:

    Да, пора начинать осваивать фотошоп… Спасибо за подробный урок.

  16. плагин не хочу, хочу коды кнопочек

  17. Ладно, буду иметь ввиду.

  18. Наталья пишет:

    Эх,мне проще разобраться с кодом,чем окунуться  в фотошоп

  19. Jodecy пишет:

    That inigsht’s just what I’ve been looking for. Thanks!

  20. Наталья пишет:

    Наташа, у меня с пункта 10 ничего дальше не получается. Не нажимается кнопка стилей fx ну никак. Что не так я делаю?

    • Наташ, скрин мне можешь кинуть на почту? Или еще лучше, запиши мой скайп natalya9736. Добавляйся. Созвонимся. Сегодня будет некогда. А вот в субботу после 13 (до часа работаю) и в воскресенье, свистни. Посмотрим. Скорее всего, или не на том слое стоишь, или еше что — то. Сколько кнопок ты делаешь- одну или несколько?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *