Яндекс рисование. Яндекс краски: рисуем, играя

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

В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.

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

Для чего нужна карта на сайте?

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

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

Как вставить карту Яндекса на сайт (пошаговая инструкция)

Следует воспользоваться конструктором API Яндекс.Карт .

В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:

Шаг 1. Начальная настройка Яндекс карты для сайта:

Откройте страницу конструктора Яндекс.Карт для сайта .
Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
Укажите в соответствующем поле название будущей карте.
Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.

Шаг 2. Рисование на карте точек (меток):

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

Шаг 3. Настройка свойств установленной на карте метки:

Кликаем непосредственно по нарисованной нами метке.
В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
Любую метку можно удалить в соответствующем окошке свойств.
Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.

Шаг 4. Рисование линий на карте:

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

Шаг 5. Рисование многоугольников, заполненных цветом контуров:

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

Шаг 6. Изменение размеров карты для сайта:

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

Шаг 7. Получение кода карты для сайта (Яндекс):

Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
Даже после сохранения карты всегда можно вернуться к редактированию.
Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.

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

Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. "Социальные кнопки" находятся справа. Такова наша маленькая корысть .

С октября 2013г. сервис Яндекс.Краски не работает. Вот официальный ответ службы поддержки Яндекса:

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

С уважением, Юля Облако
Служба поддержки Яндекса
http://help.yandex.ru

Поэтому все, что написано ниже, теперь уже история…

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

На Яндекс краски бесплатно можно было перейти по адресу: kraski.yandex.ru, либо в поисковой строке Яндекса ввести запрос “Яндекс краски” и перейти по первой предложенной поисковиком ссылке.

Как видно на рис. 1, после перехода по указанной выше ссылке нам предоставляется 2 возможности:

установить яндекс краски бесплатно на свой компьютер (цифра 1 на рис. 1).

попробовать порисовать (цифра 2 на рис. 1) – яндекс краски онлайн, при этом устанавливать на свой компьютер ничего не нужно

Рассмотрим оба варианта по порядку.

Устанавливаем Яндекс Краски

1-ый вариант подойдет тем, кто планирует часто пользоваться этой программой, либо использует медленный или лимитный интернет. Требования, которые при этом предъявляются к компьютеру:

Операционная система Windows XP/Vista/7,
программа Adobe Flash Player, желательно последней версии,
наличие свободного места 10 на жестком диске.

Если Вы пользуетесь браузером Google Chrome, то это значит, что программа Adobe Flash Player уже встроена и обновление браузера Google Chrome автоматически связано с обновлением Adobe Flash Player.

Если Вы пользуетесь другим браузером, то последнюю версию программы Adobe Flash Player следует скачивать и устанавливать только с официального сайта http://get.adobe.com/ru/flashplayer/

Желательно сначала удалить старую версию Adobe Flash Player через встроенный в операционную систему Windows сервис «Удаление программ», и только потом устанавливать новую версию с официального сайта. Этим придется заняться в случае, если после установки на свой компьютер программы Яндекс Краски бесплатно не корректно будет работать анимация.

Если все требования к установке программы яндекс краски удовлетворены, тогда кликаем на кнопку «Установить краски» (цифра 1 рис.1). После этого скачивается файл YandexKraskiSetup.exe, как правило, в папку «Загрузки» вашего браузера. Кликнув по скачанному файлу YandexKraskiSetup.exe, получаем предупреждение системы безопасности:

Рис.2 Переходим к установке сервиса Яндекс Краски на свой компьютер

Щелкаем «Запустить» (рис. 2) и появляется сообщение «Контроля учетных записей пользователей» с вопросом о разрешении внести изменения, в котором кликаем по кнопке «Да».

Далее определяемся с тем, куда будем устанавливать яндекс краски бесплатно. Если предложенный вариант для установки программы Вас не устраивает, тогда находим другую папку с помощью кнопки «Обзор» (рис. 3):

Рис.3 Установка Яндекс Красок на компьютер

Щелкнув по кнопке «Установить», переходим к «Завершению установки Яндекс.Красок» (рис. 4):

Рис.4 Завершение установки Яндекс Красок

На рис. 4 обратите внимание на наличие или отсутствие галочек напротив надписей:

Сделайте Яндекс домашней страницей,
Ищите с помощью Яндекса из вашего браузера,
Установите Яндекс.Бар для Internet Explorer и Firefox.

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

Если на рис. 3 Вы не убирали галочку напротив «Установить ярлык программы на рабочий стол», тогда вызвать Яндекс Краски можно, щелкнув по ярлыку на Рабочем столе (рис. 5):

Рис.5 Ярлык для Яндекс Краски

В любом случае (при наличии ярлыка программы на Рабочем столе или при его отсутствии) найти Яндекс Краски всегда можно через кнопку «Пуск» – «Программы».

Рисуем онлайн с помощью Яндекс красок

Рис.6 Рисуем с помошью Яндекс Красок

Коротко рассмотрим инструменты Яндекс Красок:

1 (цифра 1 на рис. 6) – Указатель, который предназначен для выделения объектов, кроме линий, нарисованных как на рис. 6, и фона.

2 – Кисть. Прежде чем рисовать кистью, можно выбрать цвет, интенсивность цвета, толщину кисти.

3 – Фон. Можно выбрать из имеющихся вариантов какой-либо фон, варианты будут представлены там, где находится цифра 10 на рис. 6. После выбора фона можно изменить его цвет.

4 – Клипарт. Кликнув по этому инструменту (цифра 4 на рис. 6), увидим выбор готовых картинок (цифра 10 на рис. 6). Если кликать по маленьким треугольникам наверху окна с готовыми картинками, то увидим, что картинки меняются по темам «С днем рождения», «Фигуры», «Предметы», «Персонажи», «Эмоции», «Люблю, скучаю», «Новый год». Картинку можно схватить мышкой и перетащить на открытку. Дальше эти картинки можно перемещать по открытке, удалять, уменьшать, увеличивать, поворачивать по часовой стрелке, изменять цвет и т.п.

5 – Текст. Щелкаем по инструменту «Текст», затем кликаем в месте вставки текста и печатаем текст. Затем продолжаем рисовать. Если введенный текст не понравился, можно по нему 2 раза кликнуть мышкой, появится окно (рис. 7), в котором кликаем по «Редактировать»:

Рис.7 Текст в Яндекс Красках

Можно выбрать цвет для текста, шрифт (справа в окне «шрифты» – цифра 10 на рис. 6, всего 2 шрифта). Чтобы поворачивать текст в разные стороны, растягивать вверх-вниз, достаточно «ухватиться» мышкой за одну из стрелок, обведенных на рис. красной рамкой, и при этом, не отпуская мышку, поворачивать текст или тянуть его для уменьшения/ увеличения.

6 – Фото (цифра 6 на рис.6). Можно загрузить фото со своего компьютера, а также сделать коллаж из нескольких фото. Свои фото можно передвигать в пределах листа, сделать отражение, поворачивать под разным углом, увеличивать или уменьшать. Делается все так же, как с текстом (рис. 7), с помощью стрелок по углам фото.

7 – Фоторамка (цифра 7 на рис. 6). С помощью этого инструмента можно взять готовый шаблон, вставить в этот шаблон свою картинку и таким образом получить персональный рисунок.

Для этого выбираем шаблон, затем кликаем по надписи «Нажмите для загрузки фото» (рис.8). Выбираем со своего компьютера фотографию и подгоняем лицо с фото под рамку имеющегося шаблона, при этом фото можно уменьшать/ увеличивать, поворачивать, передвигать.

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

Рис.8 Фоторамки на Яндекс Красках

8 (цифра 8 на рис. 6)– выбор цвета.

9 (цифра 9 на рис. 6) – выбор линии.

10 (цифра 10 на рис. 6) – окно для выбора различных вариантов, соответствующих тому или иному инструменту.

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

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

Выбрав инструмент "Кисть" вы может рисовать обычные линии, а можете выбрать один из нескольких режимов Кисти. Так, например, вы можете рисовать цепочки из звездочек, или цветочков простым движением мышки.

Кроме того, как уже говорилось выше, есть множество объектов, которые можно вставлять в рисунки. Все объекты разбиты на категории: новый год, свадьба, животные, школа, предметы, персонажи, день рождения, транспорт, знаки зодиака, рамки, романтика, цветы и эмоции. У вас есть объекты для создания рисунков, практически на все темы.

Есть также возможность использовать фото-рамки. Будет загружено одно из нескольких изображений с отверстием для лица, и вам нужно будет вставить свою фотографию.

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

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

Зачем нужна интерактивная карта

Удобно для клиента – легко планируется маршрут с учетом всех актуальных изменений, так как Яндекс оперативно вносит данные о ремонтах и новых застройках на свои карты.

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

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

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

С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.

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

И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем ).

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

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

Начинается процедура с этой странички – tech.yandex.ru/maps/tools/constructor/

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

Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.

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

Добавление объектов

Первым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:

После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:

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

Слева наполняется список всех отмеченных на карте адресов.

Изменение масштаба и положения

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

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

Контуры объектов (многоугольники) и линии

При необходимости выделить очертания какого-либо элемента на карты, когда указания точкой недостаточно, используем инструмент «Многоугольники». Устанавливая одну точку за другой, мы получаем периметр, залитый внутри определенным цветом.

Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:

Начертание линий осуществляется кнопкой «Линии». Все действия аналогичны предыдущему инструменту, только пространство между точками не закрашивается. С помощью линий на Яндекс карте можно рисовать маршруты движения (прохода, проезда).

Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.

Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).

Завершаем маршрут нажатием на «Готово».

Вид карты и наложение пробок

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

А вот переключение режимов между схемой, спутником и гибридом может пригодиться.

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

Название и описание

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

Код карты для вставки на сайт

Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:

интерактивную карту (о которой я говорил с самого начала);
статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
печатную – файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.

Выбор между ними будет выведен сразу после сохранения.

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

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

Итоговый код появляется после нажатия на кнопку «Получить код карты», мой выглядит вот так:

При выборе печатной карты добавится выбор формата файла – png или jpg, и кода, соответственно, не будет – кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)

Как вставить карту Яндекс на сайт

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

Карта, которую я сделал

Вот что получилось у меня после всех проведенных настроек:

Удобен сей элемент всем – и объекты нужные подсвечены и масштаб подобран как положено. Кроме того, сервис Яндекса позволяет пользователю определить свое местоположение (стрелочка в верхнем левом углу) и проложить индивидуальный маршрут в нужную точку.

Раскрыть карту на весь экран позволяет кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок. Теперь про плагины.

Плагины для WordPress и других CMS

Раньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой – Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение – не обновляется более 2-х лет, видимо спроса нет.

Из относительно актуальных я нашел Yandex Maps API (обновлен 4 месяца назад) и Oi Yandex.Maps for WordPress (5 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины .

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