Как делать архитектурную подачу в фотошопе
Когда Adobe анонсировал появление в новой версии Photoshop СС 2015 долгожданной функции артбордов (или как их еще называют — монтажные области), значительная часть дизайнерского сообщества, включая меня, чуть не умерли от счастья!
Если вы не понимаете, почему появление артбордов в Photoshop — это великое событие, то, скорее всего, вы не занимаетесь ни веб-дизайном, ни созданием мобильных приложений.
Ключевая функция артбордов — быстрое переключение между разрабатываемыми экранами приложения или страницами вебсайта, без необходимости переключения между открытыми вкладками документов (как это было всегда).
Таким образом, в одном .PSD-файле вы сразу можете видеть 10, 20, 30 или сколько вам нужно, открытых экранов приложения или страниц сайта.
Чтобы помочь вам освоить этот новый инструмент (почти во всех прочих продуктах от Adobe он уже давно есть), мы собрали 4 полезных приема-совета, поняв и освоив которые, вы с легкостью начнете владеть артбордами в Photoshop.
Навигация между артбордами
Представим, вы давно работаете над каким-то проектом, и у вас накопилось более десятка рабочих областей с различными экранами мобильного приложения. Но как быстрее всего переключаться между ними, да еще и точно на тот артборд, который вам нужен?
Во вкладке Layers (Слои), нажмите с зажатой клавишей Option (Alt на Win) на нужный вам артборд и он окажется посередине экрана.
Свернуть/развернуть все артборды
Несмотря на то, что артборды — это новая функция, способ их отображения — нет. По факту, артборды переняли смысл функции “группировка”, тем самым объединив все объекты с одного артборда в единую группу.
Чтобы просмотреть объекты, расположенные на том или ином артборде, все в той же панели Layers, с зажатой клавишей Cmd (Ctrl на Win), нужно нажать на стрелочку рядом с любым пунктом.
Создать артборд из группы
Даже если вы начали свой проект не с создания монтажной области, а сразу приступили к прототипированию или отрисовке, вы всегда сможете создать артборд из сгруппированных объектов.
Для этого, выберите группу объектов в панели Layers, кликните по ней правой кнопкой и нажмите “Artboard from Group”.
Быстрый экспорт выбранного артборда в PNG
Для пользователей Illustrator или Sketch или многих других графических редакторов, подобная возможность — не нова. Но для Photoshop — это крутое нововведение :)
Функция быстрого экспорта любого выбранного артборда (или нескольких) доступна во вкладке Layers по нажатию правой кнопкой мыши — “Quick Export as PNG”.
Функция очень удобная, особенно если нужно показать кому-то работу над определенной частью приложения или опубликовать процесс на Dribbble, например.
Быстрая работа и предельная аккуратность
Новые функции в Photoshop CC 2015 призваны ускорить и облегчить работу веб-, графических и мобильных дизайнеров. Теперь группировать объекты стало проще, а необходимости в излишних слоях — меньше.
При условии, что сами слои никуда не делись, а появились новые возможности позиционировать неограниченное число вариантов дизайна в одном .PSD-файле — в компании Adobe уверены, что смогут вернуть потерянный интерес со стороны дизайнерского сообщества к использованию Photoshop в разработке мобильных приложений.
В этом уроке вы научитесь создавать потрясающий эффект архитектурного наброска. Я объясню процесс в мельчайших деталях, так что повторить его сможет любой, и даже тот, кто открыл Photoshop впервые.
Примечание: Автор использовал платные материалы. В архиве вы найдёте альтернативный вариант шрифта для выполнения урока.
1. Давайте начнем
Для начала откройте фотографию, с которой вы хотите работать. Чтобы это сделать, нажмите File > Open (Файл > Открыть), выберите фото и нажмите Open (Открыть). Ну а теперь, прежде, чем мы приступим, проверьте кое-что:
- Ваше фото должно быть в цветовом режиме RGB, 8 бит на канал. Чтобы проверить это, нажмите Image>Mode (Изображение > Режим).
- Для получения наилучшего результата, выберите изображение приблизительно 2000/4000 в ширину/высоту. Чтобы проверить это, нажмите Image>ImageSize (Изображение > Размер изображения).
- Ваше фото должно быть фоновым слоем. Если это не так, нажмите Layer>New>BackgroundfromLayer (Слой > Новый > Слои из заднего плана).
2. Как создать фон
Шаг 1
Шаг 2
Кликните правой кнопкой мыши по этому слою, выберите Blending Options (Параметры наложения), выберите Gradient Overlay (Наложение градиента) и настройте стиль слоя, как на изображении ниже:
Примечание переводчика: настройки стиля слоя на скриншоте: Режим наложения: Мягкий свет; Непрозрачность: 50%; Градиент: Черный, белый; Инверсия; Выровнять по слою; Угол: 90 градусов; Масштаб: 100%
3. Как создать основной набросок
Шаг 1
В этой секции мы создадим основной набросок. Выберите фоновый слой и нажмите Control-J на клавиатуре, чтобы его продублировать. Затем перетащите этот слой наверх на панели слоев.
Шаг 2
Теперь нажмите Control-Shift-U на клавиатуре, чтобы обесцветить этот слой. Далее, нажмите Image > Adjustments > Levels (Изображение > Коррекция > Уровни) и введите значения со скриншота:
Шаг 3
Назовите этот слой Temp (Временный) и нажмите Control-J на клавиатуре, чтобы его продублировать.
Как презентовать проект так, чтобы заказчик понял идею и принял концепцию без правок? Ваша подача должна быть максимально детальной и передавать нужную атмосферу.
О трендах и табу в подаче дизайнерских и архитектурных проектов подробнее вам расскажет Анастасия Анохина — архитектор, эксперт Space School и автор курса Photoshop для архитекторов, дизайнеров интерьера, визуализаторов .
Какую подачу можно считать хорошей
Та, что понравилась вашему заказчику.
Дайте ему возможность ощутить себя внутри проекта. А для этого продемонстрируйте ему контекст. Если мы говорим про архитектурную подачу, то это не просто здание в каком-то гипотетическом месте, а архитектура в комплексе с окружающей средой: ландшафт, соседние здания, прохожие на улицах — вот такие детали делают подачу более живой и динамичной.
Тренд № 1. Коллаж как лучший инструмент на начальном этапе работы
Дизайнеры и архитекторы использовали коллажи и раньше. Но именно сейчас коллажи вышли на первый план. И не просто так!
- Коллаж отлично передает идею и атмосферу проекта. Может быть таким же информативным и эффектным, как и 3D-визуализация.
- Коллаж можно быстро подготовить в Photoshop. Работа занимает часы, а не дни и недели.
- В коллаж можно оперативно вносить любые правки.
Тренд № 2. Стилизованная подача
Декоративная композиция, где главным элементом остается архитектура, а её дополняют абстрактные элементы природы, ландшафта, среды.
Стилизованный коллаж производит яркое впечатление, отлично передаёт атмосферу проекта, а значит, запоминается.
Тренд № 3. Сюжетность подачи
Лучше всего мы запоминаем истории.
Посмотрите на этот коллаж. На первом плане парк, где играют дети. Чуть вдали мы видим велосипедиста. На заднем плане — горы. Мы уже как будто находимся там! Ассоциируем себя с персонажами, потому что они не статичны, а взаимодействуют с окружающей средой.
А ваша подача рассказывает историю?
Как научиться создавать эффектную подачу проектов?
В онлайн-школе 3D визуализации и дизайна Space School мы обучаем самым востребованным специальностям индустрии и помогаем нашим ученикам составить крутое портфолио и найти первых заказчиков.
Как узнать про курсы и записаться?
Просто переходите в чат и оставляйте заявку . Подберем для вас лучший вариант обучения, ответим на все вопросы!
Подборка уроков по программе Adobe Photoshop для архитекторов: пост-обработка визуализаций, доработка и устранение недочетов рендера, подготовка работы к публикации в портфолио и множество других тем.
Будет полезно изучить как практикующим архитекторам, так и дизайнерам, в чьи задачи входит частая обработка архитектурных фотографий: задача сложнее, чем с визуализацией, однако, принципы работы схожи.
Architectural Visualization Render | Photoshop Post Production | Time lapse short
Architectural Visualization Render | Photoshop Post Production | Time lapse short 2
Architectural Visualization Render | Photoshop Post Production | Time lapse short 3
Architecture Visualization Render | Photoshop Post Production 1
Architecture Visualization Render | Photoshop Post Production 2
Architecture Visualization Render | Photoshop Post Production 3
Architecture Visualization Render | Photoshop Post Production 4
Architecture Visualization Render | Photoshop Post Production 5
Architecture Visualization Render | Photoshop Post Production 6
Architecture Visualization Render | Photoshop Post Production 7
Architecture Visualization Render | Photoshop Post Production 8
Architecture Visualization Render | Photoshop Post Production 9
Advanced Post Production Techniques: White Interior
Photoshop Tutorial : Architectural night Perspectives
Photoshop retouching night view
Advanced Post Production Techniques in Photoshop : Winter Scene
ARCHITECTURAL: Interior Post Production
Rendering and Post production 3dsmax Architectural visualization
[Night Scene] Photoshop architecture rendering tutorial : Day to night
Illustrating an Architectural Plan in Photoshop – Narrated Full Tutorial – Realtime
Architectural Post Processing in Photoshop
Photoshop Visualization for Architecture [House blue]
Advanced Post Production Techniques in Photoshop : Glen Lake House
Architectural Illustrations: Quick Sections
Site Plan Rendering in Photoshop
ARCHITECTURE PORTFOLIO TUTORIAL: ADDING TEXT
Photoshop – interior render enchancement
Architectural Interior Elevations Tutorial
Architecture Portfolio Tutorial: Initial Setup and Adding Images
ARCH MODEL PIC EDITING TUTORIAL
Architecture Illustrations: Landscape via Photoshop
В этом уроке вы научитесь создавать потрясающий эффект архитектурного наброска.
Сложность урока: Средний
В этом уроке вы научитесь создавать потрясающий эффект архитектурного наброска. Я объясню процесс в мельчайших деталях, так что повторить его сможет любой, и даже тот, кто открыл Photoshop впервые.
Примечание: Автор использовал платные материалы. В архиве вы найдёте альтернативный вариант шрифта для выполнения урока.
1. Давайте начнем
Для начала откройте фотографию, с которой вы хотите работать. Чтобы это сделать, нажмите File > Open (Файл > Открыть), выберите фото и нажмите Open (Открыть). Ну а теперь, прежде, чем мы приступим, проверьте кое-что:
- Ваше фото должно быть в цветовом режиме RGB, 8 бит на канал. Чтобы проверить это, нажмите Image>Mode (Изображение > Режим).
- Для получения наилучшего результата, выберите изображение приблизительно 2000/4000 в ширину/высоту. Чтобы проверить это, нажмите Image>ImageSize (Изображение > Размер изображения).
- Ваше фото должно быть фоновым слоем. Если это не так, нажмите Layer>New>BackgroundfromLayer (Слой > Новый > Слои из заднего плана).
2. Как создать фон
Шаг 1
Шаг 2
Кликните правой кнопкой мыши по этому слою, выберите Blending Options (Параметры наложения), выберите Gradient Overlay (Наложение градиента) и настройте стиль слоя, как на изображении ниже:
Примечание переводчика: настройки стиля слоя на скриншоте: Режим наложения: Мягкий свет; Непрозрачность: 50%; Градиент: Черный, белый; Инверсия; Выровнять по слою; Угол: 90 градусов; Масштаб: 100%
3. Как создать основной набросок
Шаг 1
В этой секции мы создадим основной набросок. Выберите фоновый слой и нажмите Control-J на клавиатуре, чтобы его продублировать. Затем перетащите этот слой наверх на панели слоев.
Шаг 2
Теперь нажмите Control-Shift-U на клавиатуре, чтобы обесцветить этот слой. Далее, нажмите Image > Adjustments > Levels (Изображение > Коррекция > Уровни) и введите значения со скриншота:
Шаг 3
Назовите этот слой Temp (Временный) и нажмите Control-J на клавиатуре, чтобы его продублировать.
Шаг 4
А теперь нажмите Control-I на клавиатуре, чтобы инвертировать данный слой и измените его режим наложения на Color Dodge (Осветление основы). Далее, нажмите Filter > Other > Minimum (Фильтр > Другое > Минимум), измените Radius (Радиус) на 2 пикселя и Preserve (Сохранить) на Squareness (Прямоугольность), как показано ниже:
Шаг 5
Зажмите Control и кликните по слою Temp (Временный), чтобы выбрать оба слоя одновременно. Затем нажмите Control-E на клавиатуре, чтобы объединить два слоя в один.
Шаг 6
Измените режим наложения этого слоя на Multiply (Умножение) и назовите его Main Sketch (Основной набросок).
4. Как создать набросок в перспективе
Шаг 1
В этой секции мы создадим набросок в перспективе. Выберите фоновый слой и нажмите Control-J на клавиатуре, чтобы его продублировать. Затем перетащите этот слой наверх на панели слоев.
Шаг 2
Теперь нажмите Filter > Stylize > Find Edges (Фильтр > Стилизация > Выделение краев), а затем Control-Shift-U на клавиатуре, чтобы обесцветить этот слой.
Шаг 3
Нажмите Filter > Blur > Motion Blur (Фильтр > Размытие > Размытие в движении), измените Angle (Угол) на 90 градусов, а Distance (Смещение) на 1200 пикселей, как показано ниже:
Шаг 4
А сейчас нажмите Filter > Sharpen > Smart Sharpen (Фильтр > Усиление резкости > «Умная» резкость) и введите настройки со скришота ниже:
Примечание переводчика: настройки на скриншоте: Набор: Заказной; Эффект: 500%; Радиус: 64 пикселя; Уменьшить шум: 10%; Удалить: Размытие по Гауссу; Тени: Ослабление эффекта: 50%; Ширина тонового диапазона: 50%; Радиус: 50 пикселей; Света: Ослабление эффекта: 50%; Ширина тонового диапазона: 50%; Радиус: 50 пикселей.
Шаг 5
Нажмите Filter > Filter Gallery > Sketch > Photocopy (Фильтр > Галерея фильтров > Эскиз > Ксерокопия), измените параметр Detail (Детализация) на 2, а Darkness (Затемненность) на 5.
Шаг 6
Измените режим наложения этого слоя на Multiply (Умножение), а непрозрачность - на 40%. После переименуйте этот слой в Perspective_Sketch_1 (Перспективный_Набросок_1).
Шаг 7
Далее нажмите Layer > Layer Mask > Hide All (Слой > Слой-маска > Скрыть все), чтобы добавить слой-маску, которая скроет весь слой.
Шаг 8
Шаг 9
А сейчас выберите фоновый слой и нажмите Control-J на клавиатуре, чтобы его продублировать. Далее, перетащите этот слой под слой Perspective_Sketch_1 (Перспективный_Набросок_1) на панели слоев.
Шаг 10
Нажмите Filter > Stylize > Find Edges (Фильтр > Стилизация > Выделение краев), а затем Control-Shift-U на клавиатуре, чтобы обесцветить этот слой.
Шаг 11
Нажмите Filter > Blur > Motion Blur (Фильтр > Размытие > Размытие в движении), измените Angle (Угол) на 0 градусов, а Distance (Смещение) на 1200 пикселей, как показано ниже:
Шаг 12
Теперь нажмите Filter > Sharpen > Smart Sharpen (Фильтр > Усиление резкости > «Умная» резкость) и введите настройки со скришота ниже:
Примечание переводчика: настройки на скриншоте: Набор: Заказной; Эффект: 500%; Радиус: 64 пикселя; Уменьшить шум: 10%; Удалить: Размытие по Гауссу; Тени: Ослабление эффекта: 50%; Ширина тонового диапазона: 50%; Радиус: 50 пикселей; Света: Ослабление эффекта: 50%; Ширина тонового диапазона: 50%; Радиус: 50 пикселей.
Шаг 13
Нажмите Filter > Filter Gallery > Sketch > Photocopy (Фильтр > Галерея фильтров > Эскиз > Ксерокопия), измените параметр Detail (Детализация) на 2, а Darkness (Затемненность) на 5.
Шаг 14
Измените режим наложения этого слоя на Multiply (Умножение), а Opacity (непрозрачность) - на 55%. После переименуйте этот слой в Perspective_Sketch_2 (Перспективный_Набросок_2).
Шаг 15
Далее нажмите Layer > Layer Mask > Hide All (Слой > Слой-маска > Скрыть все), чтобы добавить слой-маску, которая скроет весь слой.
Шаг 16
5. Как создать текст
Шаг 1
Шаг 2
Кликните дважды по миниатюре этого слоя, чтобы сделать текст редактируемым и удалите его часть. Затем, выберите инструмент Move (Перемещение) (V), кликните и потяните в любом месте холста, чтобы расположить текст, как показано ниже:
Шаг 3
А сейчас переименуйте этот слой в Text_1 (Текст_1). После нажмите Control-J на клавиатуре, чтобы продублировать данный слой.
Шаг 4
Кликните дважды по миниатюре этого слоя, чтобы сделать текст редактируемым, нажмите Control-A, чтобы выбрать весь текст, а затем нажмите Type > Paste Lorem Ipsum (Текст > Вставить Lorem Ipsum), чтобы вставить случайный отрывок текста. После этого удалите часть текста, выберите инструмент Move (Перемещение) (V), кликните и потяните в любом месте холста, чтобы расположить текст, как показано ниже:
Шаг 5
Назовите этот слой Text_2 (Текст_2) и перетяните его под слой Text_1 (Текст_1) на панели слоев. После нажмите Control-J на клавиатуре, чтобы продублировать данный слой.
Шаг 6
Теперь кликните дважды по миниатюре этого слоя, чтобы сделать текст редактируемым, нажмите Control-A, чтобы выбрать весь текст, а затем нажмите Type > Paste Lorem Ipsum (Текст > Вставить Lorem Ipsum), чтобы вставить случайный отрывок текста. После этого удалите часть текста, выберите инструмент Move (Перемещение) (V), кликните и потяните в любом месте холста, чтобы расположить текст, как показано ниже:
Шаг 7
Нажмите Control-T на клавиатуре, чтобы трансформировать этот слой и выберите вращение на 15 градусов.
Шаг 8
Назовите этот слой Text_3 (Текст_3) и перетяните его под слой Text_2 (Текст_1) на панели слоев.
6. Как внести последние изменения
Шаг 1
В этой секции мы внесем последние изменения в работу. Нажмите D на клавиатуре, чтобы вернуть цвета к исходным и выберите слой Text_1 (Текст_1). Далее, нажмите Layer > New Adjustment Layer > Gradient Map (Слои > Новый корректирующий слой > Карта градиента), чтобы создать новый корректирующий слой Карта градиента и назовите его Overall Contrast (Общий Контраст).
Шаг 2
Теперь измените режим наложения этого слоя на Soft Light (Мягкий свет), а непрозрачность - на 35%.
Шаг 3
Нажмите Layer > New Adjustment Layer > Levels (Слои > Новый корректирующий слой > Уровни), чтобы создать новый корректирующий слой Уровни назовите его Overall Brightness (Общая Яркость).
Шаг 4
Дважды кликните по миниатюре этого слоя и, на панели свойств, введите значение со скриншота ниже:
Шаг 5
Нажмите Control-Alt-Shift-E на клавиатуре, чтобы сделать скриншот. Затем, нажмите Filter > Other > High Pass (Фильтр > Другое > Цветовой контраст) и измените значение параметра Radius (Радиус) на 2 пикселя, как показано ниже:
Шаг 6
Измените режим наложения этого слоя на Hard Light (Жесткий свет). Затем переименуйте этот слой в Overall Sharpening (Общая Резкость).
Читайте также: