Анатомия стеклянных кнопок

Этот раздел предназначен для уроков, посвященных кнопочкам, юзербарам, баннерам, шапкам и т.д., в общем, всему, что может помочь в создании и дизайне сайтов.
Аватара пользователя
VanGog
Сообщения: 87
Зарегистрирован: 05 апр 2010, 09:54
Репутация: 0
Откуда: Южно-Сахалинск

Анатомия стеклянных кнопок

Сообщение VanGog » 08 апр 2010, 03:21

Как сделать стеклянные кнопки в paint.net

В этом уроке попытаюсь раскрыть базовые типы стеклянных кнопок, а как результат, и свойства стекла, в целом. Откровенно говоря, я без стеснений слямзил этот урок из методик работы на CorelDraw. Но, поскольку paint.net и CorelDraw кардинально отличающиеся друг от друга редакторы, то и технология создания кнопочек будет сильно отличаться.
В конце этого урока вы научитесь создавать вот такие красивые кнопки:

Изображение

Кнопка №1

1. Создаем изображение 200х200 и заливаем все это дело темно зеленым цветом.
2. Внутри создаем квадратное выделение, только на пару пикселей со всех сторон меньше. В палитре слоев основным цветом ставим белый с прозрачностью 55, дополнительный цвет – абсолютно прозрачный. Выбираем радиальный градиент и протягиваем так, как показано на этом рисунке:

Изображение Изображение

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

Изображение Изображение

4. Не снимая выделения создаем новый слой. В палитре основным цветом выставляем белый, дополнительным – прозрачный. Берем линейный градиент и протягиваем вот таким вот образом:

Изображение

5. Теперь слой с кривой можно удалить. Но не снимайте пока еще выделение. На слое с градиентом применить эффект «Selection» -> «Feather selection». Самостоятельно регулируйте значение. Мне хватило и двух, хотя кому-то может хватить и одного.

6. Теперь уже можно убрать выделение, но необходимо создать другое, квадратное как в шаге 2. Жмем «Обратить выделение» и delit.

Изображение

7. Теперь добавляем символ. Создаем слой выше фонового, но ниже слоя с градиентом. С помощью шрифта Webdings (на клаве "I" 115 шрифт) изображаем вот такой символ и применяем гауссово размытии со значением 20:

Изображение

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

Изображение

Кнопка №2

1. Повторяем шаг 1ый и 2ой шаг из примера предыдущей кнопки.
2. Не снимая выделения создаем новый слой. В палитре основным цветом выставляем белый, дополнительным – прозрачный. Берем линейный градиент и протягиваем вот таким вот образом:

Изображение

3. Так же, как и в предыдущий раз добавляем символ. Кнопка готова.

Изображение

Это, пожалуй, самая простая стеклянная кнопка. Сделать ее прямоугольной еще проще, чем предыдущую. Берем инструмент перемещения выделенной области и просто сжимаем ее:

Изображение

Кнопка №3

1. Опять же повторяем первый и второй шаги из кнопки №1.
2. Создаем новый слой и выделяем верхнюю половину квадрата.
3. Берем радиальный градиент все с теми же настройками и протягиваем так:

Изображение

4. Снова добавляем символ. Вот и еще одну кнопочку нарисовали:

Изображение

Кнопка №4

1. Я думаю, вы уже догадались, какие шаги нужно повторить.
2. На новом слое с помощью овала, создаем вот такое выделение:

Изображение

Жмем «обратить выделение» и с помощью перемещения выделенной области делаем отступ от краев (как в предыдущих примерах). Заливаем это безобразие линейным градиентом:

Изображение

3. Не снимая выделения, применяем эффект «Selection» -> «Feather selection», значение 2. И добавляем надпись. Готово:

Изображение

Кнопка №5

По сути, эта кнопка уже нарисована в одном из уроков, но повторение – мать учения, как говориться.

1. Повторяем все те же два шага.
2. На новом слое с помощью овала делаем следующее выделение:

Изображение

3. И заливаем линейным градиентом (потом, если понадобиться, применяем «Feather selection»):

Изображение

4. Символ и готово:

Изображение

Кнопка №6

Осталось только круглую кнопку сделать )

1. Здесь все похоже и на предыдущие уроки, разница лишь только в том, что мы рисуем не четырехугольник, а круг. Создаем изображение 200х200, и с нажатой клавишей Shift вписываем ровный круг и заливаем радиальным градиентом от центра (основной цвет наш зеленый, дополнительный – прозрачный):

Изображение

2. Не снимая выделения, применяем эффект «Feather selection» со значение 5 (чтобы сгладить края). Затем можно применить гауссово размытие на 2. Обращаем выделение и удаляем внешний фон, что за шаром (это делается для того, чтобы при публикации кнопки она не «светилась» квадратным значком с кругом внутри).

3. Снова выделяем круг и создаем новый слой. Уменьшаем область выделения и центруем ее внутри круга. Вот так:

Изображение

4. Опять берем радиальный градиент, вот только дополнительным цветом выставляем светло зеленый (4AB235):

Изображение

5. Снимаем выделение и применяем гауссово размытие (значение 2). Опять выделяем шарик, уменьшаем область выделения и центруем:

Изображение

6. Берем линейный градиент (основной цвет белый, дополнительный – прозрачный) и протягиваем вот так:

Изображение

7. Для сглаживания применяем эффект «Круговое размытие», значения по умолчанию.

8. Добавляем символ и круглая кнопка готова!

