Всеки който поне малко се е занимавал с Photoshop, знае че основата на всеки един проект създаден с него са Слоeвете (Layers). Без тях работата въобще не би била толкова лесна и продуктивна.
Идва момент обаче, когато тези слоеве стават едно голямо страшилище. Обикновено това става, когато започнете да се занимавате професионално, в случая като уеб дизайнер. В темата ще засегнем точно този проблем – как като уеб дизайнери да си организираме проекта.

Все пак темата не е само за уеб дизайна, може спокойно да се прилага и в други среди ползващи photoshop. Независимо, какво аз пиша по темата, всичко зависи от това, как вие сами ще си организирате процеса на работа. Изградете си свой стил на работа, направете си свой workspace във фотошопа в който се чуствате удобно … всичко е до удобство.

За целта на статията, ще организираме проект с названието „PLACEBO – сайт за дискотека.“

1. Файлова организация.

Преди всичко трябва да си направите разчет на файловете. Вижте записките по проекта, wireframe-а който сте си направили, информацията изпратена от клиента и всичко което имате като суха материя. Направете си план на кои страници трябва да направите дизайна.
След това създайте и именувайте директория в която ще събирате всичко по проекта.
Но ако всички файлове – psd-та, текстови файлове, лога и прочие набутате в тази папак, ще стане един малък файлов ад. Ще има да се чудите кое къде е, а ако проекта се нуждае от повече файлове, в един момент ще се изгубите в бъркотия от файлове.

За това тази папка има нужда да бъде структурирана.

Една подобна структура на основаната ни директория би била доста полезна. В PSD ще събираме всички страници на дизайна, в INFO ще събираме всичкото инфо под формата на текстова информация дадена ни от клиента, в последствие преработена от нас. REFERAL служи за примери дадени от клиента – някои клиенти за да си представят проекта по лесно гледат чужди конкурентни сайтове и ги дават като пример. IMAGES е директорията която ще ползваме за изображения предоставени от клиента – лога и т.н. FEEDBACK е директорията където ще събираме по дати информация подадена от клиента въз основа на това което сме работили до момента – желани корекции по файлове и прочие. CODE е директорията която ще ползваме най-накрая – в нея ще се съдържа кодираната версия на дизайна ни.

Разбира се в дизайна най важни в случая са ни psd файловете. За да се ориентираме по лесно е нужно тези psd файлове да се именуват. Най удобен е варианта ИМЕ_СТРАНИЦА

ОК, ще кажете, зашо просто не го бутнеш в psd и го кръстиш само index. Да, и това е начин, няма лошо, но я се замислете какво ще стане когато имате множество проекти и клиенти. Идва 2 години по късно същия клиент от дискотека PLACEBO и казва – така и така, искам да променим нещо по страницата Галерия в сайта. Е да ама вие имате толкова проекти на харддиска си, че да го търсите е невъзможно. Опирате до функцията Search на уиндолса, пишете името на файла „gallery.psd“ и търсачката ви листва всички директории където имате именуван този файл. Пак няма да го намерите. Но ако напишете „placebo_gallery.psd“ търсачката ще изкара точно това, което търсите.

2. Организация на psd файловете.

Започваме работа по проекта. Създали сме файла на първата страница и се хвърляме да дизайним страницата. Една по една страниците вече ставата готови, експортваме ги като картинки и пращаме на клиента. Ден-два по-късно клиента ни връща мейл в който описва всичко което иска да се корегира. Естествено доволни от първия опит рядко има, а вие държите на името си и няма как да му откажете. Отваряте първия файл, индекса и виждате че не е толкова лесно да корегирате това което трябва…. пред вас във панела Layers има един малък ад от стотина двеста слоя … къде по дяволите сега е панела с логина, къде е формата за коментари..???

За да не си вгорчаваме живота така втори път, Adobe са ни улеснили – Групиране на слоевете по папки. Когато започваме нов файл една подобна основан структура би ни била от огромна полза

HEADAR – тука ще слагаме най основните неща – лого, навигация и т.н. CONTENT – ще е папката в която ще слагаме всичкото съдържание – панели с текстова информация, логини, търсачки и прочие… FOOTER е директорията ни за най-крайната част от сайта – копирайтс, допълнителни връзки… BGR е за фона на сайта, даже само един бял фон да е полезно е да е подредено там.

Тук е момента да отбележим че в тези папки можем да създаваме допълнителни подпапки. В хедъра, може да имам подпапка navigation където да сложим всички елементи  на навигацята. За допълнително улеснение е препоръчително и да именуваме слоевете. Ако имаме button_home, но ни трябва и хоувър за него , дублирайте този, направете промените и го именувайте button_home_hover. Разпределението на елементите по папки ще ви помогне и да местите елементите по лесно – едно е да селектирате и местите папка, друго е да селектирате един по един 10-тина слоя и да ги местите, а ако не ви харесва ай пак наново.

В най общи линии е това. Две съвсем простички техники, които ще ускорят работния ви процес и ще го направят много по приятен.

Въпреки това в този хубав Съботен ден, реших да се върна към това което винаги ме е забавлявало – дигиталния арт.  Това  което сътворих за около час се казва „Hold me…“. Инспирирано е от някои събития през изминалите дни, символизира опитите на заобикалящите ме хора да ме задържат в някакви граници, въпреки че са адски безуспешни.

Реших да редактирам статията и да спомена как съм я направил. Няма да се впускам в продробности…всичко е на принципа, проба грешка. Точна формула нема

Ето и как го направих:

1. Набавяте си снимка – ако нямате с хубаво качество, снимате се.

2. Ако сте грозен като мене, нужно е да барните някои дефекти – като пъпки и т.н…знам, гадно е..

3. Отваряте снимката в Photoshop, дублирате я, а на оригинала изключвате видимостта.

4. Отивате на Filter->Liquify и започвате да оформяте типичния нос на на’ви-тата. Хубаво е първоначално да боравите с по голям размер на четката за оформяне, става по добре.

5. Оцветявате в син цвят кожата си:

- Отивате на Image->Adjustments->Hue/Situration. ВАЖНО – не слагайте отметка на Colorize. Най-горния плзъгаш му задайте стойност 165.

- Отивате на Image->Adjustments->Variations и избирате More Blue, след това Darker и натискате OK.

- отивате на Image->Adjustments->Levels  и: най-крайния плъзгаш (дясно) мърдате с около 5мм наляво, най-крайния (ляво) мърдате пак с 5мм надясно (не ви давам стойности, не ги помня), а средния съвсем леко на ляво, да не е точо в средата.

6. Намирате си снимка на очите от AVATAR филма изрязвате някое и го слагате на нов слой във вашия проект.

7. Правите му маска и с по едра четка с черен цвят, изтривате около окото. Намествате го. Дублирате окото и отивате на Edit->Transform->Flip Horizontal, за да го обърнете огледално. Намествате го. Ако е нужно, преоразмерете го – тука вече зависи от вашата тиква колко е голяма и как биха стояли най-добре спрямо лицето ви.

Тва е!