Организирайте .psd файловете като про.

Ще започна тази статия като кажа за кого ще е подходяща и какво ще засегна в нея. Всъщност тя е подходяща за всички, от начинаещи до професионалисти.

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

Работил съм в доста и различи екипи по различни проекти. Понякога колегите дизайнери са начинаещи, друг път са професионалисти, но при повечето от тях забелязвам много сериозни проблеми при организацията на работните им файлове. Затова реших да споделя моя опит и начина, по който организирам работните си файлове.

В никакъв случай не твърдя, че това е ПРАВИЛНИЯТ начин. Това моят начин.

За статията ще демонстрирам работен файл на реален проект. Уеб сайтът е малък и може за някои от Вас да се стори прекалено лесно, но моята цел е да покажа принципа на организация на файла.

Защо е нужна правилната организация на файла?

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

Ето и основните правила, които трябва да спазвате, за да получите повече от времето и работата си с Adobe Photoshop.

1. Винаги работете в един файл!

Преди години работейки разделях дизайна на всички основни страници в отделни файлове например: Home.psd, Profile.psd, About.psd, Contacts.psd. Наистина мислех, че това е правилният начин за работа поради няколко основни причини: обемът на всеки файл беше по-малък, работата с по-малко слоеве ми се струваше много по-лесна (защото не ги организирах и именувах правилно), времето за запазване на файла при работа беше по-кратко. Но годините се променят, софтуерът става по-добър, а хардуерът – по-достъпен и бърз.
Работата в отделни файлове създава следните основни и сериозни проблеми.
Първият и много основен проблем се появява, когато клиентът те помоли да коригираш или да преработиш части от основния дизайн (или Вие решите, че дизайнът има нужда от определени корекции) – например основното меню на уеб сайта, което присъства на всяка една страница. Тогава настава едно коригиране и копиране от файл във файл, за да мога да покажа корекцията на клиента, което губи доста време, нерви и се налага много да внимавате да не изпратите стари дизайни на клиентите си. Решението: работете в един файл като отделите тази основна част. Така нанасяте корекции само на едно място.

Втори основен проблем е, че повечето дизайнери (всъщност това е само мое предположение, защото аз работя така) не работят праволинейно, т.е. не подхващат един елемент, завършват го и това е. Работата върви, работиш по един, в този момент се сещаш, че дадена корекция по други елементи от основния дизайн ще се получат добре, нанасяш ги и забравяш за тях. По този начин, преди да започнеш да кодираш или преди да пратиш на някой кодер да кодира, трябва да прегледаш всичко елемент по елемент, което – нека бъдем честни – не ни се получава, колкото и да сме изпълнителни. Затова според мен е задължително да се работи само в един файл.

2. Мислете като фронт-ендери (няма такава дума)!

Организирайте файловете си както бихте ги кодирали! Какво имам предвид? Разделете файла си на основни сетове (папки) както бихте го написали в html формат. Отделете HEAD секция, NAV/MENU секция, основния CONTENT в него страниците една по една.

Идеята на тази организация е да се отделят основните елементи на дизайна, за да може да се коригират и доразвиват лесно, докато изработвате дизайна. По този начин можете лесно да заключите горната и долната част и да работите спокойно по съдържанието.

3. Не прекалявайте със сетовете / папките


Изключително е важно да организирате основните страници и елементи по папки, но не прекалявайте. Ако елементът се състои от 2 или 3 слоя е по-добре да ги свържете с линкове, отколкото да ги слагате в папки. В противен случай може да се окажете в една гора от сетове и под-сетове, от която излизането е много трудно.

4. Заключвайте основните елементи.


Използвайте функцията за заключване на сетовете на основните елементи като, ГЛАВАТА, ОСНОВНОТО МЕНЮ и ФУТЕРА. Така предотвратявате опасността да работите по грешка в тях, вместо в правилната папка. Също така се предпазвате от несъзнателно копиране на един и също слой много пъти (получава се, ако слоят е в clipping mask на друг слой, но е много голям и го селектирате несъзнателно.)

5. Помнете, че добрата организация пести, а не изразходва излишно времето Ви.

Нека да се върнем към примера, за да мога да демонстрирам нещата, които казах досега.

Ето как съм организирал файла си, който ще е пример в сегашната статия.

