С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Полупрозрачное меню для сайта в Фотошопе

Полупрозрачное меню для сайта в Фотошопе

В этом уроке вы узнаете, как создавать прозрачные элементы пользовательского интерфейса, кнопки, меню в Photoshop. Для успешного выполнения этого урока вам понадобится начальный уровень владения программой Adobe Photoshop.

 

 

Шаг 1 

 

Для того чтобы увидеть эффект прозрачности нужно выбрать фон, который будет иметь несколько цветов, как своего рода градиент или даже картина. Затем возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте форму, которую в последствии разделим на 3 кнопки.

 

 

Шаг 2

 

Теперь перейдите в меню Слои> Стили слоя> Опции наложения (Layer> Layer Style> Blending Options) и снизьте непрозрачность заливки до 0%. Затем перейдите к стилю Внешнее свечение (Outer Glow) и установите небольшое темное свечение вокруг формы. Нажмите кнопку OK.

 


 

Шаг 3

 

Снова возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте кнопку внутри первой фигуры, которую вы сделали ранее. Замаскируйте с правой стороны закругленные края. Затем перейдите в меню Слои> Стили слоя> Наложение градиента (Layer> Layer Style> Gradient Overlay) и добавьте градиент от прозрачного к белому. 

 

 

Шаг 4 

 

Так же добавьте стили Внутреннее свечение (Inner Glow) и Внутренняя тень (Inner Shadow). Настройки смотрите на изображении ниже. Нажмите кнопку OK.

 

 

Шаг 5 

 

Создайте вторую кнопку, затем щёлкните правой кнопкой мыши на слое с предыдущей формой и нажмите Скопировать стиль слоя (Copy Layer Style), а затем щелкните правой кнопкой мыши на слое с новой формой и выберите Вклеить стиль слоя (Paste Layer Style). Теперь у обоих кнопок одни и те же эффекты.

 

 


Шаг 6 

 

Создайте последнюю фигуру кнопки и добавьте те же стили слоя.  Дважды щелкните на слое и перейдите в стиль Наложение градиент (Gradient Overlay) и измените градиент на обратный. Теперь последняя кнопка имеет эффект нажатия.

 

 

Шаг 7 

 

Добавьте текст на кнопки и добавьте небольшую тень, чтобы текст был более читабельным.

 

 

Шаг 8 

 

И последнее, что нужно сделать, это добавить разделители между кнопками. Убедитесь, что они имеют светло-серый цвет.

 

 

Шаг 9 

 

Вот и всё, кнопки меню готовы к использованию!

 

 

Урок по теме - Стильная кнопка для вашего сайта.

 


Автор урока: photoshoptutorials.wizapps.org

 

Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 30.04.2013
  •   Просмотров: 9316
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки