Преди да започнем, кратка информация за контекста: може да се натъкнете на известия за поверителност и „бисквитки“ на някои уебсайтове, докато разглеждате (например, популярни форуми показват съобщения за съгласие). Това не е от значение за техническия процес, който ще следвате, но си струва да се отбележи, че тези сайтове често събират съвети от множество потребители. Тук обаче ще намерите изчерпателно и последователно ръководство с доказани методи за избягване на често срещани грешки и създаване на ясни, леки PNG файлове, готови за използване в мрежата или приложенията.
Експортирането на висококачествени PNG файлове изисква баланс между планиране (размер на пикселите, мрежа и цвят), избор на правилния метод за изход и извършване на бързи проверки. Ако следвате горните указания, вашите ресурси ще бъдат ясни, с перфектна прозрачност и готови за всяка среда, от целева страница до мобилно приложение, като същевременно се запази визуална прецизност и разумен размер на файла.
Какво да подготвите в Illustrator преди експортиране
Качеството на PNG не се определя единствено при експортиране; то започва в самия документ. Колкото по-добра е първоначалната настройка, толкова по-малко изненади ще срещнете по-късно. Целта е векторната ви графика да бъде растеризирана с правилния размер, без никакви измествания, които създават ghosting или ореоли. За да постигнете това, първата стъпка е да подравните платното. Създайте или коригирайте документа, като използвате артборд в пиксели, точно до крайния размер, от който се нуждаете (например 1200 × 628 пиксела).
Активирайте съответния изглед: отидете на Изглед > Преглед на пиксели. Този изглед ви позволява да видите как ще изглежда растеризираният дизайн, което е много полезно за откриване на размазани ръбове на икони и тънки линии. Ако забележите необичайно размазване, най-вероятно е така, защото даден елемент е позициониран с помощта на десетични координати или измервания, които не се закръгляват до цели пиксели. В тези случаи използвайте Подравняване към пикселна мрежа, така че контурите да падат върху цели пиксели и да се избегне типичното размазване от 1 пиксел.
Проверете цвета: За PNG файлове, предназначени за екрани, работете в RGB. Използването на Документ > Цветов режим > RGB гарантира, че цветовете се показват правилно в мрежата и на устройствата. Ако преминавате от CMYK, може да забележите промяна в наситеността; възползвайте се от това, за да коригирате тоновете, докато работите във векторен формат. При експортиране активирайте конвертирането в sRGB, когато опцията е налична, тъй като sRGB е уеб стандартът и намалява разликите между браузърите и операционните системи.
Проверете разделителната способност на ефектите: Ако използвате сенки, размазвания или акценти, отидете на Ефект > Настройки на растерни ефекти на документа. Стойността, която зададете тук, ще повлияе на начина, по който тези ефекти се изобразяват, когато се конвертират в растерни изображения. За уеб ресурси обикновено е достатъчно 72–150 dpi; за материали, които ще бъдат отпечатани, или ако търсите максимална рязкост в детайлите, използвайте до 300 dpi. По-високата dpi означава по-големи размери на файловете, така че избирайте разумно; важното е ефектите да се изчисляват с достатъчна плътност, за да се избегне изкривяване при експортиране. Ако работите с интензивна растеризация, е полезно да се консултирате с ръководства за това как да създавате оптимизирани PNG файлове в растеризатори като Photoshop, за да сравните резултатите и процесите.
Обърнете внимание на щрихите и мащабирането: Ако трансформирате произведението си на изкуството, активирайте „Мащабиране на щрихи и ефекти“ в „Настройки“ или когато използвате инструменти за трансформация. Това ще предотврати очертанията да имат дробни ширини, като например 0,5 пиксела, което може да доведе до неравномерно изглаждане. За максимална прецизност помислете за разширяване на щрихите преди експортиране (Обект > Разширяване), така че линиите да станат плътни форми и да загубят зависимостта си от ширината на щриха, което може да доведе до меки ръбове.
Изрязване на излишното: Ако е необходимо PNG файлът да е точно със същия размер като артборда, активирайте изрязването на артборда по време на експортиране. Това гарантира, че няма да има допълнителни пиксели или неочаквани празнини. Това е особено важно за икони или лога, където нежеланите полета са много забележими; използването на опцията „Използване на артбордове“ или неин еквивалент ще гарантира, че PNG файлът ще наследи границите на артборда, без да се поставят допълнителни изображения.
Извършете проверка за качество, за да избегнете често срещани грешки: уверете се, че няма важни елементи, които да са полупрозрачни, ако не са необходими, че фонът е напълно прозрачен, ако очаквате алфа канал, и че текстът е правилно растеризиран до желания размер. За интерфейси или банери се уверете, че текстът не е твърде малък; ако размерът се промени по-късно, експортирайте няколко версии (1x, 2x, 3x), вместо да мащабирате предварително генериран PNG файл, тъй като увеличаването на растер винаги влошава остротата . Ако е необходимо да гарантирате, че типографията няма да се провали, помислете за конвертиране на текст в обект преди експортиране.
Как да експортирате PNG без загуба на качество: методи и настройки
Illustrator предлага няколко опции за експортиране в PNG. Не всички са еднакви, така че изберете тази, която най-добре отговаря на вашия работен процес. Най-общо казано, „Експортиране за дисплеи“ и панелът „Експортиране на активи“ са най-удобни за множество размери; „Експортиране като“ ви дава контрол за фина настройка в един файл; а „Запазване за уеб“ (стара версия) все още е полезна за опции за цвят и предварителен преглед. Важното е да прилагате последователни корекции, за да поддържате остротата, цвета и прозрачността , независимо от метода.
Експортиране като: директен контрол за PNG файл
Отидете на Файл > Експортиране > Експортиране като… и изберете PNG. Отметнете „Използване на артбордове“, ако искате изрязването да е съобразено с артборда. В полето с опции се стремете към следните стойности: резолюция с необходимия размер (можете да зададете персонализирана резолюция за мащабиране), прозрачен фон и анти-алиасинг. Анти-алиасингът е ключов тук: изберете „Оптимизирано за изкуство (суперсемплиране)“ за илюстрации и форми или „Оптимизирано за текст (с намек)“, ако давате приоритет на малък текст. Това ще гарантира, че ръбовете се сливат плавно без ореоли на светъл или тъмен фон.
Ако ви е необходим PNG файл с точните размери в пиксели (напр. 1024 × 1024), в идеалния случай артбордът вече трябва да е с този размер. Можете обаче да използвате опцията „Експортиране като“, за да умножите по мащаб (50%, 100%, 200% и т.н.). Избягвайте мащабирането до некръгли стойности, които водят до неравномерно повторно семплиране. Ако видите размазване в предварителния преглед на пикселите, върнете се назад и коригирайте размерите на артборда или измерванията на вашите елементи, за да ги закръглите до цели числа и да избегнете интерполация.
Експорт за екрани: Множество размери в движение
Достъп чрез Файл > Експортиране > Експортиране за екрани. Това е идеално за подготовка на 1x, 2x и 3x варианти за уеб или мобилни устройства. Добавете мащаби (напр. 1x, 2x) и изберете PNG като формат. Можете да експортирате по артборд или по ресурс (ако дефинирате ресурси от панела). Уверете се, че опцията за фон е зададена на прозрачен и че суфиксите (като @2x) са генерирани правилно. Този метод спестява време и гарантира последователност в различните размери, така че всяка плътност получава своя собствен растер и не разчитате на последващи мащабирания. Ако имате нужда от документация за работните потоци за експортиране, консултирайте се с ръководства за запазване на вашите файлове и формати за най-добри практики.
Полезен съвет: ако вашият дизайн изглежда странно при 2x увеличение, защото първоначално сте го създали с „неделим“ размер, конфигурирайте основния артборд с размери, предназначени за мащабиране (напр. 48, 96, 144 пиксела и т.н.). По този начин, когато генерирате 2x/3x версии, пикселите ще се поберат в мрежата и рязкостта ще се запази. Тази предпазна мярка е безценна за икони и интерфейси с перфектна пикселна точност.
Панел за експортиране на активи: Автоматизирайте безболезнено
Плъзнете елементи към панела „Експортиране на ресурси“ и дефинирайте мащабиране и формати за всеки ресурс. Това е мощен начин за поддържане на система от токени за визуален дизайн. Можете да му кажете да експортира лого в PNG 1x, 2x и SVG, и икона в PNG 24 с прозрачност и WebP (където е приложимо). Когато екипите поискат промени, просто щраквате върху „експортиране“ и това е всичко – винаги с едни и същи настройки. Това елиминира несъответствията и спестява безброй повторения.
Запазване за уеб (стара версия): все още полезно
Въпреки че е стара версия, File > Export > Save for Web (Legacy) предлага много полезен преглед. Изберете PNG-24 за пълна прозрачност (PNG-8 намалява цветовата палитра и често въвежда ленти). Отметнете Transparency (Прозрачност) и задайте Matte (Мат) на None (Няма), за да избегнете ореоли около краищата. Ако видите опции за конвертиране в sRGB, активирайте ги, за да унифицирате цветовете в различните браузъри. Този прозорец ви позволява също да регулирате размера в пиксели с добър преглед, в случай че е необходимо да видите точния резултат, преди да потвърдите.
Цвят и консистенция: избягвайте цветни изненади
За уеб употреба се уверете, че документът е в RGB и конвертирайте в sRGB при експортиране, когато е необходимо. Деактивирайте необичайните профили и избягвайте смесването на CMYK и RGB елементи в един и същ PNG файл. Ако получите произведение на изкуството с различни профили, препозиционирайте и преинтерпретирайте цвета преди експортиране. Целта е полученият PNG файл да изглежда еднакво в Chrome, Safari и Firefox, а това изисква използването на sRGB като общ знаменател.
Прозрачност и ръбове: нулеви ореоли
Когато експортирате с прозрачност, избягвайте временни бели или черни фонове в документа, тъй като те могат да попречат на анти-алиасинга. В „Запазване за уеб“ задайте „Мат“ на „Няма“; в „Експортиране като“ оставете фона като „Прозрачен“. Ако забележите светъл или тъмен воал по ръба, проверете дали няма обекти с ненужна частична непрозрачност и дали анти-алиасингът е зададен правилно. За малък текст опитайте „Оптимизирано за текст“, а за икони с прави линии използвайте „Няма“, ако се стремите към перфектни резултати до пиксела, въпреки че ще загубите част от анти-алиасинга. Това ще изчисти контура без артефакти.
Друг трик с иконите: използвайте равномерни ширини на щриха и се опитайте да подравните фигурите, центрирани върху пиксели. Линия от 1px, центрирана върху пиксел, изглежда остра; линия от 1px, обхващаща два пиксела, е с изглаждане и изглежда размазана. Изгледът „Пиксел“ и опцията „Подравняване към мрежата“ вършат половината работа вместо вас, като гарантират, че всеки ръб попада там, където трябва.
Размери и плътност: 1x, 2x, 3x
За съвременни интерфейси, предоставете мащаби поне 1x и 2x. Ако проектирате в 1x, генерирайте версиите 2x и 3x от инструмента „Експортиране за екрани“. Ако проектирате в 2x (много често срещано), експортирайте версията 1x, като я разделите на 2, а версията 3x, като я умножите по 1,5. Никога не мащабирайте във външен редактор от краен PNG файл; винаги се връщайте към векторния формат и експортирайте директно в новия мащаб. Тази дисциплина контролира остротата и размера на файла в цялата ви система от активи.
Бърз контролен списък преди натискане на бутона
Добра идея е да прегледате един прост контролен списък. Проверете: таблицата е с точния размер, позицията и размерите на елементите са в цели пиксели, цветовият режим е RGB, растерните ефекти са с правилната резолюция, антиалиасингът е правилен, прозрачността е чиста и, ако е необходимо, е извършено преобразуване в sRGB. С това, 90% от проблемите „размазано“ изчезват, защото гарантирате, че векторните и растерните данни са съвместими.
- Артборд и закръглени измервания в пиксели, за да се избегнат дроби.
- Активиран е пикселен изглед за валидиране на действителната острота.
- RGB + sRGB при експорт за съгласуваност между дисплеите.
- Антиалиасингът и прозрачността са конфигурирани според типа на изображението.
Отстраняване на често срещани проблеми
Размазан текст? Увеличете леко размера на шрифта, използвайте „Оптимизирано за текст“ в анти-алиасинга, проверете дали текстът не е в десетични знаци и избягвайте мащабирането на крайния PNG файл. Понякога си струва да растеризирате този текст като отделно изображение с 2x увеличение, за да увеличите плътността на пикселите и четливостта, без да засягате останалата част от изображението. Ако работите с Photoshop, ще откриете, че копирането и растеризирането между приложенията ускорява нещата; вижте техники за растеризиране и прехвърляне на елементи между Photoshop и Illustrator.
Икони с назъбени ръбове? Подравнете ги с пикселната мрежа, използвайте четни (2px, 4px) или нечетни ширини, съответстващи на мрежата, и помислете за деактивиране на анти-алиасинга, ако стилът е строго пикселно изкуство. Ако иконата има диагонали, оставете анти-алиасинга на „Оптимизирано за изкуство“, за да изгладите назъбените ръбове, но избягвайте паспартута, които създават ореоли при променящи се фонове.
Избледнели цветове в браузърите? Уверете се, че сте конвертирали в sRGB в експортираното изображение и избягвайте екзотични вградени профили. На монитори с широка цветова гама, неконвертираното изображение може да изглежда пренаситено в настолните приложения и недонаситено в браузърите. Конвертирането в sRGB е вашата предпазна мрежа за междуплатформена съгласуваност.
Голям размер на файла? PNG е беззагубен и прозрачен, но не винаги е най-лекият. Намалете размерите, ако е възможно, премахнете невидимите слоеве преди експортиране, компресирайте с външни инструменти за беззагубен компресиране (напр. optipng, pngquant - използвайте внимателно) и когато не се нуждаете от прозрачност, помислете за JPEG или WebP. Въпреки това, ако трябва да се придържате към PNG, поддържането на чисти палитри и избягването на ненужни алфа канали спестява килобайти.
Виждате ли черно-бели ореоли върху променливи фонове? Това е неправилно приложен матов слой. В „Запазване за уеб“ използвайте Matte = None; в противен случай използвайте прозрачен фон и коригирайте anti-aliasing. Ако наследявате произведение на изкуството със сянка върху бяло, пресъздайте сянката върху действителни прозрачности, в противен случай интерполацията ще разтегне бялото и ще създаде контур-призрак.
Добри практики за работен процес
Работете с главен векторен файл, като използвате ясни слоеве и последователни стилове. Определете базови размери, съвместими с плътности 1x/2x/3x от самото начало, и използвайте „Експорт за екрани“ за мащабиране. Последователното именуване (icon-home@1x.png, icon-home@2x.png и др.) и специфичните за платформата папки рационализират доставката. Ако работите като екип, документирайте настройките за експортиране във вътрешен readme файл, така че всички да генерират едни и същи двоични файлове без отклонения.
Интегрирайте визуални валидации: отворете PNG файловете в реалните среди, където ще бъдат използвани (браузър, мобилно устройство, приложение). Не разчитайте единствено на предварителния преглед на Illustrator. В уеб пространството поставете PNG файловете върху различни фонове, за да тествате за ореоли; на мобилно устройство ги качете в прототип и проверете за висока плътност. Тази стъпка на валидиране предвижда проблеми и ви позволява да ги коригирате преди публикуване.
Не забравяйте, че Illustrator растеризира в движение; ако вашата творба разчита основно на ефекти, опитайте да разширите или конвертирате някои части в междинни растерни изображения с висока резолюция преди окончателното експортиране. Това не е норма, но при сложни композиции понякога е единственият начин да предотвратите непоследователното преизчисляване от енджина между експортиранията.
