Извличане на Photoshop: Производството на мобилни графики продължава да бъде подложено на изгаряне

01 от 08

Какво е екстракт от активите

Създайте comp в Photoshop.

Новата функция за извличане на активи на Photoshop CC 2014 зарежда след загасяне на иначе досадния работен поток от създаване на изображения за отговорно уеб дизайн (RWD). Нека да разгледаме как командата Extract Assets може бързо да намали броя на уеб страниците до активите, готови за монтаж, след няколко минути.

Нека да започнем с очевиден въпрос: Какво е екстракт от активите?

С прости думи, Extract Assets е нова функция във Photoshop, която осигурява функцията на Photoshop's Generator с интерфейс, който помага да се автоматизира създаването на изображения за уеб и екранно проектиране от вашите Photoshop файлове. Командата Extract Assets ви позволява да определите кой слой или слоеве, за които искате да създадете активи, техния физически размер, формат на файла и запазено местоположение на диска. Тази функция не е предназначена за текст, освен ако намерението е да превърнете текста в растерна графика, което наистина не е добра идея.

Да започваме.

02 от 08

Отворете файл с .psd на Photoshop

Започваме с подготовка на уеб страница в Photoshop.

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

03 от 08

Два начина за извличане на активи

Извличането на активите може да бъде намерено в менюто "Файл" или като кликнете с десен бутон на слой.

За разлика от Generate, който също извлича обекти чрез добавянето на графично разширение към името на слой, Extract Assets използва интерфейс, който може да се достигне чрез щракване с десен бутон върху слой или избор на слой и избиране на File> Extract Assets .

04 от 08

Интерфейсът за извличане на активи

Диалоговият прозорец Извличане на активи.

Диалоговият прозорец Извличане на активи е доста интуитивен. Показва се слоят или селекцията, която ще бъде извлечена. Над него се показват размерите на файловете, а под него има контрол, който ви позволява да увеличавате и увеличавате обекта. В дясната страна на диалоговия прозорец се намира магията. Четирите бутона отгоре ви позволяват да изберете разделителната способност / размера на обекта. Следващата лента ви показва избрания слой и кликването върху знака + ви позволява да изведете избрания слой и в друг формат. Trash Ca n премахва слоя от опашката. В следващата лента надолу можете да изберете типа на файла и да регулирате ширината и височината на изходното изображение.

05 от 08

Извличане на изображение в SVG

Извличане на SVG изображение.

Photoshop не обработва SVG изображенията толкова добре и браузърите и устройствата не могат да покажат изображение на Illustrator. Това доведе до възхода на SVG файлове, които се използват за векторни произведения на изкуството, като логото на Illustrator, показано тук. Като вектори тяхната резолюция е независима от устройството, което означава, че те могат да бъдат мащабирани без загуба на детайлност или изображение. За да конвертирате Smart Illustrator Object в svg, изберете svg от pop up и кликнете върху Extract .

06 от 08

Процесът на извличане на активи

Изображенията се поставят в папка на същото място като изображението .psd.

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

07 от 08

Бутонът "Настройки" е вашият нов най-добър приятел

Разпознаване на устройството.

Кликването върху бутона Настройки отваря диалоговия прозорец Настройки, който е сериозно полезен. Настройките вляво са факторите за мащабиране. Това, което правят, е да създадат различните копия на изображението, което разработчикът ще използва в медийните заявки, за да насочи към определена резолюция на екрана на конкретно устройство. Например, 3x версията ще бъде насочена към iPhone или iPad Retina дисплей, докато фактор 1.25 ще бъде насочен към устройство с Android. Суфиксът се добавя в края на името на файла, за да може разработчикът лесно да идентифицира изображението, което да бъде използвано в заявката за медии. Щом приключите, кликнете върху бутона ОК и избраните от вас селекции ще светнат в областта Извличане на активи в диалоговия прозорец. Можете също така да осъществите достъп до настройката, като кликнете върху иконата на зъбно колело в областта Извличане на активи отдясно на интерфейса

08 от 08

Довършителни

Извличат се множество изображения с различни формати и резолюции.

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