Эскиз параметров экспорта

Экспорт активов из ваших проектов является общей задачей. Вы начинаете с создания и подготовки вашей графики, затем выбираете формат экспорта, задаете его свойства, и все готово. Экспортные инструменты в Sketch 3 являются одними из лучших функций. На самом деле, Sketch 3 помогает нам экспортировать контент по-разному, и я убежден, что вы улучшите свой рабочий процесс, прочитав эту статью.

Мы собираемся использовать некоторые базовые примеры, чтобы полностью понять различные варианты экспорта, доступные в Sketch 3, и я помогу вам решить, какие методы лучше всего подходят для вас, в зависимости от того, над чем вы работаете.

Кстати, если вы используете Sketch для многих ваших дизайнерских работ, вы можете сэкономить много времени, используя некоторые шаблоны Sketch на Envato Market. Вы можете загружать файлы Sketch с предварительно изготовленными настраиваемыми версиями наиболее часто используемых элементов пользовательского интерфейса, чтобы вы могли быстро адаптировать их к своим потребностям, а не начинать с нуля каждый раз.

1. Основы экспорта

Шаг 1

Открыть эскиз. Нам нужен один объект на нашем холсте, поэтому давайте создадим векторную форму. Перейдите в Insert > Shape и выберите один из доступных инструментов. В этом примере я собираюсь создать квадрат размером 300x300px, используя Insert> Shape> Rectangle (R).

Помните, что вы можете нарисовать случайный прямоугольник и настроить его свойства через панель Inspector.

Шаг 2

Теперь перейдите в меню File. Вы должны увидеть, что опция Export активирована. На панели инструментов вы также можете щелкнуть значок Export, поэтому перейдите и щелкните по нему. Вы заметите некоторые изменения на холсте, в списке слоев и панели инспектора. Что произошло?

На панели слоев Sketch автоматически создал новый срез с теми же размерами и положением объекта, который мы имеем на холсте. Срезы - это специальные слои, которые позволяют нам экспортировать области на холст в файлы. Весь контент в пределах определенной области срезом будет включен в этот файл. Вы можете иметь столько фрагментов, сколько хотите, используя опцию Insert> Slice (S). Каждый срез будет экспортироваться в другой файл.

При наличии, значок ножа и пунктирная линия указывают, что этот слой является срезом. Вы можете изменить его положение, ширину и высоту, как и любой другой объект в Sketch. Вы можете перемещать или масштабировать их непосредственно на холсте или с помощью инспектора для изменения их свойств.

Панель Inspector 

Говоря об Inspector, взгляните на него, сохраняя выбранный фрагмент. Как я уже сказал, мы можем изменить положение, ширину и высоту среза. Но мы также можем увидеть некоторые новые варианты:

• Прозрачные пиксели. Включите этот параметр, если вам нужно, чтобы ваши экспортированные файлы имели прозрачные пиксели, отделенные от его краев. Например, скажем, у вас есть значок 32x32px внутри среза 80x80px. Проверка этого параметра автоматически экспортирует 32x32px-файл без изменения размера вашего фрагмента. Эскиз обрезает прозрачные пиксели.
• Только содержание группы экспорта. Это очень полезно при создании сложных проектов с перекрывающимся контентом. Мы не можем включить его прямо сейчас, поэтому мы оставим его для следующего примера.
• Опция «Цвет фона» позволяет выбрать цвет фона для выбранного фрагмента, заполняя любые прозрачные пиксели в экспортируемой области.

Рядом с ярлыком Export мы находим разные выпадающие и вводные поля:

• Размер позволяет добавить множитель, если нам нужно изменить размер содержимого, которое будет экспортировано для этого фрагмента. Sketch 3 поставляется с некоторыми предопределенными параметрами и переменными для этого.
• Введите что-то в вход Suffix, если вы хотите добавить что-то в имя файла, чтобы сделать его описательным. Например, вы можете добавить суффикс @2x для изображений с двойным размером.
• Выберите формат файла, используя раскрывающийся список Формат. Поддерживаемые форматы экспорта Sketch: .png, .jpg, .tiff, .pdf, .eps и .svg.

По умолчанию параметры экспорта Sketch устанавливаются в Size=1x (100% исходный размер), без суффиксов и формата .png. Оставьте эти параметры по умолчанию или поэкспериментируйте с ними, если хотите.

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

