Кнопка.

Этот раздел предназначен для уроков, посвященных кнопочкам, юзербарам, баннерам, шапкам и т.д., в общем, всему, что может помочь в создании и дизайне сайтов.
Ответить
Аватара пользователя
Walk
Сообщения: 574
Зарегистрирован: 12 авг 2010, 15:30
Репутация: 1
Откуда: омск
Контактная информация:

Кнопка.

Сообщение Walk » 27 дек 2010, 07:35

В конце у вас должно получится что-то вроде этого:
Изображение
1.) Выбираем размер и форму нашей кнопки.
2.) Ставим на доп. и основн. цвет один и тотже цвет.
3.) Делаем основной цвет светлее дополнительного.
4.) Выделяем подготовленную фигурку кнопки и начинаем вести градиент с низу посередине, заканчивая на верхнем краю. (Также посередине).
5.) Делаем блик на новом слое белым цветом, размер такой же как и у кнопки, блик должен быть расположен ровно на кнопке. После делим блик напополам.(удалив нижнюю половинку.)
6.) Регулируем прозрачность блика.
7.) Можно добавить любую обводку.

AB-web
Сообщения: 563
Зарегистрирован: 20 авг 2010, 13:53
Репутация: 3
Пол: Мужской
Откуда: Павлово

Re: Кнопка.

Сообщение AB-web » 27 дек 2010, 10:59

Изображение
А вот эта кнопка в действии:тут она


P.S Не по уроку)
Последний раз редактировалось AB-web 27 дек 2010, 11:42, всего редактировалось 1 раз.

Аватара пользователя
Walk
Сообщения: 574
Зарегистрирован: 12 авг 2010, 15:30
Репутация: 1
Откуда: омск
Контактная информация:

Re: Кнопка.

Сообщение Walk » 27 дек 2010, 11:33

Могу и по этой кнопке урок сделать :-D , прям сюда.

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

Re: Кнопка.

Сообщение xmario » 27 дек 2010, 16:50

Давай, вторая тоже очень классная кнопка!

Аватара пользователя
Walk
Сообщения: 574
Зарегистрирован: 12 авг 2010, 15:30
Репутация: 1
Откуда: омск
Контактная информация:

Re: Кнопка.

Сообщение Walk » 29 дек 2010, 19:15

Хотя тут тоже самое, только есть слой на котором таже голубая кнопка, только перевёрнутая, увеличенная и чёрно белая.
Да и мне кажется что саму кнопку нужно перевернуть и блик сделать такой же как и на серой обводке.
Вот так:
Изображение
З.Ы. но у AB-web кнопка тоже симпатичная!

PrIzRaK
Сообщения: 89
Зарегистрирован: 10 янв 2011, 19:48
Репутация: 0
Пол: Мужской
Контактная информация:

Re: Кнопка.

Сообщение PrIzRaK » 12 янв 2011, 12:18

Изображение

AB-web
Сообщения: 563
Зарегистрирован: 20 авг 2010, 13:53
Репутация: 3
Пол: Мужской
Откуда: Павлово

Re: Кнопка.

Сообщение AB-web » 14 янв 2011, 16:18

Живая кнопка.

Жаль что на сайте нельзя использовать вот такой ВВ-код: [video]адрес урл[/video] :(
Вот какую кнопку я сделал: сдесь она (понаводите указателем) (кнопу на чёрном придётся сначала кликнуть-активировать, но это можно исправить, просто я поленился)

Вот как я её делал:
1)Создал документ 400*300, залил чёрным, посередине кистью поставил круг.
Изображение
2)Копировал слой, свойства слоя выставил на добавление, провёл градиент в режиме прозрачности так:
Изображение
Слои можно объединить.
3)Создал новый слой выше, нарисовал круг, провёл градиент в реж. прозр. (если создать этот блик с помощью выделения и обычного градиента, то даже после зачистки края будет не очень)
Изображение
4)Настраиваю прозрачность слоя с бликом.
Изображение
5)На новом слое можно нарисовать нужный символ (например можно эту кнопку сделать кнопкой проигрывания ролика на сайте, тогда символом будет треугольник). Я ещё добавил тень.
Изображение
6)Настраюваю прозрачность.
Изображение
7)Русую лучи. Для этого ставлю по середине кисть 40-ого размера.
Изображение
8 )Применяю эффект Dents Classic, а можно применить стандартный - вмятины.
Изображение
9)Применяю размытие-приближение пару раз, далее градинт правой кн. мыши от середины в режиме прозрачности:
Изображение
10)Провожу тот же градиент, только левой кн. мыши:
Изображение
11)Делаю лучи тоньше и реже с помощью "добавления или уменшения шума":
Изображение
Теперь сохраняю каждый слой отдельно в пнг (фон не нужно)
Изображение
Теперь осталось только оживить. Открываем программу поддерживающую реагирование на действие мыши, создание кнопок. Это оживление пришлось бы описывать подробно. Смысл в том, чтобы при наведении указателя на область нашей кнопки, началось воспроизведение отдельного клипа: вращение лучей то в одну, то в другую сторону.

Аватара пользователя
Walk
Сообщения: 574
Зарегистрирован: 12 авг 2010, 15:30
Репутация: 1
Откуда: омск
Контактная информация:

Re: Кнопка.

Сообщение Walk » 14 янв 2011, 16:44

Класс!

Ответить

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

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

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