Skip to content

Как да създаваме дизайн по-бързо?

Колкото и самодоволно да звучи мога да се похваля с това, че работя изключително бързо и малко са дизайнерите, които могат да работят по бързо от мен. А когато си на зор с проект, това да работиш бързо е от изключително значение. Да гониш deadline е едно от най-неприятните неща за един дизайнер, но е нужното зло, както обичам да казвам много често. Deadline-a  поставя граници, в които дизайнерът трябва да може да се впише и да осъзнае като нещо от което няма измъкване, ако иска да види проекта завършен. Като разбира се, това НЕ трябва да влиея на качеството.

мее

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

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

Плануване на проекта

timeline2

За да стартира и завърши добре всеки проект, трябва още от началото да бъде много добре плануван. Това не винаги е работа на дизайнера – за това си има  Project (Account) manager-и във фирмите, но ако си фриленсър много често влизаш в тази роля.
За да няма неразбрали по пътя,  се създава таймлайн в който ясно са описани стъпките и обяснени на клиента, кога и какво ще получи. Изключително важно е тези дати да бъдат спазени, за да може проектът да върви гладко и да бъде предаден в срок.

Създайте си свой интерфейс

ps

Много дизайнери ползват интерфейса на  софтуера с който работят – примерно  Photoshop –  по подразбиране. До някъде това  е препоръчително, защото ако попаднат на чужд компютър, няма да им е дискомофртно. Аз обаче силно препоръчвам всеки да си направи своя работна среда на софтуера. Почти нито един дизайнер не ползва всички менюта, панели и инструменти на Photoshop.
Да си направиш свой лейаут който да ползваш има големи предимства, особено ако работиш в конкретна сфера на дизайна. Ако си изцяло UI дизайнер, не ти е нужно да виждаш панели като Brushes примерно… Организираният интерфейс увеличава продуктивността на дизайнера. Това е все едно да имаш супер удобен диван в който обичаш да седиш.

Хигиена на работните файлове

structure

Това за което винаги съм се борил и бих желал всеки дизайнер да спазва е… да си подрежда работните файлове. Това на първо четене, звучи като доста трудоемък и време-губещ процес. Особено ако до сега си работил свободно без въобще да мислиш за подредба на слоеве, групиране и т.н. Ако си все още от този тип дизайнери, то прехода няма да е лесен, НО ще е напълно заслужен. Добре подреденото и организирано PSD не помага само на вас, а и на хората с които работите. Защо трябва да ги обучавате всеки път кое как сте наредили или постоянно да ви викат за да отделят един бутон от psd-то ви, при положение, че всичко може да е подредено.
Аз например съм си изградил структура на psd-тата. Създавам 4 основни групи: HEDAR, CONTENT, FOOTER, BGR. Ако имам елементи като popup-и например ги маркирам в червено. Всеки елемент обаче от дизайна ми си има място в съответната група – ако е навигационна лента тя отива в  HEDAR, ако е съдържание от страницата отива в CONTENT и т.н. Същевременно съм свикнал да именувам и подреждм всеки елемент. Така когато  front-end хората  минат през psd-то ми, много по лесно се ориентират кое какво е. Винаги именувам групите си с имената на елементите, които конструирам в дизайна си. Ако правя промоциоанлен слайдер, просто си кръщавам групата по този начин. Ако в промо-слайдера ми имам различни елементи – например промо-рецепти, всяка рецепта отива в отделна група, като всички те са вкарани в една обща. Това ми позволява, ако искам да преместя тези промо-рецепти на веднъж, просто маркирам 4-те или колкото са групи и ги местя за 1сек. Това ми помага и когато искам да ги подравня така че разстоянията между тях да бъдат еднакви.

Смея да твърдя, че моите PSD-та са най-детайлните и подредени psd-та, които ще намерите 🙂

Изполвайте SmartObjects

soДруг много полезен начин за организиране на psd-тата са SmartObejcts (“SO” накратко). Това, което обаче е по важното в случая, че SO са много полезни и изключително гъвкави. Те ни дават свободата да пазим всеки елемент от дизайна си достатъчно редактируем, ако се наложи да го променяме. Всичко, което влезне във Photoshop, независимо от източника му може да стане SO – снимки, текстове, групи, слоеве с ефекти, елементи от другите adobe продукти… на практика всичко.
SO ви дава и едно друго много важно предимство. Ако имате повтаряем елемент – да речем стрелка – която искате да я има на много линкове във футера, и сте я направили червена, но решите че черна ще е по добре, то трябва да едитнете само 1 от smart object-ите и всички останали ще се обновят сами. Това разбира се не винаги е предимство, но си има начини да бъде избегнато. В повечето случаи е много удобно ако искате бързо и лесно да обновите 1 и същ елемент.
Друг голям плюс на SO е че той може да пази оригиналните данни на едно изображение. Представте си, че имате лого което сте вкарали от друг източник. В оригиналните си размери логото е 500 на 200px, но вие искате във вашият дизайн да бъде 150×75 примерно. В един момнет идва клиента и ви казва “make my logo bigger” при което вие трябва да отворите на ново файла с логото му, да го заместите в дизайна и да го намествате отново където трябва, защото ако просто хванете сегашното и го преоразмерите то ще се пикеселизира… Тук се намесват SmartObejcts. Ако сте вкарали логото с оригиналните размери (500х200px) и го конвертирате в SO, то от малкото лого много лесно ще стане по голямо и то без загуба на качеството (поне докато влиза в оригиналните размери), защото smart object-a помни оригиналните показатели. Nice, ah …

Използвайте Vector Shapes и Mask

vectorМногo добра практика е да държите повечето елементи във vector shapes. Преди всичко това намалява обема на psd-тата които правите, но преди всичко – дава свободата да манипулирате формите както ви е удобно без да губите качество и време.
Една от най-добрите практики по мое лично мнение е да правите по сложните форми във Illustrator – все пак той е векторен софтуер и това му е силата, и след това да ги вкарвате (Ctrl/Cmd+C, след това Ctrl/Cmd+V) във photoshop. При импорта си във photoshop обаче изключително важно е да ги импортвате като Shape layer – това е изцяло редактируем векторен обект! По всяко време ще можете да ги препоразмерявате без загуба на качеството, а даже и да ги променяте като форма ако се наложи.

Друго голямо предимство на векторите е че можете да ги ползвате и като маски. Предполагам всеки от вас знае как се тифецва с pen tool-a. Е при него докато очертавате обекта, си изграждате векторна патечка. Грешка е да я конвертирате в селекция. По добрият начин е да я ползвате като Vector mask

Представете си че изрязвате чаша. Очертали сте я с pen tool-a след което правите селекция и я бутате на нов слой да речем вече изрязана. ОК, но точно под дръжката не сте я изрязали добре – какво правите? Почвате да режете на ново точно рази зона и т.н… Излишно дълъг процес. Нека да се върнем стъпка назад – тъкмо сте очертали обекта с Pen tool-a, конвертирайте пътечката във векторна маска. О не, пак сте изпуснали зона която не влиза в маската ви… няма проблеми – просто преместете точките на векторната маска така че да покрие зоната която не искате да виждате. Готово 🙂 CASESTUDY

Управление на Blending Options и Layer Styles

fxВскеи дизайнер добре знае Blending Options и Layer Styles. Няма дизайнер, който да не ги ползва. Какво става обаче, когато станат прекалено много и трябва да ги прехвърляме на други слоеве?
Готиното е, че те са лесно могат да се прехвърлят и да се местят както местим слоеве. Когато приложим стил на даден слой и искаме да го пренесем  и на други слоеве, просто трябва да кликнем с десен бутон на слоя и да копираме стила -> Copy Layer Style, след това маркираме слоя/слоевете на които искаме да приложим ефектите и  пак десен бутон -> Paste Layer Style. Ако слоевете са един над друг, може просто да драгнете ефекта от единия на другия. Също работи. Ако стилът ни на работа е да ползваме едни и същи стилове многократно, то по добрият вариант е да си направим отделен стил, в панела Styles от който много бързо и лесно ще могат да се прилагат на слоеве.

 

Ресурси за дизайнери

shippingИнтернет е пълен с всякакви ресурси за дизайнери от дизайнери. Логиката която следвам е “не винаги е нужно да откривам топлата вода”. Примерно – ако ви трябва снимка на жаба, не е нужно да търсите гьол с вода, където да я снимате. За това си има безплатни и платени имиджови банки от които можете да си вземете жаба.
Двете си имат предимства и недостатъци.
Безплатни ресурси
От време на време се случва да има безплатен обяд. Но не винаги е толкова вкусен. Във безплатните сайтове, могат да се намерят много и полезни ресурси, но не винаги са толкова добри колкото ни трябват. Например във безплатните сайтове за сток картинки, обикновенно снимките не са с толкова добро качество, но все пак са безплатни. Разбира се ако няма бюджет за снимки, безплатните сайтове са добре дошли.

Платени ресурси
Платени сайтове като shutterstock, iStock и прочие са създадени да помагат на дизайнерите и техните клиенти и не е нужно да ги игнорираме, а да инвестираме в тях. Факт е, че изискват паричен ресурс, но ти дават възможност да поддръжаш pixel-perfect качесто на дизайните си, а това за клиента е много важно. Платените ресурси осигуряват и бързина на работата пред тази на безплатните, защото разнообразието в тях е по голямо и по лесно се намира това което търсиш. Да не забравяме и правата за ползване над тези ресурси.

Направи си сам

doitКакъв дизайнер си ако разчиташ само и единствено на ресурси? Аз бих казал – умен, далновиден… но е хубаво също така да можеш и да си създадеш свои ресурси. Все пак това е есенцията на нашата работа – от нищо да направим нещо, че и да работи.
Това много често важи, когато търсим иконки и други ресурси в банки и причие. Понякога е много по бързо да си ги направиш сам, пред това да обиколиш банките в търсене на праивлната иконка да речем. На мен много често ми се случва последно време, да си правя изцяло сам иконките вместо да ги търся.
Важното тук обаче е да знаеш кога да прибегнеш до ресурсна банка и кога да си го направиш сам. Ако тайминга на проекта позволява да си изработиш ресуристе – Go, направи го! НО ако си пришпорен от сроковете, да дадеш 5$ е по добре и евтино.

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

мее

Това, което може би сте забелязали е, че през цялото време никъде не споменах клавишните комбинации. Смятам, че те трябва да се знаят задължително от всеки дизайнер и не са quick tip, а по скоро must have за всеки дизайнер.от автора

Хареса ти статията? Абонирай се за нея и още други интересни статии!

Share Button

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *