html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Как создать стилизованный городской пейзаж используя Trimble SketchUp и Adobe Illustrator

Цель Урока


Вы можете скачать исходный векторный файл к данному уроку



Известно,  что среди всех векторных редакторов Adobe Illustrator обладает самыми развитыми  средствами трехмерного моделирования, но иногда даже их бывает недостаточно.  Часто, чтобы создать сложный трехмерный объект, или правильно расположить  несколько объектов в перспективе, необходимо иметь референсное изображение. А  использование традиционных редакторов трехмерной графики может быть  неоправданно сложным. Однако существует редактор, позволяющий даже новичкам  буквально за считанные минуты создавать трехмерные объекты любой сложности и с  легкостью конвертировать их в векторный формат.

Речь идет  о Trimble SketchUp,  который до недавнего времени принадлежал компании Google, но теперь сменил  владельца. Почему именно SketchUp, а не любой другой редактор трехмерной  графики? На это есть ряд причин. Во первых SketchUp интуитивно понятный и самый  простой для изучения редактор трехмерной графики, для начала работы с ним  достаточно просмотреть несколько коротких обучающих видео. Во вторых, как  следует из названия, в нем отсутствует фотореалистичный рендер, а графика  представлена в стиле иллюстрации, что очень упрощает процесс векторизации. Ну и  в третьих, самая замечательная особенность в том, что профессиональная версия  пакета обладает возможностью экспорта трехмерных сцен непосредственно в  векторный формат PDF или EPS, без растеризации.

Заинтригованы?  Давайте познакомимся с ним поближе.

Шаг 1

Как я уже говорил, SketchUp представлен в двух версиях - базовой и  профессиональной. А так как базовая версия является бесплатной, и практически  не уступает по функционалу профессиональной, то давайте начнем с нее. Перейдите на страницу загрузки,  выберите нужный язык из двенадцати доступных, и нажмите на Download SketchUp.

После  инсталляции программы посмотрите несколько коротких обучающих видеороликов, они  предназначены для "быстрого старта” в SketchUp.

Так же Вы  можете посетить страницу, на которой представлен полный  видеокурс по работе с редактором SketchUp.

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

Итак,  запустим SketchUp, в появившемся окне перейдем на вкладку Template, выберем  шаблон Engineering и удобную систему исчисления - метры или футы, и нажмем на  Start using SketchUp.

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

Шаг 2

Для  начала создадим прямоугольное основание или платформу для будущего города.

Теперь включаем  воображение на 100%, и начинаем строить небоскребы! Нам понадобится четыре  здания которые должны отличаться по форме и высоте. Так как по мере удаления  небоскребы должны становиться выше, то начнем с самого дальнего. У меня вышла  вот такая футуристическая башня.

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

Шаг 3

Для следующего  здания, я выбрал более простую конструкцию, и расположил его слева от первого.

К этому  моменту сцена должна выглядеть следующим образом.

На  переднем плане создадим самое низкое здание, оно не должно мешать обзору  зданий, находящихся сзади. И для удобства работы поместим каждый небоскреб в  отдельную группу.

Шаг 4

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

По тому  же принципу раскрашиваем восьмиугольную башню.

Со  следующим строением еще проще - серый и светло-голубой.

Теперь  цветовая схема для здания на переднем плане.

Шаг 5

Ну что ж,  к этому моменту основная работа в SketchUp проделана, давайте посмотрим, что у  нас получилось.

Сейчас наша сцена освещена равномерно и ей очень не хватает  свето-тени, а так как SketchUp может имитировать солнечное освещение, давайте  его включим в пункте меню View > Shadows.

Посмотрите  насколько реалистичней стала выглядеть картинка.

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

Шаг 6

Отличительной  особенностью SketchUp является то, что вся рабочая область есть как бы "видом  из камеры”. На практике это значит, что при экспорте мы получим именно то, что  видим на экране. Поэтому для удобства позиционирования развернем окно на весь  экран и спрячем все лишние панели инструментов.

Теперь расположим и масштабируем сцену так, чтоб все элементы были  видимы, а пустого пространства при этом оставалось как можно меньше. И перейдем  в пункт меню File > Export > 2D Graphic...

Как  видно, для выбора доступны всего четыре растровых формата. Это ограничение  базовой версии SketchUp.

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

И  используя технику отрисовки по референсу, создать в  Adobe Illustrator замечательную векторную иллюстрацию.

Шаг 7

Теперь  нам потребуется профессиональная версия программы. Перейдем на страницу  загрузки и скачаем SketchUp Pro.

Мы можем  использовать все его возможности бесплатно в течении восьми часов. Поэтому не  будем терять время, откроем файл с нашей сценой и сразу перейдем в пункт меню  File > Export > 2D Graphic...

Как видно из скриншота список поддерживаемых форматов для экспорта  значительно расширился. Но нас интересуют только векторные форматы, так что  выберем EPS и нажмем Export. Теперь откроем получившийся EPS файл в Adobe  Illustrator.

Итак, мы имеем легко редактируемый, на 100% векторный документ. Из  недостатков можно отметить открытые пути и отсутствие теней от солнечного  света. Также градиенты на криволинейных поверхностях преобразовались в набор  полигонов с однородной заливкой.

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

Шаг 8

Итак, для  начала выделим все открытые пути. Быстро это можно сделать с помощью  бесплатного плагина Select Menu. Для этого скачаем его и распакуем  в папку Program Files Dir\Adobe\Adobe Illustrator CSx.x\Plug-ins\. Затем  выберем пункт меню Select > Object > Open Paths.

