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

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

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

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

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

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

854

Шаг 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»

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

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

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

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

Посмотрите другие уроки

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

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

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

    Ответить

Оставьте комментарий

+ 39 = 44

Нажимая на кнопку "Комментировать", вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности