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

13 Ноя
Кнопка для сайта в 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

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

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

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

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

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

 

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


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

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


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

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

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

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

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

  1. SLEPOY

    Кнопка то готова а как сделать что бы она переносила на другую страницу

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

    Вставляете на блог ( сайт , не знаю что-там у вас)следующий код

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

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