Уроки Веб и приложения Зинаида Лукьянова 15 июня 2007

Кнопка для вашего блога

Сложность урока: Средний

В этом уроке Photoshop у вас получится вот такое стильное меню для блога.

Давайте начнем с создания нового документа, размеры 400*200 px.
Залейте его темно-серым цветом #7d7d7d.

Теперь, используя Rounded Rectangle Tool, нарисуйте такую форму любого цвета.

Примените к форме следующие настройки:

Вот, что у нас получилось:

Теперь, выделите форму: зажмите клавишу Сtrl и кликните по окошке слоя в панеле слоев (F7):


Нарисуйте вот такой градиент как показано ниже - называется от белого к прозрачному:

Возьмите инструмент (текст) с такими настройками и напишите, например, “about me” ("обо мне") и разместите его по центру кнопки:

Дублируйте слой с кнопкой, и назовите вторую кнопку, например, “pictures” ("картинки"):


Теперь, каким-нибудь способом мы должны показать, что одна из наших кнопок находится в активном состоянии.

Выберите инструмент фигура Custom Shape Tool, возьмите фигуру 10-ти конечной звезды, и нарисуйте эту форму на кнопке:

Примените к звезде вот такие настройки:

Должно получиться вот так:

Чтобы сделать еще лучше, давайте выделим звезду (снова нажмите Ctrl+клик по окошку со слоем), создайте новый слой , и примените к звездочке такой же бело-прозрачный градиент как мы делали с кнопкой.

Звездочка будет выступать в роли индикатора активности кнопки.

Таким образом вы можете создать столько кнопок, сколько захотите!

:)

До встречи на www.creativo.one!

Источник: www.megatutorials.blogspot.com

51 тыс. 22
Печать Жалоба

Комментарии 22

Да классный урок!!! Спасибочки!!

Спасибо за урок

Спасибо за урок

Cпасибо за урок!

Полезный урок, спасибо.

вот моя работа и спасибо за прекрасный урок

Спасибо, симпатично получается)

Спасибо=)

Спасибо за простой и интересный урок!)

все разобрался спасибо)))

а у меня не получается шаг с градиентом пишет что нельзя применить =( растрирую , делаю и не видно =( помогите что не так делаю(

Администратор
Вопросы по уроку задавайте на форуме. В конце каждого урока есть ссылка "Задать вопрос на форуме".

С каждым уроком растёт мастерство помаленьку потихоньку

Спасибо за урок)

Красивые кнопки.Спасибо.

С каждым уроком растёт мастерство помаленьку потихоньку :>

Спасибо за урок!

Спасибо - отличный урок!

Еще 30
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее