Как сделать изображение превью
ТОП-5 рекомендаций как сделать крутое превью для видео
Что вы увидите на экране первым делом, если введете запрос в строку поиска YouTube? Правильно, заголовки и превью для видеороликов:
И если с заголовками все примерно понятно, то важность превью для видео все еще недооценивают. Эти пять простых советов помогут повысить кликабельность роликов при помощи превью!
1. Используйте только крупные объекты и изображения
У вас не будет второго шанса произвести первое впечатление. Мимолетного взгляда на превью зрителю должно хватить, чтобы четко понять о чем пойдет речь в ролике. Если это выступление эксперта или вебинар, пусть на превью будет крупное изображение спикера; если обзор нового смартфона, помещаем на первый план крупное изображение гаджета.
Помните, как в панели “Рекомендуемое” выглядят превьюшки для видео:
Ваше видео должно как минимум не затеряться в этом “салате”.
ВАЖНО:
2. Добавьте заголовок в превью для видео
Каким бы крутым вы ни были дизайнером, текст — пока что самый эффективный способ быстрой передачи сообщения зрителю. Напишите о чем ваше видео прямо в превью. Крупным шрифтом. Коротко. Заинтересованный пользователь не пройдет мимо.
Не используйте слишком большой массив текста (см.пункт №1)!
Чтобы выбрать наиболее релевантный заголовок, рекомендуем воспользоваться сервисами поиска и подбора ключевых слов.
ВАЖНО:
3. Оформляйте весь канал в единой стилистике
Для каждой обложки используйте похожую композицию, цветовую палитру и шрифты. Во-первых, это просто эстетично, а во-вторых, зритель на инстинктивном уровне воспринимает это, как что-то уже знакомое. А значит с высокой вероятностью кликнет на ваше очередное видео.
За вдохновением по оформлению каналов в единой стилистике обратитесь к западным каналам о создании видео Think Media TV или Prime Video. Ну и, конечно, не забывайте о нашем канале ВидеоЗаяц.рф.
ВАЖНО:
4. Обновляйте превью для старых видео
Небольшой лайфхак от создателя канала Prime Video Джастина Брауна. Однажды он в порядке эксперимента просто обновил превью для своего древнего ролика с рекомендациями, как создавать красивое видео на iPhone. В результате количество кликов удвоилось!
Сравнивать кликабельность превью-картинок и отслеживать статистику можно при помощи бесплатного внутреннего инструмента YouTube Analytics. Напоминаем, что с недавнего времени стало возможно отслеживать не только CTR самого ролика, и CTR превью для видео.
Больше о механиках SEO-продвижении видеороликов на YouTube мы рассказали в одном из выпусков:
5. Сервисы в помощь
Для того чтобы создавать эффективные превью для видеороликов, необязательно быть искушенным графическим дизайнером. Сегодня в интернете достаточно бесплатных сервисов, которые помогут собрать нужное изображение как детский конструктор.
Наиболее простой и функциональный, набравший большую популярность последнее время — Canva.
Признаемся, наши превью для видео на YouTube всегда делает подготовленный графический дизайнер. Причем даже дизайнерам иногда напоминаем об этих простых правилах, озвученных в статье — все-таки YouTube имеет свои особенности, которых надо придерживаться.
Внедряйте эти простые советы и делитесь результатами в комментариях! И помните, создание роликов без дальнейшего продвижения — это как автомобиль без бензина — после создания видеоролика еще нужно добиться, чтобы его посмотрели.
Обложка видео на YouTube или как сделать превью ролика
Обложка видео на YouTube или превью — это изображение, которое пользователи платформы видят рядом с названием ролика. Создать его можно в любом графическом редакторе.
Как показывает практика, люди сначала смотрят на обложку к ролику и надпись на этой картинке (ее можно сделать крупнее, чем название рядом), а только потом читают его название. Поэтому обложка для видео должна быть приметной и отображать всю его суть.
Рекомендуем: Jesica – приложение для продвижения в Instagram (от создателей Instaplus.me). Установите Jesica на Android-телефон или компьютер и приложение будет ставить лайки, подписываться и отписываться, как будто это делаете вы сами:
Что такое значок видео на YouTube и зачем он нужен
При загрузке видеоролика на канал, платформа предлагает выбрать обложку для вашей публикации из сохраненного видео. Но лучше картинки к роликам делать отдельно. И вот почему:
Требования к обложке: размер, формат, вес
Чтобы не нарушать принципов сообщества ютуб необходимо на картинках к роликам отражать только то, что связано со сценарием самого видео. Чтобы у аудитории было больше желания перейти на ваш ролик, необходимо делать значки яркими, использовать качественное изображение и надписи.
Прежде чем создавать обложки для своих роликов необходимо убедиться, что вам это доступно. Для загрузки собственных обложек у канала должна быть хорошая репутация, подтвержденный аккаунт и соблюдении принципов сообщества ютуб. Чтобы это все проверить необходимо перейти во вкладку «Канал» и нажать на кнопку «Статус и функции». На скрине видно, что аккаунт соблюдает принципы сообщества и он подтвержден. Если у вас нет такой функции, необходимо нажать на галочку рядом с обложкой канала. На ваш мобильный телефон придет смс-сообщение или голосовое оповещение с кодом, который нужно будет ввести в появившемся окне.
На картинке не должно быть сцен насилия и пропаганды сексуального характера. Также к превью предъявляется ряд технических требований:
Как создать картинку для видео на YouTube: пошаговая инструкция
Шаг 1. Зайдите на главную страницу сайта: canva.com и активируйте пробную подписку (позже от неё можно отказаться и пользоваться сервисом бесплатно).
Шаг 2. Вкладка «Шаблон». Тут можно выбрать обложку для своего значка. Есть в шаблонах специальные обложки для ютуба на разные темы. Если кликнуть по клавише «Все» то появится больше дизайнов. Темы с животными тут нет, поэтому мы опустимся ниже и найдем подходящий шаблон из предложенных.
Пролистав ниже мы увидели картинки с животными, за основу превью возьмем нижнюю картинку с собачкой.
Чтобы загрузить свое изображение вместо собачки нужно кликнуть по вкладке «Загрузки» и перетащить изображение со своего компьютера.
Шаг 3. Вкладка «Элементы». Тут можно добавить изображение для своей обложки. У нас на картинке осталось мало места, а поэтому мы решили не перегружать превью и не стали добавлять элементы.
Шаг 4. Вкладка «Текст». В этой вкладке можно добавить надпись на вашу обложку, выбрав стиль, размер и цвет шрифта.Мы оставили стиль шаблона, изменив только размер и оттенок шрифта.
Шаг 5. Вкладка «Фон». В этой графе можно выбрать фон для своего изображения. Мы подобрали фон травы, которая ассоциируется с природой и животными. И чтобы он не перекрывал текст, надпись подняли немного выше.
Шаг 6. Картинка для превью готова, чтобы она появилась на компьютере, кликните по клавише «Скачать». Вы можете выбрать разные форматы изображений, но для загрузки на Ютуб лучше воспользоваться первым вариантом.
После этого картинка сохранится на ваш компьютер. Останется поставить её в ролик.
Как поставить картинку в качестве значка ролика на Ютубе
Чтобы поставить картинку в качестве превью необходимо выполнить следующий алгоритм действий:
Но если вы хотите сменить значок видео при его загрузке, не стоит покидать страницу, пока ролик полностью не обработается. Когда обработка завершится, снизу вы можете выбрать имеющиеся значки видео или кликнуть по кнопке «Свой значок» и выбрать на компьютере подготовленный файл.
После загрузки нужно нажать на клавишу «Сохранить» или «Опубликовать».
Плохие и хорошие примеры превью к видео
На Ютубе миллионы видеороликов, но не все они отличаются яркими и запоминающимися превьюшками. Ниже в таблице расскажем, какие элементы использовать на обложке видео нужно, а от каких следует отказаться.
| Общий признак | Как делать можно | Чего следует избегать |
| Текст | Краткое описание на превью дает больше шансов узнать пользователю о чем ролик. | Избегайте слишком мелкого и длинного текста, достаточно 2-3 слов ярким и читабельным шрифтом. Не стоит полностью или частично дублировать название ролика. Один текст без картинки использовать тоже нежелательно. |
| Эмоции | Вы привлечете больше внимания зрителей, если на картинке будет изображено что-то шокирующее и неординарное. Если говорить об эмоциях, это может быть смех, удивление, разочарование. | Не стоит делать превью с эмоциями, которых вы не испытываете в ролике. Картинка должна полностью передавать суть видео. |
| Расстановка маркеров | Ваша картинка станет приметнее если использовать такие маркеры как выделение, стрелочки, подчеркивание, «облако». | Не используйте таких элементов много, иначе значок будет перегружен и этот ролик точно не вызовет интереса. |
Вот целый набор хороших примеров обложек для видео на Ютубе: есть текст, главные герои ролика, картинки ярки.
Обложка видео на Ютуб — это один из инструментов продвижения, и чем она будет ярче и красивее, тем больше шансов, что пользователи выберут именно ваш ролик для просмотра. Для этого необходимо делать превью самим и загружать их при выгрузке ролика.
Создание превью изображений на клиенте: борьба с прожорливыми браузерами
Всем привет! Сегодня задача у нас следующая: необходимо создать интерфейс для загрузки картинок, который бы генерировал перед загрузкой превьюшки небольшого формата. На данный момент HTML5 вовсю шествует по планете, и, казалось бы, как это реализовать должно быть предельно ясно. Есть несколько русскоязычных статей на эту тему (вот, например). Но тут есть одно но. В рассматриваемом там подходе не уделено никакого внимания расходу памяти браузером. А расход может доходить до гигантских размеров. Разумеется, если загружать одновременно не более 5-10 картинок небольшого формата, то все остается в пределах нормы; но наш интерфейс должен позволять загружать сразу много изображений формата не меньше, чем у современных фотоаппаратов-мыльниц. И вот тогда-то свободная память начинает таять на глазах.
Для начала, чтобы оценить масштаб проблемы, реализуем подход, описываемый практически без изменений во всех статьях на эту тему, и попробуем проследить за использованием памяти. Код примеров я постарался сделать настолько простым, насколько это было возможно для демонстрации именно создания превью. Как реализовать Drag&Drop и загрузку можно посмотреть хотя бы даже в моей предыдущей статье
Для тестов я использовал папку ничем не примечательных фотографий размером 3648х2736 пикселей и средним объемом 4 мегабайта. А также набор браузеров актуальных версий: Chrome (31.0), Yandex (13.12), Firefox (26.0), и IE (11.0.1). Ну и обычный Task Manager (Win 8.1).
Итак, выбираем в поле 20 фотографий. Смотрим:
| Браузер | Потребляемая память, МБ |
|---|---|
| Chrome | 994 |
| Yandex | 1045 |
| Firefox | 1388 |
| IE | 1080 |
Тут стоит отметить два момента: 1) Yandex и Chrome держат под каждую вкладку отдельный процесс, а Firefox и IE — нет, поэтому для последних двух в измерения попадают также некоторые накладные расходы, напрямую не связанные с нашим испытанием; 2) я снимал измерения (здесь и далее) приблизительно через 20 секунд после подгрузки всех картинок, чтобы дать возможность браузерам освободить память по горячим следам, что они и делают, хотя и совсем незначительно — в пределах 50Мб, т.е. продолжают удерживать все еще слишком большие объемы. После обновления/закрытия страницы все браузеры потихоньку освобождают память до нормальных объемов.
Итак, понятно, что такая ситуация нас решительным образом не устраивает. Думаем, что можно предпринять…
Первый подход к снаряду
Первой моей мыслью было: «а что если такой перерасход получается от попытки загружать все картинки параллельно? Может быть, попытаться делать это последовательно, тем самым давая браузерам возможность немножко отдышаться?». Что ж, пробуем реализовать простейшую очередь.
Результаты (на тех же самых 20-ти фотках):
| Браузер | Потребляемая память, МБ |
|---|---|
| Chrome | 979 |
| Yandex | 1119 |
| Firefox | 1360 |
| IE | 399 |
Видим, что помогло это только в случае с IE. Ну что ж поделать — рекомендуем всем пользователям отказаться от использования каких-либо браузеров, помимо IE. Шутка. Думаем дальше…
Второй подход
После сеанса некоторого шаманства, приходит в голову мысль: «а может быть, проблема в том, что браузерам приходится держать в памяти широченные изображения, хотя по факту нам нужно всего лишь один раз ужать картинку до размера превью? Что если вместо обычного img использовать canvas, куда помещать уже ужатое изображение?». Так и поступим.
Результаты (все те же 20 картинок):