Как сделать 3d виды сайтов как это сделано тут?

Question

[Павел]

Как создаются вот такие 3D виды сайтов как на примере?


Пробовал в фотошопе в 3D, но нету объема картинки как здесь.

Comments

[sim3x]

Загрузите картинку на хабрасторадж

Спасибо

Answer 1

[dummyman]

www.fmwconcepts.com/imagemagick/3Drotate/index.php

./3Drotate \
            pan=20 tilt=30 roll=-30 \
            pef=0.8 auto=out \
            bgcolor=back skycolor=black \
            ./pic.png ./3dpic.png

Поребрик-бордюр можно сделать просто три раза наложить эту же картинку с прозрачным бекграундом со смещением в -1 -2 -3 пикселя по высоте.

Кстати, то же самое можно сделать с помощью css.

UPD А вот с предварительным bevel я добился вот такого результата:

(примеры кликабельны)


Вот еще пример рефлексии



А вот примеры 3дбокс

Comments

[Сергей Соколов]

у вас получислась красивая перспектива, а в примере ТС ацкая изометрия.

[dummyman]

Сергей Соколов: еще добавил примеров

[Сергей Соколов]

dummyman: под кат бы их (тег "спойлер")

[dummyman]

Сергей Соколов: сделал превьюшки поменьше.
Битки падают, настроение говно.
Фотошопом, кстати, так пользоваться и не научился. Сначала нарезал шаблоны Dreamwaver-ом, потом открыл для себя imagemagick.

а в примере ТС ацкая изометрия.

Ну я и говорю, тот эффект достигается наложением картинки самой на себя со сдвигом на 1, 2, 3 и т.д. пикселей вверх. Тоже бесит такое панно.

[Сергей Соколов]

dummyman: «изометрия» это про проекцию, когда любые две параллельные прямые остаются параллельными без перспективных искажений и оси проецируются под углом 45&grad;:

пример

[dummyman]

Сергей Соколов: Да я в курсе что такое изометрия. Кстати, углы не обязательно 45.
Просто у ТС по всей видимости 3д-трансформация получалась, но не хватило фантазии получить этот бардюр, картинка оставалась плоской.

Пробовал в фотошопе в 3D, но нету объема картинки как здесь.

Answer 2

[Сергей Соколов]

Это не 3D а простая трансформация + имитация краёв. Можно сделать и в Photoshop, и в ImageMagick наверное даже, программно.


Тут я уменьшил слой, трансформировал Skew (верхнюю грань сдвинул влево), чтобы получился этот ромб. А дальше насоздавал 10 копий слоя, затемнил, и сдвинул вниз по 1 px. Видео, как я это делаю.

Ещё идея – не совсем то, но для FireFox есть интересное расширение Tilt 3D, которое умеет показывать страницу в таком 3D виде:

Скриншот

Answer 3

[lukoie]

Это делается в именно в Фотошопе, только при должном опыте.
Либо с экшном в том же фотошопе.
Либо если вообще никак - в Майя делайте. Можно даже прикольней эффекта добиться, используя материалы, например стекло.

Comments

[Сергей Соколов]

Майя это совсем уж пушка по воробьям..

Answer 4

[Максим]

Конечно в фотошопе можно записать действия но в Гимп это делать я не знаю как , вот жалкая подобие вроде бы