Перейти к содержанию

Удобный инструментарий для СС - Figma

Если вы устали делать ваши ССки в Фотошопе или в каком нибудь неудобном редакторе, то представляю вам Figma!
   (1 отзыв)

Banner41.png


Привет! Это как и гайд, так и совет, если вы устали от неудобного и не понятного интерфейса редактора, долгого отклика, постоянного вылета, большого веса самого редактора, то могу посоветовать налиучший инструмент для создания ССок - Figma, очень удобный, с интуитивно понятным интерфейсом, поддерживает и оффлайн режим, если интернет пропадет, быстрый в изучении, если вы клепаете ССки как орехи, то фигма станет идеальным стеком для этого! 

Представляю гайд, как начать делать ССки в Figma!

Для начала вам надо зарегистрировать аккаунт в Figma.com и скачать программу, там довольно легко всё это делается, поэтому начну гайд именно со страницы проекта.

Спойлер

Frame 1.png
Это страница проекта, да-да, тут не 120 кнопок как в фотошопе, самое важное: курсор, фреймы, фигуры, перо, текст, остальное вам и не понадобиться и всё! Большего и не требуется для создания ССок, но более сложный инструментарий, смогу в будущем рассказать, если понадобиться.

Frame 2.png
И так первым делом, нажимаем на кнопку (1), а после появится пункты слева, нажимаем на выделенное (2).

Frame 3.png
У вас появится фрейм на 1920x1080, затем нажимаем сочетание горячих клавиш: Shift + Ctrl + K и у вас откроется папки, где ваши скриншоты и вы переносите, либо выбираете нужные и перетаскиваете во внутрь созданного фрейма.

Frame 4.png
Теперь нажимаете на кнопку (1) и курсором создаете квадратик, затем потянув его за углы (2), расширяете полностью до границ фреймов.

Frame 5.png
После нажимаете на кнопку Fill слева в панели (1) в появившейся окошке меняете цвет на нужный, а затем можете поменять прозрачность (2).

Frame 6.png
Выбрав нужный вам размеры квадрата, нажимайте на кнопку (1) и у вас откроется окошка градиента, в пунктах (2) настраивайте градиент, а на (3) меняете направление нажав на концы линии.

Frame 7.png
Вновь меняете цвета и прозрачность как вам нужно, всё в той же открытой окошке.

Frame 9.png
Теперь нажимаете на (1) и вы создадите текст, берёте ваши логи и вставляете в текст, на (2) можете поменять размер кегля.

Frame 10.png
Зажав на область текста переместите на ваш фрейм (1) в пункте (2) можете выбрать размер шрифта.

Frame 11.png
В Fill (1) вновь можете выбрать нужный цвет.

Frame 12.png
Затем нажав на (1) у вас откроется окошка со списком шрифтов, выберите подходящий (2).

Frame 13.png
На (1) можете увеличить межстрочные отступы, чтобы ваша ССка легче читалась, также можете добавить задний фон, через квадратик (2) на ваш текст, чтобы тот не сливался с фоном.

Frame 14.png
Следующим шагом надо выделить сущности внутри фрейма (1) и нажать ПКМ по ним, тогда у вас откроется окошка, где нужно выбрать (2) и нажать, у вас все объекты объединяться в группу.

Frame 15.png
Дальше в левой панели нажимаем (1) и у вас добавятся пару пунктов, нажимаем сначала (2) а после (3) и когда откроется окошка выбираем Hug contents (4).

Frame 16.png
Следом выбираете фрейм (1) и зажимаете сочетание Ctrl+D у вас скопируется фрейм.

Frame 17.png
А дальше выбираете нужный вам скриншот и через ПКМ выбираете (1) и (2) и он у вас скопируется в буфер обмена, но не пытайтесь это делать через Ctrl+C у вас не правильно скопируется.

Frame 19.png
После во втором фрейме выделив его вставляете через Ctrl+V и повторяете эти действия сколько требуется, скриншоты+текста=ССка.

Frame 20.png
Под конец, когда все скриншоты готовы, нажимаете на (1) и (2) Export, выбираете нужную вам папку и вот готовая ССка!


Ну вот и всё! Если остались вопросы -
пишите VK (клик) буду рад ответить всем!

 


 

Banner.png

  • Лайк 3
  • Шикарно! 1

×
×
  • Создать...