Подключаем онлайн-карты к навигатору на смартфоне. Часть 1 — стандартные растровые карты

Что из себя представляют онлайн-карты? Как узнать адрес сервера заинтересовавшей вас карты? Как создать файл с настройками, который позволит навигатору на смартфоне подключиться к этой карте?

Содержание:

Вступление

Среди навигационных приложений для смартфонов существует такие, которые предназначены для туризма и всевозможных загородных активностей. Среди наиболее известных из них можно выделить OsmAnd, Locus и GuruMaps. Всех их отличает большое количество специализированных функций, которые могут пригодится в пути. А так же еще большее количество всевозможных (порой весьма запутанных) настроек. Но сейчас нам более всего интересна одна: возможность добавлять дополнительные карты и быстро переключаться между ними.

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

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

Замечу, что у всех приложений пресеты более или менее похожи. Так что в качестве примера мы будем рассматривать GuruMaps, ведь он есть и под Android, и под iOS. Итак, давайте представим, что мы зашли в папку с его пресетами, обнаружили там файл с названием openstreetmaps.ms, а затем открыли его с помощью обычного текстового редактора.

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

name — Название карты, которое будет отображаться в приложении
minZoom — С какого уровня приближения будет показываться эта карта
maxZoom — До какого уровня приближения будет показываться эта карта
url — Шаблон для доступа к файлам карты
serverParts — Если у сервера, на котором хранятся файлы карты, есть несколько зеркал, то нужно перечислить их названия

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

А теперь подробнее приглядимся к шаблону url.

Навигатор автоматически заменяет слова в фигурных скобках на “координаты” требуемого в данный момент фрагмента карты. Вот что именно будет подставлено на место заглушек:

– Сюда будет подставлено одно из значений serverParts
– Уровень приближения (zoom), для которого нужно скачать фрагмент карты
– Номер фрагмента карты по горизонтали
– Номер фрагмента карты по вертикали

После подстановки значений навигатор получит ссылку, по которой затем скачает файл с требуемым фрагментом карты. К примеру, такую:

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

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

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

Открываем панель с инструментами разработчика (Ctrl + Alt + I для Google Chrome)

В открывшейся панели переходим на вкладку Sources.

Открываем по порядку все папки, пока не найдем папку изображениями кусочков отображаемой карты.

Жмем правой кнопкой на имя файла. В открывшемся меню выбираем Copy link address

К примеру, нам попалась вот такая ссылка
http://anygis.herokuapp.com/Combo_Best_Topo/1242/639/11

Нужно понять, что именно обозначают эти цифры. Проверяем из по нашей эталонной карте — OpenStreetMaps.

Не загружается. Попробуем поменять цифры местами.
http://a.tile.openstreetmap.org/11/1242/639.png

Загрузилось! А теперь сравним тайл полученные по первой и по второй ссылке:

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

Чтож, а теперь, зная, в каком порядке шли координаты у OpenStreetMaps – z,x,y – мы можем с уверенностью сказать, в каком они идут у нашей карты.

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

Далее, если бы url начинался с одиночной буквы или цифры, то можно было бы поподставлять туда другие значения. Но обычно там или a,b,c или 0,1,2,3.

Итак, теперь мы выяснили все необходимые параметры и можем сделать пресет для нашей новой карты.

Остается сохранить файл под новым именем и добавить его в свое навигационное приложение. Для iOS – просто перетащите файл в папку приложения (через iTunes). Для Android – скопируйте файл в следующую директорию:

Теперь, когда вы откроете навигатор, в списке карт появится сделанная вами. Поздравляю!

Как видите, это было довольно просто. И что самое приятное, весь процесс более или менее аналогичен для всех вышеперечисленных навигаторов. Быстро, универсально, кроссплатформенно.

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

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

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

Сравниваем растровую графику и векторную | Важные отличия

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

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

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

Растровая графика

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

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

Именно поэтому решающее значение для «качества картинки» в растровой графике имеет разрешение. Чем больше пикселей на квадратный сантиметр или дюйм – тем более «гладким» кажется визуал.

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

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

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

Кроме того, растровая графика при просмотре минимально нагружает ресурсы компьютера. Именно поэтому она используется в вёрстке веб-сайтов, встраивается в различные документы и файлы. Растровыми форматами являются JPEG/JPG, BMP, PNG, TIFF, ICO и многие другие. RAW, в котором хранятся «сырые» данные с сенсоров фотокамер, тоже к ним относится.

Итак, подведём итоги.

Достоинства

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

Способна воспроизводить изображения любой сложности независимо от количества элементов;

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

Недостатки

«Гладкость» изображения зависит от разрешения. Чем оно выше – тем более приятной глазу будет «картинка»;

Изображения малого или среднего разрешения не подходят для печати на больших полотнах;

Да и в принципе растровую графику лучше не масштабировать.

Таким образом, если планируется делать что-то «для себя» или редактировать фотографии либо фотореалистичные графические файлы, то лучше выбрать растровые форматы. А вот для полиграфии они не подходят.

Векторная графика

Растровая графика

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

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

При рисовании круга компьютеру даётся команда – «Нарисовать круг с радиусом 10% и центром с координатами x=12%, y=52.36%».

Разумеется, описание работы векторной графики, приведённое выше – упрощённое, которое использовалось ещё в 1980-х годах. Сейчас технологии чуть усложнились, но общий принцип остался неизменным.

Векторная графика лишена главной проблемы растровой – она позволяет спокойно масштабировать изображение сколь угодно много. «Картинка» не будет терять ни гладкость, ни резкость, ни чёткости независимо от того, на каком полотне она отображается – хоть на 23-дюймовом экране компьютера, хоть на рекламном щите 6×3 метра, хоть на баннере, который закрывает 27-этажный дом (вроде рекламы Samsung в Москве – высота полотна 80 метров, ширина 40 метров).

Но при этом придётся пожертвовать детализацией и реалистичностью. Чем больше «элементов» у «картинки» — тем сложнее набор формул, описывающих её. И для отображения «картинки» или банально её рисования требуется огромное множество ресурсов компьютера. Сложные векторные изображения на стареньком ноутбуке даже открыть не удастся.

Эта особенность «вектора» привела к тому, что данные форматы используются очень редко и – в большинстве случаев – в очень узкоспециализированных сферах. Например, в проектировании и рисовании чертежей (CAD-системы вроде AutoCAD, «Компас 3D» или даже Microsoft Visio используют именно «вектор»), составлении карт и различных схем. Кроме того, векторная графика применяется в полиграфии и дизайне рекламных материалов.

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

Итак, подведём итоги.

Достоинства

Идеально подходит для проектирования чертежей, схем и карт;

Позволяет легко масштабировать изображение с сохранением качества;

Позволяет вносить правки без риска «всё испоганить».

Недостатки

Низкая детализация и реалистичность готовых изображений. Точнее, можно добиться высокой реалистичности, но тогда «картинка» будет «тяжёлой» во всех отношениях – включая долгую обработку компьютером;

Не подходит для встраивания в сайты, документы и другие файлы.

Как было сказано выше, векторную графику лучше всего использовать в сфере полиграфии. Тогда она обеспечит достаточную «гладкость» и «красоту» картинки независимо от размера полотна. А вот для рисования и обработки фотографий рекомендуется ограничиться растром.

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

Что лучше – растровая или векторная графика?

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

Сравним эти два варианта.

Характеристика

Растровая графика

Векторная графика

Составляющие изображения

Формулы, описывающие геометрические фигуры с опорными точками

Поведение при масштабировании

Теряет качество, «рассыпается»

Качество не изменяется

В зависимости от разрешения

В зависимости от сложности

Количество деталей

Поддерживает хорошую детализацию

Хорошую детализацию можно создать, но это приведёт к повышению сложности

Сфера применения

Фотографии, веб-изображения, встраиваемые иллюстрации

Создание чертежей, схем, карт, полиграфия и допечатная подготовка

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

Как создать свою карту для спутниковой навигации

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

Сейчас у многих имеются устройства, так или иначе оснащённые спутниковой GPS-навигацией. Это может быть смартфон, карманный компьютер, коммуникатор или же просто навигатор. Во многих случаях качество предустановленных карт оставляет желать лучшего, особенно для пеших походов. Тут могут помочь online-источники спутниковых снимков и карт. Достаточно сравнить два изображения одного участка:

Слева — спутниковый снимок Google maps, справа — тот же участок на карте. Который из них выглядит подробней?

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

Инструкция пошаговая, подробно иллюстрированная и должна быть понятна любому новичку.

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

На этом этапе нам понадобится программа SAS.Планета, скачать которую можно на официальном сайте sasgis.ru

Первым делом требуется указать в качестве источника данных Интернет и кэш:

А также выбрать нужный тип карты. Что это будет — спутник или карта Google, карты Яндекса или спутниковые снимки с геопортала Роскосмоса, а то и генштабовские карты — зависит только от Ваших личных предпочтений и качества источника на требуемом участке.

Итак, находим визуально, по координатам или встроенному поиску нужный участок. Определяем требуемую детализацию, увеличивая масштаб изображения. Текущий масштаб указывается слева, под линейкой масштабирования, в относительных уровнях (z14, z16 и так далее). Он пригодится нам на следующем этапе. Ориентируйтесь на то, чтобы нужные объекты были хорошо различимы и не «замылены». Но и не забывайте, что каждый уровень детализации увеличивает размер результирующей карты.

Уменьшаем масштаб до тех пор, чтобы весь нужный участок карты вошёл в экран. Выбираем инструмент «прямоугольное выделение» (вторая слева кнопка на панели инструментов или сочетание Ctrl+R на клавиатуре), и выделяем границы нашей будущей карты.

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

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

Выбираем в меню выделения пункт «Предыдущее выделение», либо нажимаем Ctrl+B на клавиатуре, чтобы заново не выделять ту же самую область, и появится знакомое нам окно.

На этот раз нас интересует вкладка «Склеить». Здесь потребуется настроить большее количество параметров:

  • Результирующий формат — формат изображения, в котором будет сохранена наша карта. Для дальнейшей обработки желательно выбирать BMP, хотя он и занимает больше места, но понимается всеми программами и не имеет потерь при кодировании.
  • Куда сохранять — здесь надо указать папку и имя файла, в который будет сохранена карта.
  • Тип карты — будет автоматически подставлен текущий источник.
  • Масштабне забудьте выставить нужный уровень детализации. По умолчанию программа выставила низкодетализованный, отображающийся сейчас на экране.
  • Наложить — здесь на карту можно наложить дополнительные слои. Такие, как Гибрид для Google maps, где отображены основные дороги и условные обозначения. Иногда может быть полезным для уточнения спутниковых снимков или нанесения на них названий населенных пунктов. Для этого не забудьте прогрузить дополнительный слой с нужным уровнем детализации при помощи метода, описанного выше.
  • Создавать файл привязки — отметьте галочкой пункт «.map», он нам пригодится на следующем этапе. В файле будут сохранены географические координаты углов результирующего изображения.

Нажимаем кнопку «Начать» и через некоторое время в указанной папке получаем два файла — изображение с картой и .map-файл привязки к координатам. Некоторые навигационные программы могут напрямую использовать такие изображения. Но для карманных устройств с ограниченным количеством ресурсов лучше всё же сохранить карту в специальном формате.

Обработка снимка в графическом редакторе

Нередко из-за не совсем удачных условий освещения, или мешающей дымки, или в силу ещё каких-то причин спутниковые снимки бывают «слепыми», особенно при отображении их на экране мобильного устройства в яркий солнечный день. Для улучшения можно провести небольшую коррекцию в любом графическом редакторе. Я покажу это на примере бесплатного XnView, но Вы можете использовать любой другой подходящий (от IrfanView до Photoshop), эта процедура везде аналогична.

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

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

Можно использовать также ручной режим — правку контраста и гамма-коррекции (увеличить то и другое):

или Оттенка/Насыщенности/Осветленности. Ориентируйтесь на более подходящих для Ваших условий вариант.

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

Преобразование снимка в формат OziExplorer

Для дальнейшего преобразования картинки в более компактный формат, понимаемый OziExplorer-ом нам понадобится утилита img2ozf. Скачать её можно бесплатно на официальном сайте OziExplorer: oziexplorer3.com/img2ozf/img2ozf.html. По ссылке — последняя версия утилиты, сохраняющая в ozfx3 формат. Для ozf2-файлов (используются в более старых версиях OziExplorer) потребуется найти более старую версию утилиты. В этом вам поможет поиск.

Устанавливаем и запускаем программу. В поле Source Image Folder указываем путь, по которому лежат подготовленные изображения и соответствующие им .map -файлы. В поле Destination Folder указываем, куда складывать конвертированные карты (если нажать синюю стрелочку слева, будет использоваться папка с исходными файлами). Можно поиграться с количеством цветов (поле Number Colors в левой части). Чем больше количество цветов, тем плавней картинка, но тем больше размер результирующего файла.

Отмечаем галочками нужные для конвертирования изображения и нажимаем большую кнопку Process Image Files to OZF Files.

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

Как только в строке статуса появится надпись Completed — конвертирование завершено. В папке, указанной в Destination Folder появятся два файла — .ozfx3 (или .ozf2 для старой версии) и соответствующий ему .map-файл (который, в отличие от исходного, будет иметь имя типа исходное_название_ozf.map).

Теперь осталось оба этих файла залить на мобильное устройство, и указать OziExplorer место, где они лежат.

Например, так выглядит окно OziExplorer со спутниковыми снимками в Windows Mobile:

Вот и все, карты готовы.

Если что-то осталось непонятным — спрашивайте в комментариях — постараюсь ответить.

Как перевести растровое изображение в векторное

Уроки CorelDraw

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

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

За основу возьмем растровое изображение логотипа TOURATECH. Не знаю, что это за логотип, у меня заказали наклейку с этим логотипом и он хорошо подходит для вставки изображений. Да, из любого векторного изображения можно сделать наклейку и вы можете обратиться с этим в нашу группу ВК. Т.к. векторное изображение состоит из линий, то по этим линиям можно резать наклейки или логотипы из фанеры, пластика или оргстекла. Именно поэтому удобно иметь свои логотипы сразу в векторном формате. Мне постоянно скидывают логотипы в растре для изготовления наклеек и всем приходится платить за перерисовку в векторный формат. Заказывайте лого стразу в векторе. Поверьте — удобнее.

Вариант 1. Трассировка растрового изображения в векторное в CorelDraw.

В программе CorelDraw есть встроенная функция трассировки. Работает она не всегда идеально, но с частью задач вполне справится. Чем больше и четче будет изображение — тем лучше. Если это PNG без фона — еще лучше т.к. программе не нужно отделять фон от изображения. Вставляем изображение, нажимаем правой кнопкой мыши и выбираем «Быструю трассировку» или «Трассировку абрисом». Верхний объект у нас растр, нижний — вектор из 14 объектов.

Как перевести растровое изображение в векторное

Минусом данного способа является то, что вектор состоит из черных и белых элементов. Белые для наглядности сделал серыми. Их нельзя просто удалить — получится как на фото по середине. Нужно выделить черные, нажать правую кнопку мыши и выбрать «Объединить». То же самое для белых элементов. Затем выделить черное и белое и вверху выбрать «задние минус передние». Останется вектор одного цвета.

Как перевести растровое изображение в векторное

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

Как перевести растровое изображение в векторное

Вариант 2. Перевести растровое изображение в векторное с помощью программы Vector Magic.

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

Как перевести растровое изображение в векторное

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

Вариант 3. Ручная перерисовка.

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

В данном случае точность шрифта не существенна, поэтому я не стал тратить время и взял похожий. Голубым цветом поставил его поверх растрового исходника и подогнал буквы друг к другу. Треугольник нарисовал через квадрат, у которого удалил одну точку, сделав его треугольником. Так же подогнал под исходник. Маленький треугольник скопировал из большого и добавил ему контур. Объединил 2 треугольника и вырезал в них третий. Звучит может и сложно, но дел на 3 минуты. При этом этот результат будет идеальным т.к. создан в векторном редакторе.

Как перевести растровое изображение в векторное

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

Два типа 2D графики: векторные и растровые изображения

Share this.

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

Для начала давайте начнем с разговора о более распространенном типе – о растровых изображениях.

Понятие растрового изображения

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

растровое изображение с увеличением

Каждое изображение имеет фиксированное количество пикселов. Их вы можете видеть на экране монитора, большинство из которых отображают примерно от 70 до 100 пикселей на 1 дюйм (фактическое количество зависит от вашего монитора и настройки самого экрана).

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

растровое изображение значка

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

Размер изображения и его разрешение

Растровые изображения зависят от разрешения. Разрешение изображения это число пикселей в изображении на единицу длины. Оно является мерой четкости деталей растрового изображения и обычно обозначается как dpi (точек на дюйм) или ppi (пикселей на дюйм). Эти термины в некотором смысле синонимы, только ppi относится к изображениям, а dpi — к устройствам вывода. Именно поэтому dpi вы можете встретить в описании мониторов, цифровых фотоаппаратов и т. д.

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

Разрешение подбирается для каждого изображения индивидуально и зависит от того, где Вы планируете его использовать:

  • если вы планируете использовать его для размещения в Интернете, то разрешение выбирается 72 ppi, поскольку основным критерием для Интернета является скорость загрузки изображений, а не их изумительное качество, именно поэтому выбираются соответствующие форматы сохранения файлов, где качество стоит далеко не на первом месте.
  • если вы захотите напечатать изображение, то разрешение должно быть гораздо больше чем 72 ppi. Так, для того чтобы распечатать изображение в хорошем качестве разрешение его должно быть в диапазоне 150-300 ppi. Это основное требование для фототипографий, печатающих журналы, каталоги и малоформатную продукцию (буклеты, флаеры, рекламные листовки).

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

Размер изображения в растровой графике — это физический размер файла, в котором хранится это изображение. Он пропорционален размеру изображения в пикселах.

Программа Photoshop показывает соотношение между размером изображения и его разрешением. Это можно просмотреть, открыв диалоговое окно «Размер изображения», находящееся в меню «Изображение». При внесении изменений в одну из данных величин все остальные автоматически будут приведены в соответствии с измененной.

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

  • размер изображения в пикселях
  • битовая глубина
  • цветовое пространство
  • разрешение изображения

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

Форматы растровых изображений

К самым распространенным форматам растровых изображений относятся:

  • BMP
  • GIF
  • JPEG, JPG
  • PNG
  • PCX
  • TIFF
  • RAW

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

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

Программы для работы с растровой графикой

Самые популярные программы для работы с растровой графикой:

  • Adobe Photoshop
  • Adobe Fireworks
  • Corel Photo-Paint
  • Corel Paint Shop Pro
  • Corel Painter
  • GIMP
  • Paint

Как по мне, то редактор Adobe Photoshop – является самой лучшей из программ.

По сравнению от этого типа графики, векторная графика также имеет немало достоинств. Давайте их рассмотрим.

Что такое векторные изображения

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

векторное изображение - клякса

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

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

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

растровые и векторные изображения

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

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

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

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

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

Векторные форматы

К самым распространенным форматам вектора относятся:

  • AI (Adobe Illustrator);
  • CDR (CorelDRAW);
  • CMX (Corel валютный);
  • SVG (масштабируемая векторная графика);
  • CGM Computer Graphics Metafile;
  • DXF AutoCAD.

Самые популярные программы для работы с векторами: Adobe Illustrator, CorelDRAW и Inkscape.

Так чем же отличаются векторные и растровые изображения?

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

Источники:

https://habr.com/ru/post/461031/
https://expertology.ru/sravnivaem-rastrovuyu-grafiku-i-vektornuyu-vazhnye-otlichiya/
https://www.m-sokolov.ru/2012/04/15/gpssatmaps/
https://skilllife.ru/rastr-v-vector
https://pvstoker.com/poleznoe/vektornye-i-rastrovye-izobrazheniya/

Векторные и растровые карты

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

Adblock
detector
Рейтинг@Mail.ru