Красивая кнопка на страницу

Как создать красивую кнопку

Приветствую тебя, читатель блога doxodnayrabota.ru. В этой статье расскажу как быстро можно сделать красивую кнопку на страницу блога или подписную страницу. Можно, конечно, воспользоваться уже готовыми кнопками, которые предлагают в интернете по запросу «картинки», но чаще всего, они либо с водяным знаком автора, либо их уже используют многие. Вы же можете немного проявить творчества и это Вам понравится.

Красивая кнопка Какой графический редактор?

Часто от своих знакомых слышу, что они не умеют пользоваться Фотошопом (самый популярный графический редактор и недешёвый). Скорее это психологическая боязнь программы. На самом деле любой, даже мощный редактор устроен по одному принципу. Есть рабочее поле, набор инструментов и много операций, которые можно изучить самостоятельно или пройдя уроки. Но, хватит лирики! Представляю бесплатный графический редактор GIMP, прототип Фотошопа. Здесь я и покажу создание кнопки.

Скачать можно с официального сайта https://www.gimp.org/

После установки программы откроется окно для работы

Шаг 1 Создание изображения.

Немного о слоях. Изображение будет состоять из множества элементов. Каждый элемент создается на отдельном слое. Это для удобства редактирования изображения, где можно удалять элементы, менять их не затрагивая другие элементы.

«Файл — Создать».  Выбрать размер, ориентацию (книжная или альбомная), Расширенные параметры — Заполнение — Прозрачный фон.

как создать документ в GIMP

Шаг 2. Создать прямоугольник с закругленными краями.

«Инструменты — Выделение — Прямоугольное выделение». Или выбрать пиктограмму на левой панели. Создаем прямоугольник, удерживая левой кнопкой мыши, закругление углов можно регулировать.

Как создать выделенную область

Шаг 3. Заливка выделенной области.

«Инструменты — Рисование — «. Цвет «Красный», вид

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

Шаг 4. Создание канта или обводки.

Создаем новый прозрачный слой (можно задать название «обводка»). Причем выделение (бегущая линия вокруг объекта) не снимается. Теперь есть два слоя, их можно увидеть справа. Выделить новый слой (щелкнуть левой кнопкой мыши ЛКМ).

Как создать новый слой

Увеличим выделение.
«Выделение — Увеличить — 3 ( по усмотрению)

«Инструменты — Рисование — Плоская заливка».  Выбрать цвет «Белый».

Переместить слой ниже, т.е. поменять слои местами. Теперь белый слой находится ниже. Получился кант. Выделение снять.

«Выделение — снять выделение».

Создание обводки

Шаг 5. Создание блика.

Создать новый прозрачный слой. Выделить его. Создать прямоугольное выделение с закругленными краями. Залить белым цветом.

На панели Слои уменьшить Непрозрачность — 50. ( по усмотрению)

Создание блика

Шаг 6. Создание надписи.

«Инструменты — Текст»
На кнопке выделяем область, зажимая ЛКМ,
В свойствах выбираем шрифт, цвет, размер шрифта.

Вставляем текст на кнопку

При желании можно поставить какую-то иконку.
На вкладке Слои (справа) преобразуем текст в изображение.
На слой Текст нажимаем ПКМ и выбираем Удалить текстовую информацию

Шаг 7. Сохранение.

  1. Сохраняем шаблон этой кнопки.
    Всегда можно поменять цвет, иконку, надпись. Для этого кликнуть по сохраненному шаблону, откроется GIMP со слоями. Удалить слой с надписью и создать другую.
    «Файл — Сохранить как». Указываем куда и имя файла, например, Шаблон кнопки.
    Сохранение шаблона
  2. Сохраняем кнопку, как изображение для постов, статей на блоге
    «Файл — Экспортировать как».  Указываем имя файла, куда поместить, выбираем в каком формате сохранить (png, jpg, gpeg).
    Сохранение изображения

Нажимаем «Экспортировать — экспорт».

Располагайте кнопку в конце странице. Очень легко можно вести блог с инструментами AIOP , подробнее…