Как начать работу

Для постобработки скриншотов и бланков вам потребуется фигма. Если вы пока чувствуете себя неуверенно в этом сервисе, изучите инструкцию ниже.

Перед началом работы проверьте, есть ли у вас доступ к сету акцентных элементов. Если доступа нет, напишите любому дизайнеру, чтобы вас добавили в контуровское пространство в Фигме для просмотра файла. Учетка в Фигме должна быть зарегистрирована на gmail-почту.

Как настроить рабочее пространство в Фигме

1. Перейдите из файла сета в ваше пространство с файлами. Для этого нажмите на иконку Фигмы → выберите Back to Files.

   

2. В пространстве Drafts кликните на иконку + → выберите Design file.

   

3. Дайте имя созданному файлу, указав название проекта, свою фамилию и имя. 

   

4. В файле сета акцентных элементов, выделите и скопируйте (Ctrl+C) акцентные элементы и фреймы. Вернитесь в свое пространство, вставьте скопированные элементы (Ctrl+V).

   

Как работать со скриншотами

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

   

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

   

3. Настройте ширину скриншота через боковое меню или потянув за правый нижний угол скриншота. 

   

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

   

5. Продублируйте на скрин нужные акцентные элементы. 

   

6. Экспортируйте скриншот. Для этого выделите фрейм на котором он находится → в боковом меню настройте параметры Export, для этого выберите разрешение 2x, формат PNG → нажмите на кнопку Export. 

   

Фрейм с серым фоном

Обычно мы выбираем размер фрейма по размеру картинки в статье.

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

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

1. Продублируйте фрейм с серым фоном в вашем рабочем пространстве Drafts.

   

2. Вставьте скриншот внутрь белого фрейма.

   

3. Настройте высоту скриншота через боковое меню или потянув за правый нижний угол скриншота. 

   

4. Настройте ширину внутреннего фрейма под ширину скриншота, потянув за боковые границы фрейма с зажатой клавишей Command или в боковом меню. 

   

5. Экспортируйте скриншот. Для этого выделите фрейм на котором он находится → в боковом меню настройте параметры Export, для этого выберите разрешение 2x, формат PNG → нажмите на кнопку Export.