10 бесплатных сервисов для создания и публикации пользовательских карт

Содержание:

Простая инструкция.

Мы рассмотрим работу конструктора карт Яндекс на примере третьего и самого трудного варианта. Изобразим туристический маршрут сплава на байдарке. Изучив эту простую инструкцию, вы легко справитесь с другими задачами.

1. Для создания маршрута на интерактивной карте Яндекс необходимо выполнить простые действия.

2. Создайте аккаунт (почту) в Яндексе если ее нет. Войдите в свой аккаунт. В нем будут храниться все созданные маршруты.

3. После авторизации, зайдите в Яндекс Карты.

4. В правом верхнем углу нажмите на «Две полоски» и выберите «Мои карты»

5. Дайте название и краткое описание (1 – 2 предложения). Затем нажать «Сохранить и продолжить». Вы перейдете в окно сохраненной карты.

6. Нажмите на «Вернуться к редактированию карты»

7. Запомните! После любых серьезных изменений следует нажать кнопку «Сохранить и продолжить», чтобы не пропала работа.

8. Далее, на карте ищем начальную точку маршрута. В моем примере я взял начало у истока реки Вилия:

9. Масштаб стараемся выбрать более точный, чтобы линии маршрута как можно точнее совпадали с изгибами реки. Но и слишком детальный брать не надо: долго будете наносить маршрут, особенно если он больше нескольких километров. Я взял масштаб 50 метров (масштаб можно посмотреть в правом нижнем углу). Если что-то пойдет не по плану, то в дальнейшем, изгибы можно откорректировать.

10. Берем инструмент «Линии»

11. Проводим маршрут мышью от начала сплава до первого изгиба реки. На изгибе устанавливаем точку Левой кнопкой мыши. В моем примере так:

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

13. Когда вы устали и хотите прервать процесс — еще раз нажмите на кнопку «Линии» в верхней части, и не забывайте сохранить результат.

14. По пути маршрута можно поставить метки для обозначения: места приезда и начала сплава, места конца сплава и отъезда, привала, ночлега, достопримечательностей и т. д. Для этого необходимо нажать на инструмент «Метки» и поставить метку в любом месте (потом ее можно передвинуть).

15. Так будет выглядеть стандартная метка. В ней необходимо задать название (Подпись метки), описание (Текстовое поле), выбрать необходимый цвет. Если кликнуть по инструменту «Иконка», то можно подобрать изображение, которое наиболее близко по смыслу метки. Количество иконок ограниченно, однако в большинстве случаев можно подобрать что-нибудь подходящее. Выйти из режима выставления меток можно повторным нажатием кнопки «Метки». В противном случае, кликая левой кнопкой мыши на произвольные участки карты, вы наставите большое количество ненужных меток, которые придется удалять.

16. Если не устраивает стандартный красный цвет линий, то замените его в специальной панели.

17. Цвет, прозрачность и толщина линии, а также метки редактируются в левой части карты (панель «Список объектов»):

18. Для этого достаточно один раз кликнуть по ним мышью.
Я установил фиолетовый цвет, толщину 5 и прозрачность 60%, чтобы линия резко не контрастировала с картой.

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

20. Жмем на «Получить код карты»:

21. Копируем код полностью и вставляем в нужное место на вашем сайте.

Изучив эту инструкцию, вы создадите в интерактивных картах Яндекса маршрут любой сложности, который украсит ваш сайт не хуже любой инфографики.

После недолгих манипуляций, у меня получилась такая карта.

Дополнение от 24.03.2020

Читательница нашего блога Лариса задала вопрос:

Отвечаем. Сделать это довольно просто. При прокладывании маршрута в конструкторе Яндекс карт протяженность маршрут рассчитывается автоматически. Смотрите на изображение:

При создании маршрута расстояние автоматически рассчитывается в меню слева.

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

MindMeister

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

Позиционирует себя как №1 и хвастается аудиторией в 1,4 млн менеджеров, студентов, маркетологов и др.

Так выглядит интерфейс MindMeister

Платформы: веб-приложение, мобильное приложение (Android, iOS).

Возможности:

  • Кастомизация фона и дизайна карт (использовать встроенные темы или редактировать элементы самостоятельно).
  • Добавление изображений, видео, иконок и файлов (из встроенной галереи, со своего устройства или из интернета). Максимум 10 ГБ.
  • Режим презентации (их можно встраивать на сайт), интеграция с MeisterTask — инструментом для управления проектами.
  • Примечания, комментарии, ссылки. Командная работа и общение в чате.
  • Сохранение истории и возврат к предыдущим версиям, резервное копирование.
  • В зависимости от тарифа можно экспортировать и импортировать карты в различных форматах (в том числе из других майндмэп-сервисов, например, XMind, FreeMind).

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

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

Создаём свою Гугл карту

Профиль в Гугл

Для создания своей карты необходимо пройти регистрацию в .

После создания своего профиля, вы сможете пользоваться всеми доступными сервисами Google.

Завершив процедуру регистрации, кликаем по иконке карты. После авторизации в Гугл, на карты можно перейти, как со своего профиля, так и через поиск, введя запрос Гугл карты.

Создаём карту

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

В открывшемся окне, вверху нажимаем Карты, далее нажимаем Создать карту.

Изменяем название карты

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

Импортируем готовые файлы с метками

Если уже есть готовый файл с метками, его можно импортировать в конструктор карт Google. Для этого нажимаем на надпись Импорт, она находится под названием слоя.

В открывшемся окне, добавляем нужный файл с компьютера или Google диска.

Создаём свои метки на карте

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

Добавляем фото на карту

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

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

Можно загрузить сразу несколько изображений, для этого нажимаем на + под картинкой.

Добавляем маршрут на карту

Существует два способа, добавить маршрут на карту.

  1. Нажимаем на кнопку Нарисовать линию, доступны три варианта: для автомобиля, велосипеда, пешехода. Выбираем нужный, кликаем на карте в нужном месте, таким образом мы установили точка А. Точку Б, устанавливаем аналогично, кликаем в том месте куда нужно добраться. Также можно устанавливать промежуточные точки.
  2. Нажимаем на соседнюю кнопку, в виде расходящихся стрелок. Добавляется новый слой. В данном варианте, необходимо вручную ввести контрольные точки.

Каждый новый маршрут будет добавляться как новый слой.

После добавления меток и маршрутов, карта готова, осталось её добавить на свой сайт.

Добавляем карту на сайт

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

Можно не открывать доступ для всех, а отправить ссылку для доступа или выслать приглашение по электронной почте.

Для вставки на сайт, кликаем по меню в виде трёх точек, выбираем Добавить на сайт.

Копируем код и вставляем на свой сайт. Размер карты, можно изменить в HTML коде.

Создание карты

Для этого мы будем пользоваться специальным конструктором карт Яндекса. Его могут использовать все, но придется пройти регистрацию и завести себе аккаунт Яндекса.

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

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

Все созданные вами объекты будут доступны в “Списке объектов”. Их при желании можно удалить или отредактировать.

Метки

Метками можно обозначить ближайшие станции метро или автобусные остановки. Еще меткой можно обозначить вход в здание (если оно большое) или другие офисы, если они есть.

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

Как только редактирование будет завершено, кликните на кнопку “Готово”. Можно создать сколько угодно меток. Но если их будет слишком много, пользователи могут запутаться.

Линии

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

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

Линия создается по точкам, как только вы кликните на определенного место, нужно переместить курсор по направлению линии и кликнуть еще раз. Как только формирование линии будет закончено, нажмите на клавишу “Esc”. После этого всплывет окно с опциями.

Вы можете выбрать цвет, процент прозрачности и толщину линии. Также можно ввести описание, которое будет доступно при клике по объекту. Кликаем на “Готово”, как только редактирование будет закончено.

Многоугольники

С помощью многоугольников вы также можете рисовать произвольные отметки на карте. Обычно этот инструмент используют для обрисовки контура здания. Им же можно обозначить какую-то территорию или любую другую местность.

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

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

После того, как фигура сформирована, нажимаем на клавишу “Esc”. Выскочит окно с параметрами.

Можно задать цвет контура и заливки, выбрать толщину

Обратите внимание на два поля “Прозрачность”, которые расположены параллельно контуру и заливке. Здесь вы можете задать процент прозрачности

Если выставить 100, то нужный элемент просто исчезнет. Например, вы хотите, чтобы был только контур – вводите значение 100 в поле напротив заливки и она исчезает. То же сработает и с самим контуром. Очень удобно.

Можно закрывать редактор с помощью кнопки “Готово”. Но не спешите, есть еще кое-что, о чем надо сказать.

Пробки и слои

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

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

TripGeo

Этот сервис интересен тем, что позволяет не только проложить трек по карте, но и увидеть, как он будет выглядеть в реальности. TripGeo использует данные Google Maps и Google Street View и объединяет их в одном интерфейсе, позволяя совершить виртуальное путешествие по выбранному маршруту.

Вам потребуется указать точку старта и финиша, а также желаемый способ передвижения (автомобиль, велосипед, пешком). Кроме этого, следует указать еще несколько параметров, касающихся скорости отрисовки и масштаба изображения, после чего TripGeo подберет вам оптимальную траекторию передвижения и тут же создаст специальный виджет, в котором нижняя часть будет отображать карту, а верхняя — реальный вид этого места. Вам остается только нажать на кнопку Play и отправиться в путешествие.

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

Как создать карту Яндекс в конструкторе

Чтобы встроить карту Яндекса, нужно:

  • Создать карту в конструкторе;
  • Получить код карты;
  • Вставить код на сайт (он подходит для сайтов на любой CMS).

Для создания карт есть специальный сервис – Конструктор карт Яндекс.

Если у вас есть почта на Яндексе, вы можете перейти на сервис и сразу приступать к созданию карты. Нажмите кнопку «Создать карту».

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

Давайте попробуем создать карту. Рассмотрим пример: ваш офис находится в 10 минутах ходьбы от метро. Вы хотите указать на карте маршрут от метро до своего офиса.

Первым делом называем и задаем описание своей карты (не обязательно; но так будет удобнее, особенно если карт будет несколько).

Затем приступаете к редактированию карты. На карте вы можете:

  • Ставить метки;
  • Рисовать линии и многоугольники;
  • Указать информацию о пробках (подтягивается автоматически, об этом позаботится сам Яндекс);
  • Создавать слои.

Как нарисовать схему проезда на Яндекс.Картах

Вернемся к примеру. Нам нужно указать путь от станции метро до нашего офиса. Находим нужную станцию на карте, затем выбираем инструмент «Линии» и просто рисуем путь мышкой. Затем мы можем настроить внешний вид линии: толщину, прозрачность, цвет. Как видите, конструктор сразу подсчитал, сколько метров нужно пройти.

Затем предлагаю поставить еще и метку, указывающую на офис. Выбираем инструмент «Метки», и ставим метку, просто кликнув мышкой в нужном месте. Затем настраиваем метку: пишем описание, выбираем цвет и тип.

Нажимаем «Сохранить и продолжить».

Дальше указываем тип карты:

  • Интерактивная – можно увеличить, уменьшить, полноценно взаимодействовать с картой;
  • Статичная – будет на сайте в виде простой картинки. Подойдет в том случае, если вы знаете, что у вашей ЦА в основном медленное соединение.

Лучше, конечно же, использовать интерактивную карту.

Яндекс.Карта с несколькими адресами

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

Точно так же создаем новую карту, называем и пишем описание. Затем выбираем инструмент «Метки». Ставим метку в нужном месте и настраиваем.

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

Все, карта готова. Можно сохранять и вставлять на сайт. Даже если вы не можете по какой-то причине это сделать сейчас, вы всегда найдете готовые карты в списке карт:

Это интересно: Зачем нужны Яндекс.Коллекции

Как разместить контактные данные на странице или сайте

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

  • в нижней части страницы (футере, подвале);

  • в разделе с контактными данными;

  • более редкие варианты – на главной странице сайта или в разделе об оплате и доставке. В последнем из названных мест карту, как правило, размещают в случае, если предусмотрен самовывоз товара.

При наличии кода карты поместить её на сайт довольно просто. Сделать это можно разными способами. Рассмотрим их на примере сайта, разработанного на WordPress. Особые знания и навыки не потребуются, и вполне можно справиться самостоятельно.

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

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

Для начала убедитесь, что вы находитесь в редакторе пользовательских карт, зайдя на веб-сайт Google Maps и выбрав гамбургер-меню → Ваши места → Карты → Создать карту.

Добавление точки маркера

Пользовательская точка маркера — это точка, которая отображается на карте. Вы можете использовать это, чтобы добавить дополнительные описания к области, а также указать пользователям карты на место или область, которая не указана на слое «Базовая карта».

Чтобы добавить новую точку маркера на карту, убедитесь, что вы расположили подходящую область на слое «Базовая карта». Когда будете готовы, нажмите кнопку «Добавить маркер» в меню под строкой поиска в редакторе пользовательских карт.

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

Добавление линий или фигур

Вы можете добавить собственные линии и формы на свою карту, чтобы выделить определённые области.

Для этого щёлкните параметр «Нарисовать линию» в меню под строкой поиска, а затем выберите параметр «Добавить линию или фигуру».

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

Добавьте собственное имя и описание к вашему объекту во всплывающем меню, прежде чем выбрать «Сохранить» для подтверждения.

Создание пользовательских маршрутов

Пользовательскую карту также можно использовать чтобы поделиться маршрутами от A до B путём создания слоя маршрутов.

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

Слой маршрутов появится в меню слева. Добавьте точку отправления в текстовое поле «A», а точку прибытия в текстовое поле «B».

Как только оба поля «A» и «B» будут заполнены, карта обновится, показывая маршрут между указанными вами местоположениями.

Установка собственной карты на сайте

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

  1. После создания карты Яндекс в конструкторе нажмите «Получить код». Он будет виден в левой части экрана, после клика по кнопке «Сохранить и продолжить».
  1. Определитесь с типом кода для вставки, выделите содержимое поля и нажмите комбинацию клавиш «Ctrl+C».

  1. Переходим в административную панель WordPress, затем перемешаемся в форму «Контакты» или подвал сайта. Также можно войти в код сайта через «Редактор тем».
  1. Находим «Подвал», в самом низу после всех обозначений нажмите комбинацию кнопок «Ctrl+V». Затем кликните на кнопку «Обновить файл».

После этого карта отобразится в самом низу страницы.

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

Как создать Google Карту: пошаговая инструкция

Есть 2 способа создать Гугл Карту с помощью кнопки «Поделиться» и сделать свою карту.

1 способ: через кнопку «Поделиться»

Сработает, если место уже есть на Гугл Картах. Например, вы арендуете офис в бизнес центре, и его уже добавили на карту до вас.

Заходим на сайт с картами — https://www.google.ru/maps/. Пишем адрес офиса, например, Москва, Пресненская набережная, Москва Сити.

Затем жмем кнопку «Поделиться».

Сервис предлагает две возможности поделиться — скопировать ссылку или скопировать код. Так как нам нужно разместить карту на сайте, выбираем «Встраивание карт».

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

