Преглед на урок

Как да си направим зашеметяващо Vista меню

Как да си направим зашеметяващо Vista меню




Този урок ще ни покаже как можем да си направим полупрозрачно Виста меню използвайки градиенти, сенки и замъглявания за да постигнем оптимално модерен ефект на дизайна.

Стъпка 1

Отворете нов документ с размери 600x335px. Започнете с показване на рулера (View>Rulers) след това създайте 2 водещи линии подобно на показаното по-долу. Поставете едната на позиция 285px, а другата на 310px в долната част на документа.

Натиснете върху изображението за цял размер


Стъпка 2

Изберете Rectangle (U) и начертайте правоъгълник в долното оградено от водачите поле, което ще наречем „долен бар”. След това отворете Effects Menu на слоя. Задайте Gradient Overlay с цветове от #000000 към #0c0c0c на 90 градуса завъртане.
Сега направете втори правоъгълник в горното поле оградено от водачите, което ще наречем „горен бар”. Отново отворете менюто с ефектите на слоя и изберете Gradient Overlay с цветове от #35393d към #787b7d и 90 градуса завъртане. Изберете и двата направени правоъгълника и задайте параметър на слоевете Opacity to 90%. Когато по-късно зададем цвят на най-долния основен слой, ще видите ефекта който ще се получи.



Спъка 3

Следващата стъпка е да добавим осветяване на менюто като използваме Line Tool (U). Изберете Line Tool и променете ширината й на 2px. Начертайте линия в горната част на горния бар като използвате цвят #9fa2a4. Сега начертайте друга линия като предната с цвят #484b4d. Поставете я под първата линия. Групирайте двете линии с другите слоеве от баровете и наречете групата „Бар”. По този начин сме завършили основната част от менюто.



Стъпка 4

Сега нашето меню е завършено и можем да започнем изграждането на разделите между имената на бутоните ни. Изберете Line Tool отново и оставете размера да е 2px. Начертайте вертикална къса линия в централната част на бара – би трябвало да е 1 пиксел под горните две линии на бара и да опира леко края на горния бар. По този начин след това няма да ни се наложи да позиционираме линиите допълнително. Отворете менюто с ефектите за слоя и изберете Gradient Overlay на 90 градуса завъртане и цветове от #676a6d към #4d6672.
Начертайте друга вертикална линия започвайки от лек допир на горния край на долния бар и стигайки на 1 пиксел от края му, точно под вертикалната линия на горния бар. Тази втора линия й задайте цвят #43474b. Групирайте двете вертикални линии в група и я наречете „Разделител”.



Стъпка 5

Изберете Type Tool (T) и сменете цвета на бял (#FFFFFF). Шрифта, който аз избрах е Segoe UI защото това е шрифта, който Виста използва по подразбиране. Но както и да е не е задължително да използвате същият шрифт, а можете да използвате който вие си изберете по ваш вкус. Изберете 11pt височина на шрифта и напишете своите имена за бутоните. Групирайте ги в група и я наречете „Линкове”.
Сега копирайте групата „Разделител” и поставете линиите между имената на бутоните. Трябва да получите нещо подобно на това, което съм показал.

Натиснете върху изображението за цял размер


Стъпка 6

Сега основната част на менюто ни е завършена, така че можем да пристъпим към добавяне на основен фон на нашето меню по ваш избор. Това, което аз избрах е картинка с трева, но може да бъде каквото вие си пожелаете или изображение или просто цвят.

Натиснете върху изображението за цял размер


Копирайте изображението което сте избрали. Бъдете сигурни, че сте го поставили най-отдолу под всички останали слоеве и групи, които направихме досега. Забележете, че лекия транспарент, който преди това дадохме на нашите барове сега се забелязва много добре.

Натиснете върху изображението за цял размер


Стъпка 7

С тази стъпка ще направим замъглен правоъгълник със заоблени краища където ще сложим основния текст на менюто. Този ефект е отбелязан за техниката на Виста като много добър. Той привлича вниманието ни към мястото и текста, като все още успяваме да виждаме красивата картина на заден фон.
Преди всичко дублирайте фона. Този слой няма да остане за постоянно, защото ние просто ще изрежем част от него. Изберете Rounded Rectangle Tool (U) и нарисувайте правоъгълник в лявата долна част на копирания фон като левия му край излиза извън документа ни. Това означава, че ще имаме правоъгълник само с два заоблени края.
Изберете Magic Wand Tool (W) и селектирайте правоъгълника и изтрийте всичко като запазите външните линии. Сега копирайте и изрежете тази част от фона и го поставете на нов слой. Изтрийте вече копието на фона, защото то не ни е нужно.
Задайте параметри на новонаправения от нас правоъгълник - Gaussian Blur - 5px (Filter>Blur>Gaussian Blur). След това добавете Drop Shadow, както е показано по-долу.

Натиснете върху изображението за цял размер


Стъпка 8

Сега напишете своя текст в замъгления правоъгълник. Използвайте същият шрифт, както при бутоните, напишете името на сайта и неговия слоган. Изберете някоя част от текста и го направете болд, а другата част нека остане нормална, също добавете Drop Shadow и Gradient. Това ще даде модерен облик на вашия текст.

Натиснете върху изображението за цял размер


Стъпка 9

Това е допълнителна стъпка, която не е задължително да ползвате, но която би дала допълнителне ефект на вашето меню. Начертайте широка елипса с инструмента Ellipse (U) която обхваша част измежду раделителите, като е показано на снимката долу. Сменете цвета на #5c94c5 и добавете Gaussian blur с 10px. Сега нашата елипса трябва да стане картинка (raster), и използвайки Marquee Tool (M) можете да изтриете излишната част от новия слой (това ще направим като селектираме пространството прилежащо на бутона дадем обратна селекция и изтрием, по този начин ще остане само необходимото от новия слой. Поставете го под групата с надписите на бутоните – бел.пр).

Натиснете върху изображението за цял размер


Завършек

Това меню лесно може да се нареже и да се обърне във функционален хедър за вашия сайт с рол-овер бутони.

Това е!

Натиснете върху изображението за цял размер


За вас преведе: Juli

Източник

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: maqpen4eva

Коментари

genon

урока е супер има съвсем леки несъответсвия но това да ни е проблема... много ефктен и не много труден браво на Juli

KoKauH_2008

каде е effects menu

Хамстер

kade e effects menu

tony®

Аз бях до стъпка 7, как ли не се дзверих но не можах да го направя тоя ръб , изобщо не ми е ясна тази стъпка.Ако някой я е направил нека да обясни, мерси:)

sina-dbb

не ме впечетлява

tony®

Ето това не мога да го направя:
"Изберете Magic Wand Tool (W) и селектирайте правоъгълника и изтрийте всичко като запазите външните линии. Сега копирайте и изрежете тази част от фона и го поставете на нов слой. Изтрийте вече копието на фона, защото то не ни е нужно."
Как да ги запазя тези външни линии?!

tony®

направих го егати тъпото
..да беше обяснено по човешки...нямаше да изгубя 1 час с глупости, а с фотошоп се занимавам от години...

CrAsH

Tony, sina-dbb като не ви харесва направете пък вие някой урок....прота такива...

rx3mer

T0k прекалено голямо си го направил

ivankooo

Как мога да ги ползвам бутоните в сайта???

suankun

някой ако може да обясни каде е Effects menu
Благодаря предварително
Поздрави

maqpen4eva

Layer - Layer Style - Blending Options

ivankooo

Как мога да направя менюто да ми работи?

Sunny Devil

Това е вълшебен урок...Играя си от един час, но си струва. ;d
http://prikachi.com/users/sunny_97/163p.jpg

getcrunk

Много як урок (еффецт меню-то е blending options) ;)

Alore

Горе-долу го направих, ама каквото и да правя blur-натия правоъгълник не става :\

Co0l_b0y

Стъпка 7 не става...като направя този правоъгълник и после не ми дава да цъкам с Magic Wand Tool! Изписва ми следното: Could not use the magic wand because the target is fill layer...Моля помогнете! :(

hris-blade

За стъпка 7 ползваите този урок :http://www.photoshop-bg.com/index.php?nav=read_tut&id=1974
В една от стапките в него е описано как се прави въпросната обратна селекция ;) Успех

ITHD

Много обърнак урок .. Лесен е но не е обяснен както трябва!

simeon10

Няма ли да е по-лесно ако преинсталираме комповете.Поне за мен ще е. :D :D

MirkO_95

как да си го сложа ?

John Front

Simeon10 това е теоята логика....браво.

Урочето е супер!А менюто ми мяза на това от Joomla.

maqpen4eva

Стъпка 7 е направена по безсмислено сложен начин от автора, но дори и така, подробно е обяснена, докато преводача е пропуснал доста съществени подробности, без които няма как да се получи на хората без опит. Ще я обясня по много по-прост начин:

1/ Дублирате слоя със снимката (Ctrl+J)
Добавяте Filter - Blur - Gaussian Blur с радиус около 5 рх

http://i38.tinypic.com/2i74ff4.jpg


2/ Вземате Rounded Rectangle Tool (U) с радиус 20рх, в режим на работа Paths.
Намаляте мащаба на документа (Ctrl-), така че да виждате зоната извън него и чертаете път:

http://i34.tinypic.com/9kpd79.jpg


3/ Натскате Ctrl+Enter и пътя ще се преобразува в селекция.
Натискате Ctrl+J и копирате селекцията в нов слой.
Изключвате копието с размазаната снимка или направо го изтривате и добавяте Drop Shadow:

http://i35.tinypic.com/264gmfk.jpg

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.