Как сделать панорамную иллюстрацию 360° для Facebook

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

Зачем нужна иллюстрация в 360°?

Фото 360° еще довольно новая фишка, однозначно притягивающая внимание. Будет «не как у всех», WOW эффект, лайки, шеры, комментарии, быть может, кто-нибудь даже попросит прислать картинку, чтобы поставить у себя на странице. Это может помочь с рекламой, продвижением, имиджем и т.д., тут всё зависит от конкретной задачи. Пример иллюстрации в 360° можно посмотреть тут.

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

Так иллюстрация выглядит в посте.

Делаем 360°. Пошаговая инструкция.

Если с фотографиями 360° все понятно: делай панорамную фотографию на любом современном устройстве, загружай в Facebook, и социальная сеть сама сделает все за вас; то, что же необходимо сделать, если вы хотите разместить иллюстрацию в 360°?  Ниже расскажем, на что стоит обратить внимание при создании таких панорамных иллюстраций в Adobe Photoshop.

1. Создание файла

Создаем файл с пропорциями 2:1 (длина в 2 раза больше ширины). Рекомендуем создавать довольно большие файлы, которые подходят для печати, с разрешением от 250 dpi. При большом разрешении прорисовывать детали гораздо удобнее.

2. Творческий процесс

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

3. Работаем над композицией

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

• Линию горизонта лучше делать примерно по центру, чуть ниже.

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

• Иллюстрация должна быть непрерывной (бесшовной) по горизонтали. 

Удобно использовать фильтр «Filter — Other — Offset» для смещения на нужное количество пикселей по горизонтали (ставьте примерно половину размера вашего файла, чтобы «шов» переместился на середину).

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

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

• На финальном этапе еще пару раз прогоните иллюстрацию через фильтр «Other — Offset» (только по горизонтали), чтобы проверить стыки. Сохраняем в .jpg и можно переходить к следующему пункту.

4. Правим метаданные

Главное разочарование в том, что при попытке опубликовать вашу правильно нарисованную иллюстрацию в Facebook, вы увидите обычное фото, и об эффекте  360° можно забыть. Нужно изменить метаданные иллюстрации, чтобы Facebook распознал ее как панораму. Про то, как можно сделать снимки 360° (с помощью каких ресурсов и программ) есть много статей. Нам помогла вот эта.

• Открываем нарисованную иллюстрацию в Photoshop, выбираем «File — File info» (Shift + Option + Command + I). Далее вкладка «Raw Data» и выбираем пункт «Export» во всплывающем меню в нижней части диалогового окна.

• Далее открываем экспортированный .xmp файл любым текстовым редактором и просто вставляем указанный ниже код после третей строки (вместо значений 3000 и 6000 указываем свои значения ширины и высоты панорамы).

<rdf:Description rdf:about=»» xmlns:GPano=»http://ns.google.com/photos/1.0/panorama/»> <GPano:CroppedAreaImageHeightPixels>3000</GPano:CroppedAreaImageHeightPixels> <GPano:CroppedAreaImageWidthPixels>6000</GPano:CroppedAreaImageWidthPixels> <GPano:FullPanoHeightPixels>3000</GPano:FullPanoHeightPixels> <GPano:FullPanoWidthPixels>6000</GPano:FullPanoWidthPixels> </rdf:Description>

• Сохраняем файл с метаданными и импортируем обратно в Photoshop (схема аналогичная экспорту).

• Сохраняем панорамную иллюстрацию в Photoshop.

• Загружаем в Facebook и радуемся результату.

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

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

Есть вопросы или вы хотите, чтоб мы нарисовали вам иллюстрацию, пишите на hey@as-crew.com