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

Содержание

Как перевести картинку, логотип в вектор

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

→  

  • Дизайн
  • →  

  • Adobe Illustrator
  • →  

  • Как перевести картинку, логотип в вектор
  • Скачать материалы урока

    При работе с графическими редакторами, особенно веб-дизайнерам, иногда требуется перевести растровое изображение в векторное.

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

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

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

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

    1. Подготавливаем изображение в фотошопе

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

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

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

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

    Берем слой с надписью (названием логотипа), выбираем в верхнем меню “Изображение” – “Коррекция” – “Уровни”, либо нажимаем комбинацию клавишь “Ctrl + L” и в появившемся окне настроек выставляем ползунок выходных значений в крайнее левое положение.

    Данное действие перекрасит изображение в черный цвет. После этого просто сохраняем получившуюся картинку в формате jpg (“Файл” – “Экспортировать” – “Сохранить для web”). Таким образом необходимо поступить со всеми слоями логотипа, кроме надписи под логотипом. В итоге получаем набор изображений в формате jpg, как на картинке ниже, только каждый элемент должен быть отдельной картинкой.

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

    2. Переводим изображения в вектор и собираем логотип

    Открываем Adobe Illustrator и создаем холст размером, соответствующим сохраненным изображениям, в данном случае у меня получился размер 500×229 пикселей.

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

    Далее в верхнем меню выбираем “Объект” – “Растрировать”, при этом слой изображения должен быть выделен.

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

    Теперь в верхнем меню выбираем “Объект” – “Разобрать” и в открывшемся окне ставим обе галочки, после чего нажимаем “Ок”.

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

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

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

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

    Переводим обычную картинку в вектор

    Во втором случае требуется перевести какое-то обычное растровое изображение в векторное. Для этого нам уже не понадобиться фотошоп, просто открываем изображение программой Adobe Illustrator и выделив слой данной картинки выбираем в верхнем меню “Объект” – “Растрировать” и в открывшемся окне нажимаем “Ок”.

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

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

    После всех действий разбираем изображение, как и в первом случае “Объект” – “Разобрать”, ставим обе галочки, нажимаем “Ок” и получаем векторное изображение, состоящее из множества слоев.

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

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

    Источник: http://1024pixels.ru/web-dizain/illustratoror/perevesti-v-vector

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

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

    Для того, чтобы вести дискуссию о программах по работе с графикой сначала нужно разобраться в понятиях и различиях между двумя основными типами 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://pvstoker.com/poleznoe/vektornye-i-rastrovye-izobrazheniya/

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

    Растровые и векторные изображения в Фотошопе
    Обучение фотошопу / УЧЕБНИК 94229

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

    Эти два понятия будут постоянно вам встречаться, поэтому давайте разберемся, что это такое и в чем между ними разница.

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

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

    Как любой живой организм состоит из мельчайших частиц — клеток, так растровое изображение состоит из пикселей.

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

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

    Почему этот вид графики такой популярный?

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

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

    Несмотря на преимущества, у растра есть серьезные недостатки:

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

    2. Сложности масштабирования изображения. При увеличении появляется зернистость и пропадает детализация.

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

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

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

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

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

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

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

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

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

    3. Возможность трансформации изображения из вектора в растр без потери качества и каких-либо сложностей. Это может сделать фотошоп в два щелчка мыши.

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

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

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

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

    Таким образом, подведем короткие выводы:

    — растровые изображения фотореалистичные, а у векторных изображений всегда видно, что они нарисованы;

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

    Заметили ошибку в тексте – выделите ее и нажмите Ctrl + Enter. Спасибо!

    Источник: http://psand.ru/rastrovyie-i-vektornyie-izobrazheniya/

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

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

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

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

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

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

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

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

    Еще больше о Photoshop – на курсах «Fotoshkola.net».

    Простой пример, как растр перевести в вектор

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

    Помогут нам в этом инструменты группы «Выделение»/Select: «Прямоугольное выделение»/Rectangular Marquee Tool, «Эллиптическое выделение»/Elliptical Select Tool,** «Волшебная палочка»/Magic Wand Tool, **«Быстрое выделение»/Quick Selection Tool и «Перо»/Pen tool.

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

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

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

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

    Чтобы работать с контурами, вам нужно вызвать закладку «Контуры»/Path на палитру слоёв. Для этого зайдите в меню «Окно»/Window и отметьте пункт «Контуры»/Path. Закладка появится на палитре слоёв.

    Изображение имеет 4 цвета (фон не считаем). Берём инструмент «Волшебная палочка»/Magic Wand Tool и выделяем первый цвет. Чтобы выделить все участки, рассредоточенные островками по изображению, удерживайте Shift.

    Когда первый цвет выделен, выбираем инструмент «Лассо»/Lasso либо «Прямоугольная область»/Rectangular Marquee Tool и, не снимая выделения, щёлкаем правой клавишей мыши. В контекстном меню выбираем «Образовать рабочий контур»/Make Work Path.

    В диалоговом окне указываем максимальное сглаживание «Допуск»/Tolerance (от 1 до 10; чем ниже цифра, тем лучше повторятся контуры). Жмём Ok.

    На закладке «Контур» появится первый контур. На изображении он будет заметен в виде кривых с точками. Их можно выровнять и подогнать с помощью инструмента «Выделение узла»/Direct Selection Tool. Этим инструментом выделяем точку и либо корректируем кривую, перемещая усик точки, либо подвигаем саму дугу.

    На закладке «Контур» меняем название контура. Для этого щёлкаем по нему двойным щелчком и в диалоговом окне изменяем имя.

    Проделываем все описанные шаги с остальными цветами. В итоге получаем четыре контура для каждого цвета.

    Получив контуры, остаётся создать вектор. Переходим на закладку «Слои»/Layer на палитре слоёв, создаём новый слой Shift+Ctrl+N. Основной цвет задаём тот, в который окрасим первый контур.

    Возвращаемся на закладку «Контур», становимся на первый контур. В главном меню в пункте «Слои»/Layers выбираем «Новый цвет заливка»/New Fill Layer«Цвет»/Solid Color. В открывшемся окне жмём Ok.

    Теперь, перейдя на закладку «Слои»/Layers, вы увидите на новом слое первый векторный слой.

    Проделаем эти шаги для каждого контура.

    Так мы получили четыре фигуры, которые составили портрет. Теперь можно сохранить в файл с векторным расширением SVG (слой с исходной картинкой удаляем). Нажимаем Alt+Shift+Ctrl+W (экспортировать как). В диалоговом окне выбираем расширение файла SVG, жмём «Экспортировать всё»/Export All.

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

    На этом всё. Способ достаточно простой.

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

    Еще больше о Photoshop – на курсах «Fotoshkola.net».

    Источник: https://Prophotos.ru/lessons/19647-kak-perevesti-rastrovoe-izobrazhenie-v-vektornoe-v-fotoshope

    Векторные и растровые изображения в фотошопе

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

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

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

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

    Например, линия описывается формулами: координатами крайних точек. Также в формуле линии задается ее ширина и цвет. А текст — набор букв. Каждая буква является символом.

    Геометрические фигуры тоже можно задать формулами, например, окружность можно задать координатами центра и радиусом.

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

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

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

    Откройте программу Adobe Photoshop CS5, а в ней новый документ с помощью меню Файл — Создать.

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

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

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

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

    А теперь с помощью трансформирования сделайте текст маленьким, и затем сделайте его растровым, с помощью меню Слои — Растрировать — Текст.

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

    Это произошло потому, что текст стал растровым, и состоит теперь из большого числа пикселей.

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

    про особенности векторной и растровой графики в программе Adobe Photoshop cs5

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

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

        Подписаться на блог: Дорога к Бизнесу за Компьютером

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

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

    Две основные цветовые модели, которые используются при представлении любого цвета в цифровом виде — цветовые модели RGB и CMYK.

    Цветовая модель RGB

    Использует три основных цвета: красный, зеленый и синий. В английском языке это соответственно: red, green, blue, от них и произошло название RGB. При наложении цветов цвета усиливают друг друга, и итоговый цвет становится светлее.

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

    Максимальная интенсивность всех цветов дает белый цвет, их отсутствие — черный цвет.

    Каждый из основных цветов в этой модели может принимать значение от 0 до 255. Перемножьте 255 саму на себя три раза, и Вы получите полное количество цветов, которые представлены в модели RGB: 255*255*255=16777216.

    А теперь запустите программу Adobe Photoshop CS5, и откройте в ней любое изображение. Затем выберите на панели инструментов Пипетку. и щелкните ей в любом месте изображения. Цвет той точки, куда Вы щелкнули, отобразится  в квадратике, который показывает текущий основной цвет.

    Теперь щелкните по этому квадратику, который находится на панели инструментов. в нижней части. Откроется окно цвета, и Вы в этом окне увидите точку, которая соответствует Вашему цвету. Также Вы увидите параметры этого цвета в окошках R, G и B.

    Значения в этих окошках — и есть значения цветов в модели RGB.

    Модель RGB хорошо подходит для описания цветов, которые отображаются на мониторах компьютеров. Также эта модель используется для записи цвета в 16-ричном коде, в коде html при верстке сайтов.

    Цветовая модель CMYK

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

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

    То есть цвета не складываются, как в модели RGB, а вычитаются.

    Для отраженных цветов используется модель CMYK, в которой цвета смешиваются, как краски, а не как лучи. При отсутствии красок мы видим белый лист. Основные цвета в цветовой модели CMYK: голубой, пурпурный и желтый, соответственно в английском языке cyan, magenta и yellow. Эти основные цвета при смешивании дают дополнительные цвета красный, зеленый и синий.

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

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

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

    Откройте еще раз программу Adobe Photoshop CS5, и опять щелкните пипеткой в любом месте изображения. После этого щелкните по квадратику основного цвета. Среди параметров цвета найдите параметры модели CMYK: эти параметры находятся в окошках C, M, Y и K. Цвета в этой модели задаются в процентах.

    Чем больше процент — тем темнее цвет, то есть интенсивность цветов здесь задается в пределах от 0 до 100 процентов. И хотя в модели CMYK значений цветов может быть: 100*100*100*100= 100 миллионов, на самом деле их меньше, чем в модели RGB, потому что некоторые составляющие черного и других цветов перекрывают друг друга.

    Поэтому в можели CMYK некоторые яркие цвета, которые есть в модели RGB, отобразить невозможно.

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

    об использовании цветовых моделей в программе Adobe Photoshop CS5

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

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

        Подписаться на блог: Дорога к Бизнесу за Компьютером

    Источник: http://pro444.ru/azbuka/vektornye-i-rastrovye-izobrazheniya-v-fotoshope.html

    Вектор в фотошопе: инструкция (описание, видео, пример)

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

    / Советы дизайнерам / Вектор в фотошопе

    Инструменты для работы с вектором в Photoshop появились достаточно давно, но использовать их в работе начали сравнительно недавно. Это связанно с тем, что очень долгое время они были “сырыми” и т.к. вектор в фотошопе не является профильным инструментом для работы, его и не дорабатывали. Но все поменялось с выходом Photoshop CC.

    Зачем нужен вектор в фотошопе

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

    е. прежде чем стать сайтом, интерфейсом, приложением макет попадет верстальщику. Большинство верстальщиков в совершенстве владеют Photoshop, но очень поверхностно знакомы с Illustrator. Поэтому желание “запихнуть” все в один файл вполне логично.

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

    Поменять цвет кнопки, изменить радиус формы меню, увеличить или уменьшить блок без потери качества — за 2 клика и 1 минуту! Вектор в фотошопе позволяет сделать это без особых навыков.

    Особенности работы с вектором в фотошопе

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

    Что бы легко редактировать вектор в фотошопе необходимо каждую фигуру располагать в отдельном слое.2. Операции по “слиянию”, “вычитанию”, “наложению” лучше применять к не более чем двум объектам.3.

    После операции “слияния”, “вычитания”, “наложения” контуры исходных объектов остаются доступными к редактированию.4. Ко всем векторным объектам можно легко применять растровые стили. Это очень удобно.5.

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

    7. Подписывайте каждый слой и группируйте слои — это сэкономит массу времени.

    Основные примитивы

    Как и в любом векторном редакторе, вектор в фотошопе имеет готовые примитивы. Основные примитивы:“Прямоугольник”, “Прямоугольник со кругленными углами ”, “Эллипс”, “Многоугольник”, “Линия”, “Произвольная фигура”.

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

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

    Основные инструменты

    Что бы нарисовать произвольный вектор или редактировать существующий (в т.ч.

    и контур примитивов) необходимо использовать инструменты “Перо” (рисуем произвольный контур), “Перо+” (добавляем новые опорные точки в готовый контур), “Перо-“ (удаляем опорные точки из готового контура), “Свободное перо” (рисуем произвольный контур от руки), “Угол” (меняем изгибы кривых контура, задаем типы соединений между опорных точек).
    Для иллюстрации процесса краткое видео из которого вы узнаете:1. Как создать примитив2. Как нарисовать произвольную векторную фигуру3. Как править контур примитива

    4. Как править контур произвольной векторной фигуры

    Основные операции с вектором в фотошопе

    Всего доступно 4 операции: “Объединение фигур”, “Вычесть переднюю фигуру”, “Объединить фигуры в наложении”, “Вычесть фигуры в наложении”.

    Все эти операции доступны через основное верхнее меню Слои > Объединить фигуры, либо через панель инструментов “Свойства” (верхнее меню Окно > Свойства).

    Внимание! Прежде чем начать какие-то операции по объединению векторных фигур убедитесь что слои этих фигур выделены в панели инструментов “Слои” (включить ее F7 или Окно > Слои).

    Краткое видео иллюстрирующее основные операции “объединения фигур” в фотошопе.

    Меняем цвет, размер и применяем стили

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

    Для этого выберете нужные слои в панели инструментов “слои”, нажмите Ctrl+T (или Command+T если у вас MAC) и перетаскивая маркеры выделенного контура мышкой отрегулируйте размер.

    Что бы размер менялся пропорционально необходимо зажимать клавишу Shift.
    Краткое видео:1. Изменяем размер векторной фигуры2. Изменяем цвет заливки векторной фигуры

    3. Добавляем стиль к векторной фигуре

    Скачать пример PSD (бесплатно)

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

    Задать вопрос

    Источник: https://site2max.ru/tips-for-designers/vektor-v-fotoshope/

    Отличия растровых и векторных изображений

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

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

    Итак, вы, наверное, не раз задавали себе такой вопрос: «Из чего же состоит картинка, которая отображается на экране моего компьютера?» Может быть, вы удивитесь, но на самом деле фото как такового не существует! 

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

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

    Они уже с определенной последовательностью описывают какую-то отдельную область (элемент) самого изображения. Этот элемент отображен в виде пикселя (ячейки определенного цвета).

    Давайте посмотрим, что это за пиксель такой.

    Для этого можно просто взять фото и увеличить его. Вы заметите, что появились специальные квадратики (рисунок ниже). Изображение стало разбиваться на квадраты разного цвета. Вот эти квадратики и есть пиксели.

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

    Как узнать, что это за последовательность? Да очень просто! Выбираете инструмент «Пипетка» (в любом графическом редакторе он есть) и наводите на нужный пиксель.

    Если проверяете в фотошопе, то вам дополнительно нужно будет зайти в палитру цветов.

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

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

    Также можно использовать онлайн генератор палитр.

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

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

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

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

    Теперь давайте познакомимся с понятием векторного изображения. Чтобы продемонстрировать наглядный пример, в Adobe Photoshop я попробую создать новый документ. Перейдем в меню «Файл» —> «Создать«.

     Давайте выберем инструмент, с помощью которого можно будет создавать векторную графику. К примеру, я возьму инструмент «Перо» (2). Обязательно нужно, чтобы стояла настройка «Слой-фигура» (3). После этого я расставляю точки в нужных местах (4).

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

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

    В чем отличия растровой и векторной графики?

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

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

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

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

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

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

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

    [socialpost]

    Источник: https://alpha-byte.ru/rastrovyie-vektornyie-izobrazheniya

    Поделиться:
    Нет комментариев

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

      Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.