Рисуем васту карту в Adobe Photoshop

Для того чтобы нарисовать васту-карту в Photoshop вам потребуется:

1. План помещения в электронном виде (картинка формата jpg, png, psd или подобных).
2. Редактор Adobe Photoshop
3. Доступ в интернет

Ищем дом на карте

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

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

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

Находим свой дом на карте.

Для более наглядного отображения, выбираем вид "земля":

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

Карты Яндекс и Гугл всегда расположены так, что сверху север, а снизу соответственно юг.

Делаем скриншот открытой на экране карты.

Пара слов про интерфейс Adobe Photoshop

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

Начинаем рисовать васту карту!

Создадим новый файл для нашей васту карты. Основное меню. Файл - новый

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

Открывается новый холст с белым фоном

Вставляем изображение карты из буфера обмена. Основное меню: Редактировать - Вставить.

Теперь нам нужно открыть изображение планировки. Основное меню: Файл - открыть
Находим файл с изображением на своем компьютере и нажимаем кнопку открыть. В новой вкладке открывается ваше изображение.

Выделяем изображение. Основное меню: Выделить - все.
Копируем его. Основное меню: Редактировать - копировать.
Переходим на вкладку со гугл картой. Основное меню: Редактировать - вставить

Удаляем лишний фон за пределами планировки

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

Вариант 1. Через прямоугольное выделение.

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

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

Вариант 2. Через многоугольное лассо.

В панеле инструментов выбираем: Многоугольное лассо (Poligonal Lasso Tool)
Подводим курсор мыши к углу внешней левой и верхней стен, кликаем один раз мышью - поставилась опорная точка (в результате за курсором от этой точки теперь тянется линия). Подводим курсор к углу верхней и правой стен и опять кликаем мышью - нарисовалась линия вдоль стены. Таким образом нужно пройти все внешние стены по кругу и вернуться в ту точку с которой начинали. Когда вы пройдя по кругу придете в ту-же точку с которой начинали рядом с курсором появится кружок обозначающий, что линия замкнется. Нажимаем и линия замыкается в результате чего получается выделеная область.
Но внимание эту область нужно инвертировать т.к. выделена внутренняя часть, а нам нужно удалить внешнюю Основное меню: выделение - инвертировать. И нажимаем кнопку DEL.

Поворачиваем планировку в соответствии с положением в пространстве

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

Основное меню: Редактирование - Трансформация - Поворот

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

1. Стена планировки должна быть паралельна стене дома
2. Окна планировки должны выходить на правильную сторону. Другими словами если вы из кухни видите двор, то окна кухни должны быть паралельно стене дома, которая выходит во двор.

Делаем рабочую область по размерам планировки

Активируем инструмент Прямоугольное выделение выделяем область по краям планировки. Не обязательно прям четко. Этот шаг можно повторить после следующего шага если результат вас не удовлетворил..

Основное меню: Изображение - обрезать
Холст обрезался по краям планировки.

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

Панель слоев. Прозрачность возвращаем на 100%
Прячем слой с картой - теперь он нам не потребуется. Панель слоев: нажимаем на глаз рядом со слоем в котором находится гугл карта - глаз превращается в пустой квадратик и слой исчезает.

Основное меню: Выделение - отменить выделение

Разбиваем планировку на сектора

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

Управление слоями: в открывшимся списке выбираем создать новый слой

Выбираем инструмент карандаш зажимаем клавишу shift и проводим линию во всю высоту нашего изображения

Панель слоев: правой кнопкой мыши нажимаем на слое в котором толькочто рисовали линию (у меня "Layer 3"). И из меню выбираем пункт - дублировать слой.
Данную операцию делаем 3 раза в результате получается 4 одинаковых слоя с названиями: Layer 3, Layer 3 copy, Layer 3 copy2, Layer 3 copy3 Активируем сначала самый первый Layer 3

Основное меню: Выделить - выделить все.
Активируем Инструмент для передвижения
Панель настроек: Выровнять по левому краю

Линия находящаяся нарисованая в данном слое выровнялась по левой границе холста, но этого не видно из-за выделения всей области

Активируем самый последний слой с линиями Layer 3 copy3
Панель настроек: Выровнятьпо правому краю

Зажимаем кнопку ALT (для Windows) или CMD (для Mac) и левой кнопкой мыши кликаем по очережи по слоям Layer 3, Layer 3 copy, Layer 3 copy2. В результате выделились все слои с линиями.
Панель настроек: распределить горизонтально по центру (distribute horizontal centre)

Объединим эти слои в группу. Управление слоями: Создать группу из слоев, вводим название для группы - Vertical Lines

Создаем новый слой, у меня называется Layer 4
Выбираем инструмент карандаш и рисуем горизонтальную линию с зажатой кнопкой shift во всю ширину холста

3 раза дублируем слой, как делали выше и получаем 4 одинаковых слоя с названиями Layer 4, Layer 4 copy, Layer 4 copy2, Layer 4 copy3.
Проверяем, что весь холст выделен как в предыдущих действиях с вертикальными линиями. Активируем Инструмент для передвижения
Активируем сначала самый первый Layer 3
Панель настроек: выровнять по нижниму краю

Активируем самый последний слой с горизонтальными линиями Layer 4 copy 3
Панель настроек: выровнять по верхнему краю

Зажимаем кнопку ALT (для Windows) или CMD (для Mac) и левой кнопкой мыши кликаем по очережи по слоям Layer 4, Layer 4 copy, Layer 4 copy 2
В результате у нас получились выделены все слои с горизонтальными линиями
Панель настроек: распределить вертикально по центру (distribute vertical centre)

Объединим эти слои в группу
Управление слоями: Создать группу из слоев, вводим название для группы - Horizontal Lines

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

Ищем центр помещения

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

Один раз нажимаем в любом месте центрального сектора нашей сетки (получается точка радиусом в 4 пикселя)
Теперь выравниваем ее по центру. Панель инструментов: Активируем Инструмент для передвижения
И выбираем по очереди - выровнять по вертикальному центру а потом выровнять по горизонтальному центру. В результате наша точка оказалась ровно в центре изображения.

Снимаем выделение холста.
Основное меню: Выделить - снять выделение

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

Создаем слой с именем (Напишем по русски чтобы никто не путался) - C

Панель инструментов: выбираем многоугольное лассо (Poligonal Lasso Tool)
Ставим первую точку в центр точки нашего холста, остальные точки как показано в примере и завершаем круг возвращаясь в точку 1, как делали ранее.

В результате у нас получился выделеный треугольник - это будет Севернуый сектор

Выбираем инструмент заливка
Панель инструментов: цвет заливки (квадратик чуть ниже инструментов)

И нажимаем один раз в центр нашего выделеного треугольника

Теперь рисуем остальные сектора по такому-же принципу.
Не бойтесь делать сектора немного в нахлест, принципиально от 1-3 пикселей картина не изменится.

В результате у вас получится что то вроде этого:

Снимаем выделение последнего сектора, который рисовали. Основное меню: Выделение - снять выделение

Зажимаем кнопку ALT (Для Windows) или CMD (Для Mac) и левой кнопкой мыши кликаем по очережи по слоям с секторами, чтобы выделить их все.
Соединяем эти слои в один. Управление слоями: Объединить слои, после чего можно переименовать слой в Sectors

Скрываем слой sectors, нажимая на глаз слева от слоя.

Панель слоев: Выделяем группу Horizontal Lines, зажимаем ALT или CMD и выделяем группу Vertical Lines.
Управление слоями: Объединить слои и получившийся слой переименовываем в Set

Выбираем инструмент волшебная палочка (Magic Wand tool)
Слой с именем Set должен быть активен. Нажимаем в центр квадрата, в котором нарисована наша центральная точка.

У нас выделился центральный квадрат. Активируем слой Sectors и возвращаем ему видимость нажатием на пустой квадратик слева от слоя (в квадратике опять появится глаз), отобразятся наши раскрашеные сектора.
Нажимаем кнопку DEL на клавиатуре в резльтате чего удаляется заливка секторов в центре картинки.

Теперь нужно удалить фон секторов за пределами квартиры.

Прячем слой Sectors (надеюсь что выше вы уже этому научились), выбираем инструмент волшебная палочка (Magic Wand tool)
Активируем слой в котором расположено изображение планировки, у меня он называется Layer 2.
На моей картинке пустых мест достаточно много - слева вверху, справа вверху справа снизу и слева снизу. Чтобы очистить их все кликаю в левый верхний угол, и у меня выделяется небольшой кусочек.

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

Активируем слой Sectors и отображаем его.

Нажимаем кнопку DEL и вся заливка за пределами планировки удаляется.

Снимаем выделение. Основное меню: Выделение - убрать выделение
Устанавливаем прозрачность слоя процентов на 50-70, чтобы сквозь заливку секторов было видно план квартиры.
И скрываем слой Set

Поздравляю, васту карта построена

Теперь можно Добавить красоты ввиде линий направления сторон света

Вернуться к разделу: как построить васту карту