Меню сайту у стилі Windows Vista
Відкрийте Фотошоп і створіть документ розміром 600х335px. По краях полотна увімкніть лінійки, пройшовши в View > Rulers (Перегляд - Лінійки), і додайте дві горизонтальні напрямні, як показано нижче. Першу розташуйте на рівні 285 пікселів, другу на 310 пікселів.
Інструментом Прямокутник (U) створіть фігуру прямокутної форми нижче другої напрямної по всій довжині полотна. Дайте цьому шару назву lower bar. Подвійним клацанням мишкою по ньому відкрийте вікно стилів і додайте Накладення градієнта. Встановіть кольори від чорного #000000 до темного відтінку сірого #0c0c0c, кут 90 градусів.
Між першою та другою напрямними створіть ще один прямокутник, назвіть його upper bar. Також застосуйте до нього стиль Накладання градієнта, встановивши кольори від #35393D і #787B7D, кут 90 градусів. У двох шарів із прямокутниками зменште непрозорість до 90%. В результаті, коли ми додамо фон, трохи помітна прозорість додасть стильного ефекту.
Далі ми додамо до меню відблиск, використовуючи інструмент Лінія (U). Виберіть його та на панелі параметрів змініть товщину лінії на 2 пікселі. По всій довжині верхнього краю меню проведіть лінію кольором #9FA2A4 та назвіть шар lower highlight. Трохи вище додайте ще одну лінію кольором #484B4D, перейменуйте шар на upper highlight. Усі шари, які стосуються меню, згрупуйте, назвавши папку bar. На цьому етапі ми завершили роботу над основою меню.
Після того, як ми створили панель меню, переходимо до створення роздільників. Інструментом Лінія в два пікселі намалюйте вертикальну лінію від центру меню вгору, не доходячи до відблиску кілька пікселів. До цієї смужки застосуйте стиль накладання градієнта, встановивши кольори від #676A6D до #4D6672, кут 90 градусів. Отриманому шару дайтеназва upper divider.
На новому шарі малюйте ще одну вертикальну лінію, але цього разу від центру меню, не доводячи до нижнього краю меню кілька пікселів. Цю частину роздільника просто заповніть кольором #43474B та назвіть lower divider. Шари з роздільником перемістіть до нової групи divider. Продублюйте ще чотири розділювачі та розмістіть їх рівномірно.
Відкрийте його у Фотошоп, перемістіть на основний документ нижче за всі шари і назвіть Background. Зверніть увагу, фон проступає крізь прозорість меню, що створює непоганий ефект.
Далі ми створюватимемо напівпрозорий об'ємний прямокутник із заокругленими кутами, на якому можна розташувати назву сайту. Даний прийом досить часто застосовують у Vista. В результаті увага фокусується на назві сайту, плавно переходячи на заднє тло.
Для початку зробіть копію фону, з неї ми візьмемо фрагмент, щоб створити виступаючу розмиту панельку. Створіть фігуру прямокутної форми Прямокутником із округленими кутами, початок його має починатися поза полотна, щоб у результаті вийшла панель з двома кутами. Переконайтеся, що при створенні параметрів у вас був встановлений контур.
Виділіть прямокутник, натиснувши Ctrl+клік по мініатюрці шару з фігурою. Видаліть шар із фігурою та виріжте виділений фрагмент із копії фонового шару. Копія фонового шару нам більше не знадобиться, тому видаліть її.
Створіть новий шар blur, фрагмент фону, що вирізає, вставте в нього. Застосуйте до нього Розмиття Гауссом, перейшовши в меню Filter > Blur (Фільтр - Розмиття), з радіусом розмиття 5px. Потім застосуйте до blur стиль Тінь.
На створеній панелі напишіть назву сайту чи інший текст. Шрифт використовуйте такий самий (Segoe UI),що й у розділів меню. Верхній рядок тексту я виділив жирним і до всього тексту застосував стилі Тінь та Накладення градієнта.
Нам залишилося створити підсвічування для кнопки меню при наведенні на неї мишкою. Утворіть великий еліпс, який перекриває область між роздільниками меню сайту. Колір задайте #5C94C5 і додайте до нього Розмиття Гауссом, встановивши радіус 10px. Зітріть зайві частини еліпса, які виходять за межі кнопки. Отриманий шар помістіть між шарами, які стосуються панелі меню та тексту.
Елегантне меню у стилі Windows Vista готове! Як бачимо прозорі елементи на яскравому тлі виглядають дуже гармонійно. Таке меню підійде для будь-якого сайту чи блогу.