Глянцевая навигационная панель
В этом уроке вы научитесь создавать прелестную глянцевую навигационную панель
Приблизительное время выполнения: 10 минут
Шаг 1
Сначала откройте новый документ любого размера, которого захотите (зависит от того, насколько большим будет ваш сайт и залейте его цветом #1A1A1A.
Затем выделите область, в которой будет находиться ваша панель.
Шаг 2
Теперь залейте её любым цветом и затем зайдите в Blending Options и поставьте следующие настройки:
У вас должно выйти что-то подобное:
Шаг 3
Но мне всё ещё не нравится, как оно выглядит, так что следующим нашим шагом будет добавление
Inner Glow:
Шаг 4
Уже получше. Теперь выделите область немного меньше половины вашей навигационной панели и залейте её #FFFFFF. Поставьте Opacity на 40% и blending status слоя на Overlay.
Шаг 5
Теперь мы создадим кнопку. Выделите небольшую область и залейте её любым цветом, каким захотите. Расположите этот слой под белым слоем. Примените следующие настройки к слою вашей кнопки:
У вас должно получиться что-то подобное этому:
Шаг 6
Теперь давайте добавим текст. Наберите что-нибудь на черной стороне вашей панели шрифтом Arial-Regular-15 pt-Strong и поставьте следующие настройки:
Ваш текст должен выглядеть так:
Вы можете добавить ещё кнопки:
Шаг 7
Теперь давайте добавим текст зеленой кнопке. Используйте тот же шрифт и стиль шрифта, измените лишь опции. Поставьте такие:
Если вы делали то же, что и я, вот что у вас должно было получиться:
Надеюсь вам понравился урок.
Источник: http://coregfx.org/tutorials/GlossyNav/
Смотрите также:
Ух, нравятся мне такие менюшки.
Июль 9th, 2008
очень стильно )) +1
Июль 10th, 2008
Да, менюхи просто супер, но вставлять их ппц, для меня сложно
За урок спасибо
Июль 11th, 2008
Kibal4iw самый простой (но не самый красивый) способ сделать нарезку в ИмеджРеади и потом вставить в страницу
Июль 11th, 2008
Аниматор, зачем ИмеджРеди, им уже никто не пользуется.. можно например сделать заранее полососку на «километр» и спокойно резать ее потом.. или составить МенюБар из маленьких кусочков, а потом их объединить и все.
Июль 11th, 2008
так безспорно что методов куча, про имеджРеади написал как вариант, при котором и знания хтмл не очень надо.
Июль 11th, 2008
я вот согласен с МрАнарки ИмэйджРэди действительно никто не пользуется, во первых он нарезает с погрешностью(хотя это можно исправить при помощи кода хтмл, но все же не так удачно) и код хтмл он пишет не правильно(пишет тот который плохо действует на валидность). это мое мнение
Июль 14th, 2008
хз, хоть и давно не использую ИмеджРеади, но как помню чет у меня небыло какихто погрешностей при порезке и вобще привел простейший пример как свое творение в код всунуть, не надо читать между поверхностно, ато мля все такие умные, плюнул и в кусты, пример своего варианта представляйте, критиковать большого ума не надо.
Кстати а что там за валидность может быть в таблицах или ИмеджРеади уже и CSS создает?
Июль 14th, 2008
tgn rfrbt ;t vs evyst e; rnj , ujdjhbk pf recns b ghbvths (расшифровка на клавиатуре)
Июль 15th, 2008
ты гений кретива ksvzsmos sgs szv fjszjzb ietcus kchskclv soizuvv oxc si odspa
Июль 15th, 2008
Давай-те не будем ссорится. Просто взглянем правде в глаза. Сама Adobe призла, что ImageReady не очень хороший продукт и отказалась от его развития, ведь, если мне не изменяет память, уже с 9-го фотошопа нету имэджа в комплекте. Лично я не резал с имэджом никогда и не знаю, как там у него и что. Если ты Аниматор режешь с помощью имэджа, то пожалйуста, никто не против, возможно ты избегал погрешностей. А что насчет верстания страницы без знаний хтмл, то тут уж ты не прав. Если ты верстаешь страницу, то ты должен знать хтмл и как потом работать с этой страницей на уровне хтмл, иначе зачем тебе нужна статичная страница с парой ОФИГЕННО красивых картинок, которая не несет никакой полезной информации.
Июль 15th, 2008
Я не спорю что основы хтмл надо знать конечно, а имеджРеади позволяет не заморачиваться на таблицы, я к примеру не знаю как верстать теблицами, по сути оно мне и не надо, так как есть CSS
По поводу информативности картинок не всегда текст несет больше информации, к примеру когда едишь по дороге и видешь картинки красный круг с белым кирпичем, то она несет много информации, разве не так?
по поводу того что имеджРеади выкинули с Фотошопа то это всетаки не так, его поместили в фотошоп, в КС3 появилась панелька для анимации, прилипание к обьекту и тд.
Июль 15th, 2008
кстати у многих западных дизайнеров вход на сайт состоит из кнопки входа и двух картинок флажков, типа американски и немецкий.
Июль 15th, 2008
Согласен, что текст не всегда несет больше инфы, чем картинки. =) Но не стоит забывать, что чаще всего дизайнеры делают свои сайты вопреки каким-то требованиям и стандартам, вообщем их сайты являются противопоставлением тех требований, которые трактуются в веб дизайне. А вот насчет насчет анимации я погорячился, действительно в КС3 есть панелька с анимацией =) пардон
Июль 15th, 2008
все очень интересно и подробно описано.
спасибо.
Ноябрь 18th, 2008
Спасибо большое
Май 30th, 2009
во что у меня получилось:
(http://i061.radikal.ru/0906/04/81edf3db7e1b.jpg)
Июнь 23rd, 2009
А как установить на ucoz?
Август 26th, 2009
ПРОСТО УЖАСНО — ужасно лаконично просто и понянно, спасибо автор, давайте есчё
…из простого состоит великое
Март 27th, 2010