Оформление в фотошопе подача проектов. Архитектурная Тематика В Веб-Дизайне И Создание Чертежей В Photoshop

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

Каждый фотограф сталкивается с проблемой широкого динамического диапазона, и архитектурные фото не являются исключением, хотя они и требуют зачастую лишь 3-х кадров. Но фото, приведенное в примере, потребовало 9-ти снимков-исходников с брекетингом экспозиции -2, 0 и +2. Также многие фотографы делают заведомо большее количество кадров, чтобы избавиться от людей на снимках.

Несколько советов:

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

Камера

Для архитектурных снимков хорошо подходят камеры типа Canon 5D Mark II, который в совокупности с, например, тилт-шифт объективом 17mm TS-E дает прекрасный результат. Неплохо иметь с собой и пару запасной оптики. В случае, если последняя линза вашего объектива впуклая и ограничивает возможность применения фильтра, на помощь придет брекетинг экспозиции.

Компьютер и монитор

Компьютер должен быть мощным, обладающим достаточным количеством оперативной памяти (неплохо иметь около 24 гб), ведь RAW снимки порой «весят» до гигабайта. Монитор калибруется перед любой серьезной корректурой для наилучшей цветопередачи и, как следствие, объективно оценки изображения.

Импорт изображений

Для импорта многие любят использовать Lightroom, iPhoto, Picassa и другие приложения, однако профессионалы предпочитают полный контроль над ситуацией, чего и добиваются ручным импортом изображений.

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

Отбор фотографий

Хорошей рабочей лошадкой многих профессионалов является Adobe CS5. Предпросмотр же наиболее удобен в Bridge, где справа отмечены среди всех выбранные вами файлы, а слева при помощи фильтра можно вывести отдельно выбранный материал.

Camera Raw

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

Еще немного советов:

  • Проверьте, что работаете в том же цветовом пространстве, что и в камере. Чаще используется Adobe RGB. Используйте максимально качественные исходники, переконвертировать в нужный вам формат можно и потом;
  • Редактируйте в режиме 16 бит;
  • Выставите баланс белого по наиболее удачно экспонированной фотографии;
  • При горячих пикселях поможет ползунок «Возврат» (Recovery). При нажатии сочетания + при перемещении ползунка вы увидите пиксели на черном фоне;
  • Если вы были вынуждены слишком сильно выдвинуть ползунок возврат, компенсируйте это выдвижением «Экспозиции»
  • Подобный алгоритм используйте и при работе с уровнем черного, чтобы не было вылетов
  • Выделив после вышеописанных манипуляций все снимки синхронизируйте баланс белого на них с помощью меню
  • Последним шагом станет открытие всех изображений в фотошопе.

Работа в Photoshop

Алгоритм ретуши в фотошоп довольно несложен. Итак:

  • Объединяем изображения с брекетингом экспозиций в одно
  • Состыковываем изображения, составляющие панораму
  • Сохраняем в формате psd наш результат
  • Используем маски для обработки отдельных частей фото дополнительно
  • Сохраняем изображение со всеми слоями
  • Объединяем сиев, при необходимости - кадрируем
  • Работаем с резкостью
  • Сохраняем новую версию в psd под другим именем
  • Изменение до нужного размера
  • Преорбазуем пространство в srgb, а глубину меняем на 8 бит
  • Сохраняем в растровом формате, используем свои обозначения для удобства

Ручное смешивание слоев

Для начала вставим в один проект все кадры, экспонированные по-разному. Используя Файл - Скрипты- Загрузить файлы в стэк (File > Scripts > Load Files Into A Stack) можно сделать это автоматически.

Не стоит бояться выделения и работы с масками! На примере показан инструмент быстрого выделения. Оно поначалу неточно, потому стоит откорректировать область выделения следующим образом: жмите на кнопку «Уточнить край» (Refine Edge), в контекстном меню Просмотр» (View) в верхней части диалога «Уточнение края» выберем «Наложение» (Overlay). Так включается использование красной маски, удобной для просмотра как выделения, так и не вошедшей в него области.

