Не дивно, що Adobe програла битву за найкращий інструмент для дизайну інтерфейсів. Спочатку Sketch показав, що багато речей можна зробити значно зручніше, ніж у Photoshop. І Adobe навіть якийсь час це ігнорувала, аж поки не зробила власний (вже мертвий) XD. Ну а Figma 💻 той результат ще закріпила, правда, в процесі ледь не продалася.
Цими вихідними посидів у фотошопі короч. Мало хто знає, але там є підтримка змінних — навіть у фігмі їх ще десь рік тому не було. Стає в пригоді, якщо треба нагенерити пачку схожих зображень по шаблону: візитівки, листівки зі всратими цуценятами, запрошення на весілля або, як у моєму випадку, купа однотипних обкладинок для статей у блог (не собі).
Робиться це таким чином: спочатку встановлюєте звʼязок між шарами й змінними, а потім підставляєте туди різні значення з набору даних. Наприклад, можна текст міняти, підставляти інші зображення під масочку, вмикати/вимикати видимість чогось тощо. Набивати набір даних руками в самому фотошопі не надто зручно — краще імпортнути з CSV.
Краще ж?
Відкрив Excel, накидав швидесенько, експортнув — і ПОТРАПИВ У ПЕКЛО!!! Я не жартую 😫 Фотошоп просто висирає помилку й відмовляється імпортувати дані.
1. Excel при збереженні в CSV покладається на регіональний формат системи. В Європі десятковий роздільник зазвичай — це кома, тому стовпчики ексель розділяє крапкою з комою. Важко в це повірити, але так: фотошоп це не схавав. Довелося фіксити вручну.
2. Microsoft хоч і використовує UTF-8 давно, але полюбляє бахнути на початок файлу BOM. Вгадайте шо? Правильно, фотошоп не зміг вдуплити. Перезберіг руками без BOM.
3. Якщо стовпчиків більше, ніж змінних, які ви визначили, то фотошоп проігнорувати їх не може — кидає помилку. Але не каже, що саме не так, а пише геть неадекватну маячню. Багаторічний досвід порпання в лайні (aka інтуїція) підказав мені спробувати прибрати зайві — і це допомогло.
4. Кодування. Так, ви все правильно прочитали. Проблеми з кодуванням у 2k25. Так, у UTF-8! 🤕 Ми-то з вами звикли давно взагалі на це увагу не звертати, бо нині будь-який нормальний текстовий редактор одразу детектить без проблем. Але не суперсофт від Adobe! Якщо залишити «автоматичне» визначення кодування, то деякі не-ASCII символи поїбало. Потім ще щось не виходило. Врешті перезберіг взагалі в UTF-16 і вказав вручну при імпорті.
5. Лапки. Тут взагалі якийсь треш, який мені важко пояснити. Короч, у мене був текст на кшталт “some text” з правильними типографськими лапками, але при імпорті вони чомусь зʼїдалися, і у фотошопі їх не було. Вирішив загорнути всі стовпчики в програмерські лапки. Вийшло отак: "“some text”". Вгадайте, в якому вигляді це потрапило у фотошопівський датасет? Хуяк: "some text” — зліва пряма програмерська, справа нормальна типографська. Виправив руками в самому фотошопі (датасет на 30 елементів).
6. У мене насправді два шаблони з двома датасетами були. У перший я так і не зміг імпортувати CSV. А знаєте, що зміг? Tab-delimeted plain text! Нє, ну а шо, хоч якось.
Фу-у-ух, це було важко. Ну далі-то вже як пісня литиметься, мабуть.
Просто береш і генеруєш з того набору даних по шаблону пачку зображень… у форматі PSD 🤦♂️ Що з ними робити? Ну, у фотошопі є процесор зображень, який вміє переганяти PSD у JPEG або TIFF. Як щодо PNG або WebP? Нє, не чули. Зберіг все в TIFF, а потім тупо вже у маківському файндері конвертнув у PNG. Спочатку намагався зробити це через ImageMagick, але виявилося, що в мене там шари різного розміру, і воно їх не кліпало, а робило зображення більше.
А тепер тримайте правильний спосіб виконання подібної роботи:
• Робите у фотошопі всю складну роботу з растром. Зберігаєте це як зображення.
• Імпортуєте його у фігму, а там вже додаєте текст, кліпінг-масочки, тіні, лейаут, робите купу інстансів, як вам треба, експортуєте однією кнопкою без хєрні. Все.
