Сделайте профессиональный дизайн блестящих кнопок
Страница 1 из 1
Сделайте профессиональный дизайн блестящих кнопок
С помощью этого простого урока по Photoshop вы сможете научиться профессионально создавать блестящие кнопки. Профессионалы, которые зарабатывают созданием шаблонов для веб-сайтов, смогут использовать эти эффекты и заработать кучу денег!
Приблизительное время выполнения: 10 минут
Шаг 1. Подготовка холста/фона
Сначала создайте документ любого размера или откройте шаблон вебсайта, над которым вы работаете. Я использовал маленький документ размером 400х340, потому что я не собираюсь делать шаблон польностью. Я добавил светло-серый градиент к фону.
Шаг 2. Создаем фигуру
Выберите Rectangular Marquee Tool и выделите область с выранной настройкой Set-Sized размером приблизительно 140 x 140 пикселей где-нибудь на документе.
Шаг 3. Заливка фигуры
При активном выделении убедитесь, что вы находитесь на новом слое и залейте его радиальным градиентом, используя цвета на ваш выбор.
Я использовал цвета #3e94d4 и #336fc1, приятных голубых пастельных тонов. Затем я применил белые (#ffffff) штрихи к главному слою.
Шаг 4. Добавление подсветки
Начните с выбора главного слоя (зажмите Ctrl) и нажмите на иконку слоя.
Сожмите выделение приблизительно на 4-5 пикселей, зайдя в Select > Modify > Contract и введя кол-во в пикселях.
Теперь, выберите Gradient Tool, затем перетащите белый на прозрачный градиент сверху вниз, приблизительно так:
У вас должно получиться следующее:
Теперь выберите Pen Tool и сделайте овальное выделение, как показано внизу.
С все ещё выбранным Pen Tool, кликните на траекторию (path) и затем кликните Make Selection, используя опции по умолчанию.
Создайте ещё один слой и снова с помощью Gradient Tool создайте градиент от белого к прозрачному сверху донизу вашей кнопки, так, чтобы у вас получилось что-то подобное:
Измените layer mode этого слоя на Soft Light, затем снизьте непрозрачность, если нужно. Мне это не понадобилось.
Шаг 5. Финальные штрихи
Для того, чтобы придать работе завершенный вид, я начал с добавления полупрозрачной иконки в левом углу кнопки. (заметка: иконки, которые я использовал в этом уроке, либо с TemplateMonster, либо с Web Design Library)
Добавьте вашей кнопке текст для того, чтобы пользователи знали, для чего кнопка. Настройки шрифта, которые я использовал, были Tahoma, 11 pt, цвет #ffffff, вот с этим drop shadow layer style.
Затем я продублировал все слои, переместил их наверх так, что между ними образовалось расстояние приблизительно в 10 пикселей, затем изменил цвета градиента. Чтобы изменить цвета, просто отредактируйте градиент для первого слоя, затем отредактируйте цвет drop shadow для слоя с текстом.
Вот и все.
Приблизительное время выполнения: 10 минут
Шаг 1. Подготовка холста/фона
Сначала создайте документ любого размера или откройте шаблон вебсайта, над которым вы работаете. Я использовал маленький документ размером 400х340, потому что я не собираюсь делать шаблон польностью. Я добавил светло-серый градиент к фону.
Шаг 2. Создаем фигуру
Выберите Rectangular Marquee Tool и выделите область с выранной настройкой Set-Sized размером приблизительно 140 x 140 пикселей где-нибудь на документе.
Шаг 3. Заливка фигуры
При активном выделении убедитесь, что вы находитесь на новом слое и залейте его радиальным градиентом, используя цвета на ваш выбор.
Я использовал цвета #3e94d4 и #336fc1, приятных голубых пастельных тонов. Затем я применил белые (#ffffff) штрихи к главному слою.
Шаг 4. Добавление подсветки
Начните с выбора главного слоя (зажмите Ctrl) и нажмите на иконку слоя.
Сожмите выделение приблизительно на 4-5 пикселей, зайдя в Select > Modify > Contract и введя кол-во в пикселях.
Теперь, выберите Gradient Tool, затем перетащите белый на прозрачный градиент сверху вниз, приблизительно так:
У вас должно получиться следующее:
Теперь выберите Pen Tool и сделайте овальное выделение, как показано внизу.
С все ещё выбранным Pen Tool, кликните на траекторию (path) и затем кликните Make Selection, используя опции по умолчанию.
Создайте ещё один слой и снова с помощью Gradient Tool создайте градиент от белого к прозрачному сверху донизу вашей кнопки, так, чтобы у вас получилось что-то подобное:
Измените layer mode этого слоя на Soft Light, затем снизьте непрозрачность, если нужно. Мне это не понадобилось.
Шаг 5. Финальные штрихи
Для того, чтобы придать работе завершенный вид, я начал с добавления полупрозрачной иконки в левом углу кнопки. (заметка: иконки, которые я использовал в этом уроке, либо с TemplateMonster, либо с Web Design Library)
Добавьте вашей кнопке текст для того, чтобы пользователи знали, для чего кнопка. Настройки шрифта, которые я использовал, были Tahoma, 11 pt, цвет #ffffff, вот с этим drop shadow layer style.
Затем я продублировал все слои, переместил их наверх так, что между ними образовалось расстояние приблизительно в 10 пикселей, затем изменил цвета градиента. Чтобы изменить цвета, просто отредактируйте градиент для первого слоя, затем отредактируйте цвет drop shadow для слоя с текстом.
Вот и все.
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
|
|