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

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

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

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

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

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

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

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

Нажимаем ОК.

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

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

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

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

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

04_knopka-ckachat

Шаг 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 из урока
30+ градиентов в стиле Web 2.0
130+ градиентов в стиле Web 2.0
Шаблон кнопок скачать

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


Очень плохоПлохоСреднеХорошоОтлично (Проголосуй первым!)
Loading...

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


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

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

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

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

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

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