1. Про формати:

Часто на дизайнера скидають технічну роботу по нарізці графіки для iPhone і Android. Обов'язково з pixel-perfect, адже графіка це головний виразний засіб. На нарізку графіки витрачається багато часу, який краще витратити на роботу головою, а не руками. На щастя, процес нарізки графіки автоматизований у величезній кількості програм і плагінів. Можливо, у вас немає бажання освоювати нові інструменти, і ви можете дозволити собі завести аутсорсера. Він по хазяйськи поріже картинки, але виконану роботу доведеться контролювати, писати task із зауваженнями, стежити за оптимізацією графіки і платити гроші людині. В результаті заощаджений час зводиться нанівець. Тому давайте подивимося, які інструменти для виконання рутинної роботи нам пропонує ринок.

На початку роботи ми повинні встановити правильні настройки кольору для Photoshop. Насправді, досить довго тягнеться ця епопея з правильним відображенням кольору картинок. Забавно і сумно спостерігати, як імениті веб-дизайнери та навіть поліграфісти з двадцятирічним досвідом роботи раз по раз наступають на одні й ті ж граблі під назвою Система Управління Кольором (CMS).

Браузери не дуже добре працюють з CMS. Стандартне правило: CMS працює тільки якщо зустріне впроваджений в картинку профіль. Все інше буде показано користувачеві як є, а саме браузер присвоїть профіль монітора, що призведе до спотворення кольору. А адже профіль монітора допустимо призначати зображенню тільки коли зображення створив монітор (скріншот). Разом, картинка без профілю буде по-різному відображатися в браузерах, одні браузери присвоять їй робочий простір інтернету sRGB, інші присвоять профіль монітора користувача. Правильно показує колір тільки Photoshop , Це аксіома, все інше може брехати навіть з впровадженим профілем. Але краще рішення це слідувати правилу: впроваджений в картинку профіль гарантує, що всюди картина буде відображатися однаково.

Виставляємо наступні настройки, щоб бачити макети в умовно правильних кольорах:

І тримаємо в голові ідею, що профіль монітора в операційному середовищі, потрібно бути побудований приладом після апаратного калібрування. Якщо апаратної калібрування не було, то ставте профіль виробника монітора.

Отже, з кольором ми розібралися. Повернемося до рутинної ручної роботи. Зазвичай для нарізки іконок «фахівці» копіюють векторні Шейп в окремі файли, натискають Cmd + Shift + R, зберігають іконки через save for web, ресайз, домагаються pixel-perfect, вручну перейменовують отримані файли. Або дизайнер-перфекціоніст може розставити купу слайсів, рівно розмістити на робочій області все іконки, грамотно перейменувавши шари. Відразу обмовлюся, що не маю нічого проти слайсів, але вони виправдані тільки при використанні у виробництві, в якому колірна гамма макета може помінятися в самий останній момент. В цьому випадку готові слайси допоможуть швидко перенарезать графіком. Але наша сьогоднішня мета-заощадити час в менш невизначеному виробництві. Звернемо увагу на наступні програми:

Sketch- великий платний векторний редактор, що існує тільки на OSX. Вміє автосохранение, версійність і артборди. Вміє експортувати графіку в усіх потрібних розмірах, додає префікси до назви файлу. Крім стандартного експорту графіки для iOS, за допомогою одного чудового плагіна ви зможете різати всю графіку для Android в один клік (від mdpi до xxxhdpi). Якщо дивитися на ринок в цілому, то Sketch в парі з чудовими плагінами zeplin для створення специфікацій і craft для наповнення макетів контентом можна вважати основним набором інструментів для UI / UX дизайнера. Важливо відзначити, що Zeplin сам вміє різати ваші макети, причому без вашої участі. все хоткеі Скеча .

Assistor PS -умеет майже все.

Resonator - все іконки з вихідних файлів поміщаються стовпцями в проміжний файл Res-Project.psd, при цьому відбувається ресайз під все щільності екранів. В отриманому файлі Res-Project.psd ви доробляти все під піксель-перфект, а вже потім зберігаєте іконки. Так само плюс в тому, що вся «нарізка» зберігається в одному файлі, і її не треба шукати в різних папках, коли потрібно переробити якусь іконку.

Cut & Slice me -плагін автоматично конвертує розміри з максимально великого в маленькі, відповідно, макет повинен бути в максимальному розмірі (XXXHdpi або @ 3x). Якщо ви малюєте не в найбільшому розмірі, то вам допоможе плагін 2XScaler . Cut & Slice me cам створить папку з ім'ям «ім'я файлу» _Android_assets, і всередині розкидає готові комплекти графіки в відповідні папки розмірів. Для коректної роботи необхідно покласти графіку під нарізку в папку і в кінці назви поставити «@» - FolderName @. Зручний для нарізки іконок. І безкоштовний.

LayerCraft - самий звичайний плагін для нарізки. Вміє змінювати розмір документа на 200% і 50%, обрізати прозорі пікселі, нарізати розміри iOS: 1x, @ 2x, @ 3x; Android: Mdpi, Hdpi, Xhdpi, XXHdpi, XXXHdpi з обраних шарів. При нарізці важливо враховувати невеликий нюанс від Apple: візьмемо оригінальний iPhone без Retina Display за коефіцієнт масштабування 1. iPhone 5 з Retina дисплеєм матиме коефіцієнт масштабування 2. А ось iPhone 6 Plus має Retina Display HD. Коефіцієнт масштабування 3 і зображення після downscaled від логічних 2208 × 1 242 пікселів стає 1920 × 1080 пікселів. Відповідно, графіка pixel-perfect перестане бути такою, так як 1920/2208 = 1080/1242 = 20 / 23. Іншими словами, екран телефону масштабується до приблизно 87% від свого початкового розміру.

Повернемося в Photoshop і встановимо правильні галочки:

Далі, потрібно переконатися, що у вас є iPhone 6 Plus, xScope або інший софт для перевірки відображення графіки на пристрої. Вставляємо векторну іконку як Shape Layer, зменшуємо до 20%, використовуємо інструмент Direct Selection Tool для підгону контуру до піксельної сітці. Виділяємо вашу іконку і масштабується до 500%, отримали нашу графіку pixel-perfect в розмірі для Неретін. Тепер забавний нюанс: ви завжди повинні масштабувати іконку від верхнього лівого кута і стежити. щоб значення X і Y були парними. Цей спосіб допоможе вам зберігати якість графіки при автоматичному ресайз будь-яким плагіном. Маленька хитрість: дотримання кратності всіх відстаней допоможе вирішити багато проблем. На виході для XXXHdpi сітка повинна бути 12px, для iPhone 6 Plus сітка 6px.

Або ж ви можете намалювати макет для iPhone 6 Plus, і керуватися принципом ресайз 4px> 2px> 1px.

PNG express - вважається кращим з усіх доступних плагінів для образмеріванія макета в Photoshop, та ще й за дуже осудні гроші (в доларах). Припустимо, ви створили ряд кнопок з декількома станами. Створюючи групу, яка містить шари для кожної кнопки і додаючи префікс "PNG" до назви групи, ви вказуєте плагіну PNG Express, які верстви потрібно експортувати. При додаванні префікса "STATE: _on" або "STATE: _off" до назви відповідних шарів в групі, PNG Express експортує і назве підсумкові файли в залежності від стану. Наприклад, якщо в групі з назвою "PNG: map", є шари під назвою STATE: _on і STATE: _off, то вони будуть перетворені у файли map_on.png і map_off.png. При додаванні суфікса "-m" до назви шару або групи, вони будуть об'єднані з усіма видимими шарами. Це дуже зручно, якщо у вас в проекті є шари з плавними переходами і взаємодіями з іншими верствами. Ще одна цікава особливість плагіна полягає в можливості вказувати точні розміри зображень для експорту, щоб не обмежуватися тими значеннями, які використовує PNG Express.

Specking - відображає значення ширини і висоти блоків, margin і padding. Якщо ваші програмісти вимагають розмітити макет, то цей інструмент цілком підійде. Хоча буде зручніше навчити програмістів виставляти макет фоном, а текст робити контрастним кольором, щоб різниця відразу було видно (зазвичай це жовтий або зелений). Пара хвилин і готово, і ніякої розмітки. А якщо ви хіпстера, то можете звернути увагу на повний аналог Specctr , Яким користуються фахівці Apple, Google, Autodesk.

А тепер дуже важливий момент. Є певний ProgrammingStyle. Він описує багато корисних для розробки речей, в тому числі дає поради про правильне найменування файлів нарізки. Суть така: не потрібно всю нарізану графіку під iOs скидати в одну папку, називаючи іконки close.png, close_popup.png і т.п. Всі перераховані вище інструменти і плагіни творять магію тільки за умови, що дизайнер підтримує исходник в ідеально структурованому порядку і не намагається симулювати порядок розфарбовує груп і розставлені «замків». Привчайтеся робити вихідні охайними. Дописувати префкіси і постфікси до іконок. Це ваша робота, робити все технічно чітко і грамотно. Виняток - зоряний арт-директор, який створив круту концепцію і віддав її провідним дизайнерам. Вони приведуть все відступи в кратні значення, перейменують шари, структурують вкладеність елементів, напишуть всі назви без пробілів і в lowercase. Наведу приклад досить грамотного найменування файлів нарізки одного з моїх програм під iOS:

тези:

1. не використовувати кирилицю
2. не використовувати пробіли
3. використовувати тільки lowercase
4. має сенс створювати папку in для всіх входить вимог, out з фінальним дизайном, Ассет, графікою для сторі, анімаціями. І окрему папку для дизайнерів, де зберігаються вихідні.

Навіщо я написав параграф про правильне найменування файлів? Adobe подарувала нам чудову можливість не різати графіком, а просто правильно називати шари! Ось докладний опис http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html

Якщо коротко, то починаючи з версії CC, Photoshop вміє сам зберігати графіку в режимі реального часу. Ви перейменовуєте шар, картинка зберігається. Для збереження шарів потрібно включити опцію File -> Generate -> Image Assets і поставити в кінці імені шару постфікси у вигляді точки і розширення файлу (.jpg, .png, .gif). Треба нарізати три розміри під iOS? Запросто, додаємо «плюс»: 100% icon.png32 + 200% [email protected] + 300% [email protected]. А ось шаблон під андроїд 100% icon_xxhdpi.png32 + 67% icon_xhdpi.png32 + 50% icon_hdpi.png32 + 33% icon_mdpi.png32

Як ви могли помітити, графіку можна масштабувати, просто вказавши відсотки, допустимі одиниці виміру пікселі, сантиметри, міліметри, і дюйми. Якщо одиниці виміру не вказані, Photoshop бере за одиницю виміру пікселі. Photoshop Generator досить елементарний інструмент, у якого є ще одна чудова функція: зміна розмірів зі збереженням пропорцій. Ви хочете отримати картинку з шириною 350 пікселів, але так, щоб висота картинки була підігнана до ширини зі збереженням пропорцій? Для цього замість висоти або ширини в префікс Вам треба поставити знак питання: 350x? image.png

Якщо вам не хочеться освоювати щось, що змушує відпускати мишку і використовувати клавіатуру, то був автоматизований і цей процес плагіном oven . У нього забиті шаблони експорту IOS: @ 1x, 2x @, @ 3x. Android: ldpi, MDPI, hdpi, xhdpi. З версії Photoshop V15.2 плагін неактуальний. А починаючи з версії V14.2.1 були виправлені дещо які баги обліку коригуючих шарів, що дозволяє експортувати графіку за розмірами маски. Slicy для Mac і раніше зручніше в плані найменування шарів, але це скоріше питання звички.

На практиці Generate відмінно підходить для автоматизації нарізки іконок. Зазвичай іконки додатків складаються з фону і символу.

1. Кожна ікона повинна розташовуватися в групі. Групі даємо ім'я кінцевого файлу.
2. Однаковий фон для всіх іконок робимо через Smart Object, символ малюється окремо для кожного розміру іконки (для дотримання pixel-perfect).
3. Для пристроїв Apple нарізка іконок повинна бути квадратної, але на девайсах іконки відображаються круглими або квадратними з округленими кутами. Ви можете застосувати маску з потрібною формою на групу шарів з іконкою, в цьому випадку нарізка буде генеруватися квадратної. Але іконка в Photoshop буде відображатися в потрібній формі завдяки масці.

Також, Adobe подарував нам ще один вбудований інструмент - Extract Assets. Вам достатньо виділити потрібні шари або групи шарів, натиснути на обраному шарі праву кнопку миші і вибрати пункт меню Extract Assets. Можна додавати коефіцієнти масштабування картинки і автоматизувати найменування шарів, експорт можливий в формати PNG-8, PNG-24, PNG-32, GIF, JPG, або SVG. Якщо ви дали однакові назви верствам, вони будуть автоматично перейменовані.

Ви можете звернути увагу і на менш популярні на вітчизняному ринку плагіни: Breezy (Безкоштовний), Slicy , PNG Hat , Slash , Lasagna , Export Pro . І не забуваємо про оптимізатори, начебто pngcrush, optipng, jpegtran, PngThing, PngCrusher, ImageOptim, SmushIt. imgo, borschik. Графіка після дизайнера повинна бути ідеальною, якщо це дозволяють терміни. Е ще один важливий момент, на який не звертають увагу навіть мастодонти вітчизняного дизайну: картинка не повинна ставати інший через зміну якості екрану. Якщо у вас картинка в mdpi виходить 12 на 12px, то вам в будь-якому випадку необхідно вмістити форму іконки в цей розмір. Іконка і в xxxhdpi, і в ldpi повинна бути однаковою.

Про формати:

Отже, графіка нарізана і оптимізована, розкидана по 7-10 папок, ви щасливі, але можна зробити краще! Подивимося на парочку не самих поширених форматів, за якими майбутнє, і які ви можете використовувати у себе на проектах вже зараз:

