Кнопка в стиле Web 2.0

На основе видеоурока 002 – Кнопка в стиле Web 2.0 « TrueCryer's Blog

В этой статье рассмотрим пример создания кнопки в стиле Web 2.0.

Создайте новый документ. Далее нарисуем круг при помощи инструмента Ellipse, удерживая клавишу Ctrl. Зальём его светло-серым цветом (10% Gray).

Уберём обводку у круга через контекстное меню поля Stroke в нижней части приложения или другим известным вам способом.

Далее откроем диалоговое окно Fill and Stroke при помощи быстрых клавиш Shift+Ctrl+F или через меню Object→Fill and Stroke... (или через кнопку на панели инструментов).

Выберем радиальный градиент для этого круга и отредактируем его. Выберем закладку HSL. Первую опорную точку не трогаем. У второй убираем прозрачность - у шкалы A (Alpha (opacity)) выставляем значение 255. Далее делаем градиент темней, к примеру 88 (шкала Lightness). Общий цвет получился #585858ff.

Возьмем инструмент Gradient (Ctrl+F1 или g).

Удерживая клавишу Ctrl, поднимем первую опорную точку градиента из центра круга до верхней части круга. Далее, также удерживая клавишу Ctrl, перевернем вторую точку градиента на 180 градусов. В нашем случае клавиша Ctrl позволяет точно перемещать и вращать точки градиента. Потом опустим нижнюю точку до нижнего края круга, а левую точку чуть удлиним.

Продублируем круг (Ctrl+D). Выберем полученную копию круга и уменьшим его. Чтобы уменьшение происходило точно по центру с сохранением пропорций, нужно удерживать клавиши Ctrl и Shift.

Снова выберем инструмент Gradient и, удерживая Ctrl, перевернем его ровно на 180 градусов. В итоге мы получили основу для нашей кнопки.

Начинаем работать над кнопкой. Выбираем внутренний круг и продублируем его (Ctrl+D). Пропорционально уменьшим его и зальем синим цветом. Получается неплохо, а?

Создадим эффект выпуклости. Берем инструмент Ellipse и рисуем блик в верхней части синего круга. Удерживая клавишу Shift, можно растянуть эллипс равномерно в стороны.

Зададим ему линейный градиент в диалоговом окне Fill and Stroke. Выберем инструмент Gradient и повернем его вертикально, удерживая клавишу Ctrl.

Сделаем небольшое свечение. Возьмём нижний синий слой и продублируем его (Ctrl+D). Выберем для него радиальный градиент и отредактируем его. Для первой опорной точки в центре установим цвет #7dfaffff. Для второй опорной точки установим значение #17cbff41.

Выбираем инструмент Gradient и опустим его вниз до нижнего края круга. Переместим созданное свечение под слой верхнего блика.

Осталось написать текст на кнопке. Выбираем инструмент Text и печатаем какое-нибудь слово, например, ENTER. Через клавиши Shift+Ctrl+T откроем диалоговое окно настроек шрифтов и текста. Выберите любой понравившийся вам шрифт, например, Courier New и щёлкните кнопку Apply, чтобы применить изменения.

Закроем окно настроек шрифта. Увеличим при необходимости наш подготовленный текст и разместим ее на кнопке.

Изменим цвет текста. Выберем какой-нибудь кислотный цвет #67ff01ff. И сделаем более реалистичной надпись. Продублируем текст. Зальем его черным цветом. Установим значение размытия (Blur) до 2.0 и уберем его под основной текст. Теперь текст стал более красивым.

Снова поднимем на самый верх блик, чтобы текст был под ним.

Остался один последний штрих. Возьмем синий слой. Продублируем его. Уберем у него заливку и добавим толщину обводки Stroke со значением 2. Сделаем размытие Blur со значением 1.0.

Кнопка готова. Осталось выбрать меню File→Document Properties и щелкнуть на кнопке Fit page to selection, чтобы подогнать рисунок под страницу. Вот, собственно говоря, и все.

Мой результат кнопки в SVG без текста (почему-то на странице текст не выводится).

Реклама