2.3 Введение, пиксели

Графический дизайн, теория
СОДЕРЖАНИЕ:
1 Растр и вектор, программы
2 Пиксели
3 Размер изображения
4 Разрешение изображения
5 Цветовые модели
6 Виды печати
7 Допечатная подготовка

Adobe Illustrator, CorelDRAW,
Adobe InDesign
Adobe Photoshop,
Adobe Lightroom
Растровая и векторная графика

Adobe Illustrator, CorelDRAW,
Adobe InDesign
Adobe Photoshop,
Adobe Lightroom

Что такое пиксель?
Растровые изображения состоят из пикселей

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

Виртуальный пиксель ситуационен — он охватывает светодиоды, расположенные рядом. Он может совпадать с физическим пикселем и включать тот же набор светодиодных ламп, а может включать в себя светодиоды из соседних физических пикселей.
https://www.sea.com.ua/led-ekrany/news/pikseli-realnye-i-virtualnye-anatomia-svetodiodnogo-ekrana-cast-11/

Размер изображения и разрешение
при создании нового файла
Требования от типографии или сайта к картинке:
Размер – 89 х 127мм или 800 х 600
Разрешение - 300 DPI или 72 DPI
Цветовой режим - CMYK или RGB

Размер изображения
Размер в пикселях – ширина и высота изображения.
К примеру, 800 х 600 – значит, что по горизонтали картинка имеет 800 точек, а по вертикали – 600.

Разрешение изображения
Разрешение - количество пикселей на единицу длины.
DPI - это сокращение от английского "dots per inch" и переводится как "точек на дюйм".
Чем больше точек на дюйм, тем выше разрешение и тем самым - качественнее изображение.

Что значить 72 DPI или 300 DPI
и в чем разница?
72 DPI – файлы для интернета, где одна точка на экране вашего монитора соответствует одному пикселю изображения. Еще называют – экранное разрешение изображения.
Больше чем 72 DPI делать картинку для Интернета – нет смысла, так как монитор все равно больше не отобразит.
72 точки на дюйм = 28 точкам на сантиметр.
300 DPI - для качественной печати в типографии.
Количество точек на дюйм значительно увеличено, чтобы повысить качество изображения. Но для каждого типа печати это значение может меняться. Для макета, который будут рассматривать на расстоянии требования ниже. К примеру, для билборда это значение может быть 56 dpi и ниже.
300 точек на дюйм = 118 точкам на сантиметр.

Таблица стандартных форматов фотографий и соответствующих линейных размеров.

Как посчитать самостоятельно?
Размеры формата мал. фотографии 89х127 мм.
Умножим высоту фотографии (89 мм) на разрешение (300 dpi) и поделим на количество миллиметров в одном дюйме (25,4 мм), результатом будет количество пикселей исходного изображения по высоте.
89*300/25,4=1027 пикселей.
Аналогично для ширины
127*300/25,4=1500 пикселей.
Таким образом, для любого изображения, размер которого больше чем 1027х1500 пикселей, при печати на формате 9х13 разрешение будет больше чем 300 dpi.
На практике не редко бывает, что фотография с разрешением 150 dpi выглядит не хуже, чем точно такая же, но с разрешением 300 dpi, это зависит от того, что изображено на фотографии и с какого расстояния ее будут рассматривать.

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

Цветовые модели
CMYK, RGB, Lab, HSB - это цветовые модели.
Цветовая модель — термин, обозначающий абстрактную модель описания представления цветов в виде нескольких чисел, обычно из трёх или четырёх значений, называемых цветовыми компонентами или цветовыми координатами.

Полиграфическая
цветовая модель
CMYK
Цифровая
цветовая модель
RGB

Изображения в RGB используются для показа на экране монитора.
Аббревиатура RGB означает названия трех цветов, использующихся для вывода на экран цветного изображения:
Red (красный), Green (зеленый), Blue (синий).
Цифровая цветовая модель RGB

CMYK создана и используется для типографической печати.
Аббревиатура CMYK означает названия основных красок, использующихся для четырехцветной печати:
Голубой (Сyan), пурпурный (Мagenta) и желтый (Yellow).
Буквой К обозначают черную краску (BlacK), позволяющую добиться насыщенного черного цвета при печати. Используется последняя, а не первая буква слова, чтобы не путать Black и Blue.
Полиграфическая цветовая модель CMYK

Голубой
(Сyan)
Желтый
(Yellow)
Пурпурный (Мagenta)
Черный
(BlacK)

Цветовые модели
RGB и CMYK.
Зачем нужны и почему один и тот же цвет может выглядеть по-разному?
Почему одни и те же фирменные цвета в макете сайта и в макете полиграфической продукции выглядят по-разному?
Ответ на этот вопрос заключается в различиях цветовых моделей: цифровой и полиграфической.

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