SVG вже давно використовується в продакшені і все про нього знають. Активно використовується для нарізки графіки під Android. XML-подібна структура, містить багато крутих фільтрів, текст з SVG гуглом індексується і копіюється не гірше звичайного. Дуже важливий плюс-можливість додати всередину media queries (в залежності від своїх розмірів змінюється вид файлу SVG, можна навіть міняти вектор і base64 в залежності від розміру). Це частково вирішує проблему з субпиксельной рендерингом, адже потрапляння в піксельну сітку це основне бажання справжнього дизайнера. SVG можна зробити бінарники, на щастя, безпечним, і за допомогою SLIM в майбутньому можна буде робити круті анімації. А зараз старий добрий JavaScript вміє анімувати елементи DOM, тому ви можете анімувати елементи SVG файлу. Але звідси випливає й проблема: при анімації складної графіки з'являться лаги, адже кожен елемент в SVG це елемент DOM.

Використовувати чи ні-вирішувати вам. Але цей формат не помре, а буде тільки розвиватися. SVG має два профілі, які при збереженні вам покаже графічний редактор: SVG Tiny це укорочена версія для телефонних браузерів і SVG Basic для більш складних пристроїв. Для продакшена зберігати краще в версії 1.1 (від 2003 року) без всяких Tiny і Basic, так як специфікація 1.2 досі розробляється і ніколи не перестане бути лише кандидатом. Також, ви можете використовувати версію SVGZ, тобто версію SVG зі стисненням програмою gzip.
Готувати SVG графіку для інтернету просто:

• оптимізуєте кількість точок за допомогою інструментів на кшталт Simplify (illustrator), функції Smart Remove Point у плагіна VectorScribe v2, скорочення числа вузлів в CorelDRAW. Найкраще, звичайно, VectorScribe і VertorFirstAid від Astute.
• Проганяєте отриманий SVG через оптимізатор начебто svgo .
• При збереженні з Illustrator в налаштуванні Decimal Places вкажіть циферку 3, якщо ваша SVG менше 32px. Якщо картина до 256 px, то циферку 2, все що більше 256px стерпить циферку 1. Якщо вказати 1 для іконки менше 32px, то лінії з исходника і в підсумковій SVG будуть сильно відрізнятися, особливо якщо початкова іконка була pixel perfect. Чекбокс responsive знімаємо.
• Знімаємо галочку Preserve Illustrator Editing Capabilities, вона сильно збільшить розмір вашого файлу, зберігши багато можливостей для подальшого редагування файлу в Illustrator.
• Почистити від сміття або в блокноті після Illustrator, або пропустити через svgo. Або зберігати за допомогою inkscape.

Протипоказання для використання SVG: зовсім маленькі іконки (нехай будуть в base64) і іконки зі складними градієнтами. Або ви не вмієте робити SVG-спрайт. Для анімації SVG підходить snap-svg .

Іконочние шрифти бажано забути. Не всі пристрої підтримують області приватного використання Unicode, іконочние шрифту не анімуються. Вони завжди монохромні, додайте до цього різний рендеринг на різних операційних системах і навіть в різних браузерах. Також, виникають проблеми при верстці версії сайту для слабозорих людей. Якщо ви все ж використовуєте іконочние шрифти, готуйтеся контролювати розмір шрифту, висоту рядка, вирівнювання, висоту і ширину блоку.

WebP це як jpeg, але краще і з полупрозрачностью і анімацією. Формат WebP був розроблений компанією Google для створення маленьких і більш якісних зображень, які можуть прискорити завантаження сторінок. Файл WepB складається з відомостей про зображення VP8 і контейнера на основі RIFF. Це новий формат файлів, який використовує стиснення без втрат якості фотографій. Вміє стискати анімацію з втратами, але не дає зворотної сумісності. Підтримує 8-бітний формат YUV 4: 2: 0, що може бути причиною втрати кольору на зображеннях з 1-пиксельними контрастними переходами, наприклад в піксельної графіку та інших видах комп'ютерної графіки. Вміє і Lossless.

Про растрові спрайт я краще промовчу, в інтернеті вони вбиті технологіями DataURL і SPDY. Якщо підсумувати, кращий спосіб нарізки графіки для інтернету це карта SVG. І не потрібно ставитися до нарізки графіки абияк, кривої антиалиасинг псує враження від програми. Якщо користувач поставить вам 1 зірочку з 5 лише за погано підготовлену графіку, то вам знадобиться набрати 20 оцінок в п'ять зірок, щоб середній бал став 4,8. Кілька одиничок поспіль, і вам буде дуже важко отримати сумарну оцінку вище 4. Чи не правда, хороша мотивація виконати свою роботу якісно з першого разу?