Как нарисовать окно в фотошопе
В Фотошопе не только редактируются готовые изображения. Одной из задач, которые позволяет выполнить программа – создание изображений/проектов с нуля. И линии одни из важнейших элементов при работе над созданием картинок в Фотошопе. Впрочем, не только линии, но и другие геометрические фигуры. Конкретно создание линий может потребоваться при построении макета сложных объектов, сетки или контура, элементов различной геометрической формы.
В этой статье мы рассмотрим, как же создаются линии в Фотошопе, сопровождая все это подробным описанием всего процесса с приложением скриншотов для вашего удобства.
Создание разных типов линий
Наверняка каждый человек помнит из школьного курса геометрии, что линии бывают различными. Фотошоп не исключение, тут можно нарисовать разные линии: кривые, ломаные, или прямые. Для решения различного рода задач потребуется нарисовать определенную линию.
Обыкновенные прямые линии
Более подробно мы уже рассматривали создание обычной прямой линии в Photoshop в соответствующем уроке: Как нарисовать прямую линию в Photoshop
Поэтому сейчас заострять на этом внимание не будем, а перейдём сразу к следующему разделу.
Создание ломаной линии
Такой тип линии, по сути, это комбинация из нескольких прямых линий. Ломаная линия может быть открытой, или замыкаться, образуя сложный или простой многоугольник. В связи с этим и способы ее построения могут отличаться. Рассмотрим два метода ее построения.
Незамкнутая ломаная линия
Проще всего использовать для создания такой линии инструмент Фотошопа — «Перо».
Отдельная и достаточно подробная статья по инструменту “Перо” в Photoshop в одном из наших уроков: Как пользоваться пером в Photoshop
Это поистине универсальный инструмент, позволяющий нарисовать все что угодно. Будь то простой угол или квадрат, или же фигура с большим количеством граней. Об этом инструменте можно более подробно узнать, перейдя на соответствующую статью, где мы уже рассказывали об этом инструменте.
Чтобы построить нужную нам линию с помощью пера, потребуется выполнить всего два простых шага.
- Отметьте нужное количество опорных точек в требуемых местах.
- После чего требуется обвести контур, который получился. Для этой цели можно использовать любой из доступных инструментов программы. Мы выбрали “Кисть”.
Можно пойти и другим путем. Нарисовать требуемую фигуру путем составления нескольких прямых линий. Для начала рисуем первую прямую линию, которая будет основой.
Далее создаем требуемую фигуру, применяя функцию копирования слоя (вызывается сочетанием клавиш CTRL+J)
и параметра «Свободное трансформирование» (для этого воспользуйтесь сочетанием клавиш CTRL+T).
Создание замкнутой ломаной линии в Фотошопе
Как мы уже говорили выше, ломаные линии бывают двух типов. Замкнутая ломаная – это многоугольник, с любым количеством граней. В Фотошопе существует два метода построения такой фигуры. Наиболее простым способом будет использование специального инструмента программы — «Фигура». Либо же можно создать выделение требуемой формы и затем сделать обводку контура.
Способ №1 — фигура
При использовании этого инструмента будет получена выбранная геометрическая фигура. Стороны и края при этом у нее будут абсолютно равны.
Если нам требуется получить лишь контур данной фигуры, потребуется сделать обводку, называемую соответственно «Обводка». Этот инструмент имеет свои настройки: размер, цвет, длина и интервал штриха. Допустим, возьмем сплошной штрих. Но мы изначально сделали фигуру с обводкой и на скриншоте показали, где выбрать этот параметр. Смотрите рисунок выше.
Но если нам нужно оставить только обводку, то нужно отключить параметр заливка, после чего и получим просто фигуру без фона.
Полученную фигуру можно изменять при помощи инструмента «Свободное трансформирование». Деформируйте и вращайте фигуру для достижения конечного результата сколько угодно раз.
Cпособ №2 — прямолинейное лассо
Используя этот инструмент возможно построить фигуры абсолютно любой сложности и конфигурации. Для этого требуется создать несколько опорных точек и выделить полученную область.
После чего требуется выполнить обводку полученной фигуры. Делается при помощи специальной функции, которую можно вызвать, кликнув правой кнопки мыши по фигуре.
В открывшемся окне можно выставить нужные параметры, такие как размер, цвет и положение контура.
Кликаем “ОК” и получаем результат:
Построение кривой линии
Как и ломаные линии, кривые делятся на два типа: незамкнутые и замкнутые. Для построения кривой в программе Photoshop существует множество инструментов и способов.
Незамкнутая кривая
Для построения такой линии есть всего один инструмент — «Перо» ( с последующей обводкой). Либо же можно нарисовать такую линию вручную.
Замкнутая кривая
Для создания замкнутой кривой фигуры в Фотошопе существует целых три способа.
Лассо
При помощи лассо возможно создание кривых абсолютно любой конфигурации. Необходимо сделать выделение при помощи этого инструмента. А затем обвести контур любым доступным инструментом.
Овальная область
При использовании этого инструмента мы получим овальную область. Снова делаем обводку. Затем этот овал можно изменять при помощи «Свободного трансформирования», о котором мы ранее говорили. Нажмите для вызова этой функции CTRL+T. На появившейся сетке можно легко изменять фигуру и добиться требуемой формы.
Фигура
Возьмем инструмент — «Эллипс». В верхнем меню выставим требуемые настройки и создаем фигуру – овал.
После чего полученную окружность можно изменять, для получения нужной формы. Для этого выбираем “Деформацию” и творим.
Результат после применения деформации:
На этом все. Мы показали вам, как различными способами создать линии в программе Фотошоп. Эти навыки пригодятся при построении различных сеток, контуров и макетов.
Шаг 1. Выбираем конструкцию окна.
Находим изображение с необходимой конструкцией будущего окна.
Совет: Если вы только учитесь, вам будет сложно придумать всё абсолютно с нуля. Поэтому всегда старайтесь пользоваться готовыми примерами и решениями, чтобы вам легче было рисовать составные элементы, тени и свет.
Я выбрал данный пример окна:
Шаг 2. Рисуем заготовку.
С помощью простых геометрических фигур, линий и прямоугольников рисуем заготовку будущего окна.
Шаг 3. Обрабатываем подоконник и откос окна.
С помощью градиентов добавляем подоконнику объём. Для этого мы выделяем область с подоконником. Выставляем градиент «Linear Gradient» с переходом от определённого цвета в прозрачность. А затем заливаем 2 градиента, тёмный и светлый, чтобы собственно придать объём. При этом тёмный градиент мы пускаем с дальней части подоконника в ближнюю, а светлый наоборот. На скриншоте я обозначил тональность (светлую и тёмную) градиентов и их примерную траекторию. Небольшой уголок затираем, т.к. свет у нас будет падать из окон.
Далее таким же способом заливки градиентов обрабатываем оконный откос, чтобы придать ему объём. Сначала верхнюю часть:
Затем боковые и нижнюю части. В результате таких действий у меня получилось немного удалённое вдаль окно.
Опять же напоминаю, что цвета и траекторию градиентов я точно указывать не буду, т.к. конструкция, падающий свет и тени вашего окна могут значительно отличатся от моего, поэтому по шаблону делать тут не получится и вам придётся ориентироваться по собственному примеру. Я лишь показываю технологию обработки света и теней, а так же добавления объёма с помощью полупрозрачных градиентов различной тональности.
Шаг 4. Рисуем падающий свет.
Определяем источник света и пускаем свет и тень от рамы нашего окна на подоконник и откос.
Шаг 5. Рисуем створки окон.
Т.к. створки являются подвижными элементами окна, они будут располагаться немного ближе чем сама рама, следовательно их заливаем более светлым цветом и располагаем под слоями падающего света, чтобы не нарушить общий тон картины. Так же не забываем добавить объём примерно в 2px и тень Drop Shadow, как показано на скриншоте:
Шаг 6. Рисуем окна.
Тут ничего сложного нет, главное немножко подружиться с перспективой и нарисовать пару тёмных и светлых линий, которые придадут объём и небольшую толщину нашим окнам. Пользуясь готовым примером это несложно сделать.
Находим какой-нибудь красивый пейзаж и вставляем его в наши окна. Я его немного размыл, т.к. мне нужно было сосредоточить всё внимание в данной работе на самом окне а не на красивом пейзаже за окном, поэтому размывать необязательно. Саму картинку можно немного осветлить, по желанию можно добавить резкие глянцевые блики для создания стеклянной поверхности.
Шаг 7. Рисуем фурнитуру окон.
Это будут ручки и подвижные крепления створок окон. Так как они небольшие, поэтому лучше выполнять эти элементы в пиксельном формате. Тогда все детали будут более чёткими и детализированными.
Шаг 8. Завершающие действия.
Для украшения окна я решил добавить растение в горшке, яркие лучи солнца и некоторые фоновые эффекты. Но не стоит ограничиваться моими вариантами, всегда старайтесь экспериментировать и добавлять что-нибудь своё. Успехов в вашем творчестве
Создайте свой собственный фотомонтаж Открытое окно конечно Pixiz.
Шаг 1
Откройте изображение (Ctrl+O /либо просто перенесите в программу) изображение, которое прилагается к уроку.
Примечание переводчика: у автора, это изображение старого поезда, но вы можете использовать своё изображение. Для этого урока подойдут фотографии чердаков, сараев, комнат или других подобных помещений, где такие лучи будут к месту.
Примечание переводчика: вы можете использовать любой цвет, который посчитаете нужным.
Чтобы разблокировать Pixiz в вашем блокировщике рекламы:
1. Нажмите на значок блокировки рекламы в правом верхнем углу браузера:
2. Затем нажмите кнопку деактивации.
Окно с узорами
Начнем с довольно необычного примера, который продемонстрирует как нарисовать окно с узорами. Для его рисования нам понадобятся карандаши, ластик, чистая бумага и немного свободного времени.
Сначала рисуем ничем не примечательное обычное окно. В нем будет три стекла: два из них обычные прямоугольные и вертикальные, а находящееся стекло сверху будет горизонтальным. К тому же, верхняя часть должна получится округлой.
По бокам изображаем открытые створки. Это самый сложный этап, так как внутри них вам нужно изобразить объемное пространство. Сделать это непросто, особенно начинающим художникам, но если вы постараетесь, то у вас обязательно всё получится.
Сверху рисуем узоры, именно они и придадут фишку этому окну. Рекомендуем сначала изобразить внешние контуры, а затем поработать над их внутренней частью.
Точно по такому же принципу работаем и над узорами снижу. Но в данном случае, они начинаются не сразу от стекла. Между ними будет небольшая подставка. Нарисовав ее и узоры рисунок можно будет считать завершенным.
Рама нужна для того, чтобы соединять стекла. Кроме того, с ее помощью окно крепится к стене.
Шаг 2
Используя инструмент Free Transform (Свободное трансформирование) (Ctrl+T) и выбрав, после нажатия правого клика на выделенной области Distort (Дисторсия) и Perspective (Перспектива), трансформируйте слой с заливкой также, как на скриншоте.
1. Добавляем Кисть в Photoshop
Шаг 1
ИдёмРедактирование – Наборы – Управление наборами (Edit > Presets > Preset Manager). В окне Управление наборами (Preset Manager), в выпадающем меню Тип набора (Preset Type), выберите опцию Кисти (Brushes), а затемнажмите кнопку Загрузить (Load).
В появившемсяокне навигации, выберите исходный файл FakeWindow.atn, которыйвключён в скачиваемое приложение. Далее, нажмите кнопку Выполнить (Done).
Шаг 2
Выберитеинструмент Кисть (Brush Tool (B). В панели управления данного инструмента. Убедитесь,чтобы Непрозрачность (Opacity) и Нажим (Flow)кисти были установлены на 100%.
Разделяем стекла
Далее делим окно на две части. Для этого можете измерить длину верхней стороны и поставить точку в центре, где и проведете линию.
Вторую такую же линию нарисуйте на маленьком расстоянии от первой.
Придаем ножкам объем
Украсьте подоконник короткими вертикальными линиями, а ножкам придайте объем.
При помощи инструмента Эллипс (Elipse Tool) или Овальное Выделение (Eliptical Marquee Tool) рисуем овал любого цвета.
Теперь начинаем превращать простой овал в зеркало!
Применяем к слою с овалом (если овал нарисован при помощи формы, лучше растрировать слой – ПКМ-растрировать слой-Rasterize layer) следующие Стили слоя (Layer-Layer Style):
Так мы сделали фацет зеркала.
В зеркалах что-то обычно отражается…. Как ни странно )))))
Добавим отражение окна.
Используя инструмент Прямоугольное выделение (Rectangular Marquee Tool), рисуем белый прямоугольник на Новом слое.
А затем, с помощью этого же инструмента вырезаем ненужные детали (используем Выделение -Трансформация выделения – Select-Transform Selection).
Форму окна можете выбирать сами.
Применяем Фильтр-Размытие по Гауссу (Filter-Blur-Gaussian Blur) радиусом 15pix. И ставим Непрозрачность (Opacity) слоя 85%.
Немного искажаем окно при помощи Трансформации Искажения (Edit-Transform-Distort).
Копируем слой с окном. Убираем видимость копии.
А теперь удаляем лишние части вокруг зеркала.
Для этого, переходим на слой с малым овалом, создаём выделение этого слоя (Ctrl+клик по иконке слоя), инвертируем полученное выделение (Shift+Ctrl+I) и на слое с окном жмём Удалить-Delete.
Вот что получается.
Делаем видимой копию слоя с искаженным окном и отражаем по вертикали Правка-Трансформация-Отразить по вертикали (Edit-Transform-Flip Vertical).
Состыковываем отражение окна на зеркале и на поверхности. Этот слой будет называться Светлое пятно 1.
Создаём выделение слоя Светлое пятно (находясь на слое, Ctrl+клик по иконке слоя), инвертируем выделение и удаляем лишние детали слоя Светлое пятно 1.
Непрозрачность (Opacity) для этого слоя делаем 30%.
И опять используя инструмент овальное выделение (Eliptical Marquee Tool), рисуем как показано на скриншоте с растушевкой 45pix:
Инвертируем полученное выделение (Shift+Ctrl+I).
И Ластиком (Eraser Tool) с Непрозрачностью (Opacity) 50% мягкой кистью немного стираем на слоях Светлое пятно и Светлое пятно 1.
С самим зеркалом мы закончили.
Но хочется чего-то добавить… слышали, наверное, про украшение зеркал кусочками запеченного стекла? Фьюзинг называется. Так вот, это и нарисуем. Вперёд …)))
При помощи инструмента Перо (Pen Tool) рисуем листик (контур лучше сохранить, чтобы рисовать только один раз – двойной клик по контуру).
И на Новом слое (над зеркалом) рисуем незамысловатый орнамент.
При выбранном инструменте - Direct Selection Tool и активном контуре, находясь на новом слое, кликаем ПКМ и выбираем Заливка – Fill…).
На стекло пока не похоже… ))))
Поэтому, для большей правдоподобности, применяем Фильтр Текстура (Filter-Texture-Texturizer):
И немного ослабляем эффект применения фильтра: Правка-Ослабить Текстуру – Edit - Fade - Texturizer (уменьшаем процент). Этот шаг делается сразу после применения фильтра!
Не помешало бы и объём стекла показать (добавляем Стили слоя):
И Непрозрачностью (Opacity) слоя снизить примерно до 90%.
Ну, вот! Работа выполнена! Оценивайте результат!
Можно немного приглушить белую обводку в темных частях зеркала.
В этом уроке вы узнаете, как получить кинематографический фотоэффект с созданием рассеянного света из окна.
Сложность урока: Легкий
В этом уроке, автор покажет нам, как создать кинематографический эффект рассеянного света с использованием световых лучей.
Создать такой вид световых лучей довольно несложно. Также, они могут придать изображению необходимую глубину и улучшить рассеянный свет.
Итак, давайте начнём!
Шаг 1
Откройте изображение (Ctrl+O /либо просто перенесите в программу) изображение, которое прилагается к уроку.
Примечание переводчика: у автора, это изображение старого поезда, но вы можете использовать своё изображение. Для этого урока подойдут фотографии чердаков, сараев, комнат или других подобных помещений, где такие лучи будут к месту.
Далее, создайте новый слой (Shift+Ctrl+N) и, при помощи инструмента Pen Tool (Перо) (P), либо Poligonal LassoTool (Полигональное лассо) (L), создайте прямоугольное выделение в том месте, где находится ближнее к нам окно.
Примечание переводчика: при использовании инструмента Pen Tool (Перо) (P), после создания контура, сделайте правый клик и выберите Make Selection (Образовать выделенную область). Радиус Feather (Растушёвки) оставьте на 0 px.
Примечание переводчика: вы можете использовать любой цвет, который посчитаете нужным.
Шаг 2
Используя инструмент Free Transform (Свободное трансформирование) (Ctrl+T) и выбрав, после нажатия правого клика на выделенной области Distort (Дисторсия) и Perspective (Перспектива), трансформируйте слой с заливкой также, как на скриншоте.
Шаг 3
Далее, давайте смягчим получившийся «луч» света при помощи фильтра размытия. Автор использовал фильтр Box Blur (Размытие по рамке). Также, можно попробовать применить фильтр Gaussian Blur (Размытие по Гауссу), который применяет к изображению довольно неплохой результат. Для применения одного из двух фильтров нужно перейти в Filter – Blur (Фильтр - Размытие) и выбрать из двух вариантов наиболее вам понравившийся, с тем радиусом, который указан на скриншоте:
Затем нужно применить Layer Mask (Маску слоя) к слою с размытым лучом и создать почти полноценный луч света из окна. Для этого, при помощи чёрно-белого инструмента Gradient (Градиент), протяните градиент прямо по лучу света слева направо по всей длине луча, как на скриншоте. После этого, уменьшите Opacity (Непрозрачность) этого слоя до 50% и мы получим нужный результат:
Шаг 4
Теперь повторите то же самое со всеми источниками света, откуда он должен падать.
Примечание переводчика: если остаются какие-то лишние участки от лучей, вы запросто можете удалить их при помощи инструмента Brush Tool (Кисть) (B) на маске слоя. Также, вы можете поиграть с режимами наложения, чтобы лучи казались мягче, либо насыщеннее, либо как-то ещё… Для таких целей подойдут Screen (Экран), Soft Light (Мягкий свет), Overlay (Перекрытие). Ещё можно использовать различные варианты размытия, для того, чтобы свет был более либо менее рассеянным.
По окончанию работы с лучами, выделите все слои и объедините в одну группу Ctrl+G.
Если вы хотите добавить цвет для лучей, используйте Layer Style (Cтиль слоя) Color Overlay (Наложение цвета) сразу для всей группы, и примените такие же настройки, как на скриншоте.
…а также, примените корректирующий слой Color Lookup (Поиск цвета) в самом верху палитры слоёв, с Opacity (Непрозрачностью) слоя - 60%.
Шаг 5
Теперь, давайте добавим корректирующий слой Curves (Кривые) и применим такие же настройки, как на скриншоте:
Шаг 6
Далее, автор добавляет эффект появления пыли. Для этого, откройте (Ctrl+O) либо просто перенесите в документ файл dust-particle (8) и измените его режим наложения на Screen (Экран). Затем, уменьшите изображение с пылью на четверть по размерам изображения и продублируйте (Ctrl+J) ещё 3 раза для того, чтобы поставить это изображение в остальные 3 части документа. После того, как вы разместили все 4 части с пылью на документе, можете снова выделить выделить их и объединить их в одну группу (Ctrl+G).
И вот наш финальный результат:
Надеюсь, что благодаря этому маленькому и несложному уроку вы научитесь быстро создавать лучи света, а также легко редактировать его.
Читайте также: