Отрисовка схемы проезда в illustrator
Довольно часто, в макете требуется разместить карту проезда, изобразить план-схему местности, показать нужные участки, нарисовать стрелочки-пути и т.д. Если копировать карту с интернета, например с Гугл-карты, то на ней плохо читаются названия улиц, номера домов. К тому же, она плохо подходит для вставки на макет.
Но так ли сложно отрисовать схему проезда самому, изобразить здания которые нужны, основные улицы, главные ориентиры, показать схемы проезда?
В этой статье я покажу, как нарисовать схему проезда в Adobe Illustrator. В итоге, получится вот такая карта с изображением пути от станции метро к магазину детских игрушек.
Подготовка
Первое и самое главное — включите музыку! Лично мне обычно помогает рисовать бодрый драм (очень понравился последний релиз Chase & Status – End Credits).
Во-вторых, убедитесь, что компьютер включен. Серьезно. Хватит болтать, давайте начнем.
Прорисовка основных элементов схемы
Почти все элементы схемы имеют прямоугольную форму, поэтому возьмем инструмент "Прямоугольник". Нарисуйте дороги и дома, чтобы дороги получились одинаковой толщины, копируйте их удерживая клавишу ALT. Тоже самое можно делать с другими одинаковыми элементами.
Но не все можно нарисовать прямоугольником или эллипсом. Бывают здания, парки или озера не правильной формы. В этом случае понадобится инструмент "Перо". Он позволяет расставлять точки, между которыми проходят прямые или изогнутые линии. Инструмент "Перо", при умелом использовании, позволяет получить практически любую форму.
Цвета вашей карты, по возможности, должны сочетаться с цветами макета. Она может состоять из нескольких цветов или быть вовсе черно-белой. Направления движения основные пункты в основном изображаются красным цветом.
Подписи улиц, номеров домов, достопримечательностей.
Когда все элементы нарисованы и раскрашены, нужно подписать названия улиц. По необходимости номера домов и все, что может помочь ориентироваться на местности.
Шрифт должен быть не слишком мелкий и хорошо читаемый. Поскольку карта схематическая, нет смысла подписывать абсолютно все, что на ней есть.
Заключение
Хорошая карта требует очень много терпения. Более чем вероятно, если вы станете дизайнером, кто-то, в конечном счете попросит Вас сделать карту.
В этом уроке я продемонстрировал основные навыки которые необходимы для создания карты.
Рано или поздно каждый дизайнер сталкивается с увлекательной работой по созданию карты, будь то листовка или веб-сайт. Общая цель состоит в том, чтобы визуально задокументировать конкретный участок земли, чтобы люди могли найти дорогу к месту работы или мероприятия.
Важным фактором является количество деталей, необходимых для карты, для большинства ситуаций карта должна быть достаточно базовой, чтобы обеспечить узнаваемую структуру дороги без слишком сложной детализации. Как вы уже видели на существующих картах, использование графики и цветов важно для различения разных типов дорог, в этом руководстве будет рассказано о том, как использовать кисти Illustrator для создания карты небольшой сети дорог.
Готовая графика карты должна быть четкой и четкой, поэтому карта будет создаваться в векторном формате в Illustrator. Представьте себе, если карту нужно увеличить на листочке как требование клиента, в Photoshop у вас останутся нечеткие неровные края. Кроме того, полная карта будет редактируемой, позволяя изменять формы дорог без необходимости удалять и перерисовывать всю линию.
Начните с рисования прямой линии (удерживайте Shift) на ваших новых документах, добавьте довольно толстый синий штрих. Это будет базой для нашей британской автомагистрали, являющейся самым большим типом дороги, эта линия должна быть самой толстой.
Скопируйте и вставьте линию обратно на место (CTRL / CMD + F) и измените вес на более тонкий штрих и цвет в белый. Это придаст сине-белую полоску для имитации проезжей части.
Выберите оба мазка и нажмите значок «Новая кисть» в окне кистей.
В окне параметров выберите переключатель «New Art Brush».
В следующем диалоговом окне у вас есть возможность назвать новую кисть, в данном случае это «Автомагистраль». Также проверьте направление бега по всей длине кисти, а не поперек нее.
Теперь вы заметите, что ваша новая кисть появляется в палитре кистей. (Я удалил кисти по умолчанию, чтобы облегчить доступ)
Продолжайте и повторите предыдущие шаги, чтобы создать набор кистей для представления различных типов дорог. Поэкспериментируйте с различными весами и расположением ударов, чтобы получить интересные эффекты. Не забудьте производить эти кисти в соответствии с иерархией дорог, которые они представляют, например, второстепенная дорога должна быть более тонкой и менее заметной, чем главная дорога.
СОВЕТ: На дорогах, которые необходимо будет соединить, слегка продлите внутренний ход наружу, это позволит им объединиться, не очерчивая поперек стыка.
Наряду с дорожной графикой используйте круги для создания соответствующих значков перекрестков. Использование одинаковых цветов заливки и обводки позволит им сочетаться с дорогами.
Теперь мы готовы нарисовать реальную карту, создать контейнер для ссылки и нажать CTRL / CMD + 2, чтобы заблокировать ее. Не беспокойтесь о дорогах, выходящих за пределы этого контейнера, мы их обрежем позже.
С помощью инструмента «Перо» нарисуйте свою первую главную дорогу, обратитесь к существующей карте, чтобы убедиться в правильности формы и масштаба. Это где все вы, жители США, легко! Великобритания полна извилистых извилистых дорог, которые отлично подходят для езды по дороге, но с трудом справляются!
Добавьте соответствующую кисть к новому пути, превратив его в автомагистраль.
При необходимости добавьте пару перекрестков и используйте текстовый инструмент для предоставления дополнительной информации.
Продолжайте рисовать контуры и выбирайте подходящую кисть для создания сети дорог.
Войдите и добавьте перекрестки и перекрестки, скопировав и вставив круги, созданные ранее.
Работайте по иерархии на второстепенных дорогах, которые будут еще более запутанными. Нарисуйте каждый путь и добавьте кисть Minor Road. Здесь подсказка, упомянутая выше, пригодится, позволяя дорогам соединяться без контура, проходящего через стыки.
Чтобы добавить некоторые названия к вашим дорогам, используйте Pen Tool, чтобы нарисовать путь в подобном контуре к определенной дороге.
Затем выберите инструмент «Текст» и наведите указатель мыши на эту строку, пока не появится значок «Тип пути». Введите название вашей дороги, и вы заметите, что поток текста следует за линией, вы можете использовать маленькие ручки для редактирования положения текста или использовать инструмент прямого выделения для точной настройки формы пути.
Наконец, отрежьте лишние дороги из-за контейнера. Скопируйте и вставьте форму контейнера (CTRL / CMD + Alt + 2, чтобы разблокировать объект), затем выберите все (CTRL / CMD + A). Перейдите к объекту> Обтравочная маска> Создайте и обратите внимание, как линии обрезаются до контура рамки.
На сайтах онлайн-визиток
Выберите любой подходящий профильный сайт, где можно сделать визитки. На некоторых есть привязка к картам Яндекса или Гугла — просто обозначьте нужную область, и она будет добавлена на визитку.
Плюсы метода: удобство, не нужен специальный софт на ПК или ноутбук.
- в большинстве случаев готовый макет является платным;
- возможный тираж — от нескольких десяток экземпляров;
- не получится напечатать пробный вариант и оценить его;
- для работы нужен интернет с высокой скоростью;
- доставка обычно занимает несколько дней.
Придумываем легенду карты
Прежде чем начать неплохо было бы придумать как мы будем обозначать различные дороги и здания.
Вот что я придумал:
Это довольно простая легенда, но Вы в зависимости от сложности задачи можете добавить или убрать какие то детали.
Дороги рисуются довольно просто. Выберите Line Segment Tool [\] и нарисуйте отрезки к которым добавляем обводку разного цвета и толщины.
Видео урок:
Как самому нарисовать схему проезда в Иллюстраторе.
Рисование схемы проезда в другом, более упрощенном стиле, можно посмотреть здесь.
При создании макета иногда приходится добавить карту проезда. И не обязательно чтобы карта была детально прорисована вплоть до номеров зданий, достаточно изобразить схематическое размещение дорог и название улиц. Обычно на карте изображают местность захватив основные ориентиры например, станцию метро, остановку или другое.
В этой статье я покажу как сделать такую схематическую карту в Illustrator. Сначала необходимо взять кусок подходящей карты и вставить его непосредственно в Adobe Illustrator. Я скопировал кусок карты Киева.
Для удобства заблокируйте слой чтобы он не двигался вместе с нарисованными элементами.
Сверху по карте инструментом перо я рисую линии вдоль улиц, которые хочу отобразить на своей схеме.
Копирую линии отдельно и делаю с ними некоторые преобразования, чтобы добиться необходимого эффекта.
Подписываю названия улиц и ставлю ориентиры. В мое случае это станция метро. И конечно же обозначаю красным пятном конечный пункт назначения.
Теперь схема готова ее можно ставить в макет. Такая карта хороша тем, что не нагружает лишними деталями, быстро рисуется (у меня вышло около 10 минут).
Настройка
Никаких особых настрое не нужно. Создайте новый веб-документ, а просто нажмите кнопку ОК.
Приступая к работе
Прежде всего, Вам понадобятся карты для использования в качестве образца. Однако если у вас есть сумасшедшая фотографическая память, то можете обойтись и без них.
В качестве карты я использовал скриншот Google Maps с дорогой и торговым центром.
Перекрестки
Как вы уже заметили, линии иногда не выстраиваются правильно на перекрестках. Это легко правится.
В некоторых случаях достаточно просто изменить порядок слоев. Используйте Ctrl + [ и Ctrl +], для настройки порядка слоев.
В некоторых случаях все гораздо сложнее. Тогда я создаю пером формы которые накладываю сверху на линии идущие не так.
Создание зданий и бэкраундов.
Используйте перо, чтобы отрисовать здания.
Используя Pen Tool я нарисовал несколько фигур и отправил их на задний план.
В конце я добавил 3D эффект (как это делается читайте в предыдущих постах) и дорисовал детали.
В Мастере Визиток
Рассмотрим пошаговый алгоритм, как сделать схему проезда на визитке в программе Мастер Визиток:
-
Скачайте графический редактор, установите и откройте его.
- Сгенерируйте карту: для этого нужно зайти в конструктор карт Яндекса или Гугла, ввести нужный адрес и сделать принтскрин в хорошем качестве.
- Вставьте созданное изображение со схемой на оборотную сторону визитки. Обратите внимание, что картинку можно редактировать — передвигать, масштабировать, корректировать яркость, прозрачность и т.д.
К плюсам такого способа можно отнести следующие моменты:
- простота и удобство работы — с созданием карточки справится даже новичок, который с компьютером на «вы»;
- быстрый результат — потратив какие-то пять минут, вы получите дизайнерские и современные визитки, которые будут привлекать клиентов и покупателей;
- понятный русскоязычный интерфейс — не придется разбираться, на какую кнопку нажать, чтобы добиться результата.
А минусы? Их просто нет, потому что софт создан именно для визиток. Разработчики постарались учесть все гипотетические желания пользователей и нивелировать возможные подводные камни.
Три способа сделать схему проезда
Визитку со схемой проезда можно создать с помощью разных инструментов:
- онлайн-сервисы — для этого нужны хороший интернет и деньги, так как, скорее всего, бесплатно скачать готовую визитку не получится;
- популярные графические редакторы — подойдут Фотошоп или Иллюстратор; — специальная программа для самостоятельной разработки визитных карточек на компьютере или ноутбуке.
Если вы задумались, как нарисовать схему проезда, то не стоит переживать — художественные способности здесь абсолютно не нужны. Можно взять готовую карту из Яндекса или Google. Обсудим плюсы и минусы разных методов создания эффектных и функциональных визиток, которые позволят быстро найти ваш офис.
Смотрите видео урок:
5.0 Оценок: 2 (Ваша: )
Разместите фрагмент карты на обороте — это красиво и удобно. Скачайте Мастер Визиток и делайте современные карточки своими руками!
Создание кисти
Выбираем обозначение дороги и открываем окно Brush. Щелкните на кнопке Параметры (маленький значок с тремя линиями в верхнем правом углу). Это откроет Brush Options, выберите New Brush.
Вам будет представлено следующее диалоговое окно. Выберите New Art Brush и нажмите OK.
Откроется новое окно в котором необходимо настроить параметры. О! Тут все как раз так как нам надо. Осталось только ввести имя кисти.
Повторите эту процедуру для каждого типа дороги.
Поиск подходящей карты
Для рисунка, нужно взять за основу реальную карту, например, из интернета. Когда вы нашли нужный участок и он полностью отображается на мониторе, нажмите клавишу "PrintScreen", чтобы сделать фотографию экрана. По верх этой фотографии мы и будем рисовать основные ориентиры.
Откройте новый документ в программе Illustrator. И нажмите - Редактирование/Вставить. или сочетание клавиш CTRL+V. Теперь, фотографию нужно выровнять и заблокировать от перемещений.
Рисование Дороги
Добавляем нашу карту в документ люстры. Я сделал это с помощью команды File > Place… Затем я заблокировал карту чтобы она не мешалась (Object > Lock > Selected)
Используйте Pen Tool [P] для рисования дороги. Просто выберите кисть и начните рисовать!Повторите этот процесс для всех основных дорогах.
Добавление значков и стрелок на схеме проезда.
Помочь ориентироваться на местности могут также знаки остановки, пешеходные переходы, логотипы компаний и другие обозначения. Их тоже можно найти в интернете или нарисовать самому в стиле макета и карты.
Если вы не знаете на каком транспорте и откуда человек будет добираться, но стрелку можно не рисовать или сделать несколько версий пунктиром.
Такая отрисованная схема проезда используется при создании макета и ставится рядом с адресом и контактами. Глядя на такую схематическую карту, человеку легче сориентироваться на местности и найти нужное место.
В Иллюстраторе
Это профессиональный графический редактор, в котором создать схему проезда можно путем ее отрисовки. Нужно ввести свой адрес в Яндекс.Карты или подобный сервис и сохранить нужный участок. Для этого сделайте скрин. Затем в Иллюстраторе нарисуйте схему проезда, основываясь на реальном изображении.
Плюсы: оригинально смотрится, высокое качество карты.
- для работы в программе нужны опыт и профессиональные знания;
- для отрисовки схемы потребуется много времени и сил;
- софт будет хорошо работать только на мощном компьютере.
Мы проанализировали три способа создания визиток. В результате стало очевидно, что Мастер Визиток — лучший выбор! С этим простым, но функциональным графическим редактором вы сделаете современные и качественные визитные карточки со схемой проезда. Они будут прекрасно выглядеть и эффективно работать на развитие вашего бизнеса.
Привет всем! Простите, что долго не писал. Болезнь совсем одолела. Пока болел было время подумать о чем же я хочу еще написать. Результатом стал этот урок.
Каждый раз, когда я думаю как написать урок — я стараюсь показать приемы, которые я использую в своей работе в качестве дизайнера. Например, сегодня я постараюсь показать как рисуется эта симпатичная карта.
Читайте также: