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

Уеб дизайн на тема магическа нощ

Уеб дизайн на тема магическа нощ




Преди да започнем нека да разгледаме картината която ще правим в този урок:

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


1. Е нека да започваме.Първо знайте че това не е урок за начинаещи затова ще пропусна обясненията по лесните неща.Както и да е,всеки напреднал може да направи това,което ще направим в урока.Второ много е трудно да получите същия резултат като моя и ще трябва да използвате въображението си и добрия си вкус за да получите нещо близко до моето ил идори и по-добро.И трето,дизайнът е направен от обединяване на приложения в Wordpress темплейт,но можеш бързо да го конвертираш в тема за друга система или дори за обичаен сайт.

Да се залавяме за работа тогава. Създайте нов документ с размери 960 pixels на 1000 pixels и RGB. Сложете няколко линии за да начертаете страните и задайте Image > Canvas Size. По този начин вашият дизайн се превърна в голям документ и ще можете да видите как ще изглежда на широкоекранна резолюция. Сложете и една линия за да маркирате височината на шапката (хедъра)

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


2. Сложете едина линия в средата на документа и го използвайте за да оцветите фона в тъмно син градиент(#0D2B53 - #010D1F).Също така добавяме и малко линии за стени на главната страница от ляво и от дясно.

Много е вероятно да сменим височината на документа затова направете New Fill Layer (#010D1F) под нашия "Background" layer.

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


3. Ще използваме тази снимка вместо класическия Clouds filter.
Поставете снимката с облаците на нов леяр и го кръстете "Clouds". Сменете Blending Mode на Overlay. Отидете на Layer > Layer Mask > Hide all и нарисувайте Radial Gradient от бяло към черно (#FFFFFF - #000000), отивайки от средата на върха към средата на дъното. Променете "Clouds" Levels малко за да станат по-тъмни:

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


4. След това поставете тази снимка на която е сниман испански бряг на нов леяр с име "skyline." После направете нова корекция Adjustment Layer > Channel Mixer...И изберете черно и бяло със син филтър(RGB). А сега за да се получи ефектът. Задържайки Option key цъкнете между Channel Mixer layer и "skyline" layer. Накрая променете Blending Mode на "skyline" на Overlay.

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


5. Задайте Layer Mask > Reveal all на "skyline" layer. След това с голяма черна мека четка скрийте краищата на картинката. След това с Grunge brush за целта автора е използвал този пакет особенно четки 250 и 181 и направете краищата малко по необичайни.

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


6. След това напишете заглавието (автора е използвал "Magic" с шрифт Scriptina font). След това задайте следните настройки Outer Glow (#9EB6D0) и Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, to #FFFFFF). Също така сега е добър момент да организираме дизайна в папки. Сложете всички леяри в папка "Background", а всички текстови файлове в папка "Logo."

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


7. Сега да добавим малко звезди към дизайна ни може да използвате четката star Brush от този пакет с четки. После с четка 550 от пакета направете бели звезди на нов леяр в нова папка с име "Stars". Забележете че слагам най-голямата звезда над точката на i-то. После направете gradient използвайки тези цветове:(#3A8FEF, #FFFFFF, and #66C9FC) към "Stars1" layer.

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


8. После с четка 615 от пакета със звезди добавете още звезди към нов леяр с име "Stars2", после с мека гумичка изтрийте звездите над сградите. После добавете Outer Glow (#8AB2FF) към"Stars2".

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


9.Добавете още звезди към "Stars 2" layer по цялата ширина на дизайна после с Eraser tool изтрийте части от звездите. Накрая добавете Gradient Overlay ефект към "Stars2" layer, използвайки тези 4 цвята: #6AB1D1, #FFFFFF, #94CFED, и #FFFFFF.

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


10. Сега свалете тези четки със звезди и ги дръжте под ръка, защото ще ги използваме няколко пъти в този урок. Вземете 65 px четка (авторът е използвал номер 148) и нарисувайте бяла звезда на нов леяр точно над точката на i-то. След това задайте Outer Glow (#00BCF9) на звездата и я направете по-ярка.

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


11. Дублирайте "Magic" селектирайте текста и напишете димата "Night" на мястото където искате да е. След това сложете Outer Glow на бяло и сложете Gradient overlay с тези три цвята (#F9DA5B, #FEAE00, and #FFD403). Вижте картината отдолу за да видите точните настройки.

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


12. Нека да добавим малко облаци към нашата нощ.Свалете тези четки на облаци. След това изберете четка номер 2464 и променете размера и на 960px. Задайте foreground color #234B7F и с четката сложете един облак на нов леяр с име "cloud1". За да запазим леярите организирани ще сложим облаците в една папка в папката "Background". Разтегнете облака малко.

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


13. Приложете малко Dodge и Burn върху облака. Забележете че автора е изсветлил частта при логото и затъмнил дъното на облака. Променете "cloud1" Opacity на 50%.

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


14. Добавете още един облак на нов леяр с име "cloud2". Може да използвате всеки облак който желаете, но използвайте този foreground цвят: #5F83A5. Затъмнете дъното на облака за да подчертаем светлосянката.

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


15. Повторете предишната стъпка но върху друг облак с този цвят:#36638C и го сложете върху "cloud1". Разтегнете го и после изсветлете или затъмнете облака ако е нужно.

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


16. Вземете голяма мека четка и изтрийте долната част на "cloud1".

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


17. Това обикновено е критична стъпка. Ще направим фона на главния панел. Никога не трябва да заабравяте, че го правите за интернет пространството. Използвайки Rectangle tool начертайте правоъгълник с цвят (#0A1D37) на нов леяр под папката "Clouds". Забелязвате ли, че моят правоъгълник е в линиите?! После изберете леяра с правоъгълника и идете на Layer > Layer Mask > Reveal all... и нарисувайте бял към черен градиент което ще добави хубав ефект на върха на правоъгълника. Сложете една линия под мястото където се разменят цветовете в триъгълника, това ще ни помогне да направим дизайна HTML + CSS. Забележете че от линията до дъното на background color-а трябва да е обикновен.

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


18. Сега поставете нов правоъгълник като Sidebar background, помогнете си отново с линия, използвайки цвета #091525. След това задайте Layer Mask леко подобен на този от миналата стъпка.

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


19. На този етап имаме готов фон на главния хедър. Ще сложа уникална RSS икона на хедъра. Копирайте тази картина с пълна луна и я поставете на нов леяр с име "moon-rss."
След това променете Hue / Saturation настройките за да направите луната малко по-жълта и добавете Inner и Outer Glow (вижте настройките на долната картина).

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


20. Добавете малко облаче с цвят #7997B3 на нов леяр над луната. След това с голяма мека четка изтрийте някой части от облака.

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


21. Добавете класическа RSS икона с този цвят (#DCA30B) в нов леяр над луната,но зад леяра с облаците. След това добавете Gradient Overlay, Outer Glow и Drop Shadow (настройките ще видите на долната картина). Накрая добавете някаква звезда над RSS иконата (виж стъпка 10).

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


22. Поставете тази картинка на нов леяр. Ще я използваме като меню за нашия сайт. Оригиналната картинка е малко смалена, а на нас ще ни трябва малко по-голяма (уголемявате я и на ляво и на дясно). След това назъбете малко картинката с Flag warp.

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


23. Затъмнете някой части от картинката с Dodge tool за да се засили назъбения ефект.

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


24. За да не седи толкова изкуствено сложете Gradient Overlay (#045F96 and #FBF4BD), както и Pattern Overlay (настройките може да видите на картинката отдолу)

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


25. Сега добавете малко Drop Shadow към свитъка. Може да използвате Drop Shadow или да направите това което аз направих, да дублирате леяра и Hue / Saturation на Lightening -100. Задайте Blur на тъмното копие и я изкривете с Free Transform tool за да я направите необикновенна.

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


26. После добавете облак над свитъка, задайте Dodge, Burn и изтрийте точно както е показано в стъпка 15. След това напишете текста на страниците с шрифт Georgia - Italic. Използвайте цвят #0B1827 за стандартните линкове и цвят #211808 за натиснатия линк. Също добавете малко звезди както и черта под натиснатия линк. Може да видите структурата на леярите отдолу.

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


27. Като финален детайл на навигационния бар, направете нов леяр над свитъка и използвайки четка като заря направете черта все едно е с водна четка (вижте картината отдолу). Направете го няколко пъти, но използвайки различни цветове. Също така намалете прозрачността на звездите на около 40%.

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


28. Добавете RSS текста. Аз съм използвал 10 px Aria с жълто (#F2C90D) и бяло (#FFFFFF). Не забравяйте да настроите Anti-aliasing Method на None, защото повечето браузъри (без IE7 и Safari) предоставят текста без никакво anti-aliasing.

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


29. Като допълнителен детайл добавете тази снимка на красив балон. Премахнете фона на балона и го поставете някъде под логото. Добавете Color Overlay (#1F416E - Blending Mode: Overlay) на балона за да си пасне с другите цветове. Също така може да затъмните лявата страна на балона.

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


30. След това с четка номер 615 от звездните четки виж стъпка 8, добавете още звезди под балона и свитъка. Също така добавям връзка на балона като рисувам бяла curved линия с 3 px solid brush. Не забравяйте да изтриете част от звездите.

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


31. Време е да добавим мнение. Първо добавете заглавие и дата на мнението на нов леяр с име "Post". Вижте картината отодлу за да видите настройките. Също така добавям и една малка звезда преди датата за визуален детайл.

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


32. Нека да добавим повече информация в папката"Post", след като главната страница ще има няколко такива поста.
Ще добавим и картинка от ляво(200 px by 200 px с 1px Stroke effect) и светъл текст от дясно на нея. Също така ще сложим и информация колко отговора е събрала съответната публикация горе в дясно. За полето с коментарите ще направим нова папка с име "Comments" и ще добавим малко фонче с малко облаче и малки звездички. Просто повторете някоя от предишните стъпки, от тези, когато правихме хедъра, но в по-малък вариант. После напишете номера на коментарите,а отдолу напишете Comments.

После добавяме тагове под поста и слагаме малка звезда от дясно на тази линия. Ако искате добавете малко звезди за фон на поста. Накрая направете разделение на поста с този цвят:(#1D324F).

След това дублирайте папката "Post" за да направите няколко такива поста(само сменете текстовете). Много е възможно да трябва да увеличим големината,за да го извършим използваме Crop tool или Image > Canvas size точно както в първата стъпка. Когато увеличите височината на документа увеличете главния фон и sidebar фона.

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


33. Нека да поработим над sidebar-а. Сега ще добавим търсачка. Направете нова папка с име "Sidebar" и вътре в нея създайте нова папка с име "Search". Направете облак в папката и го затъмнете и изсветлете за да изглежда като на долната снимка. След това с Rounded Rectangle Tool направете четириъгълник върху облака. Задайте a 1px Inside Stroke ефект (#697372) към четириъгълника и сменете Fill на 50%.

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


34. Добавете малко обели звезди над облака, запомнете изтрийте всички ненужни звезди. След това дублирайте намалете и задайте Edit > Flip horizontal на "balloon" леяра от стъпка29. Сложете го в папката "Search". Също така използвайки шрифта Georgia Italic и хубаво жълто (#D5A934). След това добавете инструкциите за търсене и бутон Go. Може да видите настройките на текстовете на долната картинка. Като финален детайл добавете една ярка звезда след текста Search.

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


35. Добавете и текст,заглавие и линкове,и добавете всяко в отделна папка. Също добавете и ярка звезда във всяка папка и преди всяко заглавие. Сложете и звезда на натиснатия линк. Не забравяйте да си помогнете като използвате линии.

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


36. Наближаваме финала.Нека да сложим и дъно за sidebar-а. Първо затъмнете малко дъното на фона му с мека четка на неговата маска на леяра. Нарисувайте няколко облака, затъмнете ги и ги осветлете (с Dodge и Burn). Уверете се че облаците не нарушават картината или не развалят ширината и. После добавете още една звезда зад облаците и дублирайте балона още веднъж.Аз ги запазвам в папка с име "Sidebar Footer."

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


37. Накрая ще направим и най-долната част. Първо изтриваме най-долната част наглавният контейнер със голяма мека четка. След това рисуваме облаци по цялата долна част на дизайна. Ще комбинирам големи тъмно сини облаци(#0B1C38) и малки светло сини (#223E63) облаци, както на долната картинка. Запомнете че ще използваме тези облаци за фон, затова недейте да сливате дори и линийка между главното и фуутъра. Сложете всички леяри свързани с фуутъра в нова папка "Footer."

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


38. Затъмнете най-светлите облаци с Burn инструмента. След това използвайки четка 615 направете една бяла звезда.Направете по светли звезди с друга четка в този случаи четка 656. Накрая изтрийте някой от звездите с голяма мека четка.

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


Резултата:

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


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




Урокът е добавен от: aXel_sora
Източник: http://psd.tutsplus.com/

Коментари

pecko.f

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

shooky

Красив дизайн, нооо пак много изображения много нещо. Ако това трябва да се направи на отделни изображения, навързани с код и недай си боже да се върже ДБ към тях сайта ще зарежда над 10-15 секунди за средно бърз интернет... 10 секунди за изображенията 2 да дадем за инфото(защото компютърът ще се натовари от предходните изображения) и оставяме няколко милисекунди за БД направо ужас... Иначе е красито но само до снимка според мен :)

djeni_breaking_dawn

еххххее страхотен урок. Като имам повече време ще се опитам да го направя. ;)

Verbatim9302

Ехеее мога да ви кажа че моето стана мега яко ... цялото това старание което положих си заслужаваше

E:/Untitled-5.jpg

Fanster

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

http://a.imageshack.us/img714/3276/magicschoolcopy.jpg

chp999

Извинявам се за въпроса но след като съм завършила визията как мога да го превърна в html формат.... Знам ,че звучи глупаво но с питане до Цариград се стига...Така ,че ако някой знае Благодаря предварително!

Sfolter

@chp999, за да превърнеш дизайна в сайт, което означава да го кодираш, ще ти трябват познания поне по HTML и CSS.

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

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