Осмислување и реализација на дизајн за веб-сајт
Првиот чекор при правење на веб-сајт е осмислувањето и реализирањето
на неговиот дизајн. Потоа дизајнот "се кодира" и се прави да биде
функционален, за да не биде само една статична страна. Овој туториал го
опфаќа само дизајнерскиот дел, којшто почнува од нула и е воден од
креативноста на дизајнерот. Сликата подолу е крајниот резултат(кликнете
на сликата за да ја видите оргиналната резолуција). Па да почнеме.



Чекор 1


Отворете нов документ со димензии 16x16 px. Оваа
слика што ќе ја направиме ќе ни послужи како pattern којшто понатаму ќе
го користиме како позадина. Значи ориентирајте се по сликата, и
нацртајте 4 квадрати, секој со димензија 8x8 px и соодветна боја. Откако ќе го добиете ова што е на сликата одете во Edit>Define Pattern и save the pattern. Затворете го документот.


Чекор 2


Сега отворете нов документ со големина 1100×800px, отворете нов леер и наместете си црна боја(foreground color #090909). Додека ви е селектиран овој леер притиснете Alt Backspace за да го обоите леерот. Десен клик на леерот, одете во blending options и направете го следново подесување:


Чекор 3


Во овој дел ќе го организираме просторот кадешто ќе стојат сликите и текстовите. Пристиснете Ctrl R, потоа F8. Одете во View>New Guide и внесте ги овие вредности:
Vertical guides(px): 150, 170, 180, 420, 440, 680, 695, 920, 930, 950
Horizontal guides(px): 100, 120, 130, 160, 205, 300, 315, 360, 460, 590, 600, 620

Чекор 4


Наместете бела боја(foreground color) и одберте го rectangle shape tool.Нацртајте правоаголник којшто се протега помеѓу крајните пресечни точки. Одете во blending options и подесете ги како на сликава подолу. За крај ставете го fill opacity to 0%.



Чекор 5


Сега нацртајте нов правоаголник што се протега помеѓу последните
пресечни точки(внатре во претходно нацртаниот правоаголник). Наместете
му малку stroke на внатрешниот правоаголник на овој начин: (blending options). На сликата во Чекор 8 најубаво може да видите како треба да бидат поставени двата правоаголници во однос на маргините.


Откако ќе ги тргнете помошните линии Ctrl h, треба да го добиете ова:


Чекор 6


Сега ќе направиме header, којшто ќе биде едноставно лого коешто ќе
стои одма над горната помошна линија. Одберете било каков фонт и
напишете нешто. Ставајќи го едниот дел од текстот во bold и со покрупен фонт(Arial) го добив ова:


Чекор 7


Ставете му ги следниве ефекти на текстот, и потоа позиционирајте го "логото" над горната граница.







Чекор 8


За менито на сајтот користев само обичен текст разделен со знакот
"|". Одберете го вашиот омилен фонт и напишете го менито запазувајќи ги
маргините што ги ставивме претходно (Crtl h )


Чекор 9


Ориентирајќи се по десните маргини ќе го организираме овој простор
ставајќи 4 правоаголници. Нивната големина и не е толку важна. Користете
го rectangle tool при правењето. На крајот треба да добиете вакво нешто:


Чекор 10


Сега ставете ги овие ефекти на секој од правоаголниците. За да не ги
работите еден по еден побрзо е на следниов начин: ги ставате ефектите на
едниот правоаголник, притискате десен клик на леерот>Copy Layer Style, бирате друг леер(со правоаголник), и нему десен клик па Paste Layer Style.



Треба да го добиете ова:


Чекор 11


Додадете некоја сликички и текст во правоаголничињата. Ова е важен
дел бидејќи ви дозволува да експериментирате со големина текст, боја,
фонт. Еве набрзинка како испадна кај мене


Чекор 12


Сметав дека ќе биде интересно ако додадам некои сликички во долниот
дел од дизајнот па ставив 4 рандом сликички со димензии 110x110px.


Чекор 13


Додадете ги овие ефекти на секоја слика за се добие рамка околу нив. Искористете ја финтата од Чекор 10.




Чекор 14


Сега ни останува уште да додадеме сликички во последните 4 празни
правоаголници од просторот што ни е планиран. За побрзо додавање,
внесете ја произволната сликата што сакате да ја додадете во работната
околина и наместете ја над правоаголникот. За да таа се вклопи во
правоаголникот одберете Rectangular Marquee Tool(алатка за селектирање). Одбележете го делот од сликата што е во правоаголникот и притиснете на Add layer mask,
копчето што е во палетата со леери(кругче). Потоа исклучете го "chain
link"-от што се појавува помеѓу леерите на правоаголничето и маската.
Ако не разбирате како функционира маската или пак не сте сигурни во неа,
секогаш може сликите да ги додадете на начин којшто ви е вас
најразбирлив и го имате увежбано. Треба да го добиете вакво нешто:


Чекор 15


Преостанува уште да го искористистите Text tool за
да додадете текст под сликичките. И секако за крај, додатете си краток
footer под долната маргина. Ќе добиете нешто слично на ова.