Безболезненный переход с Photoshop на Sketch

 

Очень многие запрашивали мануал по началу работы в Sketch. И вот он самый! Sketch является лучшей альтернативой Photoshop, которая полностью заточена под дизайн интерфейсов. Хочу отметить, что ресурсы для Sketch сейчас не особо впечатляют, и моя миссия — исправить это.

Примечание: обучаться через анализ (или даже копирование) работы других пользователей очень полезно, но все же ищите свой собственный путь для старта.

Представьте ситуацию с точки зрения проблем, которые вы пытаетесь решить. Изучите приемы, которые вы бы могли применить в собственном процессе дизайна.

Как же перейти с Photoshop на Sketch?

 

Скачайте бесплатную триал-версию

Перейдите на BohemianCoding и скачайте триалку. Нет смысла отказываться от приложения только потому, что оно платное, особенно если его цена раз в 10 ниже, чем стоит Photoshop. Используйте приложение, потому что оно оптимизирует процесс дизайна, и вам самим гораздо легче и быстрее работается. Но как же проверить это, даже не попробовав?

 

Миграция: мои иконки

Как дизайнер интерфейсов, я не сторонник перерисовывания иконок с нуля. Вы должны знать, что есть формат SVG. Это довольно универсальный векторный формат, который часто используется для иоконок и в CSS вместо встраивания изображений для независящих от разрешения результатов.

 

Миграция иконок в Sketch

 

Слава богам, Sketch позволяет импортировать SVG-иконки и редактировать векторные точки. Иконки импортируются со всеми своими слоями, так что вы можете легко объединять, вычитать, пересекать и отнимать слои для достижения задуманного результата.

 

Наборы иконок для старта

Есть бесплатные наборы иконок, а есть и платные. Платные довольно доступные по цене. К тому же, так вы можете поддержать коллег-дизайнеров. Вот список наборов SVG-иконок, которые я использую в своей работе:

Наботы иконок в PSD:

 

Как экспортировать фигуры Photoshop в Sketch

Если вам повезло иметь наборы иконок, сделанные исключительно для Photoshop, процесс их трансформации в SVG-исходники немного усложняется. Для этого вам понадобятся Photoshop и Illustrator:

1) В Photoshop, выделите слои фигуры Photoshop и выберите команду Merge Shapes.

 

В Photoshop, выделите слои фигуры Photoshop и выберите команду Merge Shapes

 

2) Перейдите в меню File > Export > Paths to Illustrator и сохраните файлы в формате .ai (Illustrator)

 

Перейдите в меню File > Export > Paths to Illustrator и сохраните файлы в формате .ai (Illustrator)

 

3) В Illustrator выделите все фигуры и примените к ним черную заливку.

4) Перейдите в меню File > Save As… и выберите формат SVG

 

Перейдите в меню File > Save As… и выберите формат SVG

 

5) Импортируйте файл SVG в Sketch и отредактируйте, как вам нужно.

 

Миграция: мои паттерны

Если вы не чисто флет-дизайнер, вы, должно быть, повсеместно используете текстуры. Ваш клиент может их запросить. В Sketch есть настройки шума, но если вам нужно больше, вам понадобятся текстуры Photoshop в виде индивидуальных графических паттернов, импортированных в библиотеку паттернов Sketch. К сожалению, нет готового инструмента для миграции. Но, если вам нужны исходники для старта, я предлагаю попробовать Subtle Patterns

 

Миграция паттернов в Sketch

 

А как быть с моими PSD-файлами?

Вот тут у вас есть шанс начать с нуля. Как дизайнер, вы должны избегать оглядок назад на свою старую работу. Так как Sketch на 100% векторный, нет возможности импортировать PSD-файлы с полным сохранением стилей. Из моего личного опыта с Fireworks, и там процесс был далек от совершенства: многие стили были поломаны. Даже типографика не выглядела должным образом.

 

А как быть с моими PSD-файлами в Sketch

 

Хорошие новости заключаются в том, что воспроизведения дизайнов Photoshop в Sketch — довольно несложно. Очень просто рисовать фигуры, забирать пипеткой цвета и применять те же настройки теней, что и в Photoshop. Иконки и текстуры — это самый тяжелый и самый важный шаг, так как они являются частью основной вашей библиотеки. Как дизайнер, вам всегда следует концентрироваться на основе (принципы дизайна, базовые дизайн-компоненты, подгонка пикселей и т.д.) и прекратить опираться на тривиальности вроде стилей, фильтров и прочих приложение-зависимых кастомизаций.

 

Перенос дизайна с Photoshop в Sketch

 

Sketch UI Kits для начала

Sketch — еще новичок, но даже очень именитые дизайнеры уже начали делиться своими Sketch-файлами, обмениваться приемами и советами. Честно говоря, кастомизировать файл Sketch куда легче, чем PSD.

Нслаждайтесь:

 

Sketch UI Kits для начала

 

Я даже поделюсь своим собственным добром

Обычно я не делюсь своими дизайн-файлами, но так как это может помочь новым пользователям освоиться в Sketch, я нарушу собственное правило:

 

делюсь своими дизайн-файлами

 

Видеоуроки и советы

Marcelo Marfil создал несколько видео по созданию кастомного интерфейса в Sketch.

switch-video-600x336

 

Много уроков вы найдете в разделе Уроки Sketch.

 

Выводы

Если вы не посвятили около 3 месяцев своего времени (в режиме полной занятости) Sketch, как это сделал я, вы все равно будете опираться на Photoshop и мыслить принципами этого приложения, редактируя старые PSD-файлы, используя Photoshop для редактирования фото, рисования и прочих графических работ. Но все равно полезно иметь альтернативу для создания дизайнов пользовательских интерфейсов. Инструмент, сочетающий в себе лучшие черты Photoshop, Illustrator и Omnigraffle. Инструмент, составляющий отличную конкуренцию Adobe.

Если у вас есть полезные файлы Sketch вроде UI-китов, телефонных шаблонов и наборов иконок, делитесь ими в комментариях.

 

Перевод статьи blog.mengto.com от автора Robert Chen.