Важно: обратите внимание, если в Google есть карточка организации, то кроме точки на карте с адресом, можно посмотреть рейтинг, отзывы, номер телефона, часы работы и фотографии компании. Карточка организации помогает продвигать бизнес, содержит важную информацию для клиентов, повышает лояльность (они видят, что компания реально существует). Как добавить компанию в Google, читайте в нашей статье про Google Мой Бизнес

Как добавить компанию в Google, читайте в нашей статье про Google Мой Бизнес.

2 способ: создаем свою карту

Мы сначала создаем свою карту, а потом добавляем ее на сайт.

Заходим на сайт Google Maps — https://www.google.ru/maps/ и нажимаем на меню (3 горизонтальных полоски).

Нам нужен пункт «Мои места».

А в нем «Карты».

Пока здесь ничего нет, жмем «Создать карту».

Базовая карта не имеет названия. Чтобы назвать карту и добавить ей описание, жмем на строчку «Карта без названия».

Добавляем название и описание, после чего жмем «Сохранить».

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

Нажимаем на здание. Точка добавлена, теперь нужно ее назвать и добавить описание. Нажимаем «Сохранить».

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

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

Значки наглядно показывают, что находится в здании — где можно покушать, где переночевать, где совершить покупки. До созданной точки можно построить маршрут. Например, от метро. Делается через значок косой стрелки.

Точку можно отредактировать или удалить — значки карандаша и корзины.

Чтобы открыть меню карты, жмем на 3 точки рядом с названием. Можно удалить карту, задать область просмотра по умолчанию, добавить на сайт, экспортировать и распечатать.

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

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

Это интересно: Продвижение YMYL-сайтов

Принцип работы сервиса

Когда пользователь ищет информацию на карте или через поисковик Яндекс, система выдаёт ему данные о том, какие компании, работающие в интересующей его сфере, расположены ближе всего. Благодаря такой опции предприниматели могут привлекать находящихся рядом потенциальных клиентов. Эта разработка ведущего российского поисковика Яндекс – отечественный аналог зарубежных Карт от Google, и по некоторым параметрам он не только не уступает своему зарубежному аналогу, но и превосходит его в удобстве. Этот вывод справедлив, прежде всего, с точки зрения российских компаний, которым Яндекс предоставляет обновлённую информацию быстрее. Очевидно, что такой ценный сервис заслуживает внимания, и стоит использовать его возможности в полной мере. Поэтому давайте разбираться, как пользоваться этим инструментом.

Подписываем карту

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

Здесь я взял шрифт Baskerville, но сработает и любой другой хорошо читаемый шрифт. Я выбрал цвет темно-коричневый. Совсем черный текст будет диссонировать с картой. Также я избегаю шрифтов с вычурным стилем, так что не надо готических, рукописных шрифтов и совсем не надо papyrus (если вы, конечно, не подписываете схему захоронения фараона). Используйте инструмент “Шрифт”, чтобы создать цифровые обозначения. Когда будете их размещать постарайтесь сделать так, чтобы они не находились на одной линии. Тогда карту будет очень сложно прочитать. Вместо этого, поместите номер рядом с обозначаемый им элементом на первом пустом месте.

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

Для того чтобы подписать дороги, я использую интересный фотошопный трюк. Берем инструмент “Ручка” (pen tool), кликаем, чтобы создать якорную точку, потом ведем вдоль линии, которая нам нужна ( в данном случае — дороги), снова кликаем и оттягиваем немного в сторону. Вы увидите, как между первым и вторым якорями появится линия, и как по мере того, как вы ее оттягиваете, получившаяся линия изменяется. Оттяните ее еще немного дальше и снова кликните на ее конце. Это путь.

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

Когда текст на своем месте, выберите все текстовые слои, кликните правой кнопкой мыши, сделайте дупликат слоев. Выберите все полученные копии, щелчком правой кнопки объедините все слои в один, а потом уберите видимость с исходных отдельных слоев.

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

