Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.145.59.244
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Глянцевая навигационная панель
Сообщение оставлено 10.01.2014 в 00:15:30 | Сообщение #1
В этом уроке вы научитесь создавать прелестную глянцевую навигационную панель



Приблизительное время выполнения: 10 минут

Шаг 1
Сначала откройте новый документ любого размера, которого захотите (зависит от того, насколько большим будет ваш сайт и залейте его цветом #1A1A1A.
Затем выделите область, в которой будет находиться ваша панель.



Шаг 2
Теперь залейте её любым цветом и затем зайдите в Blending Options и поставьте следующие настройки:



У вас должно выйти что-то подобное:



Шаг 3
Но мне всё ещё не нравится, как оно выглядит, так что следующим нашим шагом будет добавление
Inner Glow:



Шаг 4
Уже получше. Теперь выделите область немного меньше половины вашей навигационной панели и залейте её #FFFFFF. Поставьте Opacity на 40% и blending status слоя на Overlay.



Шаг 5
Теперь мы создадим кнопку. Выделите небольшую область и залейте её любым цветом, каким захотите. Расположите этот слой под белым слоем. Примените следующие настройки к слою вашей кнопки:







У вас должно получиться что-то подобное этому:



Шаг 6
Теперь давайте добавим текст. Наберите что-нибудь на черной стороне вашей панели шрифтом Arial-Regular-15 pt-Strong и поставьте следующие настройки:



Ваш текст должен выглядеть так:



Вы можете добавить ещё кнопки:



Шаг 7
Теперь давайте добавим текст зеленой кнопке. Используйте тот же шрифт и стиль шрифта, измените лишь опции. Поставьте такие:



Если вы делали то же, что и я, вот что у вас должно было получиться:



Готова.
 
 
   
Сообщение оставлено 10.01.2014 в 00:22:00 | Сообщение #2
Очень хороший урок.
 
 
   
Сообщение оставлено 10.01.2014 в 08:42:30 | Сообщение #3
rooki, молодец, хороший урок.
 
Ученье свет, а не ученье тьма.
Учите господа HTML and CSS
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика