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

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

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

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

1.

2.

3.

4.

5.

6.

7.

8. 9.

10.

11.

12.

13.

14.

15.

16.

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

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

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

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

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

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

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

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

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

А вот подборка 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 (Уровни) и сдвигаем ползунки так, чтобы добиться максимальной контрастности. В сторону черного цвета. Вы увидите, как сетка обретет не такой строгий и четкий вид. Подберите понравившийся вариант и нажимайте Ок.

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

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

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

Выводы

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

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

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

What You"ll Be Creating

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

Эффект, который создан на изображении выше – я покажу вам, как создать его в этом уроке. Если вы захотите создать более сложные наброски с акварельными эффектами, как на изображении ниже, при этом создать данный эффект быстро и легко, то вы можете воспользоваться моим экшеном Photoshop TechnicalArt 2 .

Что вам понадобится

Для создания данного эффекта, вам понадобится следующие исходные материалы:

1. Давайте Приступим

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

1. Ваша исходная фотография должна быть в цветовом режиме RGB, 8 бит/канал (8 Bits/Channel). Чтобы проверить это, идём Изображение – Режим (Image > Mode).
2. Для получения наилучшего результата, размеры вашей исходной фотографии должны быть в пределах 2000–4000 px по ширине / высоте. Чтобы проверить это, идём Изображение – Размеры изображения (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) и установите следующие настройки, которые указаны ниже:

3. Создаём Основной Набросок

Шаг 1

В этой части урока мы создадим основной набросок. Перейдите на фоновый слой (Background), а затем нажмите клавиши (Ctrl+J ), чтобы продублировать данный слой. Далее, переместите созданный дубликат слоя наверх, расположив поверх всех остальных слоёв.

Шаг 2

Теперь нажмите клавиши (Ctrl+Shift+U ), чтобы обесцветить данный дубликат слоя. Далее, идём Изображение – Коррекция – Уровни (Image > Adjustments > Levels). Установите следующие значения, которые указаны ниже:

Шаг 3

Назовите этот слой Временный (Temp), а затем нажмите клавиши (Ctrl+J ), чтобы продублировать данный слой.

Шаг 4

Теперь нажмите клавиши (Ctrl+I ) для инверсии данного слоя, а затем поменяйте режим наложения для данного слоя на Осветление основы (Color Dodge). Далее, идём Фильтр – Другое – Минимум (Filter > Other > Minimum), установите Радиус (Radius) на 2 px , а параметр Сохранить (Preserve) на Прямоугольность (Squareness), как показано на скриншоте ниже:

Шаг 5

Удерживая клавишу (Ctrl ), щёлкните по слою Временный (Temp), чтобы одновременно выделить оба слоя. Далее, нажмите клавиши (Ctrl+E ), чтобы объединить эти выделенные слои в один слой.

Шаг 6

Поменяйте режим наложения для объединённого слоя Умножение (Multiply), а затем назовите этот слой Основной набросок (Main Sketch).

4. Создаём Набросок в Перспективе

Шаг 1

В этой части урока мы создадим набросок в перспективе. Перейдите на фоновый слой (Background), а затем нажмите клавиши (Ctrl+J ), чтобы продублировать его. Далее, переместите созданный дубликат слоя наверх, расположив поверх всех остальных слоёв.

Шаг 2

Теперь идём (Filter > Stylize > Ctrl+Shift+U

Шаг 3

Идём (Filter > Blur > Угол (Angle) на 90° , а Смещение (Distance) на 1200 px

Шаг 4

Теперь идём (Filter > Sharpen > Smart Sharpen). Установите следующие настройки, которые указаны ниже:

Шаг 5

Идём (Filter > Filter Gallery > Sketch > Детализации (Detail) на 2 , а значение Затемнённости (Darkness) на 5 .

Шаг 6

Умножение Непрозрачности (Opacity) до 40% . Далее, назовите этот слой Набросок_Перспектива_1 (Perspective_Sketch_1).

Шаг 7

Теперь идём (Layer > Layer Mask >

Шаг 8

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

Шаг 9

Теперь перейдите на фоновый слой (Background), а затем нажмите клавиши (Ctrl+J ), чтобы продублировать его. Далее, переместите созданный дубликат слоя наверх, расположив ниже слоя Набросок_Перспектива_1 (Perspective_Sketch_1) в палитре слоёв.

Шаг 10

Теперь идём Фильтр - Стилизация - Выделение краев (Filter > Stylize > Find Edges), а затем нажмите клавиши (Ctrl+Shift+U ), чтобы обесцветить данный слой.

Шаг 11

Идём Фильтр – Размытие – Размытие в движении (Filter > Blur > Motion Blur), а затем установите Угол (Angle) на 0° , а Смещение (Distance) на 1200 px , как показано на скриншоте ниже:

Шаг 12

Теперь идём Фильтр – Резкость – Умная резкость (Filter > Sharpen > Smart Sharpen). Установите следующие настройки, которые указаны ниже:

Шаг 13

Идём Фильтр – Галерея фильтров - Эскиз - Ксерокопия (Filter > Filter Gallery > Sketch > Photocopy), а затем установите значение Детализации (Detail) на 2 , а значение Затемнённости (Darkness) на 5 .

Шаг 14

Поменяйте режим наложения для данного слоя на Умножение (Multiply), а также уменьшите значение Непрозрачности (Opacity) до 55% . Далее, назовите этот слой Набросок_Перспектива_2 (Perspective_Sketch_2).

Шаг 15

Теперь идём Слой- Слой-маска – Скрыть всё (Layer > Layer Mask > Hide All), чтобы добавить слой-маску, которая скроет весь слой.

Шаг 16

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

5. Создаём Текст

Шаг 1

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

Шаг 2

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

Шаг 3

Теперь назовите этот слой Текст_1 (Text_1). Далее, нажмите клавиши (Ctrl+J

Шаг 4

Ctrl+A Текст - Вставить Lorem Ipsum (Type > Перемещение (Move Tool (V), щёлкните в любом месте внутри холста, а затем переместите текст внутри холста, чтобы расположить его, как показано на скриншоте ниже:

Шаг 5

Назовите этот слой Текст_2 (Text_2), а затем переместите его, расположив ниже слоя Текст_1 (Text_1) в панели слоёв. Далее, нажмите клавиши (Ctrl+J ), чтобы продублировать данный слой.

Шаг 6

Дважды щёлкните по миниатюре данного слоя для редактирования текста, а затем нажмите клавиши (Ctrl+A ), чтобы выделить полностью текст, далее, идём Текст - Вставить Lorem Ipsum (Type > Paste Lorem Ipsum), чтобы вставить любой произвольный текст. Далее, удалите часть текста, выберите инструмент Перемещение (Move Tool (V), щёлкните в любом месте внутри холста, а затем переместите текст внутри холста, чтобы расположить его, как показано на скриншоте ниже:

Шаг 7

Нажмите клавиши (Ctrl+T ), чтобы трансформировать данный слой, установите Поворот (Rotate) на 15° .

Шаг 8

Теперь назовите этот слой Текст_3 (Text_3), переместите данный слой, расположив его ниже слоя Текст_2 (Text_2) в панели слоёв.

6. Проводим Заключительную Цветовую Коррекцию

Шаг 1

В этой части урока мы проведём заключительную цветовую коррекцию. Нажмите клавишу ‘D ’, чтобы установите цвета по умолчанию, перейдите на слой Текст-1 (Text_1). Далее, идём Слой- Новый корректирующий слой – Карта градиента (Layer > New Adjustment Layer > Gradient Map), чтобы создать новый корректирующий слой с картой градиента, назовите этот корректирующий слой Общая Контрастность (Overall Contrast).

Шаг 2

Теперь поменяйте режим наложения для данного слоя на Мягкий свет (Soft Light), а также уменьшите Непрозрачность (Opacity) до 35% .

Шаг 3

Идём Слой- Новый корректирующий слой-Уровни (Layer > New Adjustment Layer > Levels), чтобы создать новый корректирующий слой с уровнями, назовите этот слой Общая Яркость (Overall Brightness).

Шаг 4

Дважды щёлкните по миниатюре данного корректирующего слоя и в появившемся окне панели Свойства (Properties), установите настройки, которые указаны на скриншоте ниже:

Шаг 5

Нажмите клавиши (Ctrl+Alt+Shift+E ), чтобы создать объединённый слой. После этого идём Фильтр – Другое – Цветовой контраст (Filter > Other > High Pass). Установите Радиус (Radius) на 2 px , как показано на скриншоте ниже:

Шаг 6

Поменяйте режим наложения для данного слоя на Жёсткий свет (Hard Light), назовите этот слой Общая Резкость (Overall Sharpening).

Мы завершили урок!

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

Если вы захотите создать более сложные наброски с акварельными эффектами, как на изображении ниже, используя один клик мыши и при этом создать данный эффект быстро и легко, то вы можете воспользоваться моим экшеном TechnicalArt 2 Photoshop .

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

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

Вы также можете получить всё это в одном пакете и сэкономить 50% - перейдите по ссылке, чтобы увидеть мой экшен Artistic 4in1 Photoshop Actions Bundle .

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

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

Фотография выше потребовала 9 фотографий - с брекетингом экспозиции -2, 0 и +2, а также дополнительно серии для нижней половины комнаты и для потолка. Дополнительные снимки также помогают мне избавиться от людей в кадре.

Вы должны не забывать...

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

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

Основная камера

С задачами по архитектурной и пейзажной съемки замечательно справляется моя камера Canon 5D Mark II с тилт-шифт объективом 17mm TS-E. Я применяю брекетинг экспозиции во многом потому, что передняя линза моего объектива выпуклая и не позволяет использовать фильтры. В своей сумке также всегда есть объективы EF24 f/1.4 и EF50mm f/1.2. Мой штатив немного странный - ноги Gitzo с шаровой головой Manfrotto.

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

Всю работу с изображениями я провожу на двухъядерном Mac Pro с 24 гигабайтами оперативной памяти. Я часто работаю с изображениями более гигабайта, так что большой бъем оперативной памяти - необходимость. У меня монитор Dell 27″ Ultrasharp, который калибруется с помощью Spyder 3 Elite.

Перед любой важной работой с изображениями я калибрую монитор.

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

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

На локации я сливаю фотографии на 2 жестких диска и по возвращении копирую около 100 гигабайт информации за один раз в заранее приготовленное место. Изображенная слева структура папок служит мне верой и правдой вот уже 10 лет.

Вы можете заметить, что мои готовые файлы имеют в префиксе размер в пикселях для разных сайтов; на 500px - шириной 900 пикселей, а для 1x.com - 950 пикселей. Я также добавляю «bw» в имена файлов с черно-белыми изображениями. Это система наименований облегчает поиск на жестком диске нужных изображений.

Отбор

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

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

Camera Raw

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

• Убедитесь, что вы импортируете ваши фотографии в том же цветовом пространстве, как и в камере. В моём случае это Adobe RGB, которое шире, чем стандартное для интернета sRGB. Работайте с максимально качественным исходником, а затем конвертируйте в целевой формат, например для интернета.
• Редактируйте фотографии в режиме 16 бит
• Выберите лучший и самый правильно экспонированный кадр и установите по нему баланс белого
• Если присутствуют горячие пиксели, для их компенсации используйте ползунок «Возврат» (Recovery). Нажмите одновременно + во время его перемещения и вы увидите положение этих точек на черном фоне!
• Если ползунок «Возврат» пришлось подвинуть слишком сильно - компенсируйте это ползунком «Экспозиция», вновь нажав одновременно +.
• Эту же комбинацию можно использовать при коррекции уровня черного - поднимайте уровень черного так, чтобы не было вылетов.
• Затем выделите все изображения и синхронизируйте баланс белого для всех изображений в серии через меню в левом верхнем углу.
• Затем откройте все изображения в Photoshop

Работа в Photoshop

У меня довольно строгое рабочее пространство в Photoshop и процесс редактирования довольно прост.

У меня есть ряд действий (actions) под разные задачи, типа изменения размера, цветового пространства и т.п. Отдельные выполняемые мной задачи можно разделить следующим образом:

• Объединение изображений с брекетингом экспозиции в один слой
• Состыковка составляющих панораму изображений
• Сохранение составленного изображения в файл формата Photoshop PSD
• Использование масок для выделения частей изображения, требующих отдельной коррекции цвета, контраста или экспозиции. Примером может быть обработка неба отдельно от здания на переднем плане
• Сохранение этого изображения со всеми созданными слоями
• Объединения слоев и кадрирование при необходимости
• Усиление резкости
• Сохранение новой версии готового изображения в формате Photoshop PSD
• Изменение размера под целевое использование, например до 900 пикселей для 500px.com
• Преобразование в цветовое пространство sRGB и глубину цвета 8bit
• Сохранение в формате JPEG. Не забудьте добавить префикс "900px" к имени файла для облегчения поиска в дальнейшем.

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

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

Многие пользователи Photoshop побаиваются использования масок, выделения и т.п., но на самом деле это довольно просто. Я покажу!

Выберите инструмент для выделения на свой вкус. Я использовал инструмент «Быстрое выделение» (Quick Selection tool), отмеченный слева на рисунке. Затем для добавления выделения нажимайте , а для удаления - . Как видите, я выделил верно экспонированный купол станции метро Кэнэри-Уорф.

Это выделение очень неровное и будет лучше если мы сделаем его более гладким и элегантным. Для этого нажмем на кнопку «Уточнить край» (Refine Edge), также отмеченную в верхней части картинки сверху.

Красная маска очень удобна для просмотра выделенного и невыделенного, но требуется включить эту опцию. Кликните по выпадающему меню «Просмотр» (View) в верхней части диалога «Уточнение края» и выберите «Наложение» (Overlay).

Мы используем кисть (Refine Radius Tool brush), обозначенную слева. Она позволит нарисовать край выделения и Photoshop уточнит границы того, что должно и не должно быть выделено.

Увеличьте размер кисти в опции «Размер» (Size) и щедро «закрасьте» пространство у границы. Пройдитесь вдоль всех границ!

Край маски выглядит гораздо более градиентным теперь! Нажмите «OK» для сохранения этого выделения.

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

Нажмите кнопку «Добавить векторную маску» (Add Vector Mask), обозначенную на рисунке.

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

Я продолжил работу и повторил операции по созданию маски для эскалатора и окружения купола, как можно увидеть на рисунке ниже. Слои при 100% видимости слишком жёсткие, так что я снизил прозрачность слоя с куполом до 80%, а слоя с эскалатором и окружением купола - до 70%. Это занимает чуть больше времени, но является очень гибким методом представить широкий динамический диапазон кадра.

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

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

Редактирование: цвета и контраст

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

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

Создание слоев изображения с использованием масок.

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

Я покажу мой процесс обработки цвета и контраста на примере песка.

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

Выберите слой, который вы будете редактировать. Я выбрал слой «Песок». Добавляем корректирующий слой «Цветовой тон/Насыщенность» как на картинке.

Поставьте галочку напротив (Use Previous Layer to Create Clipping Mask) чтобы ограничить ваши правки только слоем «Песок». Вы получите новый слой с небольшой стрелкой, направленной вниз, чтобы отобразить это.

Я выбрал предустановленную опцию «Больше увеличить насыщенность» (Increased Saturation More)

Песок должен стать тепло оранжевым, так что я добавлю еще один корректирующий слой - Фото фильтр (Layer > New Adjustment Layer > Photo Filter), выбрав сначала слой «Песок» и не забыв галочку «Использовать предыдущий слой для создания обтравочной маски» (Use Previous Layer to Create Clipping Mask).

Я выбрал «Теплый фильтр» (Warming Filter) (85), установив его плотность на 50 для более полного эффекта.

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

В этом месте следует сделать сохранение файла со всеми слоями в формате Photoshop Document.

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

У меня есть 2 способа. Использование линейки, изображенной слева, очень удобно и быстро. Достаточно выделить важную горизонтальную или вертикальную линию в изображении. Либо это можно сделать с помощью режима поворота - «Правка» - «Изменение» - «Поворот» (Edit > Transform > Rotate)

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

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

Резкость

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

• Дублируете слой через «Изображение» - «Дублировать» (Image > Duplicate)…
• Примените фильтр цветового сдвига. Радиуса 1.0 достаточно для хорошо сфокусированного изображения порядка 10-20 мегапикселей. «Фильтры» - «Другие» - «Цветовой сдвиг» (Filter > Other > High Pass)…
• Установите режим смешивания в «Наложение» (Overlay).

Сохранение

«Объединить слои» в меню «Слои» (Layer > Flatten Image) и сохранить как новый документ Photoshop с соответствующим именем.

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

Изменение размера

Я уменьшаю файлы JPEG до различных размеров для Блогов, Фликера, сайтов 500px и 1x, а также для конкурсов.

Сохранение

Окончательное сохранение в JPEG требует преобразования в цветовое пространство sRGB и глубину цвета 8 бит. Эти атрибуты стандартны для сети Интернет. Если вы этого не сделаете - ваши изображения просто не будут у других людей выглядеть также как вы подготовили их на своем компьютере.

• «Изображение» - «Режим» - «8 бит/канал» (Image > Mode > 8 Bits/Channel)
• «Правка» - «Преобразовать в профиль» (Edit > Convert to Profile)…

Вот и всё, таков в общих чертах мой процесс обработки фотографий.

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