Способ занимает всего пару минут, а на выходе получаются стильные картинки, которые хорошо вписываются в дизайн самого VC. Вот пример ↓
Зачем вообще это все?
- Если вставить на VC квадратную или вертикальную картинку, ее может растянуть на весь экран, и получится некрасиво. А мы сейчас научимся этого избегать.
- Когда статья оформлена аккуратно и красиво, то и читать ее приятнее. Единообразный стиль всех иллюстраций — это большой шаг к аккуратности.
- Можно отойти от «стиля VC» и поставить на фон свои корпоративные цвета и «забрендировать» статью.
- Вы можете сделать это все сами, без дизайнера.
Как делать
Все, что нам потребуется, это Figma. Можно использовать любой другой редактор, но я люблю Фигму, поэтому работаю в ней.
1. Создаем фрейм (клавиша F) и задаем ему размер 1920×1080. Это привычный глазу формат 16:9.
2. Заливаем фрейм фирменным цветом VC — #FFF5F7. Такой же цвет используется в текстовых врезках на сайте.
3. Затем на этот фрейм закидываем наши картинки: скриншоты, мемасы, фотки, таблицы и что угодно еще. Размер изображений может быть любой — хоть квадраты, хоть вертикальные скрины со смартфона. Все равно мы вписываем их в наш фрейм 16:9.
4. Скругляем углы, добавляем рамочки, подписи, тени или еще что-нибудь по желанию.
5. Экспортируем фрейм как изображение и загружаем в статью на VC.
Вуаля — у нас хорошо оформленная картинка. Наши скриншоты не растягивает на весь экран, они не смазываются с текстом и не бьют по глазам.
Вместо скриншотов на этот фрейм можно вставлять таблицы, графики, схемы и что угодно еще. Можно собрать много маленьких картинок в одну — например, чтобы показать отзывы или рекламные креативы. Или добавлять к ним выноски, как на заглавном скрине к этой статье.
И все будет выглядеть в едином стиле — будто это дорогой промоматериал, который верстала редакция VC. Но это сделали мы сами за несколько кликов в Фигме.
Чтобы вам проще было разобраться, я сделал проект в Фигме — можете его скопировать и пользоваться.
Такой вот минигайд по картинкам. Если он вам понравился, подписывайтесь на мой телеграм-канал — рассказываю, как компаниям привлекать клиентов с помощью контент-маркетинга. Например, с помощью блога на VC.
На VC вроде как раз нет проблем с квадратными/вертикальными картинками. Вот на Хабре/Пикабу с этим труба.
Смотри, вот я статью про Телегу писал. Скриншот разнесло так, что он еле на экране помещается. Выглядит не оч
У меня на VC в браузере вертикальные картинки уменьшаются и ложатся на подложку автоматически; а вот на Хабре и Пикабу такие расширяются до всего экрана автоматически (что выглядит отвратительно в сравнении с горизонтальными картинками).
У меня вот раз на раз не приходится. Иногда они уменьшаются и попадают на подложку, а иногда нет. Я так и не нашел закономерности как это происходит, поэтому решил не париться и просто делать все картинки 1920×1080 — они предсказуемые и я точно знаю, чего от них ожидать.
Прям расширяются в смысле редактор их "растягивает"? Странно, у меня такого нет. См. ниже мой другой коммент - там скриншот вертикальной картинки из мобильной версии Хабра. На Десктопе проверил - там тоже все норм.
На VC да, у меня так же. Кстати, считаю, что эта серая подложка весьма уебищна. Могли бы хотя подстраивать цветовую гамму подложки под цвет картинки, или какой-нибудь градиент делать...
На мой взгляд - картинки должны быть независимо от размера вписаны в примерно одинаковые по размеру блоки. На Хабре на десктопе выходит так, что горизонтальные картинки маленькие и между кусками текста; а вертикальные картинки огромные и занимают больше экрана - это выглядит очень плохо, имхо.
Это на компе, на мобилке все нормас
У меня всё нормально
В мобилке на Хабре норм, с компа вроде тоже было (но про комп не уверен)
На Хабре как раз норм - там же не добавляется никакая подложка.
странно, что редактор VC не делает фреймы автоматом
было бы не плохо, автору этой статьи зайти с этой идеей к модерам и админам vc
Я думаю, раз статья попала на главную, то сотрудники VC ее увидели. Будем надеяться, что возьмут на вооружение
хотелось бы, чтоб взяли на вооружение, а не просто проигнорировали
Возможно, я что-то путаю, но вроде такая функция была. Когда публиковали картинки, можно было нажать на кнопку, чтобы картинка уменьшалась и попадала на розовый фон. А потом это куда-то пропало
Но может быть я это все выдумал, и такое было на другом сайте
Было. Убрали такую функцию. Редактор в целом сильно порезали за последний год
Фух, значит, я не сумасшедший
пост не говно. автору респект.
Спасибо =)
Спасибо автору за информативный пост
Однозначно плюс, надо потестить для своих статей
На телефоне ваши вертикальные картинки больше не открываются
Все прекрасно открывается. Просто в горизонтальном формате. Читать статьи так удобнее, потому что картинки занимают мало места на экране. Нет такого, что одна картинка занимает целый экран телефона.
Большинство картинок можно увидеть и понять и так. А если там что-то мелкое, можно развернуть на весь экран и приблизить.
Спасибо! Думаю пригодится)
Как всегда супер полезно, Павел. Ради такого контента и подписывался!
Отличный пост для утра понедельника, за размеры отдельная благодарочка, а то вчера ваяла наобум
О, это в сохранёнки пойдёт
Полезно
Очень полезно, спасибо!
Опытным путем пыталась подобрать размер изображений на vc, чтобы их не размазывало по всему экрану или не торчала серая подложка
Это не иллюстрации.
А что это?
Ток вы так ущемляеете права любителей тёмных тем, все эти картинки будут слепить глаза.
Павел, а 16:9 — это какой-то универсальный формат? Скажет, если выкатить статью на дзене или пикабу, то эта схема так же будет уместной? С таким же 16:9? Только цвет сам нужно будет поменять, верно?
И еще вопрос: это же можно реализовать в той же канве, верно? То есть там это даже может быть будет проще?