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

Шаблон за уебсайт в стил "Windows Vista"

Шаблон за уебсайт в стил "Windows Vista"




1/ Създайте нов документ 900x800 рх , запълнете го с цвят #cccccc;

2/ С Rounded Rectangle Tool (U) с настройки: Shape Layers; радиус 10 рх, по-тъмен цвят от фоновия, начертайте правоъгълник:

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


Кликнете на бутончето Subtract from Shape area (-) и отрежете долната част за да се избавите от заоблените краища:

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


3/ Layer -> Layer Style -> Blending Options:

Drop Shadow:



Gradient Overla: # 1d6495 - # 2484c6



Stroke: # 113854





4/ Сега трябва да създадете логото:

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


За създаването му могат да са ви от помощ уроците: Тук и Тук

В цялостен план, дотук резултата трябва да изглежда така:

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


5/ Сега ще ви е необходимо изображение за фон. Ако нямате можете да изтеглите това, което е използвано тук:

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


Копирайте го и го поставете под слоя с логото. С Ctrl+T го оразмерете и наместете така, че в долната част на документа да остане свободно пространство:

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


Добавете 1 рх рамка към слоя:



6/ Дублирайте слоя със синята лента, обърнете го Edit -> Trnasform -> Flip Vertikal.
Преместете го в долната част под снимката. С Ctrl+T намалете широчината.

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


Можете да създадете отражение и да напишете текст:

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


В цялостен план дотук:

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


7/ С Rounded Rectangle Tool (U) с настройки: Shape Layers; радиус 5 рх нарисувайте бутон, под слоя със синята лента, за да се вижда само долната заоблена част на бутона;

Добавете стил:
(настройките са същите както при лентата, така, че можете само да ги копирате и да ги поставите, а после да изключите ефекта Drop Shadow:







Намалете Opacity на 70%

Сега трябва да размножите бутона. Растеризирайте Shape Layer-a с бутона.
После задръжте клавиште Catr+Alt и натиснете "Т". Бутона ще се огради в рамка за трансформация.
Използвайте клавиша със стрелката "надясно" за да го преместите на втора позиция. Натиснете Enter.
В панела Layers, ще имате още един слой с бутон.
Сега задръжте Shift+Ctrl+Alt и натиснете "Т" толкова пъти, колкото още бутона искате да получите:

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


Ако не успеете да ги разпределите съвсем точно, използвайте Move Tool с отметка на Auto-Select и стрелките от клавиетурата.

Слейте слоевете с бутоните. Създайте нов слой над новополучения. Вземете Elliptical marquee tool (М)
Начертайте елипсовидна селекция както е на следващата картинка и я запълнете с бяло

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


Активирайте селекцията на бутоните с Ctrl+клик в кутийката на слоя им;
Обърнете селекцията: Select -> Inverse (Shift+Ctrl+I ), натиснете Delete, за да изтриете излишното:
Сложете Opacity на 30%

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


8/ На същия принцип създайте 2 форми, които да наподобават умален модел на горната и долната синя лента:



С Rectangular Мarquee Тool начертайте правоъгълна селекция, който да ги обединява.
На нов слой запълнете селекцията с бяло.
Добавете стил:





Намалете Opacity на 60%



По същия начин създайте още подобни прозорци и ги разположете по някаква схема, каквато вие решите.
Можете да размиете малко фона и прозорците с Filter -> Blur -> Guassian blur.
Остана да напишете текста.

Това е всичко, ето и финалния резултат:

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


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




Урокът е добавен от: maqpen4eva
Източник: http://demiart.ru/

Коментари

j0k3ra

Много добър урок :)

ShadowSoul

Тфа задължително ще го пробвам ;)

DJ Valantine

интересно

ruff4o

ееееееее тва е супер бе браво на тоя които го е направил :)

vietnom

Може би прекалих малко с червеното,но мисля,че горе долу става.Урока е страшен!
[code]

http://img122.imageshack.us/img122/6779/0357al3.th.jpg

^^Miloto0o{}^^

Много готино се получава! Обяснено е супер! Браво!

genon

Резултата е отличен!! Браво на maqpen4eva !! vietnom и твоето се е получило супер

genon

Ето го и моя опит http://prikachi.com/users/genon/40T.jpg

rexton

Супер е урока. Скоро ще дам линк как съм го кодирал с валиден CSS и HTML

Stefax

Добре де сега като го напраих сичко тва как да го сеивна като html.... ??

mazarat

а ако знаете как да го сложа този сайт в хит.бг примерно ше станели? пишете на ЛС!

mazarat

а ако знаете как да го сложа този сайт в хит.бг примерно ше станели? пишете на ЛС!

smithfield

Урока е готин. Евала. Като го видях ми стана интересно дали ще мога да го съживя и реално да направя сайт с такъв дизайн.
Stefax, тва няма как да го save-неш като html. Трябва да си го напишеш на html и css, а специално за такъв сайт е доста тегаво това, но аз сега малко по малко в свободното си време ще се опитам да го направя и ако се получи ще постна линк...

n73

как да си направя активни бутоните смисал като си ги сложа в сайта като сложа стрелката на тях да посветляват или да се отваря меню

boianim

как се запълва с цвят

atacata

Ето и моят опит

Текст на линка...

MaLaNoChE

Много яко :) това ще го направя още днес ;)

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

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