Рисуем кнопку для сайта в гимпе

9 Фев
Рисуем кнопку для сайта в гимпе

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

В следующих уроках, мы с вами научимся рисовать более интересные кнопки, а теперь приступим:

Шаг 1. Создаем новое изображение размером шириной 250px и высотой 100px

кнопка в гимпе

Шаг 2. Выделяем изображение «Выделение — Всё (Ctrl+A)»

Шаг 3. Закругляем края у выделения «Выделение — Закруглить прямоугольник» (настройки по умолчанию)

кнопка для сайта гимп

Шаг 4. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)

Шаг 5. Так как выделение у нас активно, заливаем его цветом ( выбрать по вкусу). Я выбраз зеленый (#009100). Просто перетаскиваем цвет из палитры на рабочую зону (на выделение) не отпуская левую кнопку мыши. Теперь у нас получился зеленый прямоугольник с закругленными краями на белом фоне. Продолжаем:

кнопка гимп

гимп сайт

Шаг 6. Продолжаем работать с активным выделением. Уменьшим его на два пикселя (2 px). Для этого нажимаем по верхнему меню «Выделение — Уменьшить» и вводим нужный параметр — это 2px. И нажимаем «ОК»

уменьшаем выделение

Шаг 7. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)

Шаг 8. Заливаем активное выделение градиентной заливкой. Цвет переднего плана немного посветлее нашего базового цвета. У меня это получился светло зеленый с параметром #43c343. Выбираем инструмент «Градиент» с параметром «Основной в прозрачный» и применяем инструмент от верха нашего изображения к низу.

градиентная заливка в гимпе

Должно получится как на рисунке:

кнопка

Шаг 9. Продолжаем работать с активным выделением. Создадим новое прямоугольное выделение в режиме вычитание

режим вычитание

Шаг 10. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)

Шаг 11. Продолжаем работать с активным выделением. Заливаем активное выделение градиентной заливкой. Цвет переднего плана-Белый. инструмент «Градиент» с параметром «Основной в прозрачный». Применяем инструмент от верха нашего выделения к низу Должно получится так, если вы все сделаете правильно:

gimp урок кнопка для сайта

Шаг 12. Выделение — Снять (Shift+Ctrl+A)

Шаг 13. Добавим надпись на нашу кнопку с помощью инструмента «Текст» напищем нужное нам слово. В моем случае — это «Download»

сайт гимп уроки

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

Рисуем кнопку для сайта в гимпе

Пожалуйста, оцените эту статью, нажав на звездочки ниже:


Очень плохоПлохоСреднеХорошоОтлично (1 голосов, оценка: 5,00 из 5)
Loading...

P.S. Хотите получать АНОНСЫ НОВЫХ УРОКОВ к себе НА E-MAIL? Тогда подписывайтесь на обновления блога. Буду рад видеть вас среди своих читателей.


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

Тем самым вы мотивируете меня на создание новых уроков и поддерживаете мой проект в дальнейшем развитии. Спасибо Вам Большое!

Также рекомендую ознакомиться со следующей информацией, возможно, она вас заинтересует.

Видео курс азбука GIMP скачать

Комментариев к статье: 0;

  1. Seva

    Как сделать шрифт чтобы была тёмная грань контур или как он там правильно называется.

  2. вольт

    А как убрать пунктир и белый контур ?

  3. Антон Лапшин

    Посмотрите вот этот урок, там я подробно объяснил про кнопку

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

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