При помощи кисти (Refine Radius Tool brush) вручную уточним край выделения, смело пройдясь по нему курсором с кистью. Жмем ОК.

Создаем маску нажатием «Добавить векторную маску» (Add Vector Mask). В окне диалога видим появление черно-белой миниатюры. Черное невидимо, а все остальное пропускает изображение соответствующего слоя. Подобные маски создаем для всех элементов фото, с которыми будем работать. Во избежание чрезмерной жесткости снизим прозрачность различных слоев. Это еще и прибавит гибкости нашему методу работы с динамическим диапазоном изображения.

Сохраняем верно, на ваш взгляд, экспонированную версию вашего снимка с предварительным объединением слоев в меню «Слои -> Объединить слои» (Layer > Flatten Image) и сохраните как документ Photoshop.

Работа с цветом и контрастом

Здесь для примера используется уже другой снимок. На нем можно явно увидеть разницу корректированного и исходного RAW снимка.

Обработка целого кадра вместе с улучшением цвета и контраста в одной его части привела бы к ухудшению ситуации в другом.

Создадим маски-слои:

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

Насыщенность

Выбираем рабочий слой. Добавляем корректирующий слой (см. картинку) для работы с цветовым тоном и насыщенностью. Чтобы не выйти за рамки нашего слоя, обязательно нажмите «Использовать предыдущий слой для создания обтравочной маски»(Use Previous Layer to Create Clipping Mask). Дайте простор фантазии, можете использовать фильтры, для придания теплоты и пр.

Для работы с контрастом можем добавить слой кривых. Удобно использовать параметр «Сильный контраст (RGB)» (Layer > New Adjustment Layer > Curves… - select " Strong Contrast (RGB)).

Корректирующие слои, применяемые к одному изображению, удобно свести в группу при использовании «Группировка слоёв» (Layer > Group Layers). Включая и выключая эту группу можно воочию увидеть эффект ваших манипуляций. Совет: Если добиваетесь корректировки экспозиции на стоп - добавьте слой кривых с непрозрачностью (opacity) окооло 38%. Чтобы добавить стоп установите режим наложения «Осветление» (Screen), а для уменьшения - «Умножение» (Multiply).

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

Урок Фотошопа

Урок Фотошопа

Урок Фотошопа

Фотошоп уроки фото

Фотошоп уроки фото

Выравнивание

Тут существует лишь 2 метода: линейка, или же меню «Правка» - «Изменение» - «Поворот» (Edit > Transform > Rotate).

Кадрирование

Резкость

  • дублировать изображение
  • к копии применить фильтр цветового сдвига с радиусом, к примеру, 1.0. последовательнсть команд «Фильтры» - «Другие» - «Цветовой сдвиг» (Filter > Other > High Pass).
  • установить режим Наложения.

Сохранение

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

Алгоритм ниже:

«Изображение» - «Режим» - «8 бит/канал» (Image > Mode > 8 Bits/Channel)

«Правка» - «Преобразовать в профиль» (Edit > Convert to Profile)

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

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

Перечень задействованных программ: ArchiCAD 16, ArchiSuite от Cigraph (дополнения или плагины к ArchiCAD).

Файлы, используемые при работе над уроком: https://yadi.sk/d/uaSmIBICk3vR2 https://yadi.sk/d/INTF5eXxk3vF2

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

Самое время открыть наш чертеж в ArchiCAD.

Выполним еще одно приготовление. Жмем: параметры > менеджер расширений. Прописываем путь к папке с расширениями ArchiCAD в окне менеджера расширений. Так программа наверняка найдет дорогу к ним. Галочка напротив нужных нам дополнений говорит об их доступности.

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

Необходимо только изменить стандартный шрифт на недавно установленный. Он больше похож на написанный вручную, чем строгий Arial. Нажимаем на инструмент «Текст» в панели инструментов слева, далее Ctrl+A, чтоб выделить весь текст на чертеже и разом изменить его шрифт (поле «шрифт» на информационном табло сверху).

Выделим все размеры с помощью Ctrl+A, в их свойствах поменяем шрифт на указанный ранее. Повторим эту операцию с отметками.

Все приготовления завершены и мы переходим к процессу художественного оформления чертежа. Идем: «Конструирование» > «Дополнение к конструированию» > ArchiSuite > Show ArchiSuite Palette.

Жмем Ctrl+A и на кнопку с карандашом во вновь открывшемся подменю ArchiSketchy.

Открылось окно Conversion Settings , в котором можно рассмотреть параметры ArchiSketchy.

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

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

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

Регулируем цвета используемых перьев.

Кроме этого, можно изменить стиль линий: заменить ровные на волнистые, например.

Подобным образом меняем штриховки для разных элементов конструирования: стены – одна штриховка, перекрытия - другая и т.д., вместо установленных ранее.

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

Так же можно выбрать фон для рисунка, имитирующий бумагу или картон, нажав на Open Picture в нижнем правом углу.

Когда все предустановки выбраны, нажимаем на «ОК».

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

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

Линии смотрятся так, будто их нарисовала рука человека, а не так, словно их построил компьютер.

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

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

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

Но вот в чем загвоздка… О чем обычно рассказывается на таких сайтах? О деятельности компании, представляются проекты в фотографиях, существует страница с контактами, новостями, раздел СМИ. В целом-то как такового контента мало, а потому дизайну сайта и стараются уделить особое внимание.

Эзотерическая навигация

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

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

Возвращаясь же к навигации отметим, что в среде архитекторов почему-то сложилось мнение, что использовать «мистическую » навигацию - это круто! Это когда на сайте много текста и картинок и только если пользователь подводит к ним курсор мышки, то они изменяются и представляют собой ссылку. Вот только пользователи не всегда подводят и не так ищут эти самые ссылки. Один раз может и сработает, но потом посетители будут уходить, поскольку целевая аудитория архитектурных сайтов иная. Они приходят на такой сайт по работе, для бизнеса, для заказов, для возможности ведения строительства, а не для долгого наслаждения красивыми Hover-эффектами. Как пример, сайт snohetta . Выглядит красиво, но на РС пока не подведешь курсор к фото - не узнаешь, о чем речь.

Flash-сайты

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

Единый URL

Важность специфики

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

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

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

И вот некоторые примеры интересных архитектурных сайтов, имеющие и отдельные блоги, и новостные ленты, фотогалереи, отдельные страницы и обилие спецэффектов. При этом выглядят они современно и не перегружено. Многие из них были созданы пару-тройку лет назад и до сих пор известны в интернете, и не стремятся менять дизайн, ибо он прекрасен. AGi Architects , Bjorken Architects , Case 3D , jamesmerrellarchitects , snohetta , haririandhariri , architecture .

Photoshop и архитектура

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

Чертежи создают с передней, боковой сторон здания или в виде сверху. Более того, чертежи и схемы отображают только точный план дома, а готовые фотографии имеют множественные сторонние детали, отражения, свет солнечных лучей. Разумеется, если у вас в запасе есть красивые 3D векторные объекты, то работать с ними проще. Но если есть только фотографии? Старайтесь, чтобы было меньше деталей и хорошая освещенность фокуса.

Открываем изображение, создаем копию и переходим Изображение -> Коррекция -> Обесцветить.

Применяем Фильтр -> стилизация -> Выделение краев и видим уже совсем иное изображение, которое уже почти и формирует эффект чертежа.

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

Любая фотография включает в себя помимо самого здания множество лишних объектов. Это могут быть деревья, кусты, люди, машины и пр. На чертежах всего этого нет, а потому мы воспользуемся инструментом Перо и выделим контур нашего здания. Ставьте больше точек и более-менее аккуратно обведите домик. Затем кликайте ПКМ по контуру и выбирайте Выделить область.

Слой должен быть активным и при активном выделении объекта кликаете на панели слоев добавить Слой-маску. Ваш объект автоматически изолируется на данном слое. Теперь, если у вас внутри рабочего контура есть лишние детали (как например, у нас в левой части у лестницы), вы выделяете отельные области и с помощью клавиши Del на клавиатуре удаляете их. Фон будет прозрачным, и объект останется цельным на маске.

Пришло время создать голубой фон. Создаем новый слой и заливаем его подходящим синим цветом. Сам слой располагаем под слоем с рабочим изображением. У слоя с изображением (черно-белым) выбираем режим наложения -> Экран. Таким образом, черный фон станет прозрачным, а белые линии останутся на синей подложке.

Добавим обводку для всего объекта. Кликаем два раза по слою с изображением и в окне свойств выбираем Выполнить обводку белым цветом, внутри, а вот ширину смотрите, как вам лучше подойдет. Мы выбрали 1 пиксель, но иногда удобнее и 5px. Зависит от рисунка и качественной вырезки контура.

С этим документом пока все. Сохраним.

Теперь займемся сеткой . Вопрос: «Какого размера создавать сетку ?» - спорный. Все зависит от масштаба вашего изображения, объекта, от желаний. Иногда 80х80рх в самый раз, но мы выбрали 50х50рх, и тоже смотрится вполне красиво. При желании можно создать несколько слоев с сетками и сделать подобие миллиметровки (мелкие квадраты, большие, совсем крупные). Принцип работы будет один, но мы создадим одну сетку. Чтобы было проще представить, нарисуйте поверх своего домика небольшой квадрат и посмотрите по линейке в Photoshop какой его размер.

Создаем новый документ и выставляем его размер 50х50 пикселей. Увеличиваем масштаб для удобства работы и создаем новый прозрачный слой. Используя инструмент Выделение делаем выделение шириной/длиной в 2 пикселя сверху и по левой стороне и заливаем белым цветом.

Переходим в меню Редактирование -> Определить узор и сохраняем получившееся. Все, документ можно закрыть.

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

Чертежи обычно в рамке, поэтому выделяем по сетке (а это удобно стало) вокруг объекта с небольшими отступами, кликаем ПКМ по выделению и выбираем Выполнить обводку белым цветом, ориентировочно в 5рх.

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

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

Добавляем к слою с сеткой слой-маску и, зажимая Alt, кликаем по ней. Таким образом, она становится доступной для редактирования. Находим в интернете любую интересную текстуру пыли и царапин на черном фоне и открываем в Photoshop. Копируем её на слой-маску. Можно изменить масштаб, повернуть при необходимости.

Снимаем выделение и появится все наше готовое изображение. Активным на панели слоев оставляем слой-маску от сетки и нажимаем Ctrl+ L (Уровни) и сдвигаем ползунки так, чтобы добиться максимальной контрастности. В сторону черного цвета. Вы увидите, как сетка обретет не такой строгий и четкий вид. Подберите понравившийся вариант и нажимайте Ок.

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

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

Аналогично делается и на светлом фоне, но режимы наложения выбираются не Экран (что осветляют основу), а Умножение, Затемнение и прочие, которые, напротив, делают светлое темным. Более того, цвет фона подбирайте без большого количества белого. Светло-розовый затруднит вам работу с контрастом и получится уже не подобие чертежа, а рисунка от руки, что совсем не подходит в данном случае. Пусть будет чуть темнее.

Выводы

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

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

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

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

Кстати, как вам планировочка? Живенькая, да? Корейская или японская, не поняла толком.

а что-то покреативнее, то, как вариант, сделать это можно в фотошопе. Например:

1.

2.

3.

4.

5.

6.

7.

8. 9.

10.

11.

12.

13.

14.

15.

16.

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

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

Совет тем, кто чертит: если вы собираетесь раскрашивать план меблировки в фотошопе, сделайте его максимально чистым от всяких дополнительных линий: не проставляйте на нём размеры, выносные надписи и т.д. НО - даже если вы и не собираетесь ничего раскрашивать, а оставляете план меблировки обычным, совет - сделайте для презентации один план меблировки чистый, без всяких размеров и т.д., не пожалейте один лишний лист. Намного проще клиенту воспринимать и оценивать планировку и меблировку, если ему не нужно всматриваться в нагромождение линий и цифр, пытаясь понять что и где стоит. Да и просто приятней смотреть на такой план. Я не сразу к этому пришла, но сейчас делаю 3 плана с мебелью: 1 - чистый, без всего лишнего; 2 - с размерами-габаритами мебели; 3 - с эргономическими размерами. 2 и 3 могу совместить, если размерных линий не много, но чистый делаю обязательно и всем советую теперь.

Вопрос к читателям-НЕдизайнерам: Вы, как гипотетический клиент, предпочли бы чтоб вам дали на рассмотрение план меблировки в виде обычного чертежа или раскрашенный каким-то образом? Какой вариант вам был бы приятнее глазу и понятнее (и совпадают ли "приятнее" и "понятнее")? Если раскрашенный, то какой - яркий, многоцветный? Или более сдержанный, с малым количеством цветов и эффектов? Из тех, что на картинках, какой лично вам был бы более предпочтителен? Или какой категорически нет?

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

1. Давайте начнем

Для начала откройте фотографию, с которой вы хотите работать. Чтобы это сделать, нажмите File > Open (Файл > Открыть), выберите фото и нажмите Open (Открыть). Ну а теперь, прежде, чем мы приступим, проверьте кое-что:

  1. Ваше фото должно быть в цветовом режиме RGB, 8 бит на канал. Чтобы проверить это, нажмите Image > Mode (Изображение > Режим).
  2. Для получения наилучшего результата, выберите изображение приблизительно 2000/4000 в ширину/высоту. Чтобы проверить это, нажмите Image > Image Size (Изображение > Размер изображения).
  3. Ваше фото должно быть фоновым слоем. Если это не так, нажмите Layer > New > Background from Layer (Слой > Новый > Слои из заднего плана).

2. Как создать фон

Шаг 1

В этой секции мы создадим фон. Нажмите Layer > New Fill Layer > Solid Color (Слой > Новый слой-заливка > Цвет) чтобы создать слой, залитый цветом, назовите его Background Color (Фоновый цвет) и выберите цвет #f0f0f0, как показано ниже.

Шаг 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 (Фильтр > Стилизация >

Шаг 3

Нажмите Filter > Blur > Motion Blur (Фильтр > Размытие > Angle (Угол) на 90 градусов, а Distance

Шаг 4

А сейчас нажмите Filter > Sharpen > Smart Sharpen (Фильтр > Усиление резкости >

Примечание переводчика:

Шаг 5

Нажмите Filter > Filter Gallery > Sketch > Photocopy (Фильтр > Галерея фильтров > Эскиз > Detail (Детализация) на 2, а Darkness (Затемненность) на 5.

Шаг 6

Измените режим наложения этого слоя на Multiply (Умножение), а непрозрачность - на 40%. После переименуйте этот слой в Perspective_Sketch_1 (Перспективный_Набросок_1).

Шаг 7

Шаг 8

Brush

Шаг 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

Шаг 16

Измените основной цвет на #ffffff, возьмите инструмент Brush (Кисть) (B), выберите мягкую кисть и проведите ей там, где вы хотите показать вертикальные линии перспективы.

5. Как создать текст

Шаг 1

В этой секции мы создадим текст. Выберите инструмент Horizontal Type (Горизонтальный текст) (T), измените шрифт на Hijrnotes, его размер на 80 пикселей, выравнивание по левому краю, цвет - #000000. Далее, кликните по любому месту холста и нажмите Type > Paste Lorem Ipsum (Текст > Вставить Lorem Ipsum), чтобы вставить случайный отрывок текста. Вы также можете воспользоваться своими настройками текста и шрифта.

Шаг 2

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

Шаг 3

А сейчас переименуйте этот слой в Text_1 (Текст_1). После нажмите Control-J на клавиатуре, чтобы продублировать данный слой.

Шаг 4

Кликните дважды по миниатюре этого слоя, чтобы сделать текст редактируемым, нажмите Control-A, чтобы выбрать весь текст, а затем нажмите Type > Paste 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 Ma p (Слои > Новый корректирующий слой > Карта градиента), чтобы создать новый корректирующий слой Карта градиента и назовите его 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 (Общая Резкость).

У Вас Получилось!

Поздравляю, вы успешно выполнили урок! А вот и наш финальный результат.



Поделиться