Кнопка для сайта в GIMP

Доброго времени суток друзья! Сегодня очередной урок, в котором мы создадим красивую кнопку для сайта в графическом редакторе GIMP.

Для начала, можете посмотреть вот эти уроки:

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

Урок — Кнопка для сайта в редакторе GIMP

Шаг 1. Запускаем редактор GIMP и через меню «Фаил — Создать», создаем новое изображение с размерами по умолчанию. У меня это 640×480 пикселей.

kak-sdelat-knopky-dlya-saita-01

Шаг 2. Создаем новый прозрачный слой через «Слой — Создать слой»

Шаг 3. На панели инструментов выбираем «Прямоугольное выделение» и рисуем на холсте прямоуголиник с произвольными размерами.

kak-sdelat-knopky-dlya-saita-02

Шаг 4. Активируем в настройках «Прямоугольного выделения» пункт «Закругленные углы» и перемещая ползунок, подбираем желаемый радиус закругления кнопки. Я выбрал значение 40.

kak-sdelat-knopky-dlya-saita-03

Шаг 5. Закрашиваем созданное выделение цветом #bd7611. Для этого нажимаем на пиктограммы «цвет переднего плана и фона» и в открывшемся диалоговом окне вводим код цвета вот сюда.

kak-sdelat-knopky-dlya-saita-04

854
После чего нажимаем ОК.Теперь просто мышкой переносим прямоугольник с выбранным цветом на рабочее пространство и отпускаем кнопку мыши.Получится так.

kak-sdelat-knopky-dlya-saita-05

Шаг 6. Создаем новый прозрачный слой через команду «Слой — Создать слой» и так как у нас еще активно выделение  муравьиная дорожка вокруг кнопки), то воспользуемся командой «Выделение -Уменьшить» и в открывшемся окне введем значение 4.

kak-sdelat-knopky-dlya-saita-06

Шаг 7. Аналогичным способом, как в шаге 4. Закрасим данное выделение красным цветом #d01818

kak-sdelat-knopky-dlya-saita-16

Шаг 8. Создадим новый прозрачный слой, на котором с помощью инструмента «прямоугольное выделение», нарисуем отблеск от кнопки. Это придаст некий объем и красочность 🙂

kak-sdelat-knopky-dlya-saita-07

Шаг 9. Закрасим выделение белым цветом и уменьшим непрозрачность данного слоя примерно до 50%

kak-sdelat-knopky-dlya-saita-08

Шаг 10. Отключаем выделение через команду «Выделение — Снять» и выбрав инструмент «Текст», создадим надпись на кнопке. В параметрах инструмента указываем шрифт «Sans Bold» и размер шрифта «50»

kak-sdelat-knopky-dlya-saita-09

Затем, зажав на клавиатуре «Ctrl+Alt» с помощью мыши, выроним текст относительно кнопки

kak-sdelat-knopky-dlya-saita-10

Теперь, воспользуемся фильтром «Фильтры — Свет и тень — Отбрасываемая тень», для создания небольшой тени от надписи. В настройках указываем следующие значения

kak-sdelat-knopky-dlya-saita-11

и нажимаем ОК. Кнопка готова. Осталось только откадрировать и сохранить.

Шаг 11. Отключаем видимость нижнего слоя «Фон» через пиктограму «глаза» напротив слоя и переходим на следующий слой

kak-sdelat-knopky-dlya-saita-12

Далее воспользуемся командой «Изображение — Автокадрировать изображение»

kak-sdelat-knopky-dlya-saita-13

Сохраняем кнопку в формате PNG, через меню «Фаил — Экспортировать в.». Более подробно про сохранение изображений, вы можете почитать вот в этом уроке.

Дополнительные материалы:

Исходник в формате XCF

Финальный результат

На этом усё, до новых встреч. Как вам новый урок?

С уваженеим, Антон Лапшин!

 

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

Автор блога GimpArt.Org - Антон Лапшин

За 10 лет обучил работе в фоторедакторе Gimp более 12000 пользователей, мои видео-уроки и мастер-классы на одноименном YouTube канале посмотрели более 1 400 000 раз!!!

👉Посмотрите другие материалы:

-->

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

2 комментария к “Кнопка для сайта в GIMP”

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

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