Форум paint.net на русском языке

Кнопка.

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

Кнопка.

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

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

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
Сообщения: 573
Зарегистрирован: 12 авг 2010, 15:30
Репутация: 0
Откуда: омск
Контактная информация:

Re: Кнопка.

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

Могу и по этой кнопке урок сделать :-D , прям сюда.
    Изображение
          Рисую изображения на заказ!
        Цена от 20 до 60 руб. обращаться в ЛС

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

Re: Кнопка.

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

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

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

Re: Кнопка.

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

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

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
Сообщения: 573
Зарегистрирован: 12 авг 2010, 15:30
Репутация: 0
Откуда: омск
Контактная информация:

Re: Кнопка.

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

Класс!
    Изображение
          Рисую изображения на заказ!
        Цена от 20 до 60 руб. обращаться в ЛС


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

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

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

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

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