Как создать свой 3d куб

3D куб со сторонами из фотографий в Photoshop

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

Для создания куба я использовал фотографии из этого набора.

Для начала, нам придётся подготовить фотографии — форма фото, как правило, прямоугольная, необходимо сделать из них квадраты. Эту работу элементарно выполнить с помощью инструмента «Рамка» (Crop Tool), подробнее здесь.

Урок подходит для версии Photoshop CS6 и выше

В начале мы создадим сам куб, а потом наложим на его плоскости фотографии.

Вот что получилось у меня в итоге:

Давайте начнём. Создаём в Photoshop новый документ размером 640 на 640 пикселей на белом фоне. Идём по вкладке главного меню 3D —> Новая сетка из слоя —> Набор сетки —> Куб (3D —> New Mesh From Layer —> Mesh Preset —> Cube):

Photoshop откроет окно, где предложит Вам переключиться на 3D-рабочую среду, переключаем. Если такого окна не появляется, то переключаем вручную с помощью выпадающего меню в верхнем правом углу, подробнее об управлении рабочими средами Photoshop здесь.

Документ примет следующий вид, это куб, точно повёрнутый к нам одной своей плоскостью:

Нам надо его несколько развернуть. На панели инструментов, расположенной слева, выбираем инструмент «Перемещение» (Move Tool), или для выбора нажмите клавишу V. На панели параметров, справа от центра, появятся инструменты позиционирования. Берём инструмент поворота и разворачиваем куб, чтобы было видно, что это 3D куб:

Куб у нас есть. В панели 3D нажимаем на расположенную вверху кнопку «Фильтр по материалам», затем на вкладку «Материал_спереди» (Front_Material), затем в панели свойств нажимаем на кнопку, расположенную справа от «Рассеивание» (Diffuse):

Открывается меню, где выбираем «Заменить текстуру» (Replace Texture):

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

Окно автоматически закроется, а на передней стороне куба сразу отобразится это изображение:

Снова переходим на панель 3D и на это раз кликаем по вкладке «Материал_слева» (Left_Material), далее на панели свойств так же кликаем по кнопке, расположенной справа от «Рассеивание» и выбираем следующую фотку. Фото добавится на левую грань.

Сделайте то же с верхней гранью (Материал_сверху или Top_Material). Результат:

Теперь необходимо создать фон. Переходим на панель слоёв, под 3D слоем создаём новый слой, заливаем белым цветом и добавляем к слою стиль «Наложение градиента«:

Осталось отрегулировать освещение. В панели слоёв кликните по 3D-слою, перейдите в панель 3D, вверху панели кликните по кнопке фильтра «Освежение». Возьмите инструмент «Перемещение», в документе появится регулировка положения света, выставьте нужное положение и добавьте сглаживание тени в панели свойств:

Теперь надо визуализировать изображение (сделать рендеринг), для чего нажмите комбинацию клавиш Ctrl+Alt+Shift+R.

Вот так выглядит процесс выполнения рендаринга:

После чего сохраняем готовую фотографию, либо Файл —> Сохранить как, либо сохранить для web.

Готовый результат Вы может посмотреть вверху страницы.

Источник

3D-куб

Мне давно хотелось разобраться с 3D фигурами в Css и сделать вращающийся куб. Спеки прочитаны, можно приступать (почитать про трансформы и про анимации).

Вот что у меня получилось:

1. Создаем основу будущего куба:

Один родительский контейнер и 6 граней. Последовательность определяется близостью стенки к зрителю: задняя стенка позади всех остальных, передняя — перед всеми.

2. Задаем размеры и рамки, чтобы видеть что где:

3. Начинаем двигать стены. Все грани надо отодвинуть от центра на половину длины грани и повернуть на угол, соответствующий положению грани в пространстве. Начнем с задней стенки:

transform: translateZ(-5em); — сдвигаем стенку в глубину.

И ничего не происходит, потому что у сцены не задана перспектива. Добавляем:

Первая строчка — глубина перспективы. Второе свойство определяет с какой точки мы смотрим на объект. Я задала вид на объект немного сверху ( -5em ).

Чтобы контейнер не слипался, нужно добавить ему поддержку 3D:

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

Чтобы видеть как двигаются стенки, удобно каждой из них задать свой фон. Ещё я добавила стенкам opacity: .7; , чтобы сделать кубик полупрозрачным.

4. Теперь установим боковые стенки. Чтобы видеть получающуюся фигуру в объеме, добавим ей анимацию:

Чтобы поставить стенки на место, сначала подвинем их на половину ширины куба по оси X:

А затем повернём на 90 градусов вокруг вертикальной оси. Вот весь код для левой стенки:

Правая двигается аналогично, но в противоположную сторону по оси X.

5. Позиционируем верх и низ. Для этого их нужно подвинуть по вертикальной оси на половину ширины куба:

И повернуть на 90 градусов вокруг горизонтальной.

Нижняя делается так же, но сдвигается в другую сторону по оси Y.

6. Последним шагом ставим на место переднюю стенку. Её достаточно просто сдвинуть вперед:

Также чтобы подчеркнуть грани добавила белые рамки. Вот что получилось в итоге:

На гранях может быть что угодно, например, картинки и декоративные элементы:

Источник

УРОК 7. Как нарисовать куб 3D? Продвинутый уровень

Доброго времени суток, читатель блога «Научиться рисовать за 30 дней!»

Подпишись в сообщество вконтакте, чтобы получать свежие уроки!

Я хочу, чтобы этот урок мы построили на ключевых навыках рисования кубов. Я хочу, чтобы вы имели полный контроль над рисованием куба и умели манипулировать и переносить ее на другие продвинутые формы. Вы скоро поймете, что способность нарисовать куб, поможет вам нарисовать дом, дерево, каньон и даже человеческое лицо. «Как можно трансформировать куб в дерево или лицо?» — спросите вы. Я отвечу вам…позже, а сначала…

1. Используйте опорные точки (как вы делали и в предыдущих уроках, да?), и нарисуйте квадрат в перспективе (трапецию).

2. Аккуратно нарисуйте боковые ребра, а среднее немного длиннее (рисуйте легкими линиями, практически не нажимая на карандаш, так как мы делаем только набросок).

3. Нарисуйте нижнюю часть куба с помощью уже нарисованных линий. Для обзора, продлите линии в направлении СВ и СЗ.

4. Укажите очень важную опорную точку под средним углом. Эта точка определяет второе прямоугольное основание. Если точка будет расположена слишком низко, то этот слой будет искажать и искривлять рисунок.

Десять бесплатных видео-уроков от школы рисования Kalacheva School доступны сразу после регистрации.

По промокоду REFPART — скидка 10% на все курсы с проверкой преподавателя до конца 2021 года!

5. Используя уже нарисованные линии как образец, нарисуйте края второго слоя в направлениях СВ и СЗ. Когда я рисую, я постоянно перевожу свой взгляд на первый «основной» куб и добавляю новые линии.

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

6. Посмотрите на ваш СВ угол на верхнем прямоугольнике вашей коробки. Теперь посмотрите на все СВ направляющие стрелки, которые вы нарисовали в шаге 3.

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

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

7. Завершите нижний этаж здания. Дважды проверьте нижние линии, сверим их со стрелками компаса в направлении СЗ и СВ.

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

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

9. Округлите верх проемов на верхнем этаже здания.

10. Чтобы создать иллюзию действительного существования этих дверей в 3D, мы должны добавить им толщины.

Давайте рассмотрим простое правило толщины: Если дверь справа – толщина справа. Если дверь слева – толщина слева. Запомните это правило, повторяйте и практикуйте его. Это правило актуально всегда – для любой двери, окна, отверстия или въезда, для любого объекта, который вы рисуете. Знание этого правила, выведет вас из многих затруднительных ситуаций в сложных изображениях.

Для начала, давайте начнем применение этого важного правила с двери справа. На какой стороне должна быть толщина, если дверь справа? Да, правильно, тоже справа. Используя направляющую линии компаса в направлении СЗ, нарисуйте нижнюю толщину на правой стороне дверного проема.

11. Завершите дверь, следуя вдоль внешней линии дверного проема, изгибая ее вверху.

12. Посмотрите на дверь слева. Используя направляющую линии компаса в направлении СВ, как вы рисовали ранее, нарисуйте толщину слева от входа.

13. Сотрите направляющие внизу каждой двери. Умело используя направления СЗ и СВ, вы можете легко создавать визуальные иллюзии коридора или комнаты внутри каждого дверного проема. Обратите внимание, что эти линии нарисованы немного выше, чем нижний край двери. Этим создается больше пространства.

14. Теперь, вы можете подрисовать скаты для быстрого входа-выхода или трамплины для катания на скейтборде.

Это отличный пример того, что трехмерный рисунок является волшебным навыком художника. Вы развиваете навыки для создания зданий, городов, лесов или целых миров на пустом двумерном листе бумаги. Один карандаш, один кусок бумаги, ваши фантазии и умения, которым я обучу вас здесь и у вас есть все ингредиенты для создания собственного мира. Не плохой способ потратить 30 минут дня, верно?

Укажите две опорные точки на каждой стороне здания.

15. Давайте начнем создавать спуск на левой стороне для начала. Нарисуйте вертикальный задний край трапа на стене, и продлите его за нижний край этажа по направлению ЮЗ.

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

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

16. Завершите ближний край трамплина (прошу прощение за такое качество).

17. Нарисуйте ширину спуска двумя линиями в направлении СЗ, соответствующие углы и линии в этом направлении вы рисовали ранее.

18. Завершите дальний край спуска путем сопоставления с углом переднего края (еще один хороший пример для параллельных линий).

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

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

19. Сотрите направляющие линии, выходящие за пределы трамплина. Используя уже нарисованные линии в направлении СВ как образец (постоянно сравнивайте те линии с новыми, чтобы правильно выстроить углы), нарисуйте трамплин на правой стороне здания. Помните: остерегайтесь перекоса нижней линии. Не опускайте ее!

20. Завершите свое здание, проведя линию горизонта над ним, определите позицию светового источника, и заштрихуйте поверхность на противоположных сторонах от него. Используйте направляющие линии, чтобы правильно нанести падающую тень точно в направлении ЮЗ, это действительно просто, когда вы рисуете здание. Просто продлите нижнюю линию. Сотрите все лишние линии или пятна, и вуаля, вы уже выполнили первую архитектурную визуализацию. Поздравляю! Отличная работа!

УРОК 7: ПРАКТИЧЕСКОЕ ЗАДАНИЕ

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

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

У вас достаточно знаний и навыков теперь, чтобы обойтись без моих подсказок и разбить его на этапы. Будьте терпеливы, не спешите и НАСЛАЖДАЙТЕСЬ!

Поделиться своими работами можно в сообществе вконтакте в этом альбоме!

В следующем уроке мы отвлечемся от этих скучных фигур и нарисуем…коалу!

Идеи для рисования на каждый день 🎨

Источник

Оцените статью
Юридический портал
Adblock
detector