Как сделать панорамную иллюстрацию 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