Как в фотошопе нарисовать дом: Рисуем домик в Фотошоп / Creativo.one

Рисуем домик в Фотошоп / Creativo.one

В этом уроке Вы узнаете, как создать иконку в виде дома.
Вот так будет выглядеть иконка в конце этого урока:

Шаг 1. Создайте документ размером 512 х512 пикселов. Заполните фоновый слой серым цветом (#A6A6A6) или любым другим – этот цвет мы в процессе урока поменяем.

Шаг 2. Активизируйте инструмент Перо (Pen Tool (P) и нарисуйте фигуру, как показано ниже:

К фигуре добавьте стиль слоя Наложение градиента (Gradient Overlay) для того, чтобы изменить цвет.

Также слою с фигурой добавьте стиль слоя Внутренняя тень (Inner Shadow) для придания глубины:

Шаг 3.

Инструментом Перо (Pen Tool (P) нарисуйте другую фигуру – лицевую сторону дома:

К слою с лицевой частью дома также добавьте стиль слоя Наложение градиента (Gradient Overlay):

Добавьте стиль слоя Внутренняя тень (Inner Shadow):

Шаг 4. К домику нужно добавить некоторые детали – начнем с боковых панелей. Создайте новый слой и удерживая нажатой клавишу <Ctrl>, кликните левой кнопкой мыши по миниатюре слоя боковой стены, чтобы загрузить ее выделение.

Подвиньте выделение на 10 пикселов вверх и заполните его черным цветом (#000000). Не снимая выделения, один раз нажмите на клавиатуре клавишу курсора вверх и нажмите <Delete>. Останется полоска размером 1 пиксел. Таким же способом создайте еще около 20 линий.

Теперь к слоям с линиями добавьте стиль слоя Тень (Drop Shadow), чтобы создать эффект панелей.

Измените режим наложения для слоев с панелями на

Перекрытие(Overlay),  и снизьте непрозрачность до 80%.

Используя тот же прием, создайте панели и на центральной части дома.

Шаг  5. Переходим к созданию крыши – нарисуем ее при помощи инструмента Перо (Pen Tool).

Для того, чтобы придать крыше коричневато-красный цвет, воспользуйтесь стилем слоя Наложение градиента (Gradient Overlay):

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

Тень и Внутреннее свечение (Shadow /Inner Glow layer style):

Теперь под крышу нужно добавить основу. Создайте новый слой и поместите его под слой с крышей. Загрузите выделение для слоя с крышей, переместите выделение на 1 пиксел вниз и заполните его черным цветом (#000000). Не снимая выделения переместите его на 1 пиксел вниз и снова залейте его черным цветом. Повторите это 3 раза, пока не получите основу под крышей толщиной в 5 пикселов.

При помощи стиля слоя Наложение градиента (Gradient Overlay), добавьте основе под крышей темных оттенков для реалистичного освещения.

Таким же способом нарисуйте еще одну основу под крышей.

Шаг  6. Теперь нужно добавить падающую тень от крыши на стены дома. Для этого, создайте новый слой и создайте выделение, как показано на рисунке,  любым удобным для Вас инструментом выделения (я для выделения использую инструмент

Прямолинейное лассо (Polygonal Lasso Tool)).

На новом слое заполните выделение коричневым цветом (#9C8151). Не снимая выделения, опустите его вниз на 15 пикселов и нажмите клавишу <Delete>. Снимите выделение и примените фильтр Размытие по Гауссу (Filter > Blur > Gaussian Blur), радиус размытия  5.0px. Снизьте непрозрачность для этого слоя до 50%, переместите его вверх и удалите часть тени, которая выходит  за пределы стены (выделить можно Прямолинейным лассо (Polygonal Lasso Tool)), и удалите.

Шаг  7. На левой стене дома нарисуйте окно либо инструментом Перо (Pen Tool ), либо инструментом Прямоугольник (Rectangle Tool (U)). Если окно рисуете инструментом Прямоугольник, затем можно к нему применить  Свободное трансформирование (Free Transform) для того, чтобы изменить форму окна.

Сделаем окно голубого цвета при помощи стиля слоя Наложение градиента (Gradient Overlay):

Глубину окну добавьте стилями слоя Внутренняя тень (Inner Shadow) и Внутреннее свечение

  (Inner Glow):

Для того, чтобы окно смотрелось интереснее, создадим на нем отражение: нарисуйте форму отражения и заполните ее градиентом (Gradient Tool (G)) от белого к прозрачному.

Загрузите выделение для слоя с окном и создайте новый слой. Заполните выделение коричневым цветом (#C2AE89). Переместите выделение вверх и вправо и нажмите <Delete> для того, чтобы получить желаемую глубину.

Создайте копию окна и отразите ее по горизонтали: Редактирование – Трансформирование – Отразить по горизонтали (Edit > Transform > Flip Horizontal). Уменьшите копию окна инструментом Свободное трансформирование (Free Transform) и поместите в верхней части центральной стены дома:

Шаг  8. Инструментом Перо (Pen Tool ) нарисуйте дверь.

Измените цвет двери на коричневый стилем слоя

Наложение градиента (Gradient Overlay):

Для того, чтобы сделать акцент на краях и добавить глубины двери, добавьте к ней стиль слоя Обводка (Stroke):

Добавьте объем при помощи стиля Внутренняя тень  (Inner Shadow):

Добавьте к двери полосу размером 7 пикселов для того, чтобы она выглядела встроенной в стену:

Шаг 9. Для дверной ручки нарисуйте круг инструментом Эллипс (Ellipse Tool (U)). Для создания пропорционального круга при рисовании удерживайте нажатой клавишу <Shift>.

Окрасьте дверную ручку в золотой цвет, добавив к ней стиль слоя Наложение градиента (Gradient Overlay):

Для придания ручке глубины добавьте стиль слоя Тень (Drop Shadow):

Шаг 10. Для рисования порога используйте  инструменты Перо или Прямоугольник (Pen Tool /Rectangle Tool).

Добавьте к порогу стили слоя Наложение градиента

(Gradient Overlay)  и Внутренняя тень ( Inner Shadow).

Нарисуйте основу под порог и залейте ее коричневым цветом (#78350B).

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

Опустите выделение на 3 пиксела вниз и заполните его черным цветом (#000000). Не снимая выделения, сдвиньте его на 4 пиксела вверх и удалите.

Примените к основе под домом фильтр Размытие по Гауссу (Filter > Blur > Gaussian Blur) с радиусом размытия 1.5px. Снизьте непрозрачность до 10%.

Надеюсь, урок Вам понравился!
Желаю удачи!

Автор урока: Asher Abbasi
Перевод: Луговских Татьяна
Ссылка на источник урока

Источник: www. designinstruct.com

Создаём странный сюрреалистический дом в Фотошопе

Шаг 4: Создание моря

На этом этапе мы будем добавлять к коллажу море. Для начала, давайте откроем файл «Sea.jpg» из набора, который Вы можете скачать в первой части статьи. Далее активируем инструмент «Прямоугольная область» (Rectangular Marquee Tool) и создадим выделение, как показано на изображении ниже:

Далее, активируйте инструмент «Перемещение» (Move) и перетащите выделенную область на основной холст. Поместите этот слой ниже слоя «dock» и назовите его «sea». Верхнюю кромку слоя пристыкуйте к нижней кромке слоя «sky 1» и расположите его на холсте так, как показано на рисунке ниже:

Теперь давайте немного украсим горизонт нашего изображения. Для начала, создадим новый слой. Нажмите комбинацию Ctrl+Shift+N), в появившемся окне введите название слоя «brighten horizon».

Далее, активируйте инструмент «Кисть» (Brush Tool). Убедитесь, активным набором является набор кистей по умолчанию.

Выберите стандартную круглую кисть и введите следующие параметры:

Размер (Brush size): 1000px
Жёсткость (Hardness): 0%
Непрозрачность (Opacity): 15%
Нажим (Flow): 100%
Цвет полностью белый, #FFFFFF

Теперь, давайте начнем рисовать. Сделайте кистью горизонтальный мазок вдоль всего холста, как показано на рисунке:

Придадим немного мрачных тонов переднему плану. Создайте новый слой и назовите его «darken foreground». Проследите затем, что бы он был выше остальных слоёв.
Введите значения в инструмент кисть:

Размер (Brush size): 1400px
Жёсткость (Hardness): 0%
Непрозрачность (Opacity): 15%
Нажим (Flow): 100%
Цвет полностью чёрный, #000000

Сделайте мазок, подобный предыдущему, но в самом низу холста:

Ваш результат должен быть похож на этот:

Шаг 5: Создание каменного дома и его отражения

В этом шаге мы добавим в коллаж каменный дом, находящийся на краю пристани.
Для начала, давайте откроем файл «Rock.jpg» из набора исходных фото, затем, активируйте инструмент «Магнитное лассо» (Magnetic Lasso Tool) и создайте выделенную область выделения вокруг скалы:

После того, как выделение закончено, возьмите инструмент «Перемещение» и перетащите эту область на наш основной документ область. Расположите этот слой поверх всех созданных нами слоёв и назовите его «giant stone»:

После переименована позиционируйте скалу, как показано на рисунке ниже. Ещё один нюанс. Основание скалы у меня получилось неровным, а нам требуется плоское основание будущего дома. Поэтому возьмите инструмент «Прямоугольное выделение», создайте область у основания скалы и нажмите клавишу Delete. Неровности отсекутся:

Далее, мы затемним скалу, чтобы она лучше гармонировала с окружающим фоном. Создадим ещё один новый слой и назовём его «darken stone». Создать обтравочную маску (правый клик мышкой по слою, выбор пункта меню «Создать обтравочную маску», в англ. Create clipping mask) для этого слоя для того, что бы тонировка легла только на пиклели слоя «darken stone».

Возьмите инструмент «Кисть» и задайте ему следующие настройки:

Размер (Brush size): 1400px
Жёсткость (Hardness): 0%
Непрозрачность (Opacity): 15%
Нажим (Flow): 100%
Цвет полностью чёрный, #000000

Перемещайте кисть вверх, затем вниз, пока Вы не затемните весть камень:

Теперь скала должна выглядеть примерно так:

Теперь создадим отражение будущего каменного дома, для этого встаньте на слой со скалой «giant stone» продублируйте его, нажав Ctrl+J. Затем перетащите этот полученный слой вниз и поместите его ниже слоя «giant stone», см. изображение ниже:

После этого активируйте инструмент «Трансформация»(Ctrl+T), затем щелкните правой кнопкой мыши по холсту для вызова контекстного меню, где выберите строчку «Отразить по вертикали» (Flip Vertical):

После отражения наш документ примет такой вид:

Теперь возьмите инструмент «Перемещение» (Move) и перетащите дубликат слоя вниз, что бы он занял положение, как показано на рисунке ниже:

Теперь, когда будущему отражению скалы задано нужное положение, давайте сделаем его похожим собственно на отражение. Для этого, сначала убедитесь, что Вы стоите на слое-дубликате скалы, затем перейдите в меню Фильтр —> Размытие —> Размытие в движении (Filter —> Blur —> Motion Blur). В диалоговое окно фильтра введите следующие параметры: Угол (Angle) — 0, Смещение (Distance) — 50 пикс:

Результат:

Как правильно рисовать пиктограмму. Рисуем иконку в фотошоп

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

Чтобы ребенок сидел за столом и кропотливо что-то делал, требуется предварительная подготовка, независимо от возраста дошкольника. Родителям потребуется:

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

После рисования нужно совместно убрать все предметы со стола.

Как нарисовать домик с ребенком 2-3 лет

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

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

Итак, как нарисовать дом со своим малышом:

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

Поэтапная инструкция рисунка дома для детей 3-5 лет

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

Для детей старше 4 лет объясняют, как нарисовать объемный деревянный дом. Поэтапная инструкция представлена ниже:

Дошкольники в возрасте 4-5 лет охотно дополняют домик элементами. Изображают трубу, дым, ступеньки, тропинку, цветы и деревья. Следует хвалить ребенка за проявленную инициативу. Советоваться с ним по поводу выполненных элементов, рекомендовать добавить что-то, например, солнце, радугу, людей или животных. Желательно, раскрасить получившуюся картину цветными карандашами, гелевыми ручками или красками.

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

Сложный домик для детей старше 6 лет.

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

Последовательность рисунка:

При желании дом дополняют ступенями, делают ставни на окнах, добавляют окружающий пейзаж. Раскрашивают цветными карандашами или красками.

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

Дополняют пейзаж вокруг избушки высокими елями, при желании изображают летящую Бабу-Ягу.

Для девочек интересны варианты домиков с множеством мелких деталей. Они могут прорисовывать мебель, обои, предметы интерьера. Это может быть многоэтажный дом в разрезе с большим количеством комнат. Если изобразить его на плотном листе формата А3, то можно использовать в последствие для игры.

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

Вот что мы должны получить:

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

Шаг 1 — Новый файл / Техника Пера
Откройте Photoshop и создайте новый документ (Ctrl + N). Используйте следующие настройки:
Разрешение: 72dpi
Цветовой режим: RGB цвет
Размеры: 600 × 600 пикселей

Создайте следующую фигуру с помощью инструмента Pen Tool (P) (Перо). Цвет: # 3da1e2

Шаг 2 — Создание фигур с помощью Пера
Нарисуйте заднюю часть папки с помощью Pen Tool (Пера), используя ту же технику рисования. Затем нарисуйте полосу, как показано на рисунке.
Цвет: # 003658 # 3da1e2 # 08517e

Шаг 3 — Закончим форму
Как только Вы закончили рисунок папки, нужно добавить лист бумаги и стрелку, как показано на рисунке. Теперь у вас должны быть 5 слоев. Каждая форма будет на отдельном слое. Назовите каждый слой.
Цвет: # ffffff # 32e732

Шаг 4 — Добавление цветовых эффектов
Добавьте следующие стили слоя к передней части папки. Понизьте непрозрачность до 90%.

Добавить следующие стили слоя для бумаги. Понизьте непрозрачность слоя примерно до 90-95%.

Добавьте следующие стили слоя для полосы.

Добавьте следующие стили слоя к задней части папки.

Добавьте следующие стили слоя для стрелки.

Теперь ваша иконка выглядит так.

Шаг 5 — Добавление Рефлексов
Добавить новую группу под названием «Рефлексы». Используйте Pen Tool (Перо), чтобы нарисовать отражение, как показано на рисунке. Убедитесь, что вы рисуете только контур, а не фигуру. После того как вы закрыли путь, щелкните правой кнопкой мыши по рабочей области и выберите make selection (Создать выделение) (растушевка (feather) 0). Возьмите большую кисть (диаметром около 470, твердость 0) и закрасьте правую часть выделения, как на рисунке, для создания белого отражения. Измените режим смешивания на Overlay (Перекрытие) и уменьшить непрозрачность до 63%.

Шаг 6 — Края
Создайте новую группу под названием «Края», создайте новый слой в ней (Ctrl + Shift + N или нажмите значок создания нового слоя). Добавление бликов на краях придает иконке 3D эффект. Используйте Pen Tool (Перо), чтобы создать линии обводки вокруг углов и всех полей папки, бумаги и стрелки. Затем щелкните правой кнопкой мыши по рабочей области и выберите Stroke Path (Выполнить обводку) — Brush (Кисть). Настройки кисти должен быть изменены заранее, master diameter (диаметр) 8 пикселей а hardness (твердость) 0.

Шаг 7 — Тени
Создайте новый слой (Ctrl + Shift + N) для теней и поместить его в новую группу (Ctrl + G). Сделайте выделение, как вы это делали в 5 шаге, для создания отражений. Заполните выделение черным цветом, а затем размойте поля с помощью инструмента Blur tool (Размытие). Если тени выглядят слишком тёмными, снизьте непрозрачность слоя до 40%.

Шаг 8 — Добавление текста
Добавьте текст, используя любой шрифт, который вам нравится. Я выбрал «Agency FB». Размер шрифта: 40, непрозрачность слоя: 75%.

Шаг 9 — Итоговое добавление рефлексов и тени
Добавьте еще несколько рефлексов на бумагу, используя те же методы, что приведены в 5 Шаге.

Добавить тень, используя Ellipse Tool (E) (Эллипс). Нарисуйте эллипс, как показано на рисунке и добавьте немного Filter — Blur — Motion blur (Фильтр — Размытие — Размытие в движении). Уменьшите непрозрачность по своему вкусу.

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

Как нарисовать иконки так, чтобы они были чёткими? April 26th, 2011

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

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

Итак, вот готовая картинка размером 114х114 пикселей.

Вроде выглядит неплохо, но давайте изменим размер на 48х48 пикселей.

Разница особо видна будет если поставить готовую иконку рядом с другими, нарисованными профессионалами. Как можно увеличить резкость? Если увеличим масштаб картинки, то мы увидим, что боковые линии немного размыты. Причина этого в том, что фотошоп — простая бездушная программа, которая изменяет размер картинки математически. Например, граница проходит между двумя пикселями. Мы изменяем размер в двое, Фотошоп делит размеры на два и ставит новую границу в аккурат на половине расстояния. Если это расстояние на два не делится, то граница попадает в межпиксельное пространство. Программа вычисляет «средние» тона и распределяет их между соседними пикселями. На картинке видно, что я имею ввиду:

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

1) размер исходного изображения. В некоторых мануалах даются подробные инструкции по рисованию изображений. Например, для Андроида рекомендуют брать исходный холст размером 864х864 пикселя. Эта рекомендация исходит из того, что итоговая иконка должна быть 72х72, а это как раз ровно в 12 раз меньше, чем исходный холст. Таким образом, если рисовать изображение правильно, то после изменения размера, корректировки будут минимальными

2) рисуем только в Shape! Для этого выбираем фигурку и жмём эту кнопку:

и так получается Vector Mask. Если нужно сделать более сложную пиктограмму, то рисуем Path с помощью «ручки» (Pen Tool), выделяем получившуюся фигуру, делаем клик на правой мышке и выбираем Create Vector Mask

Нужно в итоге получить одну монолитную фигуру (Shape). Посему, если её нельзя выполнить за один подход, то нужно нарисовать несколько path-ов на одном слое , выделить их с помощью Path Selection Tool, которая выделяет всю фигуру целиком,

И объединить всё, выбрав правильный способ (видете 4 иконки слева от кнопки?) и нажав на кнопку Combine.

Если мы всё сделали правильно, то мы должны получить что-то вроде этого:

Почему именно Shape? А всё очень просто. Нам в любом случае нужно будет делать корректировку их размеров, а таким образом это сделать гораздо быстрее. Конечно можно использовать перевести в растр и сделать Ctrl + T (Transform), но в таком случае края вашей фигуры не будут ровными, так как при изменении пропорций фотошоп будет играть с крайними пикселями пропорционально. Как вы помните, вектор не зависит от размеров холста, его пропорции всегда будут одними и теми же.

3) используйте по максимуму только стили наложения (Layer Style). Это удобно тем, что вы можете двигать слой, а его эффекты будут двигаться вместе с ним (тени, градиенты, обрисовка…)

Итак, вернёмся к нашей иконке. Мы удалили всё и нарисовали квадратики и стрелки заново, используя Shape. Далее, мы сжали картинку до 48 пикселей. После чего мы сделали максимальный масштаб 3200%, чтобы был виден каждый пиксель, и вручную подгоняем все края, используютя этот инструмент:

С помощью этого инструмента мы выделяем нужные точки в path-e и двигаем их в нужную сторону, нажимая на «стрелочки» на клавиатуре, пока линия не сольётся с гранью между двумя соседними пикселями. Сравните изображения внизу, как было до корректировки, и стало после:

Встаёт резонный вопрос: а как же быть с круглыми частями? В данном случае, идеала достичь не удастся, но можно хотябы свести к минимуму появление отдельных пикселей. Например, окружность — это круглый path, образованный 4 точками. Так вот нужно хотя бы эти опорные точки разместить на границе пикселей так, что бы направляющие шли как раз по этой границе.

Ну теперь можно сравнить как было до и после в натуральную величину:

Если присмотреться, то разница видна. А если уж загрузить иконку на реальное устройство, то будет видно и подавно! Теперь понимаете, что работа дизайнера — это не так то уж и легко! Нужно не только придумать, но и выполнить работу качественно. Я лично уже запарился размеры подгонять под свои несколько десятков иконок…. Но результат стоит затраченных усилий!

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

Строим дом в технике изометрического пикселя в Adobe Photoshop

В предыдущих частях мы делали изометричного пиксельного героя, но где же ему поселиться? Пришло время построить ему дом!

Вот что вы будете делать

Почти также как и в Лего, строительство — это по большому счету и есть суть изометричного пиксель-арта. На создание таких картинок может уйти достаточно много времени, но оно должно быть проведено с удовольствием!

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

1. Измерения

Шаг 1

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

Вот на чем мы закончили предыдущий урок:

Теперь возьмем персонажа и решим вопрос с высотами.

В новом слое давайте сделаем “стену” из линий 2:1, каждая из которых будет на 4px выше предыдущей (то есть, между двумя линиями должно быть по три пустых пикселя). Если мы будем выбирать высоту объектов в соответствии с этими линиями, то это поможет нам в последующем добавлении текстур (таких как дерево или кирпич), и сделает картинку более эстетически приятной.

Шаг 2

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

Теперь продолжим увеличивать нашу структуру, но не слишком сильно” Если вы не собираетесь делать вид разреза дома, чтобы показать его интерьер, лучше всего сделать здание такого размера, чтобы стало понятно, что это обычный дом. ТАк мы сможем уместить больше элементов в меньшее пространство, что будет полезно для работы над сложными городскими сценами. И кроме того, предпочтительно не рисовать то, что является излишним, и без чего легко можно обойтись. Как в жизни, так и в пискель-арте.

Шаг 3

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

Пока нам нужно увеличить нашу структуру только в одном направлении. Вот она с добавленной длиной слева от двери: 40px от края дверного прохода до нового угла.

Здесь места хватит на одно или два окна. Их мы сделаем чуть позже.

Шаг 4

Теперь давайте выберем участок с этими линиями, нажмем Alt-nudge (или Copy/Paste) и Flip Horizontal (Отразить по горизонтали) и затем разместим их на месте, где располагается правая видимая стена, потом продлим линии до тех пор, пока они не станут длиной в 50px:

Шаг 5

Теперь выберите всю левую видимую стену, а с ней еще 10px от правой видимой стены (итого 60px в ширину), Alt-nudge и Flip Horizontal, а потом помещаем копию к краю, чтобы сделать запланированный L-образный изгиб:

Теперь для полной формы у нас не хватает только задних стен, но их мы рисуем только сверху:

Теперь закроем все формы и зальем их цветом также, как мы делал с кубом в предыдущем уроке. Оставьте маркеры двери, а маркеры потолка — удалите.

Шаг 6

Вы можете открыть Image > Adjustments > Hue/Saturation , посмотреть все многообразие вариантов окраски и выбрать что-то что вам понравится. Если вы хотите делать дом из кирпича, выбирайте какой-нибудь землистый цвет, а если вы будете делать сайдинг или однотонные стены без текстуры, то подойдет любой цвет.

Красным я отметил кое-что, чего мы не встречали раньше: вогнутый угол. Все другие углы на картинке — выпирающие, их мы рисуем более светлым цветом. Но в случае “вогнутых” углов более светлые цвета не имеют смысла, а черная линия 10% или 15% темнее цвета стен:

Кажется, основные формы у нас готовы, но кое-чего важного по-прежнему не не достает. Следующая часть будет более сложной.

2. Углы

Шаг 1

У нашего персонажа до сих пор нет крыши над головой. Время это исправить!

Создаем новый слой и на нем делаем плоскую L-образную форму прямо над верхним краем готовой поверхности. Но новая форма должна быть шире, потому что крыши обычно шире домов. Так вот — между новыми линиями и черными линиями старого слоя должен быть пробел в один пустой пиксель, между новыми линиями и светлыми линиями углов старого слоя должен быть просвет в два пустых пикселя:

Новые линии станут основой нижней части крыши.

Шаг 2

Создаем новый слой и рисуем вертикальные линии из двух указанных на картинке углов формы:

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

Шаг 3

А теперь найдите точку ровно между этими двумя линиями, чтобы добавить третью. вы можете произвести измерения при помощи инструмента selection tool или просто воспользоваться инструментом nudge и считать расстояние по мере того как вы двигаете клонированное выделение при помощи клавиш-стрелок на клавиатуре. (помните: передвижение с nudging при зажатом Shift передвигает выделенный участок на 10px за одно нажатие).

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

Один из них это диагональная линия 1:1 в комбинации с прямой горизонтальной линией, а другой — 1:2 с 1:1.

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

Шаг 4

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

Должно получиться во так:

И эта линия будет смотреться здесь вполне нормально. Вы можете игнорировать следующий совет — он ля приверед и перфекционистов, и я это признаю, — но я люблю когда мои самые темные линии 2:1 состоят в некоей придуманной сетке и расстояние между ними составляет четное число пикселей. Я делаю так, чтобы соблюсти последовательность и потому что это позволяет мне поддерживать идеальную эстетику, когда я меняю размеры или передвигаю элементы.

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

Диагональную линию крыши 1:1 следует немного подвинуть, если вы решили последовать данному совету.

Шаг 5

Теперь объединим эти линии в один слой крыши (но еще без L-изгиба крыши) затем нажмите Alt‑nudge, примените Flip Horizontal (отразить по горизонтали) и расположите слева от L-изгиба. У вас получится следующее:

Нам больше не понадобятся куски линий над верхушкой, так что стираем лишнее и добавляем вертикальную линию, которая обозначает место вогнутого угла на крыше. На L-слое крыши стираем две линии сзади (те которые на экране выше) и потом объединяем линии основной крыши с ее L-изгибом:

Шаг 6

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

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

Шаг 7

Теперь сделайте два треугольника почти белыми (тот который справа при этом должен быть несколько темнее) и отделите белый от основного цвета крыши более темным тоном, например таким, как вы выбрали для линии вогнутого угла:

Шаг 8

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

Шаг 9

Теперь нам надо убрать белые зоны в центре, черные линии под ними:

Это не обязательно, но теперь можно объединить крышу с L-образной формой дома. Перед смешивание слоев лучше заполнить получившиеся пустые пространства цветом стен дома. Здесь вам поможет инструмент Lasso, только не забудьте настроить его без включения anti-aliasing.

Прекрасно! Мы закончили геометрическую часть!

3. Детали

Шаг 1

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

Шаг 2

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

Если вы передвинете с nudge нижнюю линию двери на пару пикселей вверх, то дверь не будет больше выглядеть так плоско:

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

Шаг 3

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

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

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

Шаг 4

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

Теперь нам нужно покрасить и доделать все элементы, которые у нас уже есть. Сделаем рамы — белыми, все черные линии между рамами и стенами — такого же цвета как и вогнутый угол дома. А черные линии рам должны быть темнее цвета окон, также как мы делали c белыми частями крыши:

Конечно, вы можете покрасить только одно окно, а потом скопировать его на другие окна. Только не забудьте о том, что элементы на более темной (теневой) части дома должны быть также, соответственно, темнее.

Шаг 5

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

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

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

Шаг 6

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

Добавил круглую дверную ручку.

Шаг 7

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

4. Текстуры

Шаг 1

Давайте сделаем текстуры и применим их к нашему дому. Области, которые в этом нуждаются — это, конечно, крыша и стены.

Начнем с крыши. Первым делом создайте новый слой.

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

Шаг 2

Второй ряд черепицы оказывается в такой позиции потому что он сначала сдвигается на 2 px (в след за верхней линией) чтобы достичь перекрывания, как и в случае с кирпичами, а затем ряд сдвигается вниз (в след за боковой диагональю) еще на несколько пикселей. Если это звучит слишком сложно, просто ориентируйтесь на картинку, представленную сверху и все должно получиться правильно. Когда у вас готов большой кусок текстуры, увеличьте его еще больше, так чтобы он смог перекрыть всю крышу:

Шаг 3

С левой стороны крыши, текстура должна лежать в противоположном направление, так что отразите тот участок по горизонтали (flip horizontally). Потом вернитесь на слой с домом, используйте инструмент Magic Wand, чтобы выделить все цвета крыши *кроме черных линий). Если вы зажмете Shift, вы можете продолжать добавлять новые зоны к существующему выделению. Когда вы закончите выделение, вернитесь на слой с текстурой, инвертируйте выделение (Select > Inverse) и удалите лишнее. У вас получится так:

Шаг 4

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

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

Шаг 5

Для того чтобы сделать текстуру дерева, нам просто нужно сделать линии, идущие параллельно основанию дома, затем применить Alt-nudge и переместить линию на 4 пикселя вверх, затем повторять снова и снова, пока текстура не покроет все стены дома:

Потом повторяем процесс, описанный в шаге 4:

Поздравляю! Ваш дом готов!

Состаривания дома, дом с приведениями, ветхий дом в бесплатном уроке фотошопа

Состариваем дом в фотошопе, дом с призраками

1. Прежде всего подберите хорошую фотографию:

2. Вырежте дом на отдельный слой, а остальное удалите. Я использовал polygonal lasso tool для дома и soft eraser для кустов.

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

4. Расположите слой с фоном ниже слоя с домом и сделайте небольшую перспективу, чтобы придать глубину и объем небу.

5. Обратите внимание на края дома. Они по прежнему под цвет первоначального неба. Исправим это

Используя magic wand tool, выберем свободные зоны на слое с домом (т.е. которые не принадлежат непосредственно дому, а связаны с прошлым фоном — прим.перев.). Затем, Select> Modify> Expand, чтобы расширить выделение. подбирайте размер расширения так, чтобы в выделение попали все зоны, которые нужно откорректировать. После: Image> Adjust> Hue / Saturation и подберите необходимый оттенок для краев, чтобы он подходил к фону

6. Используя Hue/Saturation, а также Color Balance, подберите цветовые гаммы дома и фона так, чтобы они хорошо подходили друг другу

7. Теперь нужно избавиться от пальмы, которая закрывает часть дома. Этому дереву нечего делать на этой картинке, ведь мы хотим создать нездоровую атмосферу (morbid mood). Возможно это самый деликатный шаг, т.к. нам нужно дорисовать недостающую часть дома. Для этого я использовал clone stamp tool

8. Почему бы не добавить молнию, чтобы сделать картину более тревожной (disturbing)? Возьмем простую кисть, нарисуем молнию и продублируем слой. К копии слоя применим фильтр blur для эффекта свечения. Затем с помощью Dodge tool высветлим облака, из которых выходит молнияng.

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

10. Самая веселая часть! Давайте разломаем дом!.. Не до конца, правда. Чтобы сделать дом старше, я добавил дыру в крыше, нарисованную кистями.

11. Не бойтесь добавлять сломанные части! Но дом должен как-то стоять, поэтому не зайдите слишком далеко Как вы видите, я сломал деревянную балку, трубу, доски, другую часть крыши и окно. Когда вы что-то ломаете, используйте clone stamp tool чтобы заполнить образовавшиеся пустоты

12. Сделайте все грязным. Сперва окна. Я использовал non regular brush и закрасил окна матовым цветом. Затем изменил способ наложения слоя (в данном случае на Luminosity mode)

13. Повторите прошлый шаг, но уже на всем доме. Рисуйте темным цветом и поставьте стель наложения Multiply. Обратите внимания на края — там грязь появляется в первую очередь. Это самый долгий шаг, но не ленитесь и загрязните все!

Вот увеличенное крыльцо:

14. На последнем шаге увеличиваем контраст матирующего слоя.

15. Вот итог! Сравните с оригиналом

уроке фотошоп, уроки фотошопа, урок Photoshop

Как сделать тень в Photoshop

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

 

Как сделать тень в Фотошопе?

Откройте Adobe Photoshop и загрузите в него выбранную картинку, для которой хотите сделать тень. Найдите пункт «Файл» -> «Открыть…» (File -> Open).

Выделите объект с помощью инструмента «Волшебная палочка» (Magic Wand). Удерживая клавишу Shift, левой кнопкой мыши кликните на область белого фона. Затем найдите на панели главного меню пункт «Выделение» (Select), кликните на нее и выберите «Инверсия» (Inverse).

После этого выделенный предмет нужно скопировать на новый слой. Для этого кликните левой кнопкой мыши на слой и выберите команду «Создать дубликат слоя» (Layer via copy), либо используйте команду клавиш «Ctrl + J».

Перейдите на только что созданный слой. Выберите слева на панели команд «Инструмент градиент» (Gradient Tool). На палитре градиента выберите «Черный, белый». Залейте фигуру градиентом снизу вверх по вертикали.

Далее в меню «Редактирование» (Edit) выберите инструмент «Свободное трансформирование» (Free Transform). Удерживая клавишу Ctrl, кликните вверху выделенной рамки и потяните ее в нужную сторону, чтобы придать тени естественный наклон.

Чтобы сделать контур тени размытым, найдите в меню «Фильтр» (Filter) -> «Размытие» (Blur) -> «Размытие по Гауссу» (Gaussian Blur). Настройте подходящее для вас размытие фигуры.

Для того, чтобы убрать «лишнюю» тень, перейдите на слой с изначальным изображением, выберите инструмент «Ластик» (Eraser) и очень аккуратно откорректируйте контур тени.

Читайте также:

Фото: компании-производители

Видео: CHIP

Как создать векторную графику в фотошопе?

TL; DR: Photoshop не может создавать настоящие векторные изображения. Это очень распространенное заблуждение.

Думай об этом как о машине. — Можете ли вы ездить на 4-х колесах с Toyota Prius? Конечно, вы можете ! Будет ли он делать все то, что может делать Джип Рэнглер? Черт возьми нет. Есть причина, по которой вам нужно использовать полноприводный автомобиль, чтобы ездить на четырехколесном колесе, также как и причина, по которой вам нужно использовать векторное приложение для создания векторных файлов.

---

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

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

Такие приложения, как Illustrator, Inkscape, CorelDraw, Xara, Sketch и т. Д., На самом деле могут содержать только независимые векторные изображения с разрешением 100%. Дело не в том, чтобы «люди предпочитали» использовать векторное приложение. Это необходимо, если вам нужен настоящий векторный файл в конце.

Это не означает, что векторные инструменты в Photoshop в целом хуже, чем они . Да, вы можете рисовать с помощью векторных инструментов в Photoshop и создавать векторный контент. Но чтобы получить реальную выгоду от этого векторного контента в Photoshop, вы всегда должны использовать Photoshop для всех будущих изменений. Когда вы увеличиваете или трансформируете векторный контейнер в Photoshop, Photoshop интерполирует внутренние растровые данные в соответствии с преобразованием. Эта интерполяция неслучиться вне Photoshop. Таким образом, после экспорта / сохранения вы можете масштабировать что-то вроде Photoshop EPS, векторные кромки будут масштабироваться и оставаться четкими, потому что они являются векторными, но интерполяция растровых данных не происходит вне Photoshop. Таким образом, «битые пиксели» полностью возможны в Photoshop EPS, даже если вы использовали векторные инструменты. Эта проблема возникает, когда вы сохраняете файл или экспортируете его. Во всех векторных форматах — PDF, EPS, PSD — Photoshop создает растровый файл со встроенными векторными данными. Photoshop не создает векторный файл. Это совершенно не похоже на настоящие векторные приложения.

Для производственных целей это различие может быть в значительной степени неважным, если вы уже работаете с высоким ppi в Photoshop. Но пользователь должен знать, что простое использование векторных инструментов Photoshop и сохранение в формате EPS / PDF не создает векторные файлы с использованием какой-либо доступной в настоящее время версии Photoshop (CC2017 является самой последней).

Я понимаю, что некоторые пользователи хотят, чтобы Photoshop создавал векторные файлы, потому что это означает, что им не нужно изучать новое приложение для создания нового формата файлов. Тем не менее, нет никакого способа обойти это. Если вы хотите фактические векторные файлы , вы должны использовать реальное векторное приложение. Photoshop есть и всегда был растровым приложением, отсюда и название «фото».

Нарисуйте дом в Photoshop • Уроки Adobe Photoshop

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

Шаг 1. Создайте документ размером 512 x 512 пикселей. Залейте фоновый слой серым (# A6A6A6) или любым другим цветом — мы будем менять этот цвет во время урока.

Шаг 2. Активируйте инструмент Pen (Pen Tool (P) и нарисуйте фигуру, как показано ниже:

Добавьте стиль слоя к форме. Наложение градиента (Наложение градиента) для изменения цвета.

Также добавьте стиль слоя к слою-фигуре. Внутренняя тень (Внутренняя тень) для добавления глубины:

Шаг 3. Инструмент Перо (Инструмент «Перо» (P) нарисуйте другую форму — переднюю сторону дома:

Также добавьте стиль слоя для слоя с фасадом дома. Наложение градиента (Наложение градиента):

Добавьте стиль слоя Внутренняя тень (Внутренняя тень):

Шаг 4. К дому нужно добавить детали — начнем с боковых панелей. Создайте новый слой и, удерживая, щелкните левой кнопкой мыши по миниатюре слоя боковой стены, чтобы загрузить его выделение.

Переместите выделение на 10 пикселей вверх и залейте его черным цветом (# 000000). Не снимая выделения, нажмите один раз на клавиатуре клавишу со стрелкой вверх и нажмите. Будет полоска в 1 пиксель. Таким же образом нарисуйте еще около 20 линий.

Теперь добавьте стиль слоя к слоям с линиями. Shadow (Drop Shadow) для создания панелей эффектов.

Измените режим наложения для слоев с панелями на Overlap (Overlay) и уменьшите непрозрачность до 80%.

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

Шаг 5. Переходим к созданию крыши — нарисуем ее инструментом Pen (Pen Tool).

Чтобы придать крыше коричневато-красный цвет, используйте стиль слоя. Наложение градиента (Наложение градиента):

Чтобы придать крыше глубину и трехмерный вид, добавьте к ней стили слоя. Shadow и Internal Glow (стиль слоя Shadow / Inner Glow):

Теперь вам нужно добавить основу под крышу. Создайте новый слой и поместите его под слоем с крышей. Загрузите выделение для слоя с крышей, переместите выделение на 1 пиксель вниз и залейте его черным цветом (# 000000).Не удаляя выделение, переместите его на 1 пиксель вниз и снова залейте черным. Повторите это 3 раза, пока не получите основание под крышей толщиной 5 пикселей.

Используя стиль слоя Gradient Overlay (Наложение градиента), добавьте основу из темных оттенков для реалистичного освещения.

Таким же образом нарисуйте еще одно основание под крышей.

Шаг 6. Теперь вам нужно добавить падающую тень от крыши на стены дома. Для этого создайте новый слой и сделайте выделение, как показано на рисунке, любым удобным для вас инструментом выделения (я использую инструмент выделения для выделения). Polygonal Lasso (Polygonal Lasso Tool)).

На новом слое залейте выделение коричневым цветом (# 9C8151). Не снимая выделения, опустите его на 15 пикселей и нажмите клавишу. Снимите выделение и примените фильтр Blur by gaus su (Filter> Blur> Gaussian Blur), радиус размытия 5.0px. Уменьшите непрозрачность этого слоя до 50%, переместите его вверх и удалите часть тени, которая выходит за пределы стены (вы можете выбрать Rectilinear lasso (Polygonal Lasso Tool)) и удалите.

Шаг 7. На левой стене дома нарисуйте окно или инструмент Pen (Pen Tool) или инструмент Rectangle (Rectangle Tool (U)). Если вы рисуете окно с помощью инструмента «Прямоугольник», вы можете применить к нему Свободное преобразование (Свободное преобразование), чтобы изменить форму окна.

Сделайте окно синим, используя стиль слоя Наложение градиента (Наложение градиента):

Добавьте глубину окна к стилям слоя. Внутренняя тень (Внутренняя тень) и Внутреннее свечение (Внутреннее свечение):

Чтобы окно выглядело более интересно, создайте на нем отражение: нарисуйте форму отражения и залейте ее градиентом (Инструмент «Градиент» (G)) от белого к прозрачному.

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

Создайте копию окна и отразите ее по горизонтали: Редактирование — Преобразование — Отразить по горизонтали (Правка> Преобразовать> Отразить по горизонтали). Уменьшите копию окна инструментом Free transform (Свободное преобразование) и разместите наверху центральной стены дома:

Шаг 8. Tool Pen (Pen Tool) нарисуйте дверь.

Измените цвет двери на слой коричневого стиля Наложение градиента (Наложение градиента):

Чтобы подчеркнуть края и добавить глубины двери, добавьте к нему стиль слоя. Обводка (Обводка):

Добавьте объема со стилем Внутренняя тень (Внутренняя тень):

Добавьте полосу 7 пикселей к двери, чтобы она выглядела встроенной в стену:

Шаг 9. Для дверной ручки нарисуйте круг с помощью инструмента «Эллипс» (U). Чтобы создать пропорциональный круг во время рисования, удерживайте.

Раскрасьте дверную ручку в золотой цвет, добавив к ней стиль слоя с наложением градиента:

Чтобы добавить глубины перу, добавьте стиль слоя Drop Shadow:

Шаг 10. Используйте инструменты, чтобы нарисовать порог. Pen или Rectangle (Pen Tool / Rectangle Tool).

Добавьте стили слоя к порогу Наложение градиента (Наложение градиента) и Внутренняя тень (Внутренняя тень).

Нарисуйте основу под порогом и залейте коричневым цветом (# 78350B).

Шаг 11. Добавьте тень под домом. Для этого создайте новый слой и поместите его под всеми остальными слоями. После этого создайте еще один новый слой и нарисуйте выделение, как показано ниже:

Опустите выделение на 3 пикселя вниз и залейте его черным (# 000000).Не удаляя выделение, переместите его на 4 пикселя вверх и удалите.

Примените фильтр к основанию под домом. Размытие по Гауссу (Фильтр> Размытие> Размытие по Гауссу) с радиусом размытия 1,5 пикселя. Уменьшите непрозрачность до 10%.

Надеюсь, урок вам понравился!
Удачи!

Автор урока : Ашер Аббаси
Перевод: Луговских Татьяна
Ссылка на источник урока

Как рисовать здания в Photoshop CS5 | Small Business

Вы можете использовать инструменты формы в Adobe Photoshop, чтобы нарисовать собственные здания и добавить их к другим изображениям или сделать их отдельно стоящими.Это делается путем рисования серии прямоугольников для стен, окон и дверей. Вы можете добавить к зданию перспективу с помощью функции «Преобразование перспективы», чтобы сторона здания казалась отступающей. Используйте разные тона при выборе цвета одной стены по сравнению с другой, чтобы имитировать различия в свете и тени.

Рисование стен

Откройте новый документ в Adobe Photoshop.

Выберите инструмент «Прямоугольник» на панели инструментов. Выберите «Пиксели заливки» на панели параметров, чтобы каждую форму можно было редактировать отдельно на ее собственном слое.Щелкните значок «Цвет переднего плана», чтобы открыть «Палитру цветов». Выберите цвет стены и нажмите «ОК».

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

Щелкните значок «Цвет переднего плана». В палитре цветов появится круг, показывающий только что использованный цвет. Щелкните место чуть ниже этого цвета, чтобы выбрать более темный оттенок. Это создаст впечатление, что сторона здания находится в тени.

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

Щелкните меню «Слой» и выберите «Объединить видимые», когда вас устраивают стены.

Добавление окон и дверей

Щелкните значок «Цвет переднего плана» на панели инструментов и выберите светло-серый цвет для окон в передней части здания.

Выберите инструмент «Прямоугольник» и нарисуйте небольшое окно в правом верхнем углу передней стены.

Нажмите «Ctrl-A» на клавиатуре, чтобы выбрать окно, затем «Ctrl-C», чтобы скопировать его. Нажмите «Ctl-V», чтобы вставить копию. Перетащите новое окно в верхний левый угол передней стены. Нажмите «Ctrl-V», чтобы вставить дополнительные копии окна, и перетащите их на место по мере необходимости.

Нажмите «Ctrl-V», чтобы вставить окно сбоку от здания. Выберите «Paint Bucket Tool» на панели инструментов. Щелкните значок «Цвет переднего плана» и выберите серый цвет немного темнее, чем тот, который вы использовали для передних окон.Щелкните окно, чтобы изменить его цвет.

Щелкните «Инструмент перемещения», чтобы переместить окно на место. Щелкните меню «Правка», «Преобразовать», затем «Перспектива». Щелкните верхний правый угол окна и перетащите его вниз, чтобы придать перспективу окну, параллельному линиям на боковой стене. Перетащите окно в верхний левый угол боковой стены.

Добавьте окно под первым боковым окном. Скопируйте боковое окно, нажав «Ctrl-A», затем «Ctrl-C». Вставьте копию окна, нажав «Ctrl-V», и переместите новое окно на место под первым.

Добавьте окно справа от первого бокового окна, нажав «Ctrl-V» и перетащив его на место. Выберите «Преобразовать» в меню «Файл» и нажмите «Масштаб». Удерживая нажатой клавишу «Shift», чтобы сохранить пропорции, перетащите верхний и нижний углы до тех пор, пока левая сторона окна не станет такой же длины, как правая сторона первого окна.

Добавьте окно под последним окном, нажав «Ctrl-A», «Ctrl-C», затем «Ctrl-V». Перетащите окно на его место под последним окном.

Добавьте дверь к фасаду здания. Щелкните «Цвет переднего плана» на панели инструментов, чтобы открыть палитру цветов. Наведите курсор на сторону здания. Курсор превращается в пипетку. Щелкните сторону здания, чтобы она соответствовала этому цвету. Нажмите «ОК». Перетащите инструмент «Прямоугольник» в нижний центр передней стены, чтобы создать дверь.

Ссылки

Автор биографии

Публикуемый автор и профессиональный докладчик Дэвид Видмарк консультировал предприятия и правительства по вопросам технологий, средств массовой информации и маркетинга более 20 лет.Он преподавал информатику в Алгонкинском колледже, открыл три успешных бизнеса и написал сотни статей для газет и журналов по всей Канаде и США.

Рисование вашего дома с помощью Photoshop Скотт Онстотт

Шаг первый:

Откройте House.jpg и выберите инструмент «Многоугольное лассо» (вложен в инструмент «Лассо» [L] на панели инструментов). Нажмите клавишу Caps Lock, чтобы использовать точный курсор. Щелкайте по точкам по периметру левой стороны здания и старайтесь выбрать только сайдинг без обшивки.Пока не беспокойтесь об окнах или дымоходе. Щелкните начальную точку, чтобы создать выбор.

[ Участники KelbyOne могут загрузить файл, используемый в этом руководстве, здесь. Все файлы предназначены только для личного использования. ]

Шаг второй:

Щелкните значок «Вычесть из выделенного» (более темный квадрат, перекрывающий светлый квадрат) на панели параметров и щелкните точки вокруг дымохода и пяти окон на этой стороне конструкции, стараясь вычесть оконная отделка.Это аналогично маскировке, которую вам придется проделать на эшафоте при подготовке к покраске. Чтобы край маски был смягчен, выберите Select> Modify> Expand, введите 2 пикселя и нажмите OK. Выберите «Выделение»> «Изменить»> «Растушевка», введите 1 пиксель и нажмите «ОК».

Шаг третий:

Дважды щелкните фоновый слой на панели «Слои», чтобы разблокировать его. Примите имя по умолчанию Layer 0 и нажмите OK. Выберите «Слой»> «Создать»> «Слой через вырез», чтобы перенести выделение на слой 1.Выключите слой 0, щелкнув его значок глаза, и выберите «Изображение»> «Коррекция»> «Обесцветить». Мы удаляем информацию о цвете из текстуры, чтобы мы могли рисовать или окрашивать ее самостоятельно, а также избавляемся от мха, растущего в правом нижнем углу, в рамках сделки.

Шаг четвертый:

Снова включите Layer 0 и дважды щелкните Layer 1 справа от его имени — это ярлык, который открывает диалоговое окно Layer Style. Щелкните слова Color Overlay в списке стилей слева, чтобы включить этот эффект и одновременно перейти на страницу его свойств.Уменьшите Непрозрачность до 75%, чтобы тени от горизонтального сайдинга стали видны через сплошной цвет. ( Примечание : цвет по умолчанию в моем стиле наложения цветов — красный цвет пожарной машины; ваш цвет по умолчанию может быть другим.)

Шаг пятый:

Красный цвет пожарной машины не мой первый выбор, поэтому пока Диалоговое окно «Стиль слоя» все еще открыто, щелкните образец цвета и измените цвет в палитре цветов. Чтобы нанесение цвета выглядело больше как морилка, а не краска, попробуйте изменить режим наложения на Overlay в диалоговом окне Layer Style.Поэкспериментируйте с цветом, режимом наложения и непрозрачностью наложения цвета, пока не получите желаемый результат.

Шаг шестой:

Если вы выбрали более непрозрачную краску, а не пятно, выбрав Нормальный режим наложения в Color Overlay, штриховка будет слишком плоской, потому что краска затемняет естественные тени. Чтобы компенсировать это, примените Gradient Overlay в диалоговом окне Layer Style. Щелкните предварительный просмотр эскиза градиента и выберите предустановку «Черный», «Белый» в редакторе градиентов и нажмите «ОК», чтобы закрыть редактор градиентов.Установите Угол влево, чтобы имитировать тень под карнизом. Измените режим наложения на Overlay, Opacity на 69%, Scale на 81% и перетащите градиент на экран в соответствии с вашими предпочтениями. ( Примечание: Если вы не можете перетащить Gradient Overlay на экран, попробуйте сначала нажать кнопку Reset Alignment.) Gradient Overlay помогает разбивать плоские поверхности с тональными вариациями.

Шаг седьмой:

Чтобы удалить яркий ореол вокруг краски, нажмите «Обводка» в диалоговом окне «Стиль слоя».Щелкните образец цвета, а затем щелкните окрашенную стену, чтобы выбрать один из ее оттенков. Щелкните OK, чтобы закрыть палитру цветов. Установите в раскрывающемся меню «Положение» значение «Снаружи», а для режима наложения — «Перекрытие». Щелкните поле Размер и нажимайте клавиши со стрелками вверх и вниз, чтобы изменить размер. Смотрите на экране, как вы меняете размер, чтобы выбрать то, что выглядит лучше всего. Я остановился на обводке в 2 пикселя.

Шаг восьмой:

Вода, попадающая на половину боковой поверхности слухового окна, возникает из-за брызг дождя с крыши на стену.К счастью, нам не нужно подниматься на крышу с мойкой высокого давления, когда Content-Aware Fill сделает эту работу виртуально за нас. Выберите слой 0 и инструмент «Лассо» (обычное) и выделите пятно от воды. Выберите «Правка»> «Заливка» и выберите «С учетом содержимого» в раскрывающемся меню «Содержание». Щелкните OK и нажмите Command-D (ПК: Ctrl-D), чтобы отменить выбор.

Шаг девятый:

Повторите шаги с первого по седьмой на этой поверхности, а затем еще раз на правой поверхности и у входа в дом.Чтобы сэкономить время, перетащите Option (ПК: Alt-перетащите) эффекты слоя с одного слоя на другой, и все ваши настройки в диалоговом окне Layer Style будут скопированы. Затем вы можете дважды щелкнуть стили слоя на панели «Слои», чтобы открыть диалоговое окно «Стиль слоя» и настроить свойства каждой отдельной поверхности с того места, где вы остановились на предыдущей поверхности.

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

Эта статья была первоначально опубликована в сентябрьском выпуске журнала Photoshop User за 2015 год.

Нарисуйте старый дом с нуля — Урок Photoshop

В этом уроке я покажу вам, как нарисовать старый дом. Это легко, но на это нужно время. Я использовал фотошоп cs3. Веселиться! Конечный результат:

Автор:

Просмотры: 14872

Оценка: 6/10

Шаг 1

Открыть новый файл.Выберите коричневый цвет фона и переднего плана (как на изображении ниже).
Зайдите в filter / render / clouds. Теперь используйте фильтр «Добавить шум».

Шаг 2

Для использования фильтра шума (количество 4 и выберите равномерное). Теперь перейдите в Фильтр размытия движения.

Шаг 3

В фильтре размытия движения угол 33 и расстояние 42 пикселя. В фильтре сжижения используйте инструмент Twirl по часовой стрелке. У вас получится что-то вроде изображения ниже.

Шаг 4

Откройте новый файл размером 3000x2000px и нарисуйте дом (используйте кисть или перо…)

Шаг 5

Из первого файла скопируйте его часть и добавьте в новый файл. Скопируйте эту часть (деревянную доску), чтобы сделать дно дома.

Шаг 6

Используйте оттенок / насыщенность (оттенок +6, насыщенность +41, яркость +9), чтобы изменить цвет «дерева» для верхней части дома …

Шаг 7

Выровняйте слои и положите в нужное место. Используйте инструмент стирания ro Pen Tool, чтобы стереть ненужные части.

Шаг 8

…

Шаг 9

В том же файле, где вы создали текстуру дерева, используйте оттенок / насыщенность (300,23,7), чтобы изменить цвет. Выбрав цвет, скопируйте его в файл «дом» и поместите рядом с линиями …

Шаг 10

…

Шаг 11

Крыша. Откройте новый файл, используйте инструмент «Прямоугольник» и нарисуйте фигуру, как на изображении ниже (1). Покрасьте его в красный цвет, добавьте шума (количество 9,51%, равномерное) (2). Используйте размытие по Гауссу (радиус 11.1px) (3,4) ..

Шаг 12

Скопируйте эту форму в файл «домик» и поместите его на место — на крышу…

Шаг 13

Поместите все слои крыши в группу (для облегчения работы), добавьте тень (непрозрачность 75%, угол 120, расстояние 5, распространение 4, размер 5) …

Шаг 14

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

Шаг 15

Чтобы нарисовать темные окна, на новом слое нарисуйте формы и закрасьте их черным. Этот слой должен быть ниже слоя «домик».

Шаг 16

Для травы создайте новый слой, выберите передний / фоновый зеленый (как на изображении ниже, и просто нарисуйте траву с помощью инструмента кисти (дюнная трава)… Для неба выберите синий цвет переднего плана и белый фон и используйте инструмент градиента.
Для солнца используйте фильтр бликов (зум 50–300 мм).

Шаг 17

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

Нарисуйте деревенский примитивный домик в Photoshop | by Photoshop Online

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

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

В этом руководстве мы будем рисовать простой домик в стиле примитивного клипарт. Вам понадобится всего лишь копия Photoshop версии 7 или выше и немного воображения.

Рисование дома с клипарт — Шаги

1. Новый холст — Откройте новый холст размером примерно 500 x 500 пикселей в режиме RGB с белым фоном. Скорее всего, вы никогда не будете использовать изображение такого размера. Однако всегда лучше начинать с немного большего размера, чем вам нужно, чтобы потом можно было уменьшить размер изображения и не потерять качество.
2. Набор цветов — Выберите два основных цвета для своего дома. Я выберу желтовато-коричневый для стен и кантри-синий для крыши.Итак, мой цвет переднего плана — # e3cd9b, а цвет фона — # 595b5a.
3. Нарисуйте стену — Чтобы иметь дом, нам нужна стена. Сделайте его больше прямоугольником, чем квадратом. Также убедитесь, что вы используете инструмент «Форма», а не инструмент выделения. Использование инструмента формы заставит стену перейти на отдельный слой, делая возможным все остальное, что мы будем делать с ней. После того, как вы нарисуете фигуру, щелкните ее слой правой кнопкой мыши и выберите «Растрировать слой».
4. Нарисуйте крышу — Технически мы собираемся использовать только половину крыши, чтобы она стала идеально симметричной… но не паникуйте, мы доберемся туда через секунду.

Сначала создайте новый слой (Layer, New, Layer) и переключите цвета переднего плана и фона. Затем возьмите инструмент многоугольного лассо. Теперь нарисуйте форму крыши над вашей стеной. Не беспокойтесь об идентичности обеих сторон — было бы чудом, если бы вы смогли это осуществить.

После того, как вы нарисовали крышу, залейте выделение цветом переднего плана и снимите выделение с крыши (одновременно нажмите «Ctrl» и «D» на клавиатуре). Затем используйте инструмент прямоугольной области, чтобы выделить половину крыши — сторону, которая вам тоже не нравится, — и нажмите клавишу возврата на клавиатуре, чтобы стереть эту половину.Теперь щелкните правой кнопкой мыши слой с крышей и выберите «Дублировать слой». Направляйтесь вправо в «Редактировать», выберите «Преобразовать» и нажмите «Отразить по горизонтали».

Осталось только сдвинуть крышу на место. Сделайте это, выбрав инструмент перемещения, а затем с помощью клавиш со стрелками на клавиатуре переместите крышу влево или вправо. Это предотвратит подъем или опускание крыши, что затрудняет подгонку. Когда он будет на месте, щелкните слой правой кнопкой мыши и выберите «Объединить вниз», чтобы сделать крышу цельной, снова на одном слое.

Справочная иллюстрация 01.

1. Необязательный шаг — Этот шаг не является обязательным. Я собираюсь нарисовать небольшую башню и крышу на этой башне. Каждый из них выполняется так же, как шаги 3 и 4, но делать их необязательно. Справочная иллюстрация 01.
2. Добавление окон и дверей — Дверь будет того же цвета, что и ваша крыша, а окна будут черными. Разместите их так, как вам удобно, используя инструмент прямоугольной формы, и растрируйте каждый слой, когда закончите — мы вернемся к ним через минуту. Справочная иллюстрация 01.
3. Установить новые цвета — Теперь мы собираемся начать добавлять некоторые выделения к элементам (во всяком случае, всем, кроме окон) в простом стиле, который используется в картинках кантри. Серьезно, я говорю легкомысленно. Итак, сначала установите цвета переднего плана и фона на более светлый оттенок того же цвета, что и они. Самый простой способ сделать это — дважды щелкнуть цветовую рамку и выбрать радиальную кнопку «B» — она ​​определяет яркость данного цвета.Переместите ползунок вверх, чтобы сделать его светлее, а затем проделайте то же самое с другим цветом. Итак, мой цвет крыши становится # 3a576a (синий), а цвет стен — # f4dca7 (желто-коричневый).
4. Нарисуйте центры — Создайте новый слой (Layer, New, Layer) и возьмите обычную круглую кисть. Теперь вы можете раскрасить элементы. Не подходите слишком близко к какому-либо из ящиков и соответствующим образом меняйте цвета — но, как видите, это не обязательно должно быть что-то похожее на идеальное. Сделайте все это на одном слое и ничего не делайте с окнами.Поскольку мне нужны двойные двери, я раскрасила их пополам. Справочная иллюстрация 02.
5. Размытие по Гауссу — Это выделение… конечно, все в порядке. Но это вроде как … там. Так. Мы собираемся немного размыть его, чтобы он выглядел так, как должен — выделять, а не странно нарисованный фокус. Нажмите «Фильтр», выберите «Размытие» и выберите «Размытие по Гауссу». В поле введите примерно от 4,0 до 5,0. Просто посмотрите превью — вы хотите, чтобы картина стала размытой, а не смыла в небытие. Справочная иллюстрация 02.
6. Добавление акцентов — Наш последний шаг — добавить небольшие акценты в дом. Вы можете добавить в окна дерево, чтобы они больше походили на окна, небольшую круглую ручку на входной двери и все остальное, к чему вас приведет ваше воображение.

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

echo $ переменная;

Пост «Нарисуйте деревенский примитивный домик в Photoshop» впервые появился в Photoshop Online.

Как сделать красивые стилизованные планы этажей с помощью Photoshop

Как сделать красивые стилизованные планы этажей с помощью Photoshop

Предоставлено RenderPlan ShareShare

• Facebook

• Twitter

• 
  7 Pinterest

  40 Whatsapp

• Mail

Или

https://www.archdaily.com/881660/how-to-make-beautiful-stylized-floor-plans-using-photoshop

Первоначально эта статья была опубликована RenderPlan as «Как отрендерить план этажа AutoCAD с помощью Photoshop».«

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

1. Структурирование вашего чертежа САПР в AutoCAD

Необработанный план этажа AutoCAD.Изображение предоставлено RenderPlan

В этой статье мы рассмотрим основные шаги, как экспортировать чертеж плана этажа из AutoCAD и визуализировать его с помощью Adobe Photoshop. Искусство состоит в том, чтобы создавать эстетически выглядящие планы, не перегруженные цветами и текстурами. Чтобы ускорить рабочий процесс, вы уже должны структурировать свой чертеж САПР таким образом, чтобы в дальнейшем вы могли быстрее работать в Photoshop.

На приведенном выше рисунке показан основной стиль рисования простого плана этажа офиса в AutoCAD непосредственно перед экспортом.Вот что вам следует делать в AutoCAD DWG:

1.1 Структура, которую вы рисуете на разных слоях

Это, конечно, не волшебный совет, но очень важно сделать это и иметь возможность экспортировать различные части вашего чертежа в отдельные файлы PDF позже.

1.2. Используйте сплошную штриховку для заливки частей плана этажа

Как вы видите на снимке экрана AutoCAD выше, следующие части чертежей плана этажа заполнены сплошной штриховкой на уникальных слоях:

• Бетонные стены
• Легкие стены
• Лестницы
• Комнаты
• Коридоры
• Фоновая штриховка
• Все остальное, что вы хотите сделать уникальным в Photoshop позже

1.3. Создайте окно компоновки для каждого элемента, который вы хотите экспортировать отдельно.

Вы должны создать окно компоновки с одинаковым фиксированным размером и масштабом для каждой части чертежа, которую вы хотите экспортировать. Во фрейме макета вы показываете только тот слой, который хотите экспортировать. Заморозьте всех остальных. С помощью функции «Публикация» AutoCAD вы можете просто экспортировать все окна макета в файлы PDF за один шаг. Конечный размер окон макета будет равен размеру вашего документа Photoshop позже. См. Рисунок ниже, на котором показаны различные окна компоновки, которые я создал в AutoCAD для экспорта чертежа в отдельные файлы PDF.

Предоставлено RenderPlan

2. Экспорт чертежа DWG в файлы PDF

Вы закончили работу с САПР и структурировали свой чертеж способом, описанным выше? Отлично, теперь вы готовы к следующему шагу:

2.1 Экспорт чертежа в несколько файлов PDF

Почему несколько? Потому что это необходимо для структурирования вашего PSD-файла Photoshop на элементы, необходимые для визуализации вашего плана. Для этого вы должны экспортировать отдельные слои вашего DWG, заморозив все остальные слои и используя окно компоновки, которое вы создали для объекта.Я экспортировал 10 различных PDF-файлов для этого тематического исследования плана этажа офиса. Звучит много, но вы сэкономите время позже, когда дело дойдет до фотошопа.

2.2 Откройте файлы PDF в Photoshop с разрешением 200 dpi

Если вы откроете экспортированные файлы PDF в Photoshop, вы увидите всплывающий экран, на котором вас спросят, сколько пикселей вы хотите открыть файл. Я всегда использую 200 dpi, потому что этого достаточно для качественной печати и позволяет контролировать размер файлов. Если у вас есть быстрый движок для Mac или ПК и вам нужно действительно высокое качество, скажем, для публикации книги, то вам подойдет 300 dpi.Но нет необходимости подниматься выше, потому что размер вашего файла резко возрастет, и ваш компьютер замедлится.

2.3. Сложите все файлы PDF в один файл PSD

Теперь в Photoshop открыто 10 разных файлов PDF. Следующим шагом будет объединение этих файлов в один файл. Поскольку все документы имеют одинаковый размер изображения, вы можете просто дублировать слои в один мастер-файл, щелкнув правой кнопкой мыши на слое и выбрав файл, в который вы хотите собрать все элементы. Я всегда использую Линии.pdf в качестве основного документа. По завершении вы должны сохранить этот файл в файл PSD и закрыть все остальные. На следующем рисунке показано, как выглядит мой необработанный многослойный PSD-файл и как я сортирую слои, чтобы подготовиться к раскрашиванию и текстурированию.

Предоставлено RenderPlan

3. Визуализация вашего плана в Photoshop

Теперь мы переходим к самой интересной части. Вы отсортировали необработанные элементы PDF в один файл Photoshop PSD. Это момент, когда вы готовы добавить цвета и текстуры, чтобы ваш план отлично смотрелся для публикации.

3.1 Добавление текстур и цветов

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

Предоставлено RenderPlan

Чтобы создать тонкую и абстрактно выглядящую поверхность, вы можете использовать конкретный узор и наложить его на свой слой.Если вы хотите выбрать из широкого спектра текстур, просто зайдите на сайт cgtextures.com, и вы найдете все, что вам нужно. Для красного цвета я использую наложение цвета и устанавливаю режим наложения на «умножение» и непрозрачность на 30% для офисных помещений. Коридоры имеют непрозрачность 10%. Слои будут выглядеть следующим образом:

Предоставлено RenderPlan

Вот список слоев плана этажа PSD с настройками слоев, которые я использую для создания стиля ниже:

• Lines Layer Setting Layer Setting: Multiply, 75% Непрозрачность
• Текстовый слой Настройка слоя: Умножение, 75% Непрозрачность
• Слой заполнения мебели Эффект слоя> Наложение цвета: Белый, RGB 255/255/255
• Слой заполнения бетонной стены Эффект слоя> Цвет Наложение: черный, RGB 0/0/0, непрозрачность 70%
• Слой заполнения сухой стены Эффект слоя> Наложение цвета: черный, RGB 0/0/0, непрозрачность 50%
• Слой заполнения балюстрады Эффект слоя> Наложение цвета: белый, RGB 255/255/255
• Слой заполнения лестницы Эффект слоя> Наложение цвета: красный, RGB 255/0/0, эффект слоя непрозрачности 30%> Наложение рисунка: бетонный рисунок
• Заливка помещения Слой Эффект слоя> Наложение цвета: красный, RGB 255/0/0, непрозрачность 30% Эффект слоя> Наложение узора: бетонный узор
• Слой заполнения коридора Эффект слоя> Наложение цвета: красный, RGB 255/0/0, 10% Эффект непрозрачности слоя> Наложение узора: бетонный узор
• Слой заливки фона Просто белая заливка

Предоставлено RenderPlan

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

3.2 Создание теней для плана этажа

Нам все еще нужно создать тени, чтобы план этажа выглядел более пластичным. Тени отлично подходят для понимания различных пространств, высоты и глубины дизайна. Я большой поклонник рисования своих теней уже в AutoCAD и экспорта их в один файл PDF, как описано выше.Затем вы можете легко импортировать их на слой выше всех других слоев. Залейте штриховку тени черным цветом, установите слой Multiply и непрозрачность 15-25%. И вы готовы.

Другой способ — создать их в Photoshop на новом слое с помощью инструмента прямоугольной области (M) и ведра с краской для заливки их черным цветом. Мне больше нравится AutoCAD, потому что он для меня более точный и быстрый, но это, конечно, будет зависеть от ваших навыков.

Предоставлено RenderPlan

3.3 Выберите нужный графический стиль

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

Предоставлено RenderPlan

Как создать визуализацию архитектуры плана участка в Photoshop

В этом уроке Жюльен разберет свой рабочий процесс, как сделать визуализацию плана участка или иллюстрацию генерального плана в Photoshop на основе импортированного CAD-чертежа. Она покажет, как грамотно применять текстуры, чтобы сделать их динамичными, реалистичными и, что самое главное, повысить скорость рабочего процесса! Другими словами: она постарается получить хороший результат разумными усилиями — наслаждайтесь!

Я воспользуюсь более старым университетским проектом звуковой галереи, предназначенным для подключения к существующей городской зоне культурного искусства.Определение термина «искусство», кажется, расширяется, и поэтому этот проект был посвящен трактовке звука как самой формы искусства. В качестве генерального плана идея заключалась в том, чтобы установить как можно более тесную связь с существующей городской и природной тканью.

Как и любой проект архитектурной визуализации в Photoshop, он начинается с базовой работы с 2D линиями. В моем случае я использовал AutoCAD для рисования контекстного плана.

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

линейный рабочий файл архитектурного плана участка

Изменить линейную работу можно несколькими способами, я предпочитаю делать это уже в исходном программном обеспечении САПР (в данном случае в AutoCAD). Время от времени я иногда импортирую PDF-файл в Adobe Illustrator, так как переход между Photoshop и Illustrator является плавным и иногда может ускорить рабочий процесс, если нужно очистить всего несколько областей.

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

В этом случае, например, самая большая тень исходит от соседнего здания, выглядящего как «замок». Чтобы создать тени, я быстро создаю 3D-здания в SketchUp. На изображении ниже показано изолированное теневое изображение, экспортируемое прямо из SketchUp.

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

Составные теневые и линейные рабочие слои в Photoshop

Я «объединяю» оба элемента, просто правильно расположив слои или установив режим наложения теневого слоя на умножение.Уже после этого изображение внезапно приобретает гораздо большую глубину, но с этим вы можете увидеть, как быстро тени могут стать подавляющими, поэтому я часто буду играть с их непрозрачностью, пока не буду доволен изменением прозрачности слоя тени. Иногда я применяю легкий фильтр размытия по Гауссу, чтобы смягчить тени.

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

Цель этого шага — настроить себя для быстрого маскирования. Для всех, кто знаком с 3D-рендерингом и программным обеспечением V-Ray, я в основном настраиваю свой собственный слой идентификатора материала, который используется для быстрого выбора частей, к которым я могу применить текстуры. Это метод, который часто применяется только в 3D-рендеринге, однако я обнаружил, что он одинаково полезен и в 2D-чертежах, поскольку это значительно ускоряет рабочий процесс, когда дело доходит до добавления / редактирования текстур, и поэтому очень важно настроить его. слой на ранней стадии.

Итак, в моем случае я также создаю другой слой с разными «Материалами». После этого шага у меня есть другой слой для этих областей:

В комбинации он уже выглядит так:

2D-заливки, созданные в Photoshop

Выглядит уже нормально, верно — но мы продолжим улучшать внешний вид еще больше.

В зависимости от проекта этот процесс может значительно усложниться в зависимости от количества отделок пола, которое вы хотите выполнить. Чтобы сделать быстрый выбор всего на этом слое, удерживайте клавишу «команда» (Alt на ПК) и выберите миниатюру этого слоя.Некоторым людям нравится экспортировать свои оригинальные работы САПР в один и тот же слой, чтобы их заливки / линии / тени объединялись и экспортировались как один JPG / PDF из любого программного обеспечения САПР, которое они используют, поэтому пропускают первые два шага.

Это часто также зависит от программного обеспечения, которое вы используете. Теоретически это все еще работает, но я считаю, что процесс выбора каждого материала превращается в процесс 2 щелчка вместо 1, поскольку вам нужно выбрать слой, а затем волшебной палочкой выбрать нужную область, а не просто удерживать ‘Command ‘и выбрав слой.Кроме того, когда тени уже встроены в цветное изображение, это делает волшебную палочку немного избыточной с точки зрения скорости. Создание отдельных слоев для линий, теней и двухмерных цветных заливок в Photoshop звучит более утомительно, но это ускоряет рабочий процесс в дальнейшем и дает гораздо больше гибкости, позволяя настраивать каждый графический элемент в изображении

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

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

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

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

Итак, давайте импортируем фотографию травяного поля, которая будет выглядеть так:

Импортированная текстура травы в Photoshop

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

Текстура черепичной травы

Итак, я заполнил весь холст этой текстурой и применил маску из слоя 2D-заливки, который мы создали ранее для травы. После этого я играю с режимами наложения слоев и непрозрачностью слоя. Этот процесс может включать в себя устранение неполадок в зависимости от изображения, но ключевые режимы наложения слоев, на которые следует обратить внимание в этом процессе, будут следующими:

• «наложение»
• «умножить»
• иногда «осветлить»

и даже иногда (как в этом случае) я оставляю его на нормальном уровне и вместо этого работаю с прозрачностью / непрозрачностью.Мне нравится расплачиваться комбинацией текстур, поэтому довольно редко можно установить для одной текстуры 100% непрозрачность. Иногда я обнаруживаю, что текстура, которую я использую, просто не работает с изображением, однако из-за двухмерных заливок, которые мы установили ранее, это позволяет нам довольно быстро менять текстуру без необходимости повторно вырезать пространства, где находится текстура. обязательный. Это просто вопрос повторного наложения маски из 2D-слоя заливки.

Благодаря маске слоя текстура зеленой травы применяется мгновенно, и моя визуализация городского дизайна теперь выглядит так:

Маскированная текстура травы

Далее я повторяю шаги с дорогами:

Маскированные текстуры на изображение

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

Поэтому мы используем одно из наших вырезанных деревьев вида сверху из нашей «Коллекции TopViewTrees», которые созданы для этого. вид архитектурных визуализаций:

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

Этот высококачественный рисунок размером 4.000 x 4.000 пикселей (около 22 МБ) уже замаскирован (= прозрачный фон) и, таким образом, может быть мгновенно объединен с планом вашего сайта. Файл .PNG является частью OpenArchiVIZpack — нашей бесплатной и удобной графической библиотеки для архитектурной визуализации здесь:

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

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

Поступая так, вы избежите клонирования на 100%!

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

Затем я дублирую все деревья, добавляю черный цвет и уменьшаю непрозрачность слоев примерно до 30%. Этот слой действует как тень от деревьев, я слегка отклоняю их от деревьев в том же направлении, что и тени других зданий.

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

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

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

OK — давайте поищем красивую текстуру, которую можно использовать для слияния. Поэтому я просматриваю нашу 4000+ бесплатную библиотеку текстур, где вы можете взять множество бесплатных текстур для своего проекта:

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

Итак, я импортирую его и вношу следующие настройки:

• Добавление фильтра размытия движения
• Изменение уровней
• Обесцветить текстуру
• Уменьшить Непрозрачность слоя до 30-40%
• Режим слоя: Мягкий свет

Примените ту же маску слоя, что и слой с зеленой заливкой.Здесь вы видите процесс:

Даже на маленьких эскизах вы можете увидеть, что это придает траве немного более грубый вид, верно?

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

Итак, я снова беру красивую текстуру из нашей бесплатной библиотеки текстур 4000+:

Я применяю бетонную текстуру только с непрозрачностью около 20%, и тогда она будет выглядеть так:

Наконец, Я добавляю всю схематическую информацию, названия улиц, обозначения основных зданий и любую информацию, относящуюся к городскому дизайну проекта.

Весь этот процесс от начала до конца может занять до 3-6 часов в зависимости от сложности проекта. Мой рабочий процесс значительно улучшился с тех пор, как я реализовал эти простые методы, описанные в этом руководстве.