В тази статия ще разгледаме създаването на оформление на уебсайт с помощта на Adobe Photoshop.

В статията ще използвам руската версия на CS6, но всичко казано е подходящо за всяка версия на Photoshop до CS2 и всички команди на руски език се дублират на английски.

За никого не е тайна, че разработката на всеки сайт започва с оформление. И вече според готовото оформление се прави оформлението и се коригира PHP кодът.

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

Ето какво получаваме като резултат:

Забележка. За по-добро разбиране на материала можете да изтеглите готов PSD шаблон за темата на сайта от връзките в долната част на тази страница.

И така, да започваме.

1. Създаване на фон

Първото нещо, което трябва да направите, е да създадете нов документ (натиснете Ctrl+N) с размери 1020 на 1200 пиксела на бял фон и да запълните получения фонов слой с инструмента "Fill" (Paint Bucket Tool) със светло сив цвят D7D7D7.

2. Хоризонтално меню за вход/регистрация

За нормалната работа на онлайн магазина е важна удобната регистрация за потребителите, този момент трябва да се вземе предвид при разработването на сайта. Затова ще направим отделно хоризонтално подменю за вход/регистрация, разположено в горната част на страницата на сайта.

Създайте нова група слоеве, нека я наречем "sign in/reg" и в нея нов слой, той ще бъде фон за менюто, нарекох го "back" .

Забележка. В бъдеще всички нови елементи ще бъдат създадени на нови слоеве и групирани по теми. В бъдеще няма да споменавам това, за да спестя време.

Използвайки инструмента Rectangle Marquee Tool, създайте селекция с височина около 50px и ширина на цялото платно, запълнете я с черно (000000). Ето как изглежда цялото оформление:

Премахнете отметката, като натиснете Ctrl+D. Фонът за менюто е готов.

А сега да направим полета за въвеждане и бутони за вход и регистрация в горния десен ъгъл на сайта. В палитрата с цветове задайте цвета на предния план на 313131, след това вземете Rounded Rectangle Tool, въведете радиус на върха от 3 пиксела в лентата с опции и превключете режима на „пиксели“:

Сега създайте правоъгълник с ширина 125 и височина 30 пиксела. Този правоъгълник ще служи като форма за влизане. Нека въведем думата "вход" там, цветът за въвеждане на текст е FBFCDD, размерът на знаците се избира в зависимост от шрифта, използвах шрифта Arial с размер 13 pt. Групирайте тези два слоя:

Ето как изглежда това поле за въвеждане в пълен размер:

Дублирайте тази група, преименувайте я на "pass" и я преместете малко надясно. Заменете буквите в текстовия слой с кръгове (като тези: ????????). Това ще бъде полето за въвеждане на парола:

Сега нека създадем бутони за вход и регистрация.По същия начин, по който създадохте правоъгълника за полето за въвеждане, създайте друг правоъгълник, но този път с ширина 70px. Приложете към него стилове на слоя Inner Shadow (Inner shadow) и Gradient Overlay (Gradient Overlay) със следните параметри:

Добавете текстов слой с текст "Вход" с букви със същия размер и цвят като в полетата за въвеждане. Подравнете думата хоризонтално, като използвате опциите за подравняване.

По същия начин създайте друг правоъгълник, но този път с ширина 90 пиксела, приложете към него същите стилове на слоя, позиционирайте го вдясно от бутона за влизане и създайте текстов слой с думата "Регистрация" . Трябва да получите нещо подобно:

3. Създаване на заглавка на уебсайт

Използвайки инструмента Rectangle Marquee Tool, създайте селекция с височина 115 пиксела и цялата ширина на платното и я запълнете с черно (000000):

Сега добавете стил Gradient Overlay към този слой със следните настройки:


Това е всичко с фона. Сега трябва да определим мястото, където ще бъде поставено логото на сайта и къде ще бъдат разположени връзките към секциите на онлайн магазина. Ще използвам белия шрифт Calibri (FFFFFF) 40pt в логото, а за линковете ще използвам шрифт Helvetica Bold F7F6F6 (шрифтът Helvetica с поддръжка на кирилица е в архива, който можете да изтеглите от линковете на долната част на страницата). Резултатът е толкова сладка шапка:

За да обозначим активна връзка, ще направим подложка под нея с помощта на Rounded Rectangle Tool, само радиусът на заобляне сега ще бъде равен на половината от височината на правоъгълника, съответно 20 пиксела, самият правоъгълник ще да бъде висок 40, а ширината ще бъде избрана в зависимост от дължината на думата във връзката. Ето някъде така:

Сега нека добавим ефект на вдлъбнатина към този правоъгълник, за това ще добавим стилове на слоя „Щамповане“ (Bevel and Emboss), „Вътрешна сянка“ (Inner Shadow) и
„Gradient Overlay“ ( Градиентно наслагване).Задайте следните опции за стиловете:

Резултатът трябва да изглежда така:

Това е всичко за сега с шапката.

Формуляр за търсене

Използвайки инструмента Rectangle Marquee Tool, създайте селекция с височина 64 пиксела и цялата ширина на платното и я запълнете с черно (000000):

Приложете стиловете Inner Shadow и Gradient Overlay към слоя със следните настройки:

Сега нека създадем форма за въвеждане на заявки за търсене. Както обикновено, за това ще използваме инструмента Rounded Rectangle, но този път с радиус от 10 px.Създайте правоъгълник с височина 42px и ширина 306px и приложете същите стилове на слоя като последния път със следните настройки:

В резултат на това ще получим следната форма за търсене:

Сега остава да добавите икона-бутон за стартиране на търсенето и въвеждане на текст по подразбиране, който ще изчезне, когато щракнете във формата (можете да изтеглите иконата от линковете по-долу, тя е в архива заедно с готовият PSD файл на шаблона и шрифта на темата на онлайн магазина):

Просто трябва да добавим падащо меню за списъка с продуктови категории към този раздел.

Нека направим това с инструмента Rectangle Marquee Tool, създайте селекция с размери 140 x 27 px и я запълнете с черно:

Добавете към този слой стилове Gradient Overlay (Gradient Overlay) и Stroke (Stroke) и им задайте следните параметри:

Използвайте инструмента Polygonal Lasso Tool, за да създадете триъгълник със стрелка, подобен на показания по-долу, и го запълнете с черно 000000. Добавете текст "Категории" с цвят 323232:

Слайд шоу

Под формата за търсене ще поставим слайдшоу с описания на продукти и изображения.Като начало ще направим фонов субстрат за смяна на снимки. С помощта на Rectangular Marquee Tool създайте селекция с размери 958 x 304 px, запълнете я с бяло и я поставете под зоната за търсене. Подравнете слоя хоризонтално по отношение на фона, като използвате опциите за подравняване на слоя:

Добавете следните стилове към вашия слой:

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

Раздел с обща тема

Създайте два правоъгълника с размери 958 x 158 px, приложете същите стилове като за фона на слайдшоуто и ги поставете, както е показано. Това ще бъде фонът за съдържанието:

Вмъкнете картинки с теми, текстови надписи и икони, които можете да изтеглите от комплекта на линковете в долната част на страницата. Трябва да изглежда така:

Долен колонтитул на темата

Дублирайте правоъгълника на фона на заглавката на уебсайта, увеличете височината му до 152 пиксела с помощта на Free Transform Tool (Ctrl+T) и го поставете най-отдолу на шаблона. Това ще бъде фонът на мазето. Тук ще пишем авторски права и др.

Първо, нека създадем разделители. Използвайте инструмента Rectangular Marquee, за да създадете селекция с ширина 1 px и височина 120 px, след което я запълнете с 030508. Приложете стила Drop Shadow към този слой със следните настройки:

Въведете текста, цвят FFFFFF за заглавия, BBC9D7 за описания и връзки.

Когато сте готови, резултатът трябва да изглежда така:

Изтеглете архив с готов PSD шаблон за онлайн магазин, икони и шрифт Helvetica с поддръжка на кирилица:Изтеглете от Depositfiles.com

Категория:

Photoshop