Сгруппируем  их (Ctrl+G), и в панели Layers уберем видимость группы. Временно эта группа нам  не понадобится, но позже мы к ней вернемся.

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

Шаг 9

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

Либо воспользуемся инструментом Shape Builder Tool (Shift+M).

Затем с  помощью инструмента Lasso Tool (Q) выделим точки на смежных контурах, которые  требуется сгладить, и преобразуем их в гладкие опорные точки.

Проделаем  эту операцию со всеми объектами, требующими сглаживания.

Шаг 10

Не выходя из режима изоляции, объединим одноцветные формы в  составной путь, сделать это быстро поможет пункт меню Select > Same >  Fill & Stroke. И применим к составному пути линейный градиент от  светло-голубого к темно-синему.

Как получить правильные цвета для градиентов в  Adobe Illustrator можно узнать, прочитав этот урок.

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

Шаг 11

Теперь выйдем из режима изоляции и включим видимость скрытой группы.  Группа эта целиком состоит из открытых путей с обводкой и без заливки,  некоторые из которых беспорядочным образом объединены в составные пути. Поэтому с  помощью плагина Select Menu выделим их  Select > Object > Compound Path и разберем Object > Compound Path > Release (Alt+Shift+Ctrl+8).

С помощью Selection Tool (V) выделим пути, отмеченные на скриншоте  красным, а остальные сгруппируем и скроем.

Изменим  толщину обводки на 5 px, а цвет на белый, и сгруппируем со зданием.

Шаг 12

Повторяя шаги с 9 по 11, приведём соседний небоскреб к виду как на  рисунке ниже.

Теперь восьмиугольную башню справа.

А так же небоскреб на заднем плане.

Шаг 13

В этом  шаге займемся платформой для города. Применим линейные градиенты в качестве  заливки для трех имеющихся поверхностей.

Создадим форму, как на скриншоте ниже, и к ней так же применим  линейный градиент.

Теперь  два небольших объекта внизу платформы.

Еще два  объекта по бокам платформы.

И в  завершении работы дублируем плоскость (Ctrl+C, Ctrl+V), применим к заливке  линейный градиент от белого к черному и поменяем режим наложения с Normal на  Screen.

Шаг 14

Как мы помним, SketchUp Pro экспортировал трехмерную сцену в EPS  файл без теней от солнечного света, хотя тени делали картинку намного  привлекательней и реалистичней. Давайте их восстановим. Откроем снова нашу  сцену в SketchUp, и перейдем в пункт меню File > Export > 2D Graphic... Выберем  растровый формат, например JPG, и выставим параметры соответствующие  изображению.

Теперь  создадим в Adobe Illustrator новый слой, и с помошью меню File > Place  поместим в него растровое изображение, которое расположим точно под векторным.

Уберем  видимость векторного слоя, а в настройках слоя с растровым изображением включим  опцию Template. С помощью Pen Tool (P) обрисуем контуры тени.

Применим  к каждому контуру градиентную заливку от черного к серому, режим наложения Multiply,  непрозрачность  50%, а  обводку  снимем.

Вот что  получилось в итоге.

Шаг 15

Если  выделить все элементы (Ctrl+A) и открыть панель Transform, мы увидим, что наша  иллюстрация имеет гигантский размер - более 5000 px по большей стороне.

До этого  момента работать с таким размером было удобно, но теперь он стал излишним.  Поэтому с помощью Artboard Tool (Shift+O) изменим размер рабочей области  примерно до 940 x 940 px, а иллюстрацию масштабируем как показано на скриншоте.

Уберем  видимость группы с небоскребами и платформой, а под ней разместим квадратную  форму с линейным градиентом по размеру рабочей области.

Шаг 16

Выберем  инструмент Rectangular Grid Tool и в свободной области нарисуем сетку примерно  как на скриншоте внизу.

Оставив  сетку выделенной, изменим толщину обводку на 4 px, и перейдем в пункт меню  Effect > 3D > Rotate... В диалоговом окне выставим следующие параметры.

Затем применим команду Object > Expand Appearance.  В образовавшейся группе удалим Clipping Path, а к остальной группе применим  команду Unite из панели Pathfinder. Получившийся составной путь  зальем линейным  градиентом, и разместим согласно рисунку ниже.

Шаг 17

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

Применим  к этой форме фильтр Gaussian Blur с радиусом 125 px. Если после применения  фильтра у Вас появились артефакты, посетите эту страницу, где Вы найдете решение проблемы.

И в  завершении работы применим к группе с платформой и небоскребами фильтр Outer  Glow. Параметры Вы можете видеть на рисунке ниже.

Заключение


Вы можете скачать исходный векторный файл к данному уроку



В этом уроке мы создали иллюстрацию стилизованного города, пройдя  путь от трехмерного моделирования в SketchUp до финальной обработки и  стилизации в Adobe Illustrator. Каким может быть применение данного метода?  Абсолютно любые задачи, для решения которых штатных средств моделирования в  Adobe Illustrator не хватает. Ведь SketchUp позволяет быстро создавать  абсолютно любые объекты. И кроме того, существует возможность импортировать в  свой проект тысячи бесплатных моделей с сайта поддерживаемого сообществом  пользователей - 3Dwarehouse.
Следите за новыми уроками на RU.VectorBoom.com и  любая задача будет Вам по плечу!

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с vectorboom.com

3

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sasa1975sasa
          • окна
          • blur
          • google
          • небоскреб
          • языки
          • башня
          • иллюстрации
          • графика
          • adobe illustrator
          • домен ru.vectorboom.com
          • домен vectorboom.com

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции