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

Дизайн на онлайн училище

Дизайн на онлайн училище







1. Направете нов документ , (File > New) , с размери 766x750 px , 72 dpi.

2. Вземете инструмента Rectangle Tool (U) , режим Shape Layers,
произволен цвят и начертайте правоъгълник с размерите на документа.



3. Следват параметрите за този слой. Двоен клик върху този слой ,
и отваряте Blending Options > Gradient Overlay.



Параметри за градиента:





4. Със същият инструмент Rectangle Tool (U) , режим Shape Layers ,
направете централния панел на сайта. Изключете стила и сложете цвят бял.



5. Изберете инструмента Rounded Rectangle Tool (U) , режим Shape Layers , с радиус 2px.
Начертайте бутон за менюто в главната част на сайта.





6. Параметри за този слой:

Blending Options > Gradient Overlay



Параметри за градиента:







7. Изберете отново Rounded Rectangle Tool (U) , с радиус 2px , и изобразете част
от бутона с бял цвят , както е показано по-долу.



Параметри за този слой:
Намалете Fill на 17%
(В панела Layers).





8. Комбинирайте в група двата слоя на бутона. Задръжте Ctrl и маркирайте двата слоя ,
след което натиснете Ctrl+G (Group Layers). Направете пет копия на тази нова група.
Десен бутон върху слоя и изберете Duplicate Group. Сега изберете Free Transform (Ctrl+T) ,
и поставете копията както е показано по - долу. Четирите копия на бутона ги оставете както са си ,
параметрите на петото копие ще го променим.



9. Параметри за променения бутон:
Отидете на Group 1 copy в панела Layers , натиснете върху стрелкичката , за да се покажат двата слоя.

Параметри за първия слой:

Blending Options > Gradient Overlay



Параметри за градиента:




Параметри за втория слой:
Намалете Fill на 49%
Blending mode - поставете на Color Dodge

Blending Options > Gradient Overlay



Параметри за градиента:



10. Вземете инструмента Horizontal Type Tool (T) , и въведете следващите настройки за шрифта на бутоните.





11. Следва да направим логотипа на нашия сайт.
Вземете Rectangle Tool (U) , и направете малък правоъгълник с цвят #00E5E1
Натиснете бутона Alt , и със същия инструмент изтрийте излишната част от правоъгълника
както е показано по-долу.





12. Със същия инструмент изобразете втората част на Логотипа. Направете лента с цвят #00E5E1 ,
вземете Free Transform , завъртете и поставете както е показано. Натиснете Enter
Изберете Rectangle Tool , натиснете бутона Alt , и изтрийте ъгълчетата на лентата.





13. Изберете Horizontal Type Tool (T) , и направете настройки за шрифта.
Напишете името на сайта.





14. Вземете инструмента Rounded Rectangle Tool (U) , режим Shape Layers ,
радиус 10px , и начертайте банер.



Параметри за този слой:

Blending Options > Gradient Overlay



Параметри за градиента:



Blending Options > Stroke





15. Сега с инструмента Ellipse Tool (U) , бял цвят , начертайте елипса в долната част на банера.



Параметри за този слой:
Намалете Fill на 11%



16. Направете нов слой. Изберете инструмента Line Tool (U) , широчина 1px , бял цвят ,
и изобразете мрежа от кръстосани линий , като натискате Shift бутона.





Параметри за този слой:
Намалете Fill на 20%
Blending Mode - сложете на Soft Light



17. Вземете Custom Shape Tool (U) , и изберете звездата от таблицата.





Параметри за този слой:

Blending Options > Drop Shadow



Blending Options > Gradient Overlay



Параметри за градиента:



Blending Options > Stroke





18. Изберете Horizontal Type Tool (T) , въведете следващите настройки и напишете
лозунга върху направения банер.





19. Със същия инструмент напишете заглавието на страницата , въведете следващите настройки.





20. Следват настройките за надписа върху хедъра:
(Lorem ipsum dolor sit amet)



Настройки за думата consequat:



Настройки за надписа под заглавието на страницата:



Настройки за останалата част от текста:



Настройки за линковете:



Настройки за текста с оранжев цвят:





21. Сега ще създадем панела за влизане в сайта. Вземете инструмента Rectangle Tool (U) ,
режим Shape Layers , и направете правоъгълник както е показано по-долу.



Параметри за този слой:

Blending Options > Gradient Overlay



Параметри за градиента:



Blending Options > Stroke





22. Направете две копия на последния слой , и изберете Free Transform.
Променете размера на копията и ги разположете както е показано по-долу.



23. Сега ще създадем прозорци предназначени за информация.
Изберете Rectangle Tool (U) , с радиус 4px , бял цвят.



Параметри за този слой:

Blending Options > Stroke





24. Направете копие на последния слой , изберете отновоFree Transform
и поставете копието в следващия панел , както е показано по-долу.



25. Изберете инструмента Rounded Rectangle Tool (U) , радиус 5px , и начертайте бутон.



Параметри за този слой:

Blending Options > Gradient Overlay



Параметри за градиента:



Blending Options > Stroke





26. Направете копие на слоя с бутона. Изберете Free Transform , и поставете копието в другия панел.



27. Вземете Custom Shape Tool (U) , изберете звездата от таблицата.
Изобразете я върху последния панел на сайта.



28. Параметри за този слой:

Blending Options > Drop Shadow



Blending Options > Gradient Overlay



Параметри за градиента:



Blending Options > Stroke



Параметри за градиента:





29. Направете копие на слоя със звездата , вземете инструмента Delete Anchor Point Tool ,
и изтрийте излишните точки. С инструмента Convert Point Tool , направете корекций на формата.



Променете параметрите на копирания слой:

Blending Options > Gradient Overlay



Параметри за градиента :





30. Слейте слоевете на звездата. Задръжте Ctrl и маркирайте двата слоя.
Натиснете десен бутон и изберете Merge Layers.
Сега кликнете върху малката икона в панела Layers - Add Layer mask,
изберете Brush Tool , с черен цвят и изтрийте частите на звездата ,
който излизат извън панела.





31. Сега поставете надписи на панела и на долния банер.

Настройки за думата "Client" са:



Настройки за думата "Login" са:



Настройки за думите "Username and Password" са:



Настройки за думите "Lost password and advanced" са:



Настройки за думите "Login and Search" (надписа върху бутоните) са:



Настройки за думата "Lpsum dolor " са:



Настройки за думата "blandit sed " са:





32. Накрая напишете авторското право , с настройките показани по-долу.




Това е крайният резултат:

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


Моят опит по урока:

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


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




Урокът е добавен от: doni
Източник: http://www.adobetutorialz.com/

Коментари

nikolashr

http://prikachi.com/images.php?files/876025S.jpg
Не го довърших щот ме домързя... :D:D:D

boshky_hs

Страхотен урок Браво! : ))
Ето и моя опит от урока..

http://img508.imageshack.us/img508/5308/businessonline.jpg

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

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