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

Темплейт на сайт за пътуване

Темплейт на сайт за пътуване




Краен резултат:



1. Създайте нов документ със следните настройки:



2. Ще оставим по 150 пиксела разстояние от двете страни. За целта ще използваме Guide Line. Отидете на View > New Guide и сложете следните настройки:





Отидете отново на View > New Guide но този път сложете следните настройки:



Вече имаме разстояние от 150 пиксела от лявата и дясната страна. Остава ни 900 пиксела където ще бъде всичко.



3. Сега ще сложим Background цвят. Създайте нов слой (Shift+Ctrl+N), вземете Paint Bucket Tool (G) и запълнете слоя с цвят # 404040.





4. Вземете Rounded rectangular shape (U), сложете Radius на 5 пиксела и направете две форми като тези:



Сложете Fill на 0 и добавете следния Layer Style
Stroke:
Size: 1px
Position: outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient:
Color # 000000 and # 404040
Styke: Linear
Angle: 90
Като на по-голямата форма отметнете Reverse.



Трябва да изглежда така:



5. Сега ще добавим лого. Вземете Custom shape tool (U) и направете някаква форма в горния ляв ъгъл, с цвят #89a81e.





Направете нов слой (Shift+Ctrl+N), вземете Type Tool (T) и напишете името на сайта ви със следните настройки

Шрифт: Nyala
Размер: 40 pt
Цмят: #89a81e

.com със следните настройки

Шрифт: Nyala
Размер: 24 pt
Цвят: # 888888



6. В тази стъпка ще направим главното меню.
Вземете Rounded rectangular tool (U) с Radius 3 пиксела и с бял цвят и направете няколко форми като тези в изображението по-долу.



Сложете следните Layer Styles







Менюто трябва да изглежда така:



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

Шрифт: Nyala
Размер: 14 pt
Цвят: #89a81e



8. Вземете Rounded rectangular tool (U) и с Radius 5 пиксела и бял цвят направете подобна форма:



Сложете следните Layer Styles



Цветове за градиента: #424242; #7c7c7c





Трябва да изглежда така:



9. Създайте нов слой и направете нова форма. Гледайте да оставите еднакво разстояние отгоре и отдолу.



Натиснете Ctr+J, за да дублирате слоя, след това Ctrl+T и завъртете малко обратно на часовниковата стрелка.



Запълнете формите със снимки пасващи на предлаганите услуги. Авторът е избрал произволни.



10. Вземете Custom shape tool (U) и направете две стрелки от двете страни на снимките, с бял цвят.



Сложете следните Layer Styles на стрелките





Цветове на градиента: #89a81e; #c1c0c0



11. Вземете Type Tool (T) и напишете някакъв текст свързан с услугите ви.

Шрифт: HansHand
Размер: 36 pt
Цвят: #e2e2e2



12. Вземете Rounded rectangular tool (U), с Радиус 5 пиксела и бял цвят, и направете форма като по-долната, след това я дублирайте (Ctrl+J) два пъти. Трите форми трябва да са на равно разстояние една от друга.



Сложете следните Layer Styles:





Цветове на градиента: #424242; #7c7c7c





13. Вземете Rounded rectangular tool (U), с радиус 10 пиксела и черен цвят, и направете форма с големина от около 50 пиксела като в изображението по-долу.



Сложете следния Layer Style:



Създайте нов слой, преместете го под този, вземете Polygonal Lasso Tool (L) и направете селекция като тази:



Сега направете подобна селекция от дясната страна като задържите Shift, за да се добави към първата селекция. След това запълнете селекцията с цвят #202020.







14. Създайте нов слой, вземете Type Tool (T) и напишете "Пакети", върху лентата, която направихме.

Шрифт: HelveticaNeue LT
Размер: 36 pt
Цвят: #89a81e



15. Сложете снимки с еднакви размери към блоковете, снимките трябва да са свързани с пътуване.



16. Сложете малко описание и линк към "Прочетете повече" под всяка снимка.



17. Сега фуутъра. С Rounded rectangular tool (U) направете форма от лявата до дясната Водеща линия, с височина около 50 пиксела и черен цвят.
Сложете следните Layer Styles:









18. Създайте нов слой и сложете второстепенни линкове от лявата страна и текст с правата от дясната страна.

Шрифт: Ariel
Размер: 14 pt
Цвят: #ffffff



Резултата:



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




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

Коментари

vezirov

страхотно уроче поздрави:)

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

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