Шаг 3

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

Совет: Переименуйте слой среза, чтобы автоматически назначить имя файла экспортированному контенту. Один хороший трюк состоит в том, чтобы включить косую черту / внутри имени, инструктируя Sketch для создания подпапок для вас. Следующие рисунки более четко показывают точку:

2. Указание того, что вы хотите экспортировать

Шаг 1

Откройте файл export_what_you_want, который я предоставил в качестве вложения в этот учебник.

Примечание: Чтобы открыть его, вам понадобится Sketch 3, но если вы используете более старую версию, то тогда не беспокойтесь об этом. Не должно быть сложно воспроизвести контент самостоятельно, но помните, что некоторые из вариантов, которые мы рассмотрим, могут быть недоступны для вас. См. Следующее изображение для справки:

Вы увидите некоторые сгруппированные объекты, декоративную панель и другие элементы, расположенные непосредственно на холсте, за пределами монтажной области.

Шаг 2

Перейдите в меню File > Export. Кроме того, вы можете щелкнуть значок Export на панели инструментов.

Когда вы впервые нажмете «Экспорт», Sketch предположит, что вы хотите экспортировать свои монтажные области и автоматически их экспортировать, отбрасывая все объекты за пределами монтажных областей. Вы также заметите, что в списке слоев нет слоя среза.

Artboards в 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

Переместите слой среза в группу оранжевый + зеленый.

Если вы посмотрите на инспектора, когда выбран срез, вы увидите, что теперь можно выбрать вариант «Содержимое только для группы экспорта». Но пока не проверяйте!

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

Шаг 7

Проверьте параметр «Только содержимое группы экспорта».

Видите разницу? Красный эллипс удален из предварительного просмотра.

Если флажок «Экспортировать группу содержимого только» проверен, срез будет экспортировать только слои внутри собственной группы, отбрасывая содержимое вне него. Слои за группой также будут отброшены. Это очень полезный вариант для больших проектов с большим количеством перекрывающихся объектов!

Совет: Если в списке слоев есть много фрагментов и вы не хотите их беспокоить, вы можете временно отключить их, нажав кнопку маленького ножа внизу списка слоев.

Как мы продемонстрировали, мы можем экспортировать контент по-разному. Какой из них выбрать? Ну, это зависит от того, что вам нужно. Например, параметр Make exportable очень полезен для экспорта значков или отдельных слоев. Я бы рекомендовал вам создавать срезы или монтажные области при экспорте всего документа (но это всего лишь предложение).

3. Множественный экспорт в один клик

Одной из замечательных особенностей, которые следует учитывать при использовании Sketch 3, является то, что вы можете экспортировать сразу несколько изображений. Я не имею в виду, что вы можете экспортировать разные изображения из разных фрагментов или монтажных областей (хотя это возможно). Я имею в виду, что вы можете экспортировать разные версии одновременно из одного слоя или среза.

Шаг 1

Добавьте фрагмент из бирюзового квадрата или сделайте его экспортируемым через панель инспектора. Независимо от того, что вы делаете, в панели инспектора должны быть установлены новые параметры экспорта со значениями по умолчанию.

Шаг 2

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

Теперь вы можете подумать, что мы рассмотрели все, что нужно знать о параметрах экспорта Sketch, но это еще не все! Вот несколько дополнительных советов:

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

Перетаскивание любого слоя из списка на рабочий стол или в любое другое приложение автоматически экспортирует его для вас в формате .png. Удерживайте нажатой клавишу (⌥), чтобы перейти в формат PDF при перетаскивании.

6. Генератор эскиза и команды эскиза

Мы говорили о собственных функциях в Sketch, но есть очень активное сообщество, разрабатывающее плагины все время. Например, Sketch Generator - это совершенно новый способ экспорта контента с использованием Sketch. Вы должны взглянуть на этот плагин, особенно если вы ранее пробовали функцию Adobe Generator из Photoshop CC.

Sketch Commands - это набор команд сценария. Некоторые из них связаны с задачами экспорта, поэтому это еще одно расширение, которое я бы рекомендовал вам взглянуть.

Заключение

Все, что я затронул во время этого урока, предоставит вам навыки, позволяющие полностью понять, как экспортировать контент в Sketch 3. Если у вас есть какие-либо вопросы об экспорте или Sketch в целом, просто оставьте комментарий ниже. Буду рад помочь!