Как правилно да експортирате вашите дизайни на Sketch в Photoshop (ако наистина трябва)

Защото, когато вашите клиенти поискат PSD файла и просто няма да приемат „не“ за отговор.

Има много уроци за експортиране на PSD в Sketch файлове, както и инструменти като Avocode, които дори ще свършат работата вместо вас. И много причини за това: все повече и повече UX / UI дизайнерите започват да използват инструменти, които са наистина създадени за техните нужди, като Sketch, Adobe XD, Figma и т.н. И накрая, след като през цялото това време се използва за други цели Photoshop се връща към първоначалната си цел: издание на снимки.

Но що се отнася до експортирането от Sketch към PSD, няма почти нищо. Знам какво мислите: Защо някой би искал да конвертира Sketch файл в PSD? Това не е ли нещо назад?

Е да. Това е някак си. Но много компании все още използват Photoshop като основен дизайн инструмент и не всички са готови да започнат да използват Sketch. Само си представете за една секунда, че идвате да работите за тях, като използвате любимия си инструмент (Скица в моя случай), а след това в края на вашия проект идва онзи неудобен момент, когато те поискат вашия PSD файл. Моето какво?

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

Популярният начин: Дизайнер на афинитет

Първият метод, който опитах, беше може би най-известното решение и е описан подробно в тази статия от Cygnis Media. И така, ето:

  1. Изберете Вашата дъска за Sketch и я копирайте.
  2. Поставете в Affinity Designer, като изберете File> New от клипборда.
  3. Щракнете върху Файл> Експортиране и експортиране като PSD.
  4. Свършен! Можете да отворите дизайна си във Photoshop.

Този метод е бърз и ефективен, но има много проблеми. Нека разгледаме страничните и минусните страни.

плюсове

  • Имате многослоен PSD файл и той дори е (някак) зачита номенклатурата на вашия слой.
  • По принцип това е просто копиране и поставяне, толкова лесно за използване.
  • Вашият дизайн е спазен и изходът изглежда точно както е във вашия Sketch файл.

Недостатъци

  • За този метод трябва да закупите Affinity Designer. И така, друг лиценз освен Sketch (и Adobe!)
  • Текстовите слоеве са изравнени и не могат да бъдат редактирани във Photoshop (явно момчетата от Serif работят върху него ...)
  • Същото важи за всички векторни форми, те не могат да бъдат редактирани след това.
  • Ако вашият Sketch файл има 300 дъски, ще трябва да експортирате всеки един от тях ръчно. Един по един.

Значи достатъчно ли е?

Не, не за мен, така или иначе. По проста причина: повечето дизайни, които създавам в Sketch, са за приложения или уеб дизайн. Следователно имам текст навсякъде, в менюто, в колони, надписи, бутони, заглавия, полета с икони, долен колонтитул, банери ... Колко е добре да имате "редактируем" PSD файл, ако не можете да промените текста?

Трябваше да има друг начин. След като гуглих като луд човек, започнах да опитвам няколко различни начина:

  • Експорт SVG / PDF / EPS от Sketch, отворен в Illustrator, експорт в PSD. Текстовите слоеве отново се изравняват.
  • Експортирайте SVG от Sketch, опитайте да конвертирате SVG в PSD чрез ImageMagick, но той изравнява целия SVG в един единствен слой.
  • Погледнете отблизо опциите, предлагани от Avocode, но те нямат работеща опция за това, което се опитвам да постигна (все още).

Бях безумен и се канех да се откажа и да препроектирам ръчно всички текстови слоеве, докато накрая не намерих идеалното решение за мен.

Решението: Фотопея

Логото им е по-малко секси от това на дизайнера на Affinity, но не позволявайте да ви заблуди. Това е лудо добър инструмент и е безплатен!

Photopea е безплатен онлайн редактор на снимки, поддържащ файлове като PSD, Sketch и Gimp. По принцип е супер-Photoshop, но базиран на уеб. И безплатно.

Открих този инструмент, докато разглеждах всеки форум и група във Facebook, които можех да намеря в търсене на отговор на моя проблем. Когато го отворих за първи път, се опитах да кача директно моя Sketch файл и бях разочарован, като видях, че той не работи. Вместо това имаше предупреждение с надпис „Няма достатъчно RAM“, а след това просто каза „Зареждане“.

И така, това е разочароващо. Amirite?

Но след това погледнах размера на файла си: 68,3 Mo. За Sketch файл е доста тежък. Ето решението, което предложих:

  1. Отворете вашия Sketch файл и експортирайте вашите платки в отделни файлове на Sketch. Не е необходимо да имате по една табла за изображения във файл, опитайте да ги групирате по функция или поток. Например, можете да поставите потока си за вход в един файл и да видите дали той работи. Тук няма истинска наука, доколкото знам, но стига да държите файла под 10 Mo (дори стигнах до 16 Mo), той трябва да работи добре. (Забележка: Това може да зависи от капацитета на вашия компютър RAM)
  2. Отидете на www.photopea.com и от там отворете вашите Sketch файлове.
  3. Щракнете върху File> Save as PSD и ta-daaaah, той изтегля PSD файл на вашия компютър.
  4. Отворете вашия PSD файл във Photoshop. Всички ваши платки са там и вашите дизайни трябва да изглеждат почти перфектно! Може да се наложи да направите някакво почистване. В моя случай трябва да опреснявам всеки текстов слой, така че да вземе правилния размер на шрифта и семейството. Също така, някои от моите векторни маски се сриха, след като ги отворих във Photopea:
Както можете да видите отдясно, някои от тези криви полудяват. Те обаче остават за редактиране, така че е лесно да се поправи. Не разследвах много, но мисля, че това има връзка с точките за закрепване и Безие дръжки, разположени неправилно. Ще се актуализира, ако намеря причината зад него.

Този метод спаси живота ми. Но също като първата, тя не е перфектна. Ето преимуществата и недостатъците:

плюсове

  • Имате многослоен PSD файл и той зачита цялата ви номенклатура, дъски за управление, маски и т.н. Той дори импортира всички ваши символи като дъски под вашия дизайн!
  • Редактирайте текстовите си слоеве! Да :)
  • Той е безплатен и с отворен код, така че не е нужно да купувате друг лиценз, за ​​да го направите. И тъй като е уеб-базирана, това означава, че дори можете да го направите на компютър!
  • Това е бързо и ефективно.

Недостатъци

  • Ами тези дръжки на Безиер полудяват? Въпреки че не се случва във всички случаи, все пак е странно.
  • Той е базиран на уеб, така че не можете да сте сигурни, че това решение ще съществува завинаги и имате нужда от интернет връзка, за да работи.
  • Трябва да разделите големите си Sketch файлове на по-малки файлове, за да работят.

заключение

В зависимост от вашите нужди можете да използвате един или друг метод за експортиране на вашите файлове от Sketch към PSD. Лично аз съм почитател на втория метод, защото ми дава повече гъвкавост. Но кой знае какво е бъдещето на Photopea и колко дълго ще се придържа? Мога само да се надявам, че ще бъде достатъчно дълго хората да започнат да работят само в Sketch и да спрат да искат PSD файлове.

Знаеш ли друг начин, който не споменах? Чувствайте се свободни да споделяте в коментарите!