Приветствую Вас друзья на страничках блога про графический редактор GIMP. В очередном уроке мы с вами научимся создавать стильные и красивые кнопки для сайтов и блогов в стиле web 2.0 с помощью готовых градиентов в бесплатном графическом редакторе ГИМП.
Сегодня в моду блогинга, когда наверно у каждого есть свой блог в интернете, очень хочется выделиться на фоне других сайтов в сети. Быть индивидуальным и не похожим на другие, иметь неповторимый и качественный дизайн. Поэтому для сайта всегда требуется красивая и стильная графика в виде разнообразных кнопок меню, кнопок навигации или социальных сетей и т.п.
«Встречают по одежке» — это высказывание можно применить и в интернете, так как посетитель, впервые открыв ваш блог, видит именно его оформление. Вот по этому от качественного дизайна зависит, на долго ли он задержится на вашем блоге. Но не всегда удается найти готовое решение в сети, скачивая различные наборы кнопок. Я же вам предлагаю научиться рисовать свою кнопку для сайта в бесплатном графическом редакторе гимпе.
Ранее, на предыдущих уроках мы с вами уже научились рисовать простенькую кнопку для сайта и создавать зеркальное отражение текста в уроке про логотип. Сегодня же мы научимся создавать красивые кнопки для блогов и сайтов за несколько шагов. А в последующих уроках я покажу вам как автоматизировать процесс создания кнопок с помощью дополнительных плагинов gimp.
Не пропустите новый урок, подписывайтесь на обновления блога и будьте в курсе всех публикуемых уроков.
Шаг 1. Запускаем GIMP. Через «Файл — Создать» создаем новое изображение с размерами:
Нажимаем ОК.
Шаг 2. На панели инструментов выбираем «Прямоугольное выделение» и рисуем выделение как показано на скриншоте.
Затем мы должны активировать пункт «Закругленные углы», для этого щелкаем мышью один раз по пункту. Теперь у нас появилась возможность двигая ползунок закруглить углы у будущей кнопки.
Также мы можем легко изменить размеры самого выделения. Для этого необходимо подвести курсор к любому углу выделения и перемещая мышь, изменить геометрические размеры кнопки так, как вам надо.
854
Шаг 4. Сделали? Тогда идем дальше. Сейчас на панели инструментов выбираем «Градиент» и щелкаем один раз мышью по пиктограмме «Градиент» и из выпадающего списка ищем скаченные градиенты с надписью Web 2.0. Для этого урока я выбрал градиент под названием «Web 2.0 Pink Gloss». Вы не нашли у себя такие градиенты? Значит вы пропустили урок. Нехорошо. Давайте быстрее изучите уроки 30 градиентов и 130 градиентов для GIMP, а я вас подожду здесь.
Теперь проводим градиент от точки 1 до точки 2.
Должно получится так.
Шаг 5. Теперь сделаем стильную обводку кнопки темным оттенком розового. Для этого создаем новый прозрачный слой и перемещаем его в низ под текущей слой с кнопкой. Затем идем в «Выделение — Увеличить» и вводим значение 2 px.
Теперь закрашиваем выделение темно-розовым (#873f70)
Шаг 6. В заключительном шаге создадим надпись на кнопке. Для этого выбираем инструмент «Текст» и вводим любую надпись. У меня использован шрифт Cooper Italic, размер шрифта 70, цвет шрифта — белый.
Шаг 7. Далее откадрируем изображение с помощью «Изображение — Откадрировать изображение»
Шаг 8. Сохраняем нашу кнопку с расширением PNG. В итоге у нас получилась симпатичная кнопка скачать для сайта.
Таким же образом вы можете создавать (рисовать) различные кнопки для ваших блогов и сайтов. Поэкспериментируйте и попробуйте выбрать другие градиенты из наборов. Подключите фантазию и быть может у вас получится создать более интересные варианты кнопок.
А сейчас я предлагаю вам скачать небольшой шаблон, который можно открыть как в фотошопе, так и в gimp. C помощью данного шаблона вы сможете создать вот такие своеобразные кнопки скачать.
И уже скоро я научу вас, как автоматизировать процесс создания красивых и стильных кнопок для блогов и сайта в графическом редакторе GIMP. Не пропустите новый урок, подписывайтесь на обновления. Вот теперь все. Спасибо за внимание и до скорых встреч.
С уважением Антон Лапшин
Материалы к уроку:
Шаблон gimp xcf из урока
30+ градиентов в стиле Web 2.0
130+ градиентов в стиле Web 2.0
Шаблон кнопок скачать
Нажимая на кнопку "Комментировать", вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности