Ръководство за бързо прототипиране с Photoshop CC

Сега има много инструменти за прототипиране и методи, които ще ви помогнат да създадете макети на уебсайтове бързо и лесно. Може да не го осъзнавате, но Photoshop CC е чудесен инструмент за бързо прототипиране. С всяка ревизия софтуерът придобива повече функционалност за дизайнерите, които искат бързо да създават телени рамки или прототипи, които да споделят с клиент, или да създадат дизайн, готов за разработчик.

Най-полезните функции за бързо прототипиране в Photoshop CC включват възможностите за изолиране на слоеве, ощипване на ъглите с инструмента за закръглени правоъгълници на живо и копиране на CSS атрибути от отделни слоеве. А настройката на Creative Cloud също предоставя полезни елементи за съвместна работа ( абонирайте се за Adobe Creative Cloud тук ).

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



01. Започнете с решетка

Стъпка за бързо прототипиране 1

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Настройте документ с размерите на екрана, за който проектирате (смартфон, таблет и т.н.). След това създайте мрежа, която ще формира основната структура - безплатно разширение GuideGuide е полезно за това. Отворете разширението нагоре, въведете вашите ширини на полета, брой колони и ширина на улея. Натиснете бутона GG и имате вашата мрежа.

02. Определете различни области

Бързо прототипиране стъпка 2

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

В този момент е полезно да блокирате ключови области от оформлението на вашата страница. Създайте папка за заглавката, долния колонтитул, съдържанието и всичко друго, от което се нуждаете. Добра идея е да дефинирате всички основни области на дизайна на сайта - като започнете със светлосива кутия, за да ги очертаете. Тук използвах инструмента Rectangle, за да нарисувам заглавната част на сайта (1200 x 240px) и добавих заглавието.

03. Добавете малко навигация

Стъпка за бързо прототипиране 3

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Сега добавете елементи за навигация. За да дублирате вашия тип, изберете слоя, задръжте Избирам / Всичко бутон и плъзнете. Холдинг Shift ограничава подравняването. Подравнете текстовите си слоеве прецизно, като изберете целия текст за навигация и натиснете бутона Разпределение на вертикални центрове в лентата с опции на инструмента. Това вертикално подравнява и разпределя равномерно слоевете ви, което го прави идеален за елементи от менюто, както е показано.

04. Закръглете правоъгълниците си

Стъпка за бързо прототипиране 4

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Тук добавяме във форма за регистрация към оформлението на началната страница, като използваме инструмента закръглени правоъгълници. Photoshop CC има функция за закръглени правоъгълници на живо, която ви позволява да промените радиуса на ъгъла на вашата форма. Това означава, че можете да се върнете назад и да смените ъглите си по-късно, ако вашият дизайн го изисква. Това може да звучи като незначителна функция, но е много удобно.

05. Добавете изображения

Стъпка за бързо прототипиране 5

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Струва си да конвертирате изображения в интелигентни обекти, тъй като това ги прави по-лесни за актуализиране или подмяна. Можете да използвате правоъгълниците си за резервоари като векторни маски за задържане на изображения. Или въведете изображение като нов слой, дублирайте маската на правоъгълника и го свържете към този слой, или направете селекция от вашия правоъгълник и използвайте Paste Special> Paste Into.

06. Въведете стилове на слоеве

Стъпка за бързо прототипиране 6

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Стиловете на слоевете са приличен начин за добавяне на ефекти. За да приложите използвания в момента стил на слой към друг слой във вашия стек, натиснете Избирам / Всичко и плъзнете иконата FX към новия си слой. За да създадете слой Hover Over, който може да бъде включен или изключен, просто дублирайте фоновия правоъгълник и групирайте този слой и текстовия слой в група слоеве.

07. Изолирайте слоевете си

Стъпка за бързо прототипиране 7

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Това е друга полезна функция в Photoshop CC, ако искате да редактирате само някои от вашите слоеве. Изберете слоевете, които искате да редактирате, и след това отидете на Select> Isolate Layers. Това ви позволява да се съсредоточите върху специфичните области, които се нуждаят от работа, без объркването на други слоеве, които претрупват нещата.

08. Създайте изображения

Стъпка за бързо прототипиране 8

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Adobe Generator е функция на Photoshop CC, която ви позволява да създавате изображения на активи в движение. Отидете на File> Generate> Image Assets. Сега, в панела 'Слоеве', добавете файлов суфикс като .png или .jpeg, за да експортирате автоматично този слой в определена папка. Направихме го тук с файл с икони.

09. Копирайте CSS атрибути

Стъпка за бързо прототипиране 9

Щракнете върху иконата горе вдясно, за да видите изображението в пълен размер

Страхотна функция в Photoshop CC при създаване на HTML прототип е възможността за копиране на CSS на слой. Да го направя Ctrl + десен бутон на необходимия слой и натиснете Copy CSS Style, за да добавите кода в клипборда. Отворете нов документ в Dreamweaver, Muse или Adobe XD и поставете вашия CSS код.

Тази статия първоначално се появи в Компютърни изкуства , водещото световно списание за графични дизайнери. Абонирайте се тук .

Свързани статии: