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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Из множества вариантов выбираете подходящую картинку.

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

А можно ли сделать фото с экраном моего компьютера бесплатно?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Понравился пост, но нет времени применить на практике прямо сейчас?

Сохраняйте его к себе в Pinterest. Когда вам нужно будет создать продающую картинку эта информация будет под рукой

Как сделать мокап в фотошопе

В мире графического дизайна когда мы говорим о макетах, мы имеем в виду макеты, которые показывают, как дизайн будет реализован в реальности.. Они очень полезны, потому что помогают нам узнать, действительно ли наши творения работают, и, если мы работаем для клиентов, они помогают им получить представление о том, как будет выглядеть работа, которую вы выполняете с физическими опорами. В этом уроке я покажу вам, как создать мокап в Photoshop.. Хотя мы будем использовать бутылку крема, вы научитесь методам, применимым практически к любому типу объектов. Не пропустите! 

Индекс

• 1 Что нужно для создания мокапа в фотошопе?
• 2 Откройте шаблон макета и выберите объект
• 3 Создайте слой однородного цвета
• 4 Добавьте тег к вашему макету
• 5 Завершите свой макет

Что нужно для создания мокапа в фотошопе?

Первое, что вам понадобится, это шаблон макета на котором мы реализуем наш дизайн, вы можете найти много типов в бесплатных банках изображений как Pexel или Pixaby. Более того тебе понадобится один Trama создать этикетку и логотип. Если у вас все еще нет своего логотипа, вы можете обратиться к этому руководству как создать логотип в Adobe Illustrator. 

Откройте шаблон макета и выберите объект

Давайте начнем открытие шаблона макета. Затем воспользуйтесь инструментом выбор объекта выбрать горшок с кремом. Не оставляйте ореол в выделении, перейдя на вкладку «Выделить», «изменить», «развернуть» и увеличим его на 2 пикселя (примерно). 

Создайте слой однородного цвета

Подпишитесь на наш Youtube-канал

Следующее, что вам нужно сделать, это создать однородный цветной слойВы можете сделать это, щелкнув по символу, который появляется на изображении выше, и придав ему «равномерный цвет». Поскольку вы выбрали горшок с кремом, маска будет автоматически применена к слою с этим вырезом. Таким образом, мы можем изменить цвет объекта. Чтобы было более реалистично, вы перейдете на панель, отмеченную на изображении выше, и вы собираетесь изменить режим наложения на линейную недодержку, последний уменьшить непрозрачность от однородного цветного слоя к 75%.

Добавьте тег к вашему макету

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

с инструмент прямоугольник и используя белый цвет, вы собираетесь создать прямоугольник в центре изображения (Это то, что будет служить этикеткой). Когда у тебя это есть откройте свой логотип и поместите его рядом с левым полем прямоугольника. К последнему, используйте текстовый инструмент и точный цвет логотипа для ввода названия продукта. На панели параметров инструмента в верхней части рабочей области вы можете изменить характеристики текста. Я использовал тихоокеанский шрифт и дал ему размер 130 пунктов. Теперь важно перейти к вкладка файла и нажмите, чтобы сохранить, если вы вернетесь в окно документа, в котором мы начали работать, изменения будут применены к слою надписи.

Завершите свой макет

Изменить режим наложения этикеток, снова выберите Linear Burn, но на этот раз вам не нужно изменять процент непрозрачности. Теперь тебе нужно настроить перспективу, для этого необходимо перейти на вкладку редактировать», «трансформировать», «деформировать». Если у вас нет активных направляющих, щелкните левой кнопкой мыши и активируйте их в «переключить направляющие». Остается только ручками двигать адаптировать этикетку к форме макета — и он у вас будет!

Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

Вы можете быть заинтересованы

(учебник по Canva) Как добавить свое изображение на макет экрана

Хотите добавить свое изображение на великолепный макет экрана Wellness Stock Shop, но не используете Photoshop?

Без пота. Вы не одиноки, и я прикрыл.

Вместо этого мы будем использовать Canva.

Итак, если у вас еще нет бесплатной настройки учетной записи дизайнера, зайдите на canva.com.

Ничего, я подожду.

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

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

В этом видео я шаг за шагом покажу вам, как добавить свое изображение на экран макета iPhone или iPad с помощью Canva.

Тсс… это будет работать на любом экране — iPhone, iPad, ноутбуке, настольном компьютере…

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

Размер экрана iPhone: 750 x 1334 пикселей

Размер экрана iPad*: 1024 x 1366 пикселей

*Примечание. Для целей дизайна я уменьшил размер экрана iPad с 2048 x 2732 пикселей. Размеры такие же.

Пошаговые инструкции — Как добавить свою фотографию на iPhone (или любой другой экран) в Canva:

• 1
  Выберите понравившееся изображение макета из галереи «Мокапы» Wellness Stock Shop.
• 2
  Выберите желаемый размер дизайна шаблона Canva и загрузите выбранное макетное изображение в свой дизайн.
• 3
  На новой вкладке выберите «Использовать специальные размеры», чтобы создать новый дизайн шаблона Canva для снимка экрана. (Измените размер шаблона в соответствии с тем, на какой экран вы хотите поместить свое изображение, например, 750 x 1334 пикселей для экрана iPhone).
• 4
  Загрузите изображение, которое вы хотите добавить на экран макета, в этот новый шаблон нестандартного размера, отрегулируйте по желанию и загрузите на свой компьютер.
• 5
  Теперь загрузите свое свежее изображение нестандартного размера в исходный дизайн макета, поместите его на фон макета и измените размер изображения, чтобы он соответствовал размеру экрана вашего iPhone/iPad.

Совет для профессионалов: При точной настройке «поворота» фотографии в Canva удерживайте нажатой клавишу Shift, чтобы выполнить точную настройку. Но, предупреждение: убедитесь, что , а не , чтобы удерживать клавишу Shift для других настроек, таких как расширение изображения, так как это вызовет искажение. (Я знаю, это сбивает с толку. Вы освоитесь.)

Макеты предлагают хитрый, привлекательный способ продемонстрировать свой веб-сайт, лид-магнит, ленту Instagram, видео, электронную книгу, рецепт или текущее предложение.

Получите бесплатные фотографии

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

Пожалуйста, введите ваше имя.

Да, пожалуйста! Отправить мне бесплатные фотографии

Что-то пошло не так. Пожалуйста, проверьте свои записи и повторите попытку.

← Как добавить свое изображение на экран макета iPhone (с помощью Photoshop) (5 простых шагов) Создайте красивую ленту Instagram →

© 2021 Магазин товаров для здоровья
Работает на entreTools

Как добавить изображения на мокапы экрана с помощью Photoshop

Рейтинг:

5,00 на основе 1
Рейтинг

Как добавить изображения на мокапы экрана с помощью Photoshop
www.sleeklens.com

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

Это то, чем мне приходится много заниматься в своей карьере фрилансера.

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

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

Честно говоря, это совсем не сложно, и как только вы это освоите, навыки будут хорошо применяться в других областях Photoshop.

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

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

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

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

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

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

Я делаю это, сначала открывая новый файл в Photoshop с точными размерами модели устройства.

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

Теперь вы можете скопировать и вставить новое изображение экрана в снимок Lifestyle, который вы собираетесь использовать с ноутбуком.

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

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

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

Для этого щелкните правой кнопкой мыши слой, содержащий изображение, и выберите Преобразовать в смарт-объект .

Затем вы можете нажать Ctrl-T, и это позволит вам манипулировать фигурой.

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

Пока вы это делаете, вы можете нажимать пробел для перемещения по экрану и Ctrl + для увеличения / Ctrl — для уменьшения масштаба на клавиатуре.

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

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

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

Не забудьте перед этим преобразовать объект обратно в растр.

Итак, теперь наше изображение завершено и выглядит великолепно 🙂

Вот классный способ добавить изображения на мокапы экрана с помощью Photoshop.

Рейтинг:

5,00 на основе 1
Рейтинг

Следующие две вкладки изменяют содержимое ниже.

• Биография
• Последние сообщения

Окончив колледж в 2002 году по специальности «Искусство и дизайн», я начал изучать свой путь в области графического дизайна и профессионального постпродакшна.