Изображение

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

Re: Анатомия стеклянных кнопок

Сообщение xmario » 12 апр 2010, 18:00

Классный урок! :good:

Немного изменил технологию кнопки №6 из урока, вот что получилось - светофор :Yahoo!:

Изображение

Аватара пользователя
Lynx
Сообщения: 5678
Зарегистрирован: 04 май 2010, 21:44
Репутация: 34
Пол: Женский
Откуда: г. Сочи

Re: Анатомия стеклянных кнопок

Сообщение Lynx » 14 май 2010, 01:52

Урок полезный и даже может кому-то нужный, но в программе в плагинах "узоры есть хороший эффект Buttohs, который делает все тоже самое и за 3 мин, причем в самых разнообразных формах. Может с текстом, а может и без. Картинку тоже свою можно вставить и все это за 3 сек.

Изображение
"Чтобы уметь рисовать - надо рисовать" John Howe

Аватара пользователя
VanGog
Сообщения: 87
Зарегистрирован: 05 апр 2010, 09:54
Репутация: 0
Откуда: Южно-Сахалинск

Re: Анатомия стеклянных кнопок

Сообщение VanGog » 14 май 2010, 01:54

Здорово, где этот плагин? Может кинешь ссылку?
Когда я этот урок делал, ясное дело, такого плагина не было

Аватара пользователя
Lynx
Сообщения: 5678
Зарегистрирован: 04 май 2010, 21:44
Репутация: 34
Пол: Женский
Откуда: г. Сочи

Re: Анатомия стеклянных кнопок

Сообщение Lynx » 14 май 2010, 01:57

Уже не помню где я его раскопала, он был еще в старой программе где 280 плагинов, но сейчас посмотрю у себя, если он отдельный то вышлю архивом на почту. Пиши в ЛС, если нет то точно в одном из части что тут есть где 200 плагов.
"Чтобы уметь рисовать - надо рисовать" John Howe

Аватара пользователя
Lynx
Сообщения: 5678
Зарегистрирован: 04 май 2010, 21:44
Репутация: 34
Пол: Женский
Откуда: г. Сочи

Re: Анатомия стеклянных кнопок

Сообщение Lynx » 14 май 2010, 02:07

Он есть отдельным файликом, как его переслать или вставить сюда? Вот этого не знаю.
"Чтобы уметь рисовать - надо рисовать" John Howe

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

Re: Анатомия стеклянных кнопок

Сообщение xmario » 14 май 2010, 10:00

Нашел и разметил описание эффекта paint.net "Стеклянные кнопки для сайта" в разделе форума, посвященного эффектам paint.net

Наличие эффекта paint.net для создания стеклянных кнопок для сайта совсем не отменяет актуальности этого урока потому, что здесь рассмотрены разные способы создания стеклянных эффектов самому, так что кнопки это просто пример или частный случай. Хотя, несомненно, именно кнопки создавать эффектом проще.

Файлы к сообщениям на форме можно прикреплять очень просто, ниже окна сообщения есть специальные закладки, на них кроме файлов, можно еще создавать опросы и все такое. Правда, файлы поддерживаются небольшие, но для эффектов более чем достаточно.

Аватара пользователя
xmario
Администратор
Сообщения: 3402
Зарегистрирован: 03 апр 2010, 20:12
Репутация: 45
Пол: Мужской
Откуда: Москва

Маленькая хитрость

Сообщение xmario » 14 май 2010, 21:38

Маленькая хитрость на тему создания прозрачных и полупрозрачных изображений.
"Прозрачными" рисунки становятся когда сквозь них, становится что-нибудь видно. Поэтому делать "прозрачные" изображения на пустом фоне не очень правильно, могут не понять. что вы задумали. Предположим, есть такое изображение.

Изображение

Совершенно очевидно, что автор предполагал прозрачность и все правильно сделал. Но на белом фоне это не убедительно. А вот если так?

Изображение

Мне кажется стало лучше.. :oops: Правда у меня нет исходного изображения, т.к. оригинал взят из интернет. Я просто изменил прозрачность.

А если бы у меня было исходное изображение... а если выделить само изображение и применить к фону под ним эффект paint.net "выпуклость" или эффект paint.net "Alpha Displacement plugin", то.................... :crazy: :crazy: :crazy:

Аватара пользователя
Lynx
Сообщения: 5678
Зарегистрирован: 04 май 2010, 21:44
Репутация: 34
Пол: Женский
Откуда: г. Сочи

Re: Анатомия стеклянных кнопок

Сообщение Lynx » 14 май 2010, 21:56

Здорово. Вот что может получится из обычной куртки взятой из простого каталога одежды :D Спасибо за посказки. Действительно глупо пытаться изобразить прозрачность, если ничего не просвечивается. Как я сама не догадалась :cry:

Изображение
"Чтобы уметь рисовать - надо рисовать" John Howe

Аватара пользователя
Lynx
Сообщения: 5678
Зарегистрирован: 04 май 2010, 21:44
Репутация: 34
Пол: Женский
Откуда: г. Сочи

Re: Анатомия стеклянных кнопок

Сообщение Lynx » 24 май 2010, 13:46

Симпатичный стеклянный шарик . Напомнил мне что с градиентами у меня все еще очень плохо обстоят дела.Не умею я их чувствовать и стеклянные шары все равно корявые.
"Чтобы уметь рисовать - надо рисовать" John Howe

Ответить

Вернуться в «Уроки для web-дизайна»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 0 гостей