dobromirivanov.net

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

layout за фирмен сайт

Първоначално ще постна урока стъпка по стъпка с картинки и текстово описание, а по-късно ще добавя и видео.

За този урок ще имате нужда от следните материали.
1. листа
2. пикселизиран син правоъгълник

И така нека започнем:
1. Създайте нов документ
Създайте нов документ (Ctrl+N) във Photoshop със размери 1200px на 750px. След това с помощта на Gradient Tool (G) пуснете градент, с цветове #792700 и #000000,  от горе надолу.

основен фон - градиент

2. Добавете цветни сияния към фона
Създайте нов слой (Ctrl+Shift+N), изберете Brush Tool (B), изберете максимално мека четка с диаметър приблизително 300px и добавете няколко цвята по ваш избор. Тук сме използвали червено, оранжево и синьо.

Цветно сияние - Brush Tool

3. Добавете текстура към фона си
Сега ще създадем текстура за нашия фон. Отворете във Фотошип листата, които свалихте в началото на урока и ги добавете към вашия документ с Move Tool (V). Дайте десен бутон на слоя с листата и кликнете на Convert to Smart Object. След това отидете на Filter -> Artistic -> Film Grain и въведете стойностите, които са показани на изображението по-долу. После отидете на Filter -> Pixelate -> Mosaic и отново ползвайте настройките по-долу. Променете режима на смесване на слоя (Blending mode) на Difference, и намалете непрозрачността(opacity) на 30%.

Текстура - филтри - Film Grain & Mosaic

4. Направете тъмен фон за контейнера
С Rounded Rectangle Tool (U) с радиус от 3px изчертайте черен закръглен правоъгълник. После с десен бутон върху този слой изберете Blending Options и въведете стойностите за drop shadow, които са показани на изображението по-долу. Намалете непрозрачността(Opacity) на слоя на 70%.

drop shadow - контейнер - фон

5. Групирайте Вашите слоеве
Препоръчително е когато работите в/у по-големи проекти да групирате слоевете си в папки. Това ще направи вашата работа занапред по лека и значително ще помогне в ситуация в която някой друг се наложи да довършва или корегира вашия проект.
Задръжте Ctrl и селектирайте всички слоеве, които създадохте до сега и ги групирайте (Ctrl+G). Именувайте слоя “background”.

групиране

6. Направете още групи
Направете нова група от Layer – > New – > Group и я именувайте “home”. После направете още една група вътре в групата “home” и я именувайте “logo”.

лого

7. Добавете лого и слоган
Докато се намирате в папката “logo” изберете Type Tool (T) и напишете името на фашата фирма или там каквото намерите за добре с цвят #f4f4f4. Дайте десен бутон на слоя с текста и от Blending Options въведете настройките показани на картинката. След това напишете и слогана с цвят #eeeeee

Лого - настройки

