Как сделать картинки c экраном лэптопа с помощью Canva

Как сделать картинки c экраном лэптопа с помощью Canva | Блог Варвары Лялягиной StartBlogUp.com

Все вокруг говорят о продающих текстах: в Фейсбук, в Инстаграм, в блог или рассылку. Да, тексты нужны, но картинки тоже могут продавать, а порой и не хуже. Давайте посмотрим, как это работает и как сделать продающие картинки своими руками, без привлечения сторонних специалистов.

Если вам больше по душе видео — смотрите запись моего прямого эфира, где я рассказала о том, как очень просто с помощью программы Canva сделать продающие картинки с демонстрацией экрана компьютера. Чтобы быть в курсе моих прямых эфиров, подписывайтесь на страничку в Фейсбуке и на Ютьюб канал, куда я выкладываю записи прямых эфиров.

Что такое продающие картинки (0:52)

Продающими я называю такие картинки, которые дополняют текст, иллюстрируя то, о чем в нем говорится. К примеру, эту картинку я использовала на странице, которая рассказывает о моем сообществе для творческих предпринимателей «Студия».

Как сделать картинки c экраном лэптопа с помощью Canva | Блог Варвары Лялягиной StartBlogUp.com

Еще до того, как вы прочтёте продающий текст о «Студии», картинка расскажет вам о том, как всё будет происходить. Даже при беглом взгляде на нее ясно, что, скорей всего, уроки будут проходить в видеоформате, и что участников ждут какие-то симпатичные раздаточные материалы: рабочие тетради, планеры, чек-листы.

Еще один пример со страницы, где я рассказываю, что у меня есть услуга по аудиту сайта. На картинке пример отчетов, которые я высылаю клиентам. У тех, кому нужен аудит сайта, при взгляде на эти скриншоты складывается понимание услуги, её объём и насыщенность. Картинки формируют доверие ко мне как к специалисту.

Как сделать картинки c экраном лэптопа с помощью Canva | Блог Варвары Лялягиной StartBlogUp.com

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

Как делать продающие картинки для блога или соцсетей (6:01)

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

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

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

Где брать мокапы, чтобы это было законно (7:36)

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

К примеру, вам нужно изображение Макбука, и желательно, чтобы в цветовой гамме картинки присутствовал розовой цвет. Вбиваете в поиск «mockup pink macbook» и смотрите, что выпадет в выдаче.

Как сделать картинки c экраном лэптопа с помощью Canva | Блог Варвары Лялягиной StartBlogUp.com
Из множества вариантов выбираете подходящую картинку.

Например, здесь видно, куда добавить свой дизайн — можно представить, как будет выглядеть готовая картинка. Стоит такой вариант 15$.

А можно ли сделать что-то такое бесплатно?

Да, можно. В Creative Market есть ссылочка «Get free goods», где вы найдете бесплатные визуальные элементы. Каждую неделю по понедельникам они выкладывают все новые бесплатные товары. Их немного, но один из своих мокапов для компьютера я как-то нашла именно на такой раздаче. Если ждать вам не хочется, можете купить сразу то, что выбрали. Или подпишитесь на рассылку сервиса и просматривайте бесплатные варианты, которые каждую неделю будут приходить на почту.

Как добавить свой дизайн в мокап (10:23)

Итак, вы нашли подходящий мокап и теперь вам нужно добавить на него свой дизайн. Я для этого пользуюсь программой Canva.

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

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

Как сделать картинки c экраном лэптопа с помощью Canva | Блог Варвары Лялягиной StartBlogUp.com

Далее я ищу в галерее Canva иконку «Play», выбираю нужную мне конфигурацию ставлю её поверх картинки и отцентровываю с помощью направляющих осей сервиса. Любую иконку из галереи Canva можно отредактировать: поменять её цвет, размер, прозрачность. И всё, теперь можно скачивать ваш дизайн в нужном формате.

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

Что делать, если мокапа нет (15:35)

Если у вас нет мокапа и его не хочется искать в Creative Market, воспользуйтесь шаблонами в самом сервисе Canva.

Для этого нужно так же выбрать формат будущей картинки — у меня это презентация, а вы можете выбрать обложку Фейсбук группы или сторис Инстаграма. Затем нужно зайти в раздел «Элементы», вбить в поиск то, что вы ищете, и выбрать фото или графический объект.

Как сделать картинки c экраном лэптопа с помощью Canva | Блог Варвары Лялягиной StartBlogUp.com

Для своей цели я выбрала графический объект, изображающий экран Macbook. В поиске их довольно много стоимостью около 1$, но можно найти и те, у которых есть пометка «free». А дальше я повторяю действия из предыдущего раздела: накладываю на мокап обложку видео, а сверху — иконку «Play».

Картинка, сделанная этим способом, выглядит попроще, но зато не стоит мне ни копейки, так как я потратила время и нашла бесплатный графический объект.

Как вставить скриншот экрана в мокап (18:25)

Если же вам нужно изобразить на экране компьютера скриншот, то это тоже легко сделать всё в той же Canva.

Вебинар «Трелло для творческих бизнес-проектов» | Варвара Лялягина Start Blog Up
Так выглядит иллюстрация для моего вебинара «Трелло для творческих бизнес-проектов»

Для этого выбираем графический объект с изображением экрана Macbook или подходящий мокап. Затем делаем нужный скриншот и загружаем его в Canva с помощью кнопки «Upload». Выводим загруженный скриншот на рабочую площадь сервиса и форматируем под размер экрана макбука.

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

Классно то, что нам не нужно много мокапов.

Один хороший мокап за 8-15$ можно использовать десятки раз, меняя содержимое экрана и добавляя любой другой дизайн. Важно то, что на экране, а то, что внешний вид компьютера повторится — даже вам на руку, это будет работать на узнавание вашего бренда.

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

Но у меня есть одно предостережение.

При использовании таких сервисов как Canva или Creative Market возникает желание тут же всё применить и использовать все бесплатные возможности. Я советую не увлекаться и подходить к выбору визуальных объектов избирательно. Помните о цветовой гамме вашего блога или компании, и о том, что используя всё подряд, легко выбиться из общей стилистики бренда.

Экспериментируйте, пробуйте разные сервисы, но стремитесь к единству визуального контента, чтобы ваши клиенты узнавали вас издалека и ассоциировали стильные и продающие картинки в ленте с вами.


Если вы хотите углубиться в то, как работать с графическими программами, если картинки — это то, что дается вам сложно, рекомендую свой вебинар «Визуальный бренд для творческих бизнес-проектов». На нем я рассказываю, как создавать визуальный контент для блога и социальных сетей без дизайнеров, без дорогого софта и с минимальными временными затратами.

Визуальный бренд для творческих бизнес-проектов