Как сделать 3D фото для Facebook в фотошопе

Посмотреть видео-урок

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

В социальной сети Фейсбук имеется возможность придать своему фото эффект 3D, что поможет сделать его интересным и привлечь максимальное внимание пользователей сети. Эффект выглядит следующим образом: при движении курсора мыши по фото объекты на фото меняют свой ракурс, создавая ощущение движения камеры.

3D эффект изображения в фейсбуке

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

1. Подготавливаем изображение

Для работы я взял фото девушки, которая стоит в комнате и на заднем плане видны кресло и торшер, с помощью данных предметов на заднем плане мы и будет создавать 3D эффект.

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

как сделать в фотошопе 3D фото для фейсбук

Далее, необходимо настроить размеры вашего фото, оно не должно быть слишком большим, иначе фейсбук не пропустит изображение и эффекта не получится. Я сделал стандартный размер Full HD, т.е. 1920х1080px, данный размер достаточно большой, можно сделать и меньше, но эффект у меня получился, делать изображение еще большего размера я не рекомендую. Пропорции лучше брать стандартные экранные, например 1920x1080px, 800x600px и т.п..

Чтобы быстро придать вашему фото нужный размер, выберите в верхнем меню слева "Изображение" - "Размер изображения" или нажмите комбинацию клавиш Alt + Ctrl + i на клавиатуре, если вы работаете в Windows. В появившемся окне настроек необходимо указать нужную вам ширину изображения, высота сгенерируется автоматически, если у вас стоит значок скрепки, обозначающий пропорциональное изменение размеров, как на скрине. Если функция пропорционального изменения выключена, то размеры изображения будут изменяться не пропорционально.

3D эффект фото в фейсбуке

2. Создаём образы нужных объектов для 3D эффекта

Теперь, когда размеры изображения заданы, нам необходимо определиться с объектами на фото, с помощью которых и будет создаваться эффект 3D. Можно выбрать один объект, можно несколько, чем больше объектов будет задействовано, тем эффектнее будет выглядеть интереснее, но не всегда. Я буду использовать только - девушку и торшер, кресло я оставлю неподвижным на заднем плане.

Начнём с девушки, в левой панели берём инструмент "Быстрое выделение" и выделяем им девушку на изображении. Инструмент ""Быстрое выделение" в фотошопе умеет различать контуры объектов, конечно не идеально, приходится корректировать, но он значительно экономит время.

3D фото facebook

Выбрав данный инструмент водим курсором по нужному объекту и кликая левой кнопкой мыши выделяем его. Если вы выделили лишнюю область, выделение можно отменить этим же инструментом, удерживая Alt на клавиатуре. При выделении курсор обозначается знаком "плюс" в кружочке, при удалении (удержании Alt) курсор обозначается знаком "минус".

3Д фото для фейсбук в фотошопе

В данном случае не обязательно выделять идеально, поэтому мы и используем "Быстрое выделение", даже если вы выделите немного за края объекта, переживать не стоит, на результате эффекта это никак не отразится. Внутренние части объекта (промежуток между рукой и лицом и т.п.) можно не выделять, главное выделить сам образ.

И так, я выделил девушку, теперь необходимо этот выделенный образ сделать тёмно-серым цветом на новом слое. Создаём новый слой, кликнув по соответствующему значку, под панелью слоёв, выделяем этот слой, кликнув по нему один раз левой кнопкой мыши, берём инструмент "Заливка" в левой панели и заливаем выделение тёмно-серым цветом.

фотошоп - подготовка фото для 3D

На данный момент оттенок серого не важен, мы откорректируем его позже, когда подготовим все объекты.

3Д фото для фейсбука Photoshop

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

3D фото для фейсбук на фотошопе

Выставляем в левой панели два цвета: чёрный и на несколько тонов светлее, для создания градиента. Далее создаём новый слой в панеле слоёв, кликаем по нему правой кнопкой мыши и выбираем "Параметры наложения".

градиент для 3D фото фейсбук в фотошопе

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

Наложение градиента фотошоп

Применяем выбранные параметры, кликнув на "Ок" и в этом же окне настраиваем угол градиента.

Угол градиента в фотошопе

Как я уже упоминал выше, я сделал градиент под углом 45 градусов из угла в угол, но можно поэкспериментировать или сделать классически под углом 90 градусов, тут уже всё зависит от вкуса и композиции самого изображения. Пункт "Инверсия" служит для зеркального отражения, к примеру, если вы установили угол в 90 градусов с переходом градиента сверху от светлого вниз к чёрному, то включение данного пункта перевернёт градиент, т.е. получится сверху от чёрного вниз к светлому. Если нужно быстро отразить градиент можно просто поставить галочку на данном пункте, чтобы не настраивать вручную градусы.

Отмечу, что в данном уроке я использую Photoshop CC, но для работы можно использовать фотошоп абсолютно любой версии, даже самой старой, будь то Photoshop CS5 или CS6. Думаю, что данные изображения можно подготовить даже и в фотошоп онлайн, но я не пробовал.

3. Сохраняем подготовленные изображения

В результате должна получиться вот такая вот композиция, в случае, если вы хотите задействовать два объекта: девушку и торшер. Как видите, образ девушки самый светлый, так как он расположен ближе всех к зрителю, торшер темнее, так как стоит дальше и фон самый тёмный.

композиция для 3D фото

Принцип работы скрипта фейсбук, который создаёт 3D эффект, заключается в следующем: Чем светлее объект, тем при перемещении мыши он будет быстрее двигаться и наоборот. Именно поэтому задний план фото должен быть темнее всех объектов, которые расположены на переднем плане. Чем дальше объект от зрителя тем он должен быть темнее, но задний фон должен быть максимально тёмным, либо прямо чёрным, либо немного посветлее.

Полученное изображение нам нужно сохранить в формате jpg и назвать определённым именем, чтобы Facebook понял, что это заготовка для 3D изображения. Выбираем в верхнем меню "Файл" - "Экспортировать" - "Сохранить для Web".

сохраняем изображение в фотошоп

В открывшемся окне устанавливаем формат jpg и устанавливаем качество на значение 80, после чего нажимаем "Сохранить".

сохранение изображения photoshop

Откроется окно выбора места сохранения на нашем компьютере. Выбираем папку или просто рабочий стол и пишем имя изображения "stand_depth" и сохраняем изображение.

сохранение в фотошоп

Заготовка для 3D фото готова, для того чтобы фейсбук понял какое изображение нужно преобразовать в 3D нам нужно будет показать ему и первоначальное изображение с девушкой в оригинальном виде. Оригинальное изображение нужно сохранить в том же формате и размере, но под другим именем. Проделываем все действия, как и в первом случае, только имя при сохранении прописываем уже "stand".

сохранение фотошоп

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

3D фото фейсбук

Теперь необходимо загрузить в фейсбук оба изображения и скрипт автоматически сгенерирует из них 3D фото.

4. Загружаем изображения в Facebook

Переходим на свою страницу фейсбук и выбираем "Фото/Видео".

загрузка в фейсбук 3D фото

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

загрузка 3D фото фейсбук

Удерживая левую кнопку мыши выделяем их и нажимаем "Открыть". После этих действий скрипт фейсбука, получив два изображения с определёнными именами поймёт, что это 3D фото и начнёт генерировать данный эффект, вы это сразу поймёте, увидев значок загрузки в виде вращающегося куба с надписью 3D.

загрузка 3D фото фейсбук

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

Вот таким не сложным способом, с помощью фотошопа можно сделать интересный и привлекательный пост в социальной сети Facebook.

Поделиться:

Комментарии ()

  1. Дмитрий 26 мая 2020, 11:25 # 0
    Делал всё по инструкции, и файлы названы правильно, и разрешение FullHD. И выделяю файлы для загрузки в правильном порядке. А фейсбук грузит их как обычные два фото, кубик 3D обработки не появляется. Аж обидно стало, столько старался.
    1. Админ 07 июня 2020, 15:14 # 0
      Ну если всё делали по инструкции и пробовали файлы загружать, которые к уроку приложены (исходники) и они тоже не работают, то может быть всего два варианта: 1) Фейсбук сменил алгоритмы и нужно по другому делать как-то (например изменили названия или размеры; 2) Фейсбук вообще отключил данную функцию, тоже не удивительно, в ВК раньше, например работали гифки, потом их просто отключили. Я на видео снял, как всё работает и эти рабочие исходники приложены к уроку. Поэтому, я не причем )) все вопросы к Фейсбук.
    2. Кайгородов Александр 10 августа 2020, 11:54 # 0
      Привет всем. Попробуйте заменить на следующие названия файлов;
      3D facebook photo и 3D facebook photo_depth.
      2099
      Посмотреть видео-урок Смотреть видео-урок Скачать исходники урока Скачать исходники урока