01.Inkscape уроки: рисуем кнопку в стиле web 2.0В этом уроке inkscape мы нарисуем кнопку в стиле web 2.0. Кнопки такого стиля широко используются и вы, наверняка, видели их на многих сайтах. Ну а если не обращали внимания, то наберите в поиске «кнопка в стиле web 2.0» и увидите, как они выглядят. Все они отличаются цветом, немного формой, но, в принципе, все одинаковы. Я покажу, как рисовать простейшую кнопку такого стиля, ну а вы, после этого урока сможете придумать «свою» кнопку в стиле web 2.0.

Урок inkscape рисуем кнопку

Итак, начинаем рисовать. Для начала нам нужен прямоугольник с закругленными углами. Цвет черный — «black» (000000ff). Создаем прямоугольник шириной 1000рх, и высотой 300рх (1000 х 300рх), и закругляем углы. Я выбрал значения закругления 100рх. Все те же действия, которые я делал в уроке inkscape  «как нарисовать иконку папки», только значения закругления больше.

02.Inkscape уроки: рисуем кнопку в стиле web 2.0

Дублируем (Ctrl+D) основу нашей кнопки, то есть прямоугольник, и немного уменьшаем клавишей (<). Заливаем белым цветом. Белый цвет имеет значение «ffffff».

03.Inkscape уроки: рисуем кнопку в стиле web 2.0

Следующим действием в inkscape мы «отрежем» от белого прямоугольника половину. Собственно белый прямоугольник будет бликом. Для блика нужно создать фигуру как на рисунке ниже. Это прямоугольник, который я оконтурил — меню «Контур — Оконтурить объект» (Ctrl+Shift+С), и после этого вытянул верх.

04.Inkscape уроки: рисуем кнопку в стиле web 2.0

Выполняем логическую операцию «Разность» (Ctrl+ — ).

05.Inkscape уроки: рисуем кнопку в стиле web 2.0

Заливаем линейным градиентом – блик кнопки готов.

06.Inkscape уроки: рисуем кнопку в стиле web 2.0

Всего несколько движений и кнопка в стиле web 2.0 уже имеет вид, хотя еще и без текста. Видели такие кнопки, например, в интернет-магазинах? «Купить», «Заказать», «Найти» — это все кнопки в стиле web 2.0.

Вообщем, давайте добавим текст, чтобы кнопка была полностью готова. Я добавлю, в уроке inkscape, просто слово «text», ну а вы попробуйте набрать какой-то свой текст, или повторяйте за мной. Для того чтобы набрать текст, нужно нажать на большую букву «А» на панели слева.

Слово «text» — цвет шрифта белый, толщина обводки – 5рх, цвет обводки 50% grey (808080ff). Чтобы менять цвет обводки, нужно удерживать клавишу Shift.

07.Inkscape уроки: рисуем кнопку в стиле web 2.0

Когда текст добавлен, остается только нарисовать тень. Я рисую тень в этом уроке inkscape, просто для презентации кнопки, если можно так выразиться.

Чуть ниже создаю овал черного цвета, и заливаю его радиальным градиентом. Центральная точка градиента не прозрачная, а боковые точки прозрачные на 100%. Значение размытия — 7%.

08.Inkscape уроки: рисуем кнопку в стиле web 2.0

Все, кнопка в стиле web 2.0 полностью готова.

Как нарисовать глянцевую кнопку другого стиля, в графическом редакторе Inkscape, можно посмотреть здесь.

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

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.