Доброго времени суток друзья! Сегодня очередной урок, в котором мы создадим красивую кнопку для сайта в графическом редакторе GIMP.
Для начала, можете посмотреть вот эти уроки:
там мы уже рисовали разные вариации кнопок для сайтов. Сегодня же, вашем вниманию хочу продемонстрировать еще один вариант создания простой кнопки с помощью бесплатного графического редактора GIMP.
Урок — Кнопка для сайта в редакторе GIMP
Шаг 1. Запускаем редактор GIMP и через меню «Фаил — Создать», создаем новое изображение с размерами по умолчанию. У меня это 640×480 пикселей.
Шаг 2. Создаем новый прозрачный слой через «Слой — Создать слой»
Шаг 3. На панели инструментов выбираем «Прямоугольное выделение» и рисуем на холсте прямоуголиник с произвольными размерами.
Шаг 4. Активируем в настройках «Прямоугольного выделения» пункт «Закругленные углы» и перемещая ползунок, подбираем желаемый радиус закругления кнопки. Я выбрал значение 40.
Шаг 5. Закрашиваем созданное выделение цветом #bd7611. Для этого нажимаем на пиктограммы «цвет переднего плана и фона» и в открывшемся диалоговом окне вводим код цвета вот сюда.
854
После чего нажимаем ОК.Теперь просто мышкой переносим прямоугольник с выбранным цветом на рабочее пространство и отпускаем кнопку мыши.Получится так.
Шаг 6. Создаем новый прозрачный слой через команду «Слой — Создать слой» и так как у нас еще активно выделение муравьиная дорожка вокруг кнопки), то воспользуемся командой «Выделение -Уменьшить» и в открывшемся окне введем значение 4.
Шаг 7. Аналогичным способом, как в шаге 4. Закрасим данное выделение красным цветом #d01818
Шаг 8. Создадим новый прозрачный слой, на котором с помощью инструмента «прямоугольное выделение», нарисуем отблеск от кнопки. Это придаст некий объем и красочность 🙂
Шаг 9. Закрасим выделение белым цветом и уменьшим непрозрачность данного слоя примерно до 50%
Шаг 10. Отключаем выделение через команду «Выделение — Снять» и выбрав инструмент «Текст», создадим надпись на кнопке. В параметрах инструмента указываем шрифт «Sans Bold» и размер шрифта «50»
Затем, зажав на клавиатуре «Ctrl+Alt» с помощью мыши, выроним текст относительно кнопки
Теперь, воспользуемся фильтром «Фильтры — Свет и тень — Отбрасываемая тень», для создания небольшой тени от надписи. В настройках указываем следующие значения
и нажимаем ОК. Кнопка готова. Осталось только откадрировать и сохранить.
Шаг 11. Отключаем видимость нижнего слоя «Фон» через пиктограму «глаза» напротив слоя и переходим на следующий слой
Далее воспользуемся командой «Изображение — Автокадрировать изображение»
Сохраняем кнопку в формате PNG, через меню «Фаил — Экспортировать в.». Более подробно про сохранение изображений, вы можете почитать вот в этом уроке.
Дополнительные материалы:
На этом усё, до новых встреч. Как вам новый урок?
С уваженеим, Антон Лапшин!
Кнопка то готова а как сделать что бы она переносила на другую страницу
Вставляете на блог ( сайт , не знаю что-там у вас)следующий код