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

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

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

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

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

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

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

Строка ввода адресса на картах Google

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

Поиск дома на картах Google

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

Выбор вида карты на картах Google

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

Вид дома - фотография со спутника

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

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

Стационарный компьютер: на клавиатуре нажмите кнопку Print Screen (PrntScrn, PrtScn, PrtScr или PrtSc)
Ноутбук: сочетание клавиш Fn + PrtScn
MacBook: сочетание клавиш Shift + Control + Command + 3

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

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

Adobe Photoshop - вид интерфейса с отмечеными рабочими областями

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

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

Adobe Photoshop - создание нового файла

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

Adobe Photoshop - настройки нового файла

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

Adobe Photoshop - новый файл

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

Вставляем изображенеи из буфера обмена

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

Adobe Photoshop - открытие файла с компьютера

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

Adobe Photoshop - копируем изображение и вставляем в другой вкладке

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

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

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

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

Adobe Photoshop - прямоугольное выделение

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

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

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

Adobe Photoshop - Очищение фона через прямоугольное выделение

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

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

Adobe Photoshop - Изменение прозрачности и передвижение элемента

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

Adobe Photoshop - Поворот планировки помещения

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

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

Adobe Photoshop - Изменение наклона планировки изображения

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

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

Adobe Photoshop - Выделение новой области для холста, по размерам планировки

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

Adobe Photoshop - новая область планировки

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

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

Adobe Photoshop - возвращаем настройки прозрачности

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

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

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

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

Adobe Photoshop - создание нового слоя

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

Adobe Photoshop - рисуем линию инструментом карандаш

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

Adobe Photoshop - дублирование слоя

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

Adobe Photoshop - выравнивание по левому краю холста

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

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

Adobe Photoshop - выравнивание по правому краю холста

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

Adobe Photoshop - распределение элементов по горизонтальному центру

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

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

Adobe Photoshop - рисуем горизонтальную линию инструментом карандаш

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

Adobe Photoshop - выравнивание линии по нижней границе холста

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

Adobe Photoshop - выравнивание линии по верхней границе холста

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

Adobe Photoshop - распределить элементы вертикально по центру (distribute vertical centre)

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

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

Adobe Photoshop - сетка, предварительные управляющие сектора васту карты

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

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

Adobe Photoshop - настройка толщины линии карандаша

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

Adobe Photoshop - точка по центру холста

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

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

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

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

Adobe Photoshop - Выделение северного сектора

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

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

Adobe Photoshop - выбираем цвет заливки

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

Adobe Photoshop - заливка выделеной области

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

Adobe Photoshop - заливка северо-восточного сектора

Adobe Photoshop - заливка восточного сектора

Adobe Photoshop - заливка юго-восточного сектора

Adobe Photoshop - заливка южного сектора

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

Adobe Photoshop - закрашены все сектора васту карты

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

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

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

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

Adobe Photoshop - объединяем группы слоев васту карты

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

Adobe Photoshop - выделение области с помощью инструмента волшебная палоска

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

Adobe Photoshop - удаление заливки из брахмастана васту карты

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

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

Adobe Photoshop - выделение левой верхней области за пределами карты

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

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

Adobe Photoshop - выделение всех областей за пределами карты

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

Adobe Photoshop - удаление всех областей за пределами карты

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

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

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

Васту карта нарисованая в Adobe Photoshop