Бързо и лесно създаване на Web страница в Photoshop

06.12.2008

Посредством Photoshop можем да визуализираме идеята си за web дизайна, преди самото кодиране, да създадем интересни фонове и ефекти.

В няколко последователни поста ще проследя създаването на сравнително елементарен блог-дизайн, неговото нарязване (slicing) в Photoshop, и последващо XHTML и CSS кодиране.

Ето крайния резултат, който можете да видите и в действие кликвайки върху изображението. - example


Сайтът ще бъде оптимизиран за монитори с резолюция 1024+, съответно създаваме нов документ с размери 1024х768px.

I. Фон (background)

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

Засега за нашия шаблон ще представим фона с фиксиран размер върху целия background слой. Оцвятяваме в желания цвят. example
example



II. Header

В палитра Layers правим група header, където ще подредим всички слоеве от дизайна на тази част.

example

Вземаме инструмента Rounded Rectangle Tool. В панела с настройки задаваме размери 960х260px, избираме радиуса на заоблянето и цвета(foreground color) и изчертаваме. Така получената фигура центрираме спрямо основния фон (background). Основата на нашия header е готова.

example Добавяме допълнителни елементи, в зависимост от дизайна.


III. Navigation bar

Естествено навигацията за всеки сайт може да бъде организирана по различен начин. В по-масовите случаи под header-a се разполага т.нар. nav bar, съдържащ препратки към основните страници на сайта.

exampleОтново с инструмента Rounded Rectangle Tool изчертаваме фигура с размери 960х30 px.

За по-лесното му центриране от двете страни на header-a изтегляме по един гайд (guide). След като направим всички настройки по инструмента Rounded Rectangle Tool, е достатъчно само да кликнем до левия гайд и фигурата се изчертава. Оставаме около 30px разстояние от header-a.

Отново всички слоеве по дизайна на Navigation bar-а се организират в отделна група в палитра Layers .


Добавяме примерен текст и оформяме бутони.

example Между всеки два бутона, слагаме разграничител. Изчертаваме правоъгълник с размери 1х30 px. Запълваме с лека преливка. Копираме същия правоъгълник, завъртаме го на 180 градуса и го долепяме до първия.


IV. Блокът с основното съдържание

По познатия начин изчертаваме фигура с размери 640х200 px. Слагаме допълнително кафяв контур. Височината е ориентировъчна. В случая е посочена минимална стойност.

Тук ще се разположи основния текст.

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

Въвеждаме примерен текст


V. Странично меню (sidebar)

exampleСтраничното меню ще е разположено в останалото празно място в дясно под header-a. Ориентировъчните размери са 300x200 px. Запълваме със съдържание.

VI. Footer

Обикновено в тази част стои информация за автора, за дизайнера, за годината на създаване и обновяване на сайта и т.н.

Можем да изрисуваме отново правоъгълник със същата ширина както на блока за основното съдържание и header-a 960px. В случая, за да не се утежни излишно дизайна, слагаме кратък надпис и декоративен елемент за завършване на цялостната визия.


Това е! Вече имаме макет на web блог. Следващата стъпка ще е нарязването му за нуждите на кодирането. Но за това в следващия пост :)

обратно в началото на страницата