Это придаст небольшой светлый контур вокруг текста. Однако, его край останется четким, что смотрится на рукописной карте немного странно. Так что мы добавим еще немного внешнего свечения (outer glow). Вот настройки:

Уже гораздо лучше — мы можем видеть наши надписи даже на самых темных частях карты.

Добавляем финальные штрихи

Самый последний шаг — добавление любых дополнительных деталей, которых вам не хватает. Здесь я решил добавить черный контур, который придаст карте такой вид, как будто у нее были обтрепаны края (можете посмотреть фотошопный файл, чтобы узнать, как я это сделал), добавить подпись в нижнем правом углу. С этими финальными изменениями, карта готова! Сохраните ее в формате tiff, или несжатый jpg.

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

Я надеюсь этот урок был полезен. Это основа того, как я рисую карты. Карты подземелий, карты схваток, карты миров / районов имеют каждая свои особенные хитрости, но в общем и целом они делаются примерно таким образом.

Заполняет основные тени

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

Для этого – создайте новый слой и поставьте его настройки смешивания на overlay. Потом я взял жесткую круглую кисть размером в 20-30 пикселей с прозрачностью, чувствительной к нажиму. Это значит, что если я нажму легонько, то у меня будет почти прозрачная линия, а если я нажму на перо сильнее, то у меня получится глубокий непрозрачный черный.И да, я поставил цвет кисти на черный.

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

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

Добавляем общий свет и тень

Леса — это не просто одна большая плоская тень. Так что теперь нам надо придать нашей карте больше “телесности”. именно на этом этапе нее появится ощущение трехмерности. Начнем с того, что добавим еще один слой overlay. Теперь возьмите очень светлый желтый цвет для рисования светлых зон (почти белый, что-нибудь типа #f8f8e6), и для теней понадобится темно-синий (что-то типа #04050a).

А теперь поговорим немного подробнее о кистях. До этого момента мы нарисовали всю карту жесткой круглой кистью. И она хорошо подходит и для обозначения теней на реке и домах (заметьте жесткий, четкий край этих теней), но свет и тени органических объектов очень редко имеют такие четкие границы (посмотрите на светлые участки леса). Если вы используете круглую жесткую кисть для всего в карте, то она будет выглядеть “пластиковой”. На этом шаге я по-прежнему использую круглую жесткую кисть (с прозрачностью, чувствительной к нажиму) для теней на домах и реке, но для остальных теней я использую гранж-кисть. Их бывает огромное количество, но я сделал эту кисть самостоятельно, и если вы хотите такую же, то можете ознакомиться с соответствующим уроком. Эту кисть я и использую практически для всех вариаций света и тени.

Начнем со скал. Я использую кисть среднего размера с большой прозрачностью (размером 30-40px прозрачность — около 20% – и не забудьте опять установить чувствительность прозрачности к нажиму). Потом я медленно начинаю строить тени, падающие от гор, в несколько приемов. Обычно, скалы наиболее крутые у вершины, так что сначала я аккуратно обрабатываю верхние грани (уменьшая размер кисти, чтобы я смог добиться эффекта остроты кромки). Потом я рисую легкую тень по всей земле, расположенной под скалой. Это слегка “утапливает” более низкие участки в задний план и помогает смотрящему быстро понять, что этот участок расположен ниже, чем участок на вершине уступа. По мере того как скала сходит на нет ближе к краям, то и тени там становятся менее интенсивными. Но тем не менее под каждым из склонов и уступов скалы следует нарисовать тень.

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

Как я уже упоминал, река и дома очень просты в вопросе теней: вся река темнее, а каждый дом отбрасывает четкую одиночную тень. Все готово? Нет! Луга тоже нуждаются в светлых пятнах и тенях. Здесь я снижаю прозрачность до 10%, увеличиваю размер кисти до 50-100px и рисую не очень яркие светлые участки, придавая еле заметную форму иначе совсем неинтересному участку карты. .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector