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

Приветствую Вас друзья на страничках блога про графический редактор GIMP. В очередном уроке мы с вами научимся создавать стильные и красивые кнопки для сайтов и блогов в стиле web 2.0 с помощью готовых градиентов в бесплатном графическом редакторе ГИМП.

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

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

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

Не пропустите новый урок, подписывайтесь на обновления блога и будьте в курсе всех публикуемых уроков.

Шаг 1. Запускаем GIMP. Через «Файл — Создать» создаем новое изображение с размерами:

кнопка скачать для сайта

Нажимаем ОК.

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

кнопка скачать для сайта

Затем мы должны активировать пункт «Закругленные углы», для этого щелкаем мышью один раз по пункту. Теперь у нас появилась возможность двигая ползунок закруглить углы у будущей кнопки.

кнопка скачать для сайта

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

04_knopka-ckachat

854
Шаг 4. Сделали? Тогда идем дальше. Сейчас на панели инструментов выбираем «Градиент» и щелкаем один раз мышью по пиктограмме «Градиент» и из выпадающего списка ищем скаченные градиенты с надписью Web 2.0. Для этого урока я выбрал градиент под названием «Web 2.0 Pink Gloss». Вы не нашли у себя такие градиенты? Значит вы пропустили урок. Нехорошо. Давайте быстрее изучите уроки 30 градиентов и 130 градиентов для GIMP, а я вас подожду здесь.

кнопка скачать для сайта

Теперь проводим градиент от точки 1 до точки 2.

06_knopka-ckachat

Должно получится так.

кнопка скачать для сайта

 

Шаг 5. Теперь сделаем стильную обводку кнопки темным оттенком розового. Для этого создаем новый прозрачный слой и перемещаем его в низ под текущей слой с кнопкой. Затем идем в «Выделение — Увеличить» и вводим значение 2 px.

кнопка скачать для сайта

Теперь закрашиваем выделение темно-розовым (#873f70)

09_knopka-ckachat

10_knopka-ckachat

Шаг 6. В заключительном шаге создадим надпись на кнопке. Для этого выбираем инструмент «Текст» и вводим любую надпись. У меня использован шрифт Cooper Italic, размер шрифта 70, цвет шрифта — белый.

11_knopka-ckachat

Шаг 7. Далее откадрируем изображение с помощью «Изображение — Откадрировать изображение»

12_knopka-ckachat

Шаг 8. Сохраняем нашу кнопку с расширением PNG. В итоге у нас получилась симпатичная кнопка скачать для сайта.

кнопка скачать для сайта

Таким же образом вы можете создавать (рисовать) различные кнопки для ваших блогов и сайтов. Поэкспериментируйте и попробуйте выбрать другие градиенты из наборов. Подключите фантазию и быть может у вас получится создать более интересные варианты кнопок.

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

кнопки скачать для сайта

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

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

Материалы к уроку:

Шаблон gimp xcf из урока
30+ градиентов в стиле Web 2.0
130+ градиентов в стиле Web 2.0
Шаблон кнопок скачать

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

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

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

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

-->

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

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

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