Работаем с PSD макетом

В этой статье, мы расскажем как загружать PSD макеты и как экспортировать изображения из макета.

Рассмотрим для чего нужно загружать макеты и что можно полезного вытянуть из него.

Загрузка

Добавить новый макет

Заходим во вкладу PSD и жмем добавить новый макет.

Появится сообщение с вопросом парсить изображения или нет? Если вам не нужно сохранять изображения из макета, нажмите пропустить.

Просмотр

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

Информация полезна тем, что мы получаем название всех шрифтом что используется в макете, тем самым нам не нужно кликать по всем слоям чтобы узнать название шрифта.

Цвета слоев
  1. Синий — слой по типу (Shape)
  2. Красный — текстовые слои
  3. Зеленый — изображения

При наведение слои подсвечиваются соответствующими цветами, если кликнуть по слою, то справа появится информация по слою.

Информация о слое

В информации нам доступно CSS свойства, название шрифтов и текст. Если кликнуть по названию шрифта, то название будет скопировано в буфер обмена.

Экспорт

Самое интересное для нас, это экспорт изображений, помимо экспорта изображений можно экспортировать и текст.

Экспорт изображений

Экспорт изображения

Удерживайте клавишу (Ctrl) и кликните по изображению, появится окошко для экспорта, здесь можно указать формат изображения, цвет заливки фона и цвет заливки самого изображения.

Объединение слоев

Помимо этого, можно объединять изображения в один, зажмите (Shift) и выберите те слои которые нужно объединить, затем удерживайте (Ctrl) и кликните по выделенному изображению.

Экспорт текста

Экспорт текста

Так же как и с изображениями, удерживайте (Ctrl) и кликните по тексту, появится окошко для экспорта текста.

Где используется макет?

Макет используется во вкладке VTC и в модуле Pixel Repfect, таким образом вам не нужно сохранять макет в .jpg картинку для использование в модуле Pixel Perfect и VTC.

Заключение

Сегодня мы рассмотрели как загружать PSD макеты и какую полезную информацию можно из него вытащить.

Пока программа может обрабатывать только PSD макеты, но вскоре мы планируем добавить популярные форматы как Adobe XD, Sketch, Figma и другие.