8. Бутоните за регистрация и логване
Сега ще направим бутони в горния десен ъгъл на лейаута, които могат да служат както за регистрация така и за контактна форма( След това е подходящо да се кодира с падащо Jquery меню, но това е друга тема). Направете нова група и я именувайте “Sign up | Login”. След това с Rounded Rectangle Tool (U) начертайте форма подобна на тази долу. Кликнете два пъти на слоя с формата (Shape) за да отворите Blending Options и въведете настройките от изображението. Сменете Foreground цвета на бяло (#ffffff) и с Type Tool (T) напишете в/у бутона думите “Sign up | Login”. Намалете непрозрачността (opacity) на текста на 75%

бутини - sign up и login

9. Пуснете синя линия висока 1px
Направете нова група и я кръстете “Navigation”. Направете нов слой (Ctrl+Shift+N), изберете Single Row Marquee Tool (който се намира под Rectangular Marquee Tool [квадрата за селектиране] ) и кликнете веднъж в документа за да създадете селекция с височина от 1px. Запълнете селекцията с цвят #406f94(Edit – > Fill) и изтриите областта, която излиза извън черния правоъгълник с помощта на Rectangular Marquee Tool (M). Настройте непрозрачността на този слой на 40% и го кръстете “Line”.

Синя линия

10. Пуснете един градиент, за фон на навигацията
Направете нов слой, изберете Rectangular Marquee Tool (M) и направете селекция като тази на снимката (пуснете си по някой водач за да ви е по лесно). След това запълнете селекцията с градиент с цветове от #35423e към прозрачност от долу – нагоре. Надиснете Ctrl+D за да махнете селекцията. Сега добавете малко шум от Filter – > Noise – > Add Noise с настройките от снимката. Кръстете слоя “gradient” и го мръднете на 1px разстояние от линията, която направихме в предната стъпка.

градиент - навигация

11. Напишете имената на вашите страници
Изберете Type Tool (T) и напишете имената на странитите, които очаквате да има вашия бъдещ сайт. След това отворете Blending Options на всеки от текстовите слоеве и нанесете настройките от картинката по-долу. Шрифта, който е ползван за конкретния случай се казва Greyscale Basic, но Вие може да си ползвате някой по ваш вкус.

навигационни бутони - текст

12. Направете разделител
Сега ще направим разделител да отделните бутони. Направете нов слой, изберете Single Column Marquee Tool и кликнете веднъж в/у новия слой. След това изберете Rectangular Marquee Tool (M), кликнете на бутончето “Intersect with selection”, което се намира в контекстното меню, и направете селекция, като тази на изображението долу. Запълнете селекцията с бяло и натиснете Ctrl+D, за да деселектирате.

Разделител

13. Цветове на разделителя
Кликнете два пъти на слоя с разделителя за да отворите Blending Options, кликнете на Gradient Overlay и въведете настройките. Именувайте слоя “line 1″.

разделител - градиент1

14. Цветове на разделителя 2
Копирайте слоя с разделителя “Line 1″ (Ctrl+J) и го кръстете “Line 2″. Натиснете V, за да изберете Move Tool и натиснете веднъж дясната стрелка на клавиатурата, за да изместите слоя с 1 пиксел надясно. След това отворете Blending Options на този слой (“Line 2″) и въведете настройките.

разделител - градиент 2

15. Направете слоевете “Line 1″ и “Line 2″ умен обект (Smart Object)
Селектирайте с Ctrl и двата слоя “Line 1″ и “Line 2″. Кликнете с десен бутон на някой от тях и изберете Convert to Smart Object, за да ги направите неразрушими (Smart Object). Кръстете умния слой “separator”.

Умен обект - Smart Object

16. Направете синьо сияние
Направете нов слой под слоя “separator”. Изберете Rectangular Marquee Tool (M) и направете селекция като тази долу и я запълнете с цвят #35423e. Цъкнете с десен бутон на слоя и го превърнете в Smart Object. Сега ще приложим умен филтър (умните филтри са филтри, които са приложени в/у умни обекти – тоест те са променливи). Отидете на Filter – > Blur – > Gaussian Blur и въведете настройките от картинката. Пуснете и малко шум от Filter – > Noice – > Add Noise отново с настройки от долу. Намалете непрозрачността на слоя на 60% и го кръстете “highlight”.

Умни филтри - Smart Filters

17. Направете маска на слоя с разделителя “separator”
Кликнете на слоя “separator” за да го селектирате и след това му сложете маска от Layer – > Layer Mask – > Reveal All. Изберете Gradient Tool (G) и пуснете градиент от черно към прозрачно(или бяло) отгоре – до средата на разделителя.

разделител - fade effect

18. Размножете разделителя
Задръжте Ctrl и кликнете на слоевете “separator” и “highlight” за да ги селектирате. Изберете Move Tool (V), и докато задържате Alt и Shift кликнете и провлачете мишката надясно. Така вие копирате селектираните слоеве, като запазвате подравняването им. Повторете стърката, колкото пъти ви е необходимо.

Размножаване на разделителя

19. Групирайте всички разделители
Селектирайте всички слоеве “separator” и “highlight” и натиснете Ctrl+G за да ги групирате. Именувайте групата “separators”.

Групиране на разделителите

20. Направете Hover бутона
Сега ще направим фона, който ще се появява при преминаване на мишката в/у бутона. Вземете Rectangle Tool (U) и начертайте правоъгълник подомен на моя. Преместете този слой под слоя/слоевете с имената на страниците. Кликнете два пъти на слоя с правоъгълника за да отворите Blending Options и въведете настройките на Gradient Overlay. Именувайте го “Active Menu” и намалете opacity-то на 50%.

Rollover Effect

21. Направете полето за търсачката
Сега създайте нова група (Layer – > New – > Group), кръстете я “search” и я сложете над групата “navigation”. Вземете Rounded Rectangle Tool (U), променете радиуса на 3px и начертайте правоъгълник като този долу с цвят #104f59. Кръстете слоя “text field” и намалете opacity-to на 80%

Поле за търсене

22. Направете бутона “Search”
Начертайте още един малък правоъгълник над първия и го сложете от дясната част както е показано долу.  Пуснете градиент на новата форма от Blending Options с настройките от долу. Накрая кликнете с десен бутон на новия правоъгълник и изберете Create Clipping Mask, за да изрежете всичко което е ненужно от горната форма.

search button - clipping mask

23. Напишете “Search” в/у бутона
Вземете Type Tool (T) и напишете думата “search” с бял цвят. Намалете непрозрачността на 75%.

Search

24. Пуснете вертикална линия до “search” бутона
Вземете Line Tool (U) и пуснете вертикална линия с цвят #123036. Кръстете слоя “line”, сложете го под слоя “button”, за да се задейства отново clipping mask-ата, и го наместете м/у полето за въвеждане на текст и бутона “search” с помощта на Move Tool (V)

разделител за търсачката

25. Изчертайте син правоъгълник под навигацията
Направете си нова група и я кръстете “Showcase”. Направете друга група вътре в тази и я именувайте “background”. Вземете Rectangle Tool (U) и изчертайте правоъгълник с цвят #219aad. Правоъгълника от нашия пример е с размери 983px широк и 273px висок (ако искате точно тези размери то може да ги въведете, като кликнете на малката стрелкичка в контекстното меню, изберете Fixed Size и там въведете желаните размери.). Намалете непрозрачността на 55% и кръстете слоя “bg4″.

син правоъгълник

26. Добавете текстура към синия правоъгълник
Отворете във Photoshop пикселизирания син правоъгълник, който свалихте в началото на урока, вмъкнете го в вашия документ и го сложете над синия правоъгълник. Намалете opacity-то на този слой на 55% и го кръстете “bg3″.

пикселизиран правоъгълник

27. Добавете градиент над пикселизирания слой.
Задръжте Ctrl и кликнете в/у векторната маска на “bg4″ за да я селектирате, след това направете нов слой, вземете Gradient Tool (G) и пуснете градиент с цветове #56b8e5 към прозрачност отдолу – нагоре в селекцията. Натиснете Ctrl+D за да махнете селекцията.

селектиране на векторна маска - градиент

28. Направете още един – по-малък правоъгълник
Направете нов слой, изберете Rectangular Marquee Tool (M) и направете селекция като тази долу. Вземете Gradient Tool (G) и пуснете градиент от #0f2b42 към #2a607f отдолу-нагоре в селекцията. После деселектирайте с Ctrl+D. Именувайте слоя “bg1″.

повърхност - градиент

29. Бутона “Sign up”
Направете си нова група (Layer – > New – > Group) и я кръстете “sign up button”. Изберете Rounded Rectangle Tool (U), настройте радиуса на 2px и начертайте закръглен правоъгълник като този долу. Кликнете два пъти на този слой за да отворите Blending Options и въведете настройтите. Накрая изберете Type Tool (T) и напишете думите “sign up” с бял цвят.

Бутана "Sign Up"

30. Бутона “Learn more”
Повторете предната стъпка, за да създадете още един путон, или просто копирайте групата “Sign up button” и просто сменете текста. (не забравяйте, че трансформацията на векторни обекти се извършва с Direct Selection Tool [бялата стрелка]). След това изберете Custom Shape Tool (U) и начертайте стрелка подобна на моята.

Бутона "Learn More"

31. Направете бутон от лявата част на синия правоъгълник.
Направете си нова група (Layer – > New – > Group) и я кръстете “left arrow”. Изберете Ellipse Tool (U) и изчертайте кръг с цвят #406f94. Цъкнете два пъти слоя за да отворите Blending Options и нанесете настройките.

Кръгъл бутон

32. Направете стрелка вътре в синия кръг
Използвайте Custom Shape Tool (U) за да направите бяла стрелка подобна на тази. Кликнете два пъти на слоя за да отворите Blending Options и нанесете настройките. Намалете opacity-то на слоя на 50%

Стрелка - Custom Shape Tool

33. Направете още една стрелка в дясната част на синия правоъгълник
Повторете последните 2 стъпки за да направите стрелка в дясно или копирайте цялата група и направете само малки корекции. Второто е препоръчително

Стрелка от дясно

34. Сложете снимка на промотиран продукт на фирмата
Направете си нова група (Layer – > New – > Group) и я кръстете “image”. Сложете малка рактинка на ваш продукт и кръстете слоя “image”. Кликнете два пъти на слоя за да отворите Blending Options и нанесете настройките

Промотиран продукт

35. Добавете сянка към картинката
Направете нов слой (Ctrl+Shift+N). Сложе го под слоя с картинката. След това отидете на Layer – > Layer Mask – > Reveal All, за да добавите маска и след това изберете Gradient Tool (G) и пуснете градиент от черно към прозрачност отдолу до средата на вашата малка снимка. Кръстете слоя “shadow”.

сянка

36. Добавете малко текст
Направете си нова група. Изберете Type Tool и добавете малко текст. Кръстете групата “text”.

Добавете текст

37. Начертайте бял правоъгълник под синия
Направете нова група и я кръстете “content”. Вътре направете още една група и я кръстете “shadows”. Вземете Rectangle Tool (U) и начертайте бял правоъгълник като този долу. Кръстете слоя “white shape” и намалете opacity-то на 90%

Бяло поле

38. Пуснете горната сянка
Задръжте Ctrl и кликнете на векторната маска на “white shape” слоя за да направите селекция. След това направете нов слой, вземете Gradient Tool (G) и пуснете градиент #8f8f8f към прозрачност. Намалете непрозрачността на слоя на 50% и го именувайте “top shadow”. След това вземете Move Tool (V) и натиснете 2 пъти долната стрелка на клавиатурата, за да симулираме сияние.

горна сянка

39. Направете още 2 вертикални сенки
Направете нов слой и с Rectangular Marquee Tool (M) направете селекция като тази долу. После пуснете градиент #8f8f8f към прозрачност. Сложете маска на този слой и използвайки голяма мека четка закриите централната част на сянката. Намалете opacity-то на 30% и кръстете слоя “vertical shadow 1″. Копирайте слоя (Ctrl+J), кръстете слоя “vertical shadow 2″ и я преместете надясно.

вертикални сенки

40. Начертайте хоризонтална линия
С помощта на Line Tool (U) пуснете линия с дебелина 1px и цвят #aebcc7. Именувайте слоя “line”. Това може да го направите и с Single Row Marquee Tool, понеже вектирните форми попълват съседни пиксели, заради свойството Anti-aliasing, което често дава нежелани резултати.

хоризонтална линия

41. Добавете малко текст по ваш избор
Вземете Type Tool (T) и нанесете малко текст в комбинация с изображения. Ползвайте цветове от layout-а за заглавията и текста.

текст

42. Пуснете градиент за фуутера
Направете си нова група и я кръстете “footer”. Направете нов слой вътре в групата, изберете Rectangular Marquee Tool (M) и направете селекция подобна на долната. След това сменете foreground цвета на #555555, вземете голяма мека четка и цъкнете с нея няколко пъти над горната част от селекцията. Намалете opacity-то на този слой на 50% и го кръстете “gradient”.

footer gradient - градиент за фуутера

43. Добавете линия с дебелина 1px под градиента
Направете нов слой (Ctrl+Shift+N), вземете Single Row Marquee Tool и кликнете малко под градиента. Запълнете селекцията (Edit – > Fill) с бяло и натиснете Ctrl+D за да деселектирате. После сложете маска на слоя (Layer – > Layer Mask – > Reveal All), вземете голяма мека четка и закриите (изтриите) част от слоя както е показано на примера долу. Намалете непрозрачността на слоя на 15% и го кръстете “line”.

линия под градиента

44. Добавете малко текст към фуутъра си
Вземете Type Tool (T) и добавете текст към фуутъра.

фуутър - текст

Финален Резултат !

Финален резултат

…….
Пффф голямо писане му ударих
Тия дни ще добавия и видео към урока.
Поздрави и успех на всички !
…….

Източник: tutorial9.net