Как нарисовать стеклянную прозрачную кнопку для сайта в Paint.NET

Уроки Paint.NET

Этот урок посвящен ответу на вопрос, как сделать стеклянную прозрачную кнопку для сайта, используя Paint.NET. Для рисования стеклянной прозрачной кнопки будем использовать только стандартные возможности и стандартные эффекты Paint.NET. Дополнительные эффекты к Paint.NET в этом уроке нам не понадобятся.

Этап 1. Рисуем фон кнопки

Для начала создадим в Paint.NET новое изображение. Мы использовали размеры изображения 250 на 50 пикселей. И заполним фоновый слой изображения с помощью инструмента "заливка" выбранным цветом. Цвет для создания кнопки можно выбрать любой, который подходит по стилю для вашего сайта. Мы выбрали цвет 007F0E - цвет влюбленной жабы. Теперь при помощи инструмента выделения области прямоугольной формы в Paint.NET выделим область размером примерно треть изображения кнопки снизу и заполним его другим цветом, полученным из основного выбранного цвета установкой параметра яркость в 100. Расположение указанного параметра в палитре цветов Paint.NET приведено на рисунке ниже.

Урок Paint.NET

Теперь, отменив выделение, применим к изображению стандартный эффект Paint.NET "Гауссово размытие" с радиусом размытия 10. Эффект "Гауссово размытие" является стандартным эффектом Paint.NET и доступен из меню "Эффекты" - "Размытие" - "Гауссово размытие…". Полученный результат можно увидеть на рисунке выше.

Этап 2. Создадим эффект светового блика

Урок Paint.NET

Добавим для изображения новый прозрачный слой. На этом слое выделим область справа, равную примерно двум третям изображения и заполним ее при помощи инструмента "заливка" белым цветом. Теперь, отменив выделение, используем для слоя с белым прямоугольником опять эффект Paint.NET "Гауссово размытие". Радиус размытия в этот раз сделаем больше, например, 100.

Теперь создадим новый слой выше всех существующих, на котором при помощи инструмента "линия или кривая" нарисуем кривую линию, примерно так, как показано на рисунке слева. Цвет линии не имеет значения, мы выбрали красный цвет для наглядности. Данная линия нужна нам для быстрого выделения области, которая находится под ней. Выбрать эту область теперь легко при помощи инструмента "волшебная палочка".

Урок Paint.NET

После того как область будет выделена, нужно переключиться на слой с бывшим белым прямоугольником и удалить то, что попадает в область выделения. Сделать это можно при помощи клавиши Del. Теперь видимость слоя с красной линией можно отключить или вообще удалить его.

Теперь имеет смысл сделать края блика плавными. Для этого используем стандартный эффект Paint.NET "в движении" и применим его к слою с бывшим белым прямоугольником. Эффект доступен в меню "Эффекты" - "Размытие" - "В движении…". Этот эффект имеет два параметра - "угол", значение этого параметра мы установили 0, и "расстояние", который мы установили 20.

Теперь необходимо немного "сжать" белый блик. Для этого выделим все изображение на слое с белым и при помощи инструмента перемещения выделенной области в Paint.NET изменим размер, что бы получилось примерно так, как на втором снизу примере на рисунке выше. Последний пример на этом рисунке получен уменьшением прозрачности этого слоя до 150.

Этап 3. Края кнопки

Урок Paint.NET

Теперь немного скруглим края кнопки. Для этого снова создадим новый служебный слой выше всех существующих, на котором при помощи инструмента "прямоугольник с закругленными углами" нарисуем контур, как на рисунке слева. Цвет линии опять не имеет значения. Данный контур нужен нам опять для быстрого выделения области, которая находится вне него. Выбирать область будем снова при помощи инструмента "волшебная палочка". После выделения области вне контура необходимо удалить ее содержимое со слоев с зеленым фоном и слоя с белым. Причем для создания большего эффекта стеклянной кнопки мы удалили с зеленого фона все, что попало в область вне контура, не включая сам контур. А с белого слоя удалили все, что попало в область вне контура и включая сам контур. После удаления областей слой с контуром можно отключить или удалить.

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

Вернуться к разделу уроки Paint.NET на этом сайте.

На тему дизайна и вебдизайна в paint.net на нашем форуме можно найти довольно много уроков. Так, например, созданию стеклянных кнопок на форуме посвящен специальный урок - анатомия стеклянных кнопок, который можно считать классикой рисования стеклянных объектов. В этом уроке описаны шесть различных способов и типов расположения световых бликов на примере "стеклянных" кнопок. Кстати, для автоматического рисования стеклянных кнопок в paint.net есть даже отдельный дополнительный эффект paint.net - кнопки. А еще на тему вебдизайна на нашем форуме paint.net есть уроки о том, как сделать юзербар в paint.net или как сделать баннер для сайта в paint.net. Это тоже может оказаться интересным.

добавить на Яндекс Rambler's Top100