Следующий урок посвящен созданию кнопки для сайта в графическом редакторе gimp. Ниже представленный урок покажет вам, как легко с помощью простых инструментов нарисовать качественную кнопку для своего сайта своими руками.
В следующих уроках, мы с вами научимся рисовать более интересные кнопки, а теперь приступим:
Шаг 1. Создаем новое изображение размером шириной 250px и высотой 100px
Шаг 2. Выделяем изображение «Выделение — Всё (Ctrl+A)»
854
Шаг 3. Закругляем края у выделения «Выделение — Закруглить прямоугольник» (настройки по умолчанию)
Шаг 4. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)
Шаг 5. Так как выделение у нас активно, заливаем его цветом ( выбрать по вкусу). Я выбрал зеленый (#009100). Просто перетаскиваем цвет из палитры на рабочую зону (на выделение) не отпуская левую кнопку мыши. Теперь у нас получился зеленый прямоугольник с закругленными краями на белом фоне. Продолжаем:
Шаг 6. Продолжаем работать с активным выделением. Уменьшим его на два пикселя (2 px). Для этого нажимаем по верхнему меню «Выделение — Уменьшить» и вводим нужный параметр — это 2px. И нажимаем «ОК»
Шаг 7. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)
Шаг 8. Заливаем активное выделение градиентной заливкой. Цвет переднего плана немного посветлее нашего базового цвета. У меня это получился светло зеленый с параметром #43c343. Выбираем инструмент «Градиент» с параметром «Основной в прозрачный» и применяем инструмент от верха нашего изображения к низу.
Должно получится как на рисунке:
Шаг 9. Продолжаем работать с активным выделением. Создадим новое прямоугольное выделение в режиме вычитание
Шаг 10. Создаем новый прозрачный слой «Слой-Создать слой» (Shift+Ctrl+N)
Шаг 11. Продолжаем работать с активным выделением. Заливаем активное выделение градиентной заливкой. Цвет переднего плана-Белый. инструмент «Градиент» с параметром «Основной в прозрачный». Применяем инструмент от верха нашего выделения к низу Должно получится так, если вы все сделаете правильно:
Шаг 12. Выделение — Снять (Shift+Ctrl+A)
Шаг 13. Добавим надпись на нашу кнопку с помощью инструмента «Текст» напишем нужное нам слово. В моем случае — это «Download»
На этом урок по рисованию кнопки для сайта в гимпе закончен. Вот мой конечный результат. Здесь я только добавил подложку под надпись:
Как сделать шрифт чтобы была тёмная грань контур или как он там правильно называется.
А как убрать пунктир и белый контур ?
Посмотрите вот этот урок, там я подробно объяснил про кнопку