Превью услуги. Как сделать превью

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

Превью: что это в самом широком понимании

Сам термин происходит от английского слова preview, означающего в дословном переводе «предварительный просмотр».

Но если раньше он применялся в основном к графике, сегодня область его использования гораздо шире. Но для начала посмотрим на начальную трактовку слова «превью». Что это такое? Да просто уменьшенное изображение оригинала. Превьюшки (как называют у нас уменьшенные изображения) раньше были незаменимы при публикации картинок или фотографий в Интернете, фактический размер которых в геометрическом плане был слишком большим для размещения нескольких изображений на одной странице.

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

Применение термина в различных сферах

Со временем термин перекочевал в самые разные сферы. Так, например, он стал использоваться в области программного обеспечения.

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

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

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

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

Как сделать превью самому?

Но вернемся к изначальному пониманию термина. Создать превьюшку самому не так уж и сложно. Сначала следует определиться, где именно будет публиковаться этот элемент. Для сервиса YouTube можно создать статическую картинку из какого-то кадра (как правило, минимальный рекомендуемый размер 640х360 пикселей, но можно и больше). Главное условие в том, что соотношение сторон должно отвечать пропорции 16:9. Для остальных сайтов, если не указан минимальный размер картинки, можно использовать соотношение 200х200 пикселей.

Обычно следует выбирать картинку или кадр из видео, чтобы пользователь, на нее взглянувший, тут же кликнул по ней для просмотра полноразмерного изображения или видеоролика. Основную картинку можно элементарно уменьшить в любом графическом редакторе. Да хоть в том же Paint, входящим в стандартный набор Windows-систем. Но если потребуется добавить дополнительные эффекты, лучше обратиться к профессиональным программам вроде Adobe Photoshop.

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

Заключение

Вот кратко и все, что касается термина «превью». Что это такое, думается, уже понятно. Хотя в классическом понимании это уменьшенное изображение, нынешняя трактовка в разных областях использования выглядит намного шире. Какими инструментами пользоваться для создания превьюшек, советовать достаточно трудно, ведь тут все зависит от того, какая смысловая нагрузка будет на них возложена, насколько они должны быть эффектными и привлекательными и т.д.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Превью - это миниатюра для предварительного просмотра - отражает суть текста, видеоролика на сайте.

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

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

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

С превью та же самая история. Оно емко показывает, о чем будет полный контент.

Что такое превью для видео на Ютубе

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

Как сделать превью

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

Разрешение превью картинок составляет 1280х720 pix, соотношение сторон - 16х9.

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

Теперь ответьте, какие видео-ролики выглядят более привлекательными?

Правильные характеристики превью

• Картинка должна соответствовать теме видео-ролика. Не обманывайте ваших зрителей, так как это запрещено правилами Youtube, а разочарование посетителей может принести вам или жалобу администрации.
• Создавайте картинку, которая выделит ваш ролик из серой массы других. Используйте привлекательные графические эффекты (вспышки, блестки и т.п.).
• Если вы блогер и хотите добиться популярности – в превью размещайте свое фото. Если сюжет рассказывает о чем-то (к примеру, обзор) – размещайте фото предмета обзора.
• Части главных изображений не должны выходить за пределы превьюшки.
• Разделяйте передний и задний планы. То, что впереди – должно быть ярким и контрастным.
• Добавляйте цепляющий текст с описанием сюжета. Имеет смысл добавление номеров серий к сюжетам. Шрифт используйте крупный.
• Не используйте клише-фразы типа « Блестящие актеры» или «Лучшие приколы». Текст должен быть оригинальным и выделять видео-ролик.

Как установить превью

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

• Выберите «Настройки YouTube » – «Дополнительные функции».
• Нажмите «Подтвердить» и введите код активации в предложенное поле.

Канал подтвержден. Теперь надо установить превью-картинку.

• Зайдите на канал и выберите «Менеджер видео».
• Напротив ролика нажмите «Изменить» и «Персонализированный значок».

Теперь вы можете загрузить готовое изображение. Помните: правильная картинка предпросмотра – залог успеха всего канала. Она поможет увеличить число просмотров каждого видео-сюжета.

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

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

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

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

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

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

Итак, с чего мы начнем?

Шаг 1. Правильная перспектива.

Очень важно для создания фотореалистики, чтобы при просмотре картинки не возникала мысль, что «что-то не так». Поэтому очень щепетильно следует отнестись к построению перспективы вашего продукта, он должен выглядеть максимально натурально.

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

Я выбрала вариант с фото: разложила буклеты так, как мне показалось, они неплохо будут смотреться, и сделала снимок.

Теперь открываем Photoshop и создаем новый документ со следующими настройками:

Размещаем сделанные снимки на рабочем пространстве. В соответствие с моей задумкой, вот что у меня получилось:

Теперь начинаем обрисовывать наш буклет. Для этого выбираем инструмент и проверяем его настройки: мы должны рисовать Слой-Фигуру (Shape layers) заданного размера (Fixed size) – 100х214 мм.

Одиночным щелчком мыши размещаем наш прямоугольник на рабочей области и трансформируем его под размер одной стороны буклета. Для этого, выделив слой с прямоугольником, нажимаем сочетание клавиш Ctrl+T и выбираем из контекстного меню (клик правой кнопкой мыши в области фигуры) пункт Искажение (Distort).

Далее совмещаем вершины прямоугольника с углами одного из разворотов буклета и принимаем трансформацию, нажав Enter . Теперь сделаем стороны плавными. Из группы инструментов Перо (Pen Tool) выбираем Инструмент «Угол» (Convert Point Tool) , щелкаем по контуру фигуры, чтобы его выделить, выбираем узел, который будем редактировать и, не отпуская кнопку мыши, тянем за него, чтобы вытащить маркеры управления. Взяв отдельный маркер и зажав клавишу Alt , подгоняем наш контур под очертания буклета.

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

Шаг 2. Свет и тень

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

В палитре слоев щелкаем правой кнопкой мыши по одной из сторон буклета и в контекстном меню выбираем Параметры наложения (Blending Options) , откроется окно Стиль слоя (Layer Style) . В нем выбираем Тень (Drop Shadow) и Наложение градиента (Gradient Overlay) с такими параметрами:

Копируем стиль слоя на две оставшиеся стороны с помощью контекстного меню (правый клик мышью на нужном слое в палитре слоев), изменяя при этом угол наложения градиента, чтобы тень смотрелась естественно. Для центрально фрагмента он получился равным 15°, а для правого 19°. Также для правой стороны нужно немного отредактировать градиент, чтобы ползунок со значением непрозрачности 0% был смещен влево. В итоге получаем вот такое изображение:

Теперь добавим тень непосредственно под сам буклет, используя инструмент Перо (Pen Tool) . В настройках переключаем рисование с Контура (Paths), которое стоит по умолчанию, на Слой-фигуру (Shape layers) и изображаем примерно следующее:

Перемещаем созданную тень под буклет и растрируем (правый щелчок на слое и выбор команды Растрировать слой – Rasterize Layer ). Выбираем инструмент Ластик (Eraser Tool) с четкими краями, размером примерно 40-50 px и непрозрачностью (Opacity) 30%, и делаем нашу тень менее насыщенной. Затем сглаживаем ее края инструментом Размытие (Blur) .

Шаг 3. Смарт-объекты

Теперь давайте создадим слои с редактируемым содержанием, которое возможно будет изменять в дальнейшем независимо от остального макета, — так называемые смарт-объекты (Smart Object) .

Снова обратимся к инструменту Прямоугольник (Rectangle Tool) , его настройки у вас сохранились (Слой-Фигура (Shape layers) заданного размера (Fixed size) – 100х214 мм). Одиночным щелчком мыши размещаем наш прямоугольник на рабочей области и преобразовываем его в смарт-объект (правый клик мышью на слое в палитре слоев и выбор команды Преобразовать в смарт-объект – Convert to Smart Object ).

Не снимая выделения с этого слоя, нажимаем Ctrl+T и из контекстного меню (клик правой кнопкой мыши в области фигуры) выбираем пункт Искажение (Distort) . Совмещаем вершины прямоугольника с углами одного из разворотов буклета. Не нажимая Enter, опять вызываем контекстное меню и выбираем пункт Деформация (Warp) . Используя появившиеся маркеры управления, делаем наш слой близким по форме к выбранной стороне буклета. Принимаем трансформацию нажатием Enter .

Предварительно поместив смарт-объект над слоем соответствующей стороны буклета, изменим режим наложения смарт-слоя на Умножение (Multiply) и, вызвав контекстное меню, выберем команду Создать обтравочную маску (Create clipping mask) .

Если буклет покажется недостаточно контрастным, то можно добавить еще немного тени к местам сгиба. Для этого скопируйте нарисованную в самом начале сторону буклета, поместив ее над соответствующим смарт-слоем, измените в свойствах слоя значение заливки (Fill) на 0% , отключите тень и редактируйте градиент следующим образом (цвет градиента не меняется):

Шаг 4. Наводим марафет

Теперь дело осталось за самым малым – добавить содержимое буклета. Двойным щелчком на значке слоя открываем файл смарт-объекта и помещаем в него существующий макет. С помощью Ctrl+S сохраняем изменения и закрываем наш файл.

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

Все сохраняем и наслаждаемся проделанной работой:

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

На этом статья подходит к своему завершению.