Това е структура на основните ми сетове. В тях почти няма под-сетове, като изключим по-големи секции (като секция коментари).

  • • Основен дизайн
    • o Начална страница
    • o Вътрешни страници
  • • Футер
  • • Глава + меню
  • • Съдържението (в случая, както казах по-рано, проектът е малък; затова съм пропуснал обобщителна папка)
    • o Галерия
    • o Преглед на снимки в галерия
    • o Преглед на снимка
    • o Преглед на видео
    • o Гълъбарници
    • o Контакти
    • o За мен
    • o Новини
    • o Преглед на новина

Ако обърнете внимание всички страници (сетове), които са с един приоритет, т.е. се отнасят един към друг, са с един и същи цвят; работните са в друг. По този начин може лесно и бързо да се ориентирате дори и да отворите файла след 5 години.

С тази организация постигате бързина, много голяма маневреност при промяна на дизайна на даден проект. Създадена един път, с тази организация лесно работите с всичките си файлове. Предаден по този начин проектът за „рязане“ спестява време и излишни въпроси от колегите слайсъри.

Както забелязвате, не засягам техническата част точно КАК се правят сетове, подсетове или други неща в самата програма, защото както казах искам да споделя логиката на организацията и предимствата от нея.

Ще се радвам да чуя Вашите начини за организация на файловете.

Надявам се да съм бил полезен. 🙂

Това са и малко статии, които намерих в интернет:
Photoshop Etiquette http://photoshopetiquette.com/
How to Effectively Organize your Photoshop Layers http://www.webdesignerdepot.com/2009/08/how-to-effectively-organize-your-photoshop-layers/

2 Responses to "Организирайте .psd файловете като про."

  1. Svetoslav Todev
    Svetoslav Todev 7 years ago .Reply

    Напълно съгласен,
    аз откакто се помня имам предвид с по-сериозни проекти организирах файловете си. Много ми е интересно как сме стигали до едни и същи решения без да следваме определени правила и просто самата работа ни е накарала да определим този метод като най-подходящ. Например организацията по метода на основния лейаут в HTML и аз я използвам. Оцветяване сетове и прочие, правилни и говорящи имена…
    Аз също винаги съм гледал да работя във възможно най-малко файлове и всъщност тук е разликата до днес може би, защото го правя според проекта. На някои проекти правя само едно .psd, на други поне две или повече… Веднага казвам, защо това до днес ме кара да се колебая. да наистина е страшно удобно при нанасянето на корекции да не ти се налага да отваряш всички файлове и да удвояваш-утрояваш и тн работата… Но наистина има ограничения и в хардуера за съжаление 🙁 Има проекти които имат много елементи, финни детайли структуриранеи в понякога стотици слоеве и сетове… Тогава файла става кошмар за RAM и скрач диск… Естествено има решение и затова. Много често ако например позлвам един бутон на 100 места, а бутона е създаден от 30 слоя, да речем някой слик бутон с много отблясъци, сенки и разни детайли (само като пример) лично аз сметнах с времето за добре, да се пази само на едно място този бутон със всичките му градивни слоеве. Ако се наложи този бутон да е с еднакъв размер и цвят на други места, просто се Merge-ва и се ползва като един слой. Верно ако се наложи промяна после трябва да се направи отново това и да се постави на необходимите места, но оптимизацията на файла става значителна.
    Друга оптимизация е “Smart object”. Колкото и странно да изглежда, датата на с,март обжекта пак е в PSD-то , но поне не се зарежда в момента на отваряне на файла, а само когато повикаме съдържанието му отделно, тоест като товорим смарт обекта.

    Навремето имаше период в който свикнах да работя и с “Layer comps”, но след една злощастна случка в който ми се омазаха Layer композициите (което си беше чист бъг) се отказах от тях и сега правя доста по-неоптимизираното да пазя за различни версии на работния файл отделни папки.

    И още много може да се напише, но в общи линии всички по-горе препоръки са верни и определено носят ползи…

  2. angeloff
    angeloff 7 years ago .Reply

    Да, и във facebook се породи дискусията, че тези правила са основни за по-малки и леки проекти, което е правилно. Въпреки, че според мен тези правила са фундаментални. За по-големи и сложни проекти където има нужда от на 20-30 дизайна вече е нужно да се отделят нещата по отделни секции, но там принципа е същия.

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

Leave a Reply