0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>2 фев 2022</li>
2
<ul><li>2 фев 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Что такое растровая и векторная графика</h2>
4
</ul><h2>Что такое растровая и векторная графика</h2>
5
<p>Рассказываем, чем они различаются и как их лучше использовать.</p>
5
<p>Рассказываем, чем они различаются и как их лучше использовать.</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
7
<p>Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.</p>
7
<p>Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.</p>
8
<p>В компьютерной графике изображение может формироваться двумя способами:</p>
8
<p>В компьютерной графике изображение может формироваться двумя способами:</p>
9
<ul><li>из маленьких точек (пикселей) - это растровая графика;</li>
9
<ul><li>из маленьких точек (пикселей) - это растровая графика;</li>
10
<li>с помощью кривых линий, заданных математической формулой, - это векторная графика.</li>
10
<li>с помощью кривых линий, заданных математической формулой, - это векторная графика.</li>
11
</ul><p>Растровые изображения повсюду - например, фотографии. На качественном изображении вы не увидите точек. Но если начать его увеличивать, вы увидите пиксели, из которых оно состоит:</p>
11
</ul><p>Растровые изображения повсюду - например, фотографии. На качественном изображении вы не увидите точек. Но если начать его увеличивать, вы увидите пиксели, из которых оно состоит:</p>
12
Фото: Vincent van Zalinge / Unsplash<p>Это могут быть рисунки, сканы документов и всё, что можно нарисовать в растровых редакторах: в <a>Photoshop</a>, Procreate, Paint.</p>
12
Фото: Vincent van Zalinge / Unsplash<p>Это могут быть рисунки, сканы документов и всё, что можно нарисовать в растровых редакторах: в <a>Photoshop</a>, Procreate, Paint.</p>
13
<p>Самые популярные растровые форматы: gif, jpeg, png. Gif позволяет создавать анимированные изображения, а jpeg и png - только статичные.</p>
13
<p>Самые популярные растровые форматы: gif, jpeg, png. Gif позволяет создавать анимированные изображения, а jpeg и png - только статичные.</p>
14
<p>Обычно вектор используют для создания логотипов, элементов интерфейса и шрифтов. Их составляющие - контур и заливка. Компьютер рассчитывает контур по математической формуле, поэтому изображение не будет расплывчатым независимо от размера. А ещё такие файлы имеют гораздо меньший вес, чем растровые картинки.</p>
14
<p>Обычно вектор используют для создания логотипов, элементов интерфейса и шрифтов. Их составляющие - контур и заливка. Компьютер рассчитывает контур по математической формуле, поэтому изображение не будет расплывчатым независимо от размера. А ещё такие файлы имеют гораздо меньший вес, чем растровые картинки.</p>
15
Иллюстрация: pikisuperstar / Freepik<p>Самые популярные векторные форматы - eps и svg. Eps чаще используют в полиграфии, а svg - в веб-дизайне.</p>
15
Иллюстрация: pikisuperstar / Freepik<p>Самые популярные векторные форматы - eps и svg. Eps чаще используют в полиграфии, а svg - в веб-дизайне.</p>
16
<p>Обычно кривые делают в векторных редакторах - Adobe Illustrator,<a>Figma</a>, CorelDRAW. Иногда и в коде на HTML - но с этим обычно никто не заморачивается.</p>
16
<p>Обычно кривые делают в векторных редакторах - Adobe Illustrator,<a>Figma</a>, CorelDRAW. Иногда и в коде на HTML - но с этим обычно никто не заморачивается.</p>
17
<p>В графических редакторах кривые создают по опорным точкам - на них линия может изгибаться и менять своё направление.</p>
17
<p>В графических редакторах кривые создают по опорным точкам - на них линия может изгибаться и менять своё направление.</p>
18
Изображение: Skillbox Media<p>Растровое изображение не получится перевести в вектор с сохранением<a>цветовой гаммы</a>. Внутри одной векторной фигуры может быть только однотонная заливка или градиент - это не даёт такого многообразия цветовых переходов, как пиксели.</p>
18
Изображение: Skillbox Media<p>Растровое изображение не получится перевести в вектор с сохранением<a>цветовой гаммы</a>. Внутри одной векторной фигуры может быть только однотонная заливка или градиент - это не даёт такого многообразия цветовых переходов, как пиксели.</p>
19
<p>Если автоматически перевести фото в вектор, итоговая картинка будет казаться очень размытой:</p>
19
<p>Если автоматически перевести фото в вектор, итоговая картинка будет казаться очень размытой:</p>
20
Попытка превратить растровое изображение в векторное. Изображение: Vincent van Zalinge / Unsplash / Skillbox Media<p>Вот если в Paint вы нарисуете закорючку из одного-двух цветов, по ней можно будет сделать векторный контур. Но обычно векторные изображения сразу рисуют с помощью кривых.</p>
20
Попытка превратить растровое изображение в векторное. Изображение: Vincent van Zalinge / Unsplash / Skillbox Media<p>Вот если в Paint вы нарисуете закорючку из одного-двух цветов, по ней можно будет сделать векторный контур. Но обычно векторные изображения сразу рисуют с помощью кривых.</p>
21
<p>Зато вектор в растр перевести можно в один клик в любом графическом редакторе.</p>
21
<p>Зато вектор в растр перевести можно в один клик в любом графическом редакторе.</p>
22
<p>Зависит от вашей задачи. Оба формата имеют и преимущества, и недостатки.</p>
22
<p>Зависит от вашей задачи. Оба формата имеют и преимущества, и недостатки.</p>
23
<p>Преимущество растровой графики - в цветовых возможностях. Она позволяет хорошо передавать градиенты и цветовые переходы на сложных иллюстрациях. Но при увеличении изображения его качество будет ухудшаться.</p>
23
<p>Преимущество растровой графики - в цветовых возможностях. Она позволяет хорошо передавать градиенты и цветовые переходы на сложных иллюстрациях. Но при увеличении изображения его качество будет ухудшаться.</p>
24
<p>Преимущество векторной графики - в бесконечном размере. Логотип в формате svg можно увеличивать сколько угодно, и его контур не пострадает. Но сделать сложную иллюстрацию со множеством цветов и мелких деталей будет сложнее.</p>
24
<p>Преимущество векторной графики - в бесконечном размере. Логотип в формате svg можно увеличивать сколько угодно, и его контур не пострадает. Но сделать сложную иллюстрацию со множеством цветов и мелких деталей будет сложнее.</p>
25
<p>Для фотографий и сложных иллюстраций лучше всего подойдёт растровая графика. Для простых иллюстраций и логотипов - векторная.</p>
25
<p>Для фотографий и сложных иллюстраций лучше всего подойдёт растровая графика. Для простых иллюстраций и логотипов - векторная.</p>
26
Изображения: Noah Buscher / Unsplash / Freepik<p><strong>А что ещё у вас почитать о работе с изображениями?</strong></p>
26
Изображения: Noah Buscher / Unsplash / Freepik<p><strong>А что ещё у вас почитать о работе с изображениями?</strong></p>
27
<a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>
27
<a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>