Из плоской карты мира делаем глобус. Часть II – глобус в 3d

веб-дизайнер, January 10, 2009

“Ничто так не облегчает работу фотошопера, как навыки работы с 3d-max!”

В статье Из плоской карты мира делаем глобус. Часть I – глобус в фотошопе лежит первая часть урока, в которой я рассказывал, как сделать глобус в фотошопе. Сегодня очередь 3d. Для выполнения занятия нам потребуется непосредственно 3d-max и инсталлированный визуализатор VRay (я материалы настраиваю в нем, потому и…), а также карта мира (которую можно скачать по ссылке в первом уроке) в трех инкарнациях – в виде раскрашенной карты мира для текстуры, в виде инверсной черно-белой карты (черные моря, белые материки, это важно!) в качестве карты бампинга для создания рельефа и в виде черных материков на прозрачном фоне, в качестве карты бампинга для прозрачности. Рекомендую заготовить.

Итак, открываем макс. Для начала рисуем там элемент box, который будет символизировать собой основание композиции (когда предмет болтается в космической пустоте его освещать сложнее). Назначаем ему Vraymtl (стандартный материал Vray), просто раскрашенный в белый цвет:

На некотором расстоянии над этой плоскостью подвешиваем объект Sphere. Добавляем в нужное место источник света (Lights->Omni) с настройками примерно как на каринке:

Далее мы должны наложить текстуру на шар. Для того, чтобы объяснить программе, что мы собираемся натягивать фигуру на шар, выделяем левым кликом сферу, открываем список модификаторов (Modifier List) и выбираем там UVW Map, в свитке Parameters которого выбираем Spherical:

Теперь нам надо создать правильный материал для глобуса. Щелкаем клавишу M для вызова редактора материалов, и начинаем.
У свойства Diffuze (которое характеризует фактуру, цвет и общий вид поверхности материала) нажимаем кнопочку сбоку от цвета (на рисунке помечена красным), и в появившемся списке выбираем Bitmap (помечено красным на рисунке):

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

Далее придадим глобусу рельефность. Для этого, под свойствами Diffuze, Reflect и Refract (возможно, придется воспользоваться бегунком) находим свиток Maps. В этом свитке нас будет интересовать строчка Bump, которая собственно и отвечает за придание рельефности поверхности материала. Нажимаем на кнопку “None” напротив, и выбираем инверсную карту. Материки должны быть белыми, а океаны черными так как Max воспринимает цвет, как команду: светлее – выше, темнее – ниже. А величина бампинга – это амплитуда между самой высокой и самой низкой точками:

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

Теперь осталось настроить прозрачность “океанов” (это уже мое личное желание, может быть и незачем). Я захотел сделать океаны прозрачными, а материки – нет. Для этого мне и понадобится карта с черными материками на прозрачном фоне. Выставляем цвет прозрачности (параметр Refract), также, как и в случае с текстурой, нажимаем кнопочку рядом с цветом, выбираем в появившемся окне Bitmap и там нашу карту с черными материками на прозрачном фоне. Все, теперь океан у нас прозрачный, а материк – нет:

Также на картинке выше уже настроены блики: цвет выбран чуть светлее черного, а параметр Refl. glossiness приобрел значение 0,8 (для ярких, глянцевых бликов).

Осталось перенести материал на сферу. Выбираем сферу и щелкаем кнопочку (сразу под шарами с материалами, третья слева). Сфера изменится, это нормально. Теперь, для того, чтобы настроить ракурс мы нажимаем кнопочку (там же, только четвертая справа). Инструментом поворота настраиваем ракурс. Нажимаем F10 и рендерим.

У меня получилось вот так:

Пробуйте:-)

Выбираем окно проекции, щелкнув по нему правой кнопкой мыши.
————————————-

Из плоской карты мира делаем глобус. Часть I – глобус в фотошопе

Вячеслав Гринин, January 6, 2009

Довольно часто дизайнеру приходится сталкиваться с разными нетривиальными задачами, и выдумывать для их решения различные нетривиальные способы. Как-то раз мне потребовалось сделать для баннера псевдо-3d глобус. Решено было не искать готовое решение по интернетам, сделать свое. Ниже я покажу, как плоская карта мира преобразуется сначала в псевдо-3d фотошопом, а потом в настоящее 3d уже 3d-max’ом.

Нам потребуется пустая контурная карта мира. Можно взять, к примеру, тут. Открываем ее в фотошопе, и начинаем.

Для начала, идем в Select->Color Range. В появившемся окошке, выбираем пипеткой материки:

Затем нажимаем Shift+F5 и заливаем материки требуемым цветом (зеленый в моем случае). Затем, не снимая выделения нажимаем Shift+Ctrl+I, инвертируем выделение и удаляем “океаны”. Воду лучше сделать отдельным слоем. Создаем новый слой под материками, заливаем его равномерным синим цветом. Это вода.

Ну и можно заняться спецэффектами на свой вкус. Я сделал так:
1. добавил на воду свет (Filter->Render->Light effects)

2. добавил на воду подобие волн (Filter->Render->Distort->Ocean Ripple)

3. задал слою с материками fill=0 и добавил Bevel and Emboss:

4. и тому же слою следом – color overlay:

Теперь начинается самое интересное. Превращаем все это в глобус. Вы можете слить слои и делать псевдо-3d из скленной карты, можете переделывать по слоям, если хотите, чтобы материки и вода имели разные радиусы, эффекты и пр. Я делал раздельно. Итак. Наведемся на слой с водой и создадим круглое выделение (для того, чтобы создать ровный круг при выделении надо держать зажатой клавишу Shift):

Инвертируем выделение и удаляем все лишнее. Затем, идем в Filter->Distort->Spherize и добавляем кругу выпуклости. Для того, чтобы сделать выпуклым слой с материками: зажимаем Ctrl и щелкаем левой кнопкой мыши на слое с “водой”. По контуру псевдо-шара появится выделение. Не снимая выделения, переходим на слой с материками. Если нам хочется, чтобы материки немного “отставали” от воды – выполним команду: Select->Modify->Expand (со значением пикселей в 20-30). И также применим к ним Spherize. Получится что-то вроде:

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

Потом можно бросить на глобус подобие координатной сетки (как делать сетку в общем – читайте тут, заодно узнаете, как избавляться от артефактов жипега:-) )

У меня получилось два варианта:


Посмотрим, что получится у вас:-)

З.Ы.: Следующим уроком – 3d-max!

————————————-


Хостинг изображений – radikal.ru

Э-эх, разрушают мне моск возможности 3d

веб-дизайнер, January 3, 2009

Я бы очень хотел себе такую кружку. Сам бы пил с удовольствием, али подарил бы знакомому архитектору.
—————————————————–

Хостинг изображений – radikal.ru

Веб-гламур – за, или против?

веб-дизайнер, December 31, 2008

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

Для начала, хотелось бы заметить, что под “гламуром” пользователями понимается что-то вроде Одной Кнопки, РуБёрнера и подобных (да-да, в основном дизайнером эти проектов является Миша Квакин, он же и первопроходчик и основоположник данного стиля оформления в рунете). “Гламурными” чаще всего называют сайты, содержащие простую (simple) графику значительных размеров, чаще всего отрисованную в 3d со стилизацией под глянцевый пластик, стекло, etc.

Однако, если мы обратим взор сюда, то в списке выдачи не увидим ничего и близко похожего. Тут у нас держатся китч (яркое коллажирование со смнешением различных стилистик), гранж (пятна, куски надписей, хаотичное нагромождение линий) и информационный дизайн, который меня, почему-то, очень подмывает назвать “хабрадизайном”. Нарочито простых (“просторных”, “свободных”) сайтов не создает практически никто. Использование 3d не идет дальше псевдо-3-дэ, исполненного в фотошопе.

Вот так вот я сидел и думал, и запутывался все больше и больше. Очень бы хотелось узнать мнение читателей (vox populi) о том, какие сайты им нравятся, какие нет; какие тенденции устраивают, а какие – раздражают.
—————————————————–

Хостинг изображений – Radikal.RUradikal.ru

С праздничком, дорогие мои:-)

веб-дизайнер, December 26, 2008

—————————————————–

Хостинг изображений – radikal.ru

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: