Мокап поста для соцсетей
Покажите клиенту, коллеге или себе, как пост будет выглядеть на самом деле, ещё до публикации. Перетащите изображение, введите подпись, задайте название страницы и счётчики и увидьте реалистичный пост Facebook, Instagram или LinkedIn в светлой или тёмной теме, в виде простой карточки или на экране телефона. Скачайте его как чёткий PNG в 2× для презентации, макета или письма на согласование. Изображение и текст не покидают ваше устройство.
Перетащите файлы сюда или нажмите, чтобы выбрать
Результаты
Как сделать мокап поста
- Перетащите изображение для поста, несколько изображений для карусели или ничего для текстового поста.
- Выберите платформу, светлую или тёмную тему и карточку или рамку телефона.
- Введите название страницы, имя пользователя, подпись и нужные числа лайков, комментариев и репостов.
- При желании загрузите логотип как аватар, затем скачайте PNG.
Зачем делать мокап поста перед публикацией
Подпись, которая хорошо читается в документе, может выглядеть совсем иначе, когда её перенесут по ширине ленты и обрежут на «Ещё», изображение, прекрасное как файл, в Instagram обрежется до 4:5, а клиент, согласовавший текст в письме, часто реагирует иначе, увидев настоящий пост. Мокап закрывает эти разговоры с одного взгляда. Именно его агентства вставляют в презентации и переписку по согласованию, и именно его вы сохраняете для портфолио, пока настоящий пост ещё не вышел.
Что показывает мокап
Каждая платформа отрисовывается со своей вёрсткой, шрифтами, иконками и подписями:
| Платформа | Что вы получаете |
|---|---|
| Название страницы, время или метку Sponsored со значком аудитории, подпись, изображение, иконки реакций со счётчиком, числа комментариев и репостов и панель Like, Comment и Share. | |
| Имя пользователя с кольцом историй, метку Sponsored, изображение, обрезанное по пропорциям ленты, иконки сердца, комментария, отправки и сохранения, лайки, подпись с именем пользователя в строке, «View all comments» и время. | |
| Название компании или профиля, число подписчиков, время или метку Promoted, подпись, изображение, стопку реакций со счётчиком, комментарии и репосты и панель Like, Comment, Repost и Send. |
Каждая платформа доступна в светлой и тёмной теме и либо в виде аккуратной карточки поста на мягком фоне, либо на экране телефона со строкой состояния, что лучше смотрится в презентации.
Карусели и посты с несколькими изображениями
Перетащите два изображения или больше, и мокап переключится на многокартинную вёрстку платформы. Facebook рисует рекламную карусель: квадратные карточки рядом, следующая выглядывает справа, у каждой заголовок, название вашей страницы и кнопка с заданным текстом. Instagram и LinkedIn показывают по одному слайду со счётчиком в углу и точками или полосой страниц внизу, а вы выбираете, какой слайд впереди. Для карусели скачивание всегда даёт два PNG: вид ленты ровно таким, каким его пролистывают люди, и вид всех слайдов рядом, который клиенты понимают с одного взгляда.
Как добиться убедительного результата
- Используйте реальный размер изображения. Предпросмотр обрезает высокие изображения так же, как лента, и вы видите, что именно отрежется. Квадратные изображения и 4:5 показываются целиком.
- Загрузите логотип как аватар. Инициалов достаточно для быстрой проверки, но именно логотип делает мокап похожим на скриншот.
- Задайте правдоподобные числа. Лайки, комментарии и репосты форматируются так, как это делает каждая платформа, поэтому 1240 превращается в 1.2K там, где платформа сокращает.
- Вставьте итоговую подпись. Переносы строк и эмодзи сохраняются, а длинные подписи обрезаются там, где их обрезала бы лента.
- Включите метку рекламы, когда проверяете рекламу, а не обычный пост. Текст метки меняется в зависимости от платформы.
Скачивание и использование мокапа
Скачивается PNG вдвое больше экранного размера, поэтому он остаётся чётким на слайде, в документе или на странице портфолио. Фон включён, так что мокап сразу вставляется в презентацию. Если для коллажа нужен вариант без фона, обрежьте его потом инструментом обрезки.
Чего он не делает
Он ничего не публикует, ничего не планирует и не подключается ни к каким аккаунтам, и это не точная до пикселя копия каждого обновления платформы. Вёрстка лент меняется на несколько пикселей каждые несколько месяцев; мокап следует текущей вёрстке достаточно близко для согласований, презентаций и портфолио, для чего мокапы и нужны. Видеопосты пока не показываются; используйте кадр из видео как изображение, в остальном вёрстка та же.
Приватность
Невышедшие кампании это ровно то, что не стоит загружать на случайный сайт мокапов. Этот инструмент рисует предпросмотр и создаёт PNG полностью в браузере. Ваше изображение, подпись и логотип не покидают устройство.
Частые вопросы
Загружаются ли моё изображение или подпись?
Нет. Предпросмотр рисуется в браузере, а PNG создаётся на вашем устройстве. Невышедшие кампании остаются приватными.
Показывает ли он рекламу, а не только обычные посты?
Да. Включите метку рекламы, и в мокапе появится «Sponsored» в Facebook и Instagram и «Promoted» в LinkedIn.
Можно ли использовать свой логотип как фото профиля?
Да. Загрузите логотип или фото, и оно станет аватаром; без него предпросмотр показывает ваши инициалы в цвете платформы.
Насколько точна вёрстка?
Она достаточно близко следует текущей ленте каждой платформы по шрифтам, отступам, иконкам и подписям, чтобы годиться для согласований и презентаций. Платформы часто меняют мелкие детали, поэтому считайте это достоверным мокапом, а не скриншотом, точным до пикселя.
Какого размера скачанный файл?
PNG отрисовывается вдвое больше экранного размера, поэтому остаётся чётким в презентациях и на экранах retina. Текстовые посты и высокие изображения тоже поддерживаются.
Можно ли посмотреть карусель?
Да. Перетащите два изображения или больше. Facebook показывает листаемые карточки с заголовком и кнопкой на каждой, а Instagram и LinkedIn показывают счётчик слайдов и точки. При скачивании вы получите два PNG: вид в ленте с выглядывающей следующей карточкой и вид всех слайдов рядом, чтобы клиент мог выбрать.
Можно ли посмотреть видеопост?
Пока нет. Используйте кадр из видео как изображение, вёрстка та же.
Ваши файлы никогда не покидают устройство
Каждый инструмент на Squishly Tools на 100 % бесплатен и работает целиком внутри браузера. Ваши изображения и документы обрабатываются на вашем компьютере и никогда не отправляются на сервер. Здесь нет аккаунтов, водяных знаков и подвоха.