В векторе и в кривых разница (6 видео) | Курс школьной геометрии

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

Для начала, нужно знать, что существует два типа 2D графики — растровая и векторная. Очень важно понимать разницу между этими типами изображений.

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

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

Содержание

Понятие растрового изображения
Размер изображения и его разрешение
Форматы растровых изображений
Что такое векторные изображения
Векторные форматы
Подробное сравнение растровых и векторных изображений:
Как понять, чего от вас хочет дизайнер. Чем отличаются шрифты «в кривых» от шрифтов «в векторе»?
«Когда вы вышлете логотип в кривых ?!»
💥 Видео

Видео:КАК ПЕРЕВЕСТИ ШРИФТ В КРИВЫЕ И ДЛЯ ЧЕГО? ИЛЛЮСТРАТОР. Adobe Illustrator. Уроки для начинающихСкачать

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

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

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

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

Видео:Перевод вектора в кривые в Adobe illustartor. Что? Зачем? Как?Скачать

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

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

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

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

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

Так выглядит фото с интернета после нескольких пересохранений:

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

Так выглядит картинка пригодная для полноцветной печати:

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

Видео:ОЧЕНЬ ВАЖНЫЙ УРОК. РАЗНИЦА МЕЖДУ ВЕКТОРНОЙ И РАСТРОВОЙ ГРАФИКОЙ. СРАВНИВАЕМ. ДОСТУПНО И БЕЗ ВОДЫСкачать

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

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

Файлы форматов PNG, TIFF, PSD поддерживают прозрачность фона. При этом не стоит забывать , что прозрачный фон не будет таковым, если изображение пересохранить в формат не поддерживающий прозрачность, например PNG в JPEG.

Самые популярные программы для работы с растровой графикой это Adobe Photoshop, Gimp, Corel Photo-Paint, Corel Paint Shop Pro.

Видео:КРИВЫЕ В FIGMA. Как перевести текст или фигуры в кривые | Уроки фигма на русскомСкачать

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

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

Изображение цветка в векторном формате. Увеличить его можно до любого размера

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

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

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

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

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

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

Видео:ТРАССИРОВКА. ПЕРЕВОД РАСТРА В ВЕКТОР. ИЛЛЮСТРАТОР. Adobe Illustrator. Рисуем сердечки.Скачать

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

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

AI (Adobe Illustrator);
CDR (CorelDRAW);
CMX (Corel валютный);
SVG (масштабируемая векторная графика);
PDF (Portable Document Format).

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

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

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

Видео:Как перевести фотографию в вектор в Adobe illustrator | Трассировка изображения в иллюстратореСкачать

Подробное сравнение растровых и векторных изображений:

РАСТР

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

ВЕКТОР

Тяжело добиться фотореалистичности.
Стандарт для логотипов.
Для создания изображение нужны специальные дизайнерские программы.
Наилучшее качество при печати.
Векторные картинки можно растрировать без потери качества.
Легко редактировать, в сравнении с растровыми файлами.
Для прозрачности достаточно экспортировать в формате поддерживающем прозрачность (PNG, TIFF, PSD).
Малый вес файлов.

Видео:КАК ПЕРЕВЕСТИ ЛЮБОЕ ИЗОБРАЖЕНИЕ ИЗ РАСТРА В ВЕКТОР в ADOBE ILLUSTRATOR? ТРАССИРОВКА. ПРИМЕРЫСкачать

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

Для начала маленькое отступление:

Многие уже знают, что графика делится на два типа: векторная и растровая.

Растровое изображение, как мозаика, складывается из множества маленьких точек (пикселей).

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

Наиболее распространённые растровые форматы: JPEG, PNG, TIF.

Самый популярный редактор растровой графики — Adobe Photoshop.

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

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

Самые популярные векторные форматы: CDR, AI. Самые популярные редакторы векторной графики — Adobe Illustrator, Corel Drow.

А вот теперь необходимо ввести еще одно понятие – векторные шрифты.

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

Все вы наверняка сталкивались с ситуациями, когда какой-то шрифт в программе поддерживает только кириллицу или латиницу, и вы не можете использовать его для двух языков. Это хороший пример отсутствия соответствующей формулы. В таком случае мы можем сказать – такого шрифта для кириллицы просто нет. И «нарисовать» его при помощи клавиш клавиатуры мы никак не сможем. То же самое, если вы хотите сделать шрифт жирнее (bold), а математическое описание такого шрифта отсутствует – такого шрифта просто нет.

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

Когда от заказчика требуют шрифты в векторе (в установочных файлах)?

Вкратце: когда дизайнер верстает макет с нуля или вносит изменения в текст в макете. (Мы в нашей типографии в Москве делаем и то, и другое).

Если вы хотите, чтобы мы написали в вашем макете текст определенным шрифтом или изменили начертание шрифта (сделали жирнее), а шрифт не является стандартным (установленным в офисных программах по умолчанию), нам нужно, чтобы вы прислали математическое описание этого шрифта для установки на компьютер верстальщика. Как правило, это файлы *ttf, *otf.

НО! Как говорилось выше – у каждого шрифта есть определенное количество вариантов начертаний, и для каждого вида требуется свой отдельный файл установки.

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

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

И еще: шрифты в векторе и шрифты «в кривых» — это не одно и то же.

Что такое шрифты в кривых и когда нужны они?

Шрифт в кривых – это только сами линии шрифта, т.е это уже не шрифт, а векторная картинка.

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

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

Мы также просим перевести шрифты «в кривые» в том случае, если видим, что шрифт «слетел» в pdf, или вы прислали макет не соответствующий требованиям (т.е. не печатаный pdf)

Как перевести шрифты в кривые?

Если перед сдачей ГОТОВОГО макета в печать шрифты в нем необходимо перевести в кривые, для этого необходимо выделить текст и нажать комбинации клавиш:

Corel Draw — CTRL+Q

Adobe Illustrator — CTRL+SHIFT+O

Видео:Что такое РАСТР и ВЕКТОР???Скачать

«Когда вы вышлете логотип в кривых ?!»

«У нас файл не читается». «У нас другая версия ПО». «У нас каракули вместо текста и название знаками вопроса». «Это файл, который вы выслали вчера или который выслали неделю назад?»

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

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

Я хотел бы разобрать его на примере логотипов.

1. Хранить логотипы и фирменные знаки компаний в следующих форматах:
tiff (два файла с цветоделением cmyk и rgb), желательное разрешение не менее 1600х1200 с каналом прозрачности для отсечения фона.
eps (или ai 9, 12 версий)
jpeg (максимальное качество при сжатии, в фотошопе 98 или 100)
pdf

Опционально: dwg формата 2004 года (если вам потребуется заказать сувенирку, то это может пригодиться) и cdr версии x2 (формат малоакутальный, но многие компании до сих пор используют кореловские пакеты)

2. Во всех векторных форматах текст должен быть разбит в кривые.

3. Каждый графический файл должен дублироваться архивом формата zip (я бы предпочел rar, но на многих машинах и портативных устройствах с ним проблемы).

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

примеры:
YoungFastDevCompany–Logo–Rus–Color–1600x1200px–CMYK–30MB.tif
YoungFastDevCompany–Logo–Rus–Color–1600x1200px–CMYK–8MB.tif

Общая схема:

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

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

4.3 Потом техническая информация: формат файла (опционально, но в заархивированном виде он не очевиден, как и его версия), цветоделение, разрешение для растра или размер листа для вектора с указанными единицами измерения.

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

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

5. Желательно добавить в папку с логотипом обзорный jpg и pdf или ai со всеми вариантами логотипа, приложить к архивам с векторными файлами используемые шрифты, если существует — записку по корпоративным цветам.

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

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

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