Розуміємо настройки експорту в Sketch

Експорт частин макета є частиною щоденного робочого процесу дизайнера. Тут немає нічого складного: ви зазвичай просто вибираєте формат експорту, виробляєте настройку, і готово. Але в Sketch 3 експорт є однією з кращих функцій. Насправді Sketch 3 пропонує неймовірну гнучкість при експорті. Після прочитання цієї статті ви зможете зробити свій робочий процес більш простим і зручним.

Ми спробуємо декілька прикладів для детального зрозуміння опцій в Sketch 3, ті допоможемо вам зрозуміти який метод роботи підходить вам більше.

До речі, якщо ви використовуєте Sketch в своїх дизайнерских роботах, ви можете зберегти свій час використовуючи шаблони Sketch на Envato Market. Ви можете завантажити файли Sketch з пред-налаштуванням, версію, що може бути змінена найбільш популярними елементами UI, так що ви зможете швидко адаптувати їх для своїх потреб, ніж кожен раз починати з нуля.

1. Основи експорту

Крок 1

Запустіть Sketch. Для роботи нам необхідний хоча б один об'єкт. Так що давайте створимо векторну форму. Виберіть пункт меню Insert> Shape і там виберіть будь-який інструмент. Я для прикладу виберу Insert> Shape> Rectangle (R) і створю квадрат 300x300px.

Пам'ятайте, що ви можете намалювати будь-який прямокутник, а потім відредагувати його властивості в панелі інспектора.

Крок 2

Тепер виберіть меню File. Ви побачите, що пункт Export тепер активний. Також ви можете використовувати іконку Export на панелі управління. То не будемо втрачати час - натискайте. Ви побачите деякі зміни на полотні, в панелі шарів і в панелі інспектора. Що ж сталося?

В панелі шарів Sketch автоматично створив новий об'єкт - слайс з такими ж розмірами і координатами, що і створений нами квадрат. Слайс це спеціальний шар, що дозволяє здійснювати експорт частини полотна в файл. Ви можете самостійно створити будь-яку кількість слайсів за допомогою пункту меню Insert> Slice (S). Кожен слайс буде експортований в окремий файл.

Слайси легко відрізнити від звичайних шарів спеціального символу: ножиці і пунктирна обведення. Ви можете змінювати їхню позицію, розміри і властивості. Всі ці операції доступні прямо на полотні або в панелі інспектора.

Панель Inspector 

Клацніть мишкою на ваш слайс і погляньте на панель інспектора. Як я вже говорив, ми можемо змінювати розташування Слайса, висоту і ширину. Але також ви можете помітити, що в панелі з'явилися нові опції:

• Trim Transparent Pixels (обрізати прозорі пікселі). Активуйте цю опцію, якщо хочете видалити прозорий фон навколо об'єкта. Наприклад, у вас є іконка 32 × 32px в слайсами розміром 80 × 80px. Якщо дана опція активна, то Sketch видалить зайвий фон і ви отримаєте файл 32 × 32px.
• Export Group Contents Only (експортувати тільки вміст групи). Ця опція корисна при створенні складних макетів, в яких одні частини перекривають інші. Зараз ми не можемо використовувати цю опцію, але пізніше розберемося і з нею.
• Background Color option (настройка фонового кольору) дозволяє керувати фоном обраного Слайса. Прозорі пікселі будуть залиті обраним вами кольором.

Під заголовком Export розташовані кілька полів введення і меню, що випадає:

• В поле Size можна ввести фактор збільшення на випадок якщо необхідно змінити розміри вмісту Слайса. У Sketch 3 вже встановлені найпопулярніші чинники збільшення, але ви можете вказати свій.
• Якщо ви хочете додати якийсь опис до імені файлу, то введіть його в поле Suffix. Наприклад, ви можете додати суфікс @2x для зображень подвійного розміру.
• Вибір формату підсумкового файлу вибирається в випадаючому меню Format. Sketch підтримує такі формати: .png, .jpg, .tiff, .pdf, .eps та .svg.

За замовчуванням експорту в Sketch мають такий вигляд: Size=1x (100% оригінального розміру), без суфіксів та формат .png. Залиште ці значення або грайте з ними, якщо бажаєте.

Порада: Sketch підтримує експорт з різним збільшенням вмісту. Так що не переживайте якщо вам необхідно експортувати частини макета в масштабі, наприклад, 1.75x. Також, ви можете обрати значення пікселів використовуючи w для ширини та h для висоти для експорту любого розміру. Наприклад, введіть 60w і Sketch при експорті змінить ширину Слайса до 60 пікселів. Висота також буде пропорційно змінена. Також, якщо 60 буде з h, Sketch експортує ваш слайс з 60 пікселями по висоті та пропорцій збільшить ширину.

Крок 3

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

Порада: перейменуйте шар Слайса, щоб автоматично призначити ім'я файлу. Ви можете використовувати слеш /, щоб помістити експортований файл в папку. Ця картинка допоможе зрозуміти що я маю на увазі:

2. Експортуємо тільки те, що вам потрібно

Крок 1

Відкрийте файл export_what_you_want, прикладений до цієї статті.

Примітка: вам знадобиться Sketch 3. Якщо ви використовуєте більш ранню версію, то вам можуть бути недоступні деякі опції.  Ось, що повинно бути у вас на екрані:

Отже, у нас є група об'єктів, розташована в монтажній області, і кілька об'єктів за її межами.

Крок 2

Виберіть пункт меню File>Export. Також ви можете натиснути на іконку Export на панелі інструментів.

Коли робите експорт в перший раз, Sketch припустить, що ви хочете експортувати всю монтажну область, і автоматично підготує до експорту всі об'єкти, крім тих, що розташовані за межами монтажної області. Також зверніть увагу, що в панелі шарів не з'явились слайси.

Монтажні області в Sketch 3 експортуються без створення слайсів. Якщо ви додасте нову монтажну область, то вам потрібно просто додати розмір для експорту, натиснувши на + поруч з кнопкою експорту в панелі інспектора. При наступному натисканні іконки Export Sketch автоматично включить в експорт і цю монтажну область.

Крок 3

Повернемося до нашого файлу. Давайте експортуємо один шар. Клацніть на синій квадрат, або виберіть його в панелі шарів. Погляньте в нижню частину панелі інспектора: там з'явилася нова опція Make exportable. Натисніть на неї.

Панель інспектора покаже вам, що ви збираєтеся експортувати одне зображення в масштабі 1x (оригінальний розмір) без суфіксів і в форматі .png.

Погляньте на панель шарів. Ви побачите, що на іконі цього шару з'явився маленький знак ножика. Це говорить про те, що даний шар готовий до експорту. Коли ви наступного разу пройдете File > Export або натиснете іконку Export, то цей шар також буде видно разом зі звичайними слайсами.

Крок 4

Зверніть увагу на фіолетовий квадрат. Зараз ми не будемо використовувати опцію Make exportable. Ми автоматично створимо слайс.

Виберіть пункт меню Insert > Slice. Зверніть увагу як змінюється курсор над об'єктами. Пам'ятайте іконку з ножичком? Клацніть на фіолетовому квадраті. І отримаєте новий слайс на тому ж місці з тими ж розмірами!

Порада: таким чином ви можете створити слайс і для цілої групи. А для створення слайсів індивідуальних об'єктів в групі просто потримайте кнопку Command при натисканні на об'єкті.

Крок 5

Отже, ми навчилися створювати слайси і використовувати опцію Make exportable. Ми також дізналися про особливості експорту монтажних областей ... але ми ще не знаємо що станеться при використанні опції Export Group Contents Only!

Виберіть пункт меню Insert > Slice та наведіть курсор на її помаранчевим і зеленим квадратами. Ці об'єкти згруповані. Клацніть по ним. Тільки що ви створили слайс для групи.

Крок 6

Переместить слайс шару до групи помаранчевий + зелений.

Якщо ви зараз, поки слайс виділений, подивіться на панель інспектора, то побачите, що опція Export Group Contents Only стала доступна. Але не відзначайте її поки!

На цьому етапі дуже корисно подивитися на превью того, що вийде при експорті в наш файл.

Крок 7

Оберіть опцію Export Group Contents Only.

Бачите різницю? Червоний еліпс зник з превью.

Коли вибрано пункт Export Group Contents Only експортовані будуть тільки ті верстви, які розташовані всередині групи. Ця опція дуже корисна в великих макетах, де об'єкти можуть перекривати один одного!

Порада: якщо у вашому списку шарів дуже багато слайсів, а ви не хочете, щоб вони відволікали вас, то ви можете тимчасово відключити їх за допомогою невеликої кнопки з ножичком в нижній частині панелі шарів.

Як бачите, існує кілька варіантів експорту. Який вам вибрати? Це залежить від ваших завдань. Наприклад, опція Make exportable відмінно підійде для експорту іконок або окремих шарів. При експорті всього документа я б рекомендував використовувати слайси або експортувати всю монтажну область (але це лише моя думка).

3. Декілька експортів одночас

Ще одна відмінна особливість Sketch 3 - можливість експортувати відразу кілька зображень. І тут я не маю на увазі експорт різних об'єктів з різних слайсів або монтажних областей (це, до речі, теж можливо). Я говорю про можливості експорту різних версій одного зображення.

Крок 1

Додайте слайс з шару з бірюзовим квадратом, або використовуйте на ньому опцію «Make exportable». В результаті в панелі інспектора з'являться налаштування експорту зі значеннями за замовчуванням.

Крок 2

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

Думаєте я розповів вам все що можна про експорт в Sketch? Ні, це ще на все. Ось кілька додаткових порад:

5. Прямий експорт

Перетягніть шар зі списку шарів прямо не робочий стіл, або в іншій програмі. В результаті він буде автоматично експортований в форматі .png. Утримуйте під час перетягування клавішу option (⌥) і отримаєте файл у форматі PDF.

6. Sketch Generator & Sketch Commands

До сих пір ми говорили тільки про функції, вбудованих в Sketch. Але ж є ще й плагіни. Sketch Generator, наприклад, це абсолютно новий підхід до експорту в Sketch. Ви обов'язково повинні поглянути на нього, особливо якщо ви коли-небудь використовували Adobe Generator в Photoshop CC.

Sketch Commands це колекція скриптів. Деякі з них пов'язані з експортом. Так що погляньте і на них.

Висновок

Все, що ви дізналися з цієї статті допоможе вам зрозуміти як працює експорт в Sketch 3. Якщо у вас з'явилися якісь питання про експорт або про Sketch, пишіть їх в коментарях. Буду радий допомогти!