Была разработана, чтобы быть полностью независимой от устройств для вывода изображений (бумага, монитор).
Photoshop использует цветовую модель Lab в качестве вспомогательного этапа при переводе из одного цветового режима в другой. В отличии от таких цветовых моделей как RGB и CMYK, Lab не использует основных цветов. Lab – это своеобразное трехмерное пространство, в котором L – означает luminance (свечение), а компоненты a и b являются так называемыми хроматическими координатами, определяющими оттенок цвета.
Цветовая
модель
Lab

Как и в Lab, цветовая HSB модель не содержит основных цветов, зато она использует более понятные элементы: hue (оттенок цвета), saturation (насыщенность цвета) и brightness (яркость).
Цветовая HSB модель определяет цвет естественным для человека образом и, таким образом, отвечает на естественные вопросы: Какой это цвет? Как насыщенный? Это светлое или тёмное? Таким образом, это интуитивно понятная, и для некоторых случаев очень наглядная цветовая
Цветовая
модель
HSB

JPEG (он же JPG)
TIFF
PSD
PNG
Основные графические форматы
и их особенности

Основные графические форматы и их особенности
JPEG (он же JPG).
Это самый распространенный формат графических файлов.
Свою популярность JPG заслужил гибкой возможностью сжатия данных. При необходимости изображение можно сохранить с максимальным качеством. Либо сжать его до минимального размера файла для передачи по сети.
Явный минус такой системы – потеря качества изображения при каждом сохранении файла. С другой сжатие изображения в 10 раз упрощает передачу данных.
На практике, сохранение фотографии с минимальной степенью сжатия не дает видимого ухудшение качества изображения.
TIFF.
Формат TIFF очень популярен для хранения изображений. Он позволяет сохранять фотографии в различных цветовых пространствах (RBG, CMYK, YCbCr, CIE Lab и пр.) и с большой глубиной цвета (8, 16, 32 и 64 бит). TIFF широко поддерживается графическими приложениями и используется в полиграфии.
В отличии от JPG, изображение в TIFF не будет терять в качестве после каждого сохранения файла. Но, к сожалению, именно из-за этого TIFF файлы весят в разы больше JPG.
http://fototips.ru/praktika/formaty-graficheskix-fajlov/

Основные графические форматы и их особенности
PSD.
Формат PSD используется в программе Photoshop. PSD позволяет сохранять растровое изображение со многими слоями, любой глубиной цвета и в любом цветовом пространстве.
Чаще всего формат используется для сохранения промежуточных или итоговых результатов сложной обработки с возможностью изменения отдельных элементов.
Так же PSD поддерживает сжатие без потери качества. Но обилие информации, которое может содержать PSD файл, сильно увеличивает его вес.
PNG.
Формат PNG создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. В отличии от GIF, у PNG есть поддержка альфа-канала и возможность хранить неограниченное количество цветов.
PNG сжимает данные без потерь, что делает его очень удобным для хранения промежуточных версий обработки изображений.

Понятие смарт-объектов
Смарт-объекты — это слои, содержащие данные изображения из растровых или векторных изображений, таких как файлы Photoshop или Illustrator. Смарт-объекты сохраняют первоначальное содержимое изображения со всеми исходными характеристиками, позволяя производить обратимое редактирование слоя.
В Photoshop CC и CS6 можно встроить содержимое изображения в документ Photoshop. В Photoshop CC можно также создавать связанные смарт-объекты, содержимое которых формируется ссылками на внешние файлы изображений. Содержимое связанного смарт-объекта меняется при изменении исходного файла изображения.
Связанные смарт-объекты отличаются от дублированных экземпляров одного смарт-объекта в рамках одного документа Photoshop. При работе со связанными смарт-объектами можно использовать общий исходный файл в нескольких документах Photoshop — с этой концепцией веб-дизайнеры уже хорошо знакомы.

Требования сайта к картинке:
Размер (в пикс.) – 1920х1080 (пример)
Разрешение - 72 DPI
Цветовой режим – RGB
Графический формат - JPG , PNG, GIF
Картинка для типографии:
Размер – 10х12 см (или мм)
Разрешение - 300 DPI
Цветовой режим – CMYK
Графический формат – TIFF
Или в программах – PSD, CDR
При создании нового файла -
Размер изображения и разрешение

Цифровая печать или офсетная?

http://webvybory2012.ru/analytics/3272-ofsetnaya-i-cifrovaya-pechat-v-poligrafii-chto-vybrat.html
Цифровая – принтер
Офсетная – от 1000 экземпляров, бледнее (экономия краски).
Цифровая печать или офсетная?

Заходим на сайт типографии, где будем печататься и смотрим требования
https://moscowbrand.ru/vizitki/trebovaniya-k-maketu-vizitki
Допечатная подготовка