графічний дизайн дизайн уривки із книжок arthuss

Стандарти в дизайні - Уривок із книги «Основи. Графічний дизайн 01: Підхід і мова»

Стандарти в дизайні - Уривок із книги «Основи. Графічний дизайн 01: Підхід і мова»


Видавництво ArtHuss готує серію книг про дизайн, перша з яких – «Основи. Графічний дизайн 01: Підхід і мова».  З такої нагоди ділимося уривком з книги Ґевіна Емброуза і Найджела Оно-Біллсона, та даруємо знижку на книгу за попереднім замовленням.


1. Формати та розміри
- Розміри паперу
- Пропорції сторін
- Розміри стандарту ISO
- Пункти та пайки
- Типометр
- Кегль, інтерліньяж та висота ряду
- Розміри «ем»

2. Формати файлів
- Найпоширеніші типи файлів
- Растр і вектор
- Напівтони
- Пікселі (PPI та DPI)

3. Колірні моделі
- Шістнадцяткове кодування кольору
- Суцільні кольори (система відповідності кольорів Pantone)
- Кольори системи Pantone
- Композитний друк (колірна модель CMYK)
- CMYK
- RGB
- Порядок друку
- Друкарські форми

Розділ шостий
Стандарти

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

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

Формати та розміри
У графічному дизайні побутують кілька форматів, і вони важливі у виготовленні дизайнерських робіт. У Великій Британії розміри зазвичай вказують у міліметрах, але розміри паперу визначають за форматом А/В/С відповідно до стандарту ISO. У типографії (особливо в ручному наборі) та друкованих медіа використовують такі одиниці вимірювання, як пункти і пайки, а в описі робіт для перегляду онлайн чи на екрані — біти й пікселі.

Розміри паперу
Система розмірів паперу ISO нині вважається загальновизнаним стандартом і використовується в роботі з папером у всьому світі. Ці розміри базуються на метричній системі та на принципах, окреслених далі.

В усіх форматах висота аркуша, поділена на ширину, дорівнює квадратному кореню з двох (√2  1,4142). Тож, наприклад, А0 (найбільший із використовуваних формат паперу) має площу один квадратний метр. Наступний, менший формат А1 — це половина аркуша формату А0. Висота аркуша А1 дорівнює ширині аркуша А0, а ширина А1 — половині висоти А0. За цими формулами легко вивести всі менші аркуші серії А.

Серію В було впроваджено, щоб розширити діапазон розмірів паперу. Те саме призначення має й серія С, створена для конвертів.


Пропорції сторін
1:√2 » 0,707 — це відношення має унікальну властивість: якщо аркуш розрізати або зігнути навпіл упоперек, половини матимуть ті самі пропорції країв. Кожен формат паперу за стандартом ISO — це половина наступного за ним більшого формату. На діаграмі наочно показано співвідношення між розмірами аркушів. 


Розміри стандарту ISO
Серії розмірів паперу ISO (international standard — міжнародний стандарт) нині використовують більшість країн світу. ISO визначає розміри аркушів серій А та В. Кожен наступний розмір аркуша — це розрізаний навпіл паралельно до коротшого краю аркуш попереднього розміру.

Формати паперу за стандартом ISO (у міліметрах)

Формати паперу в США

Формати P4 (на основі канадських стандартів, але також використовуються в друці журналів в інших країнах)


Формати паперу, які широко використовують


Формати конвертів


Найпоширеніший формат конвертів — DL.



Пункти та пайки
У 1780-х роках француз Франсуа-Амбруаз Дідо запропонував новий шрифтовий стандарт. Він базувався на попередній системі, яку створив П’єр Симон Фурньє. Дідо змінив систему Фурньє, пристосовуючи її до французького королівського дюйма, або ж пуса (до того часу система Фурньє не спиралася на жодну одиницю вимірювання). Цицеро (одиниця системи Дідо) досі застосовується у Франції та інших країнах Європи.

У Великій Британії та США стандартними одиницями вимірювання стали типографські пункти та пайки. Пайка, запроваджена в Сполучених Штатах 1886 року, дорівнювала 0,166 дюйма (трохи менше, ніж одна шоста дюйма), а пункт — 0,0138 дюйма. Це дуже близько до початкового стандарту Фурньє, але трохи менше, ніж 1/72 дюйма (1 дюйм = 25,4 мм). Одна пайка дорівнює 12 пунктам.

Пункти та пайки використовують у визначенні розміру шрифту та пропорцій аркуша. У пунктах зазвичай вказують також інші пов’язані зі шрифтом вимірювання, наприклад інтерліньяж, як показано далі.


Типометр
Типометр-лінійку зі шкалою по обидва боки використовують для швидкого та точного визначення розміру шрифту. Зазвичай навпроти кожної кеглевої шкали є прорізи, щоб можна було безпосередньо зіставляти текст із її поділками.


Кегль, інтерліньяж та висота ряду
Три основні розміри, які вимірюють у типографських пунктах, — це кегль, інтерліньяж (міжрядова відстань) та висота ряду (висота малої літери).

Кегль (А) — це відстань між крайніми точками верхнього та нижнього виносних елементів малих літер. Цей розмір визначає не так висоту окремого символу, як «рамку» символів у шрифті.

Інтерліньяж (В) — це відстань між базовими лініями двох рядків.

Висота малої літери (С) — це відстань від базової лінії до середньої. Загалом, що більша висота малої літери — то краще читається шрифт, передусім це стосується малих кеглів, наприклад тих, які використовують в основному тексті у газетах. «Ем» та «ен» — також важливі одиниці вимірювання, поряд із типографським пунктом та пайкою. Традиційно, у ранніх техніках друку, один «ем» дорівнював ширині великої літери «М». Проте в сучасних шрифтах ця літера зазвичай трохи вужча, ніж «ем».

Ця одиниця не залежить від обраного шрифту і завжди дорівнює кеглю, тобто один «ем» у будь-якому шрифті розміром 12 пт становить 12 пунктів, а у шрифті кеглю 40 пт — 40 пунктів. «Ен» — це половина «ем». 


Розміри «ем»
На малюнку три приклади великої літери «М» кеглю 80 пт (пунктів) порівняно з відповідною для їхнього розміру «ем» у різних шрифтах, зліва направо: Helvetica, Bodoni та Black Oak (відтворює форми дерев’яних набірних літер).


«Ем» та «ен» також використовують на позначення відповідних тире, які відрізняються від дефіса довжиною (як показано на малюнку), хоча їх із дефісом часто плутають.

Формати файлів
Дизайн — це лінійний процес: обмірковування та концептуалізація, створення ескізів, перегляд, розвиток, реалізація та оцінювання. І після кожного етапу виникає потреба зберігати створене. Тому для кожного графічного дизайнера важливо побудувати для себе організовану систему запису в теки, зберігання й пошуку своїх робіт. Як це буде робитися — предмет особистого вибору, а не нашої книги. Але щоб посприяти ефективнішій організації, пропонуємо короткий довідник найпоширеніших форматів файлів.


Найпоширеніші типи файлів
.bmap Нестиснуті графічні файли (bitmap — растрове або бітове зображення). Зображення передаються через сітку з маленьких квадратиків, що називаються пікселями.
.doc Текстові документи, створені в програмі Microsoft Word.
.eps (Encapsulated PostScript Files — «документ мовою PostScript, зібраний в один файл»). Ці файли можуть містити будь-яке поєднання тексту, графіки та зображень.
.gif, .jif (Graphic Interchange Format — «формат обміну графікою»). Графічні файли, які можна редагувати в багатьох програмах. Формат найкраще годиться для простих зображень.
.indd Документи програми Adobe InDesign, які зазвичай використовують для верстки сторінок.
.jpg, .jpeg Стиснуте растрове зображення, зазвичай цей формат використовують, щоб відтворити фотографії на друці чи на екрані.
.pdf (Portable Document Format — «формат портативного документа»). Відкритий стандарт для обміну файлами. За допомогою PDF-файлів можна легко обмінюватися текстом і зображеннями.
.png (Portable Network Graphics — «портативна мережева графіка»). Файл цього формату містить растрове зображення у визначених кольорах зі стисненням без втрат. Це поширений формат зображень та графіки в Інтернеті.
.psd Графічні файли програми Adobe Photoshop, у яких збережено маски, шари, відсічні контури та альфа-канали.
.raw Нестиснуті «сирі» файли зображення до опрацювання; формат використовується у фотографії. Після збереження такого файлу на комп’ютері в ньому можна змінити експозицію та баланс білого за допомогою програмного забезпечення.
.tif Файли зображень у форматі TIF не залежать від платформи, тому дуже гнучкі у використанні.

Растр і вектор
Цифрове зображення можна зберегти в два способи: як растрове (точкове) чи як векторне.

Растр складається з сітки пікселів, де кожен піксель містить інформацію про колір. Такі зображення мають сталу роздільну здатність, тому їхні розміри не можна збільшити без втрати якості.

Векторні зображення набагато складніші, їх утворено з окремих об’єктів, частин чи простих геометричних елементів (точок, прямих, кривих, фігур тощо), що мають змінний масштаб. Усі вони описуються математичними рівняннями; об’єкти мають такі змінні параметри, як колір, заливка та обведення. Змінити розмір векторного файлу можливо, і його збільшення не призведе до втрат якості деталей.

У прикладі, поданому нижче, можна побачити різницю між растровими та векторними файлами. Векторне зображення можна збільшити до будь-якого розміру без втрати якості чи роздільної здатності. На противагу йому, растрове зображення має певний розмір, і збільшення може спричинити втрату чіткості.


Напівтони
Напівтони — це один із методів створення діапазону тонів на світлині чи в тонуванні. Вони утворюються накладенням на зображення растру, що перетворює його на групи точок. Темні ділянки виглядатимуть як порівняно великі точки, розташовані тісніше одна біля одної, а світлі — як менші точки, оточені білим простором. Кінцева якість зображення визначається кількістю точок на дюйм (dpi — dots per inch). Наприклад, точки (растр) у газетних фото можна легко побачити, оскільки тут застосовується низька роздільна здатність (приблизно 60 dpi). Кольоровий журнал матиме набагато вищу роздільну здатність (близько 150 dpi), а книжка на кшталт цієї — і всі 300 dpi.


Перше растрове зображення складається лише з одного кольору — чорного. Щоб передати тони в друці фото, зображення перетворюють на групи точок, зблизька їх можна побачити на третьому зображенні.

Пікселі (PPI та DPI)
Піксель — це окрема точка кожного растрового зображення. А ще це найменша частинка зображення на екрані або цифрового зображення. Кожен окремий піксель має своє місце у двовимірній сітці.

Глибина кольору задається бітами й вимірюється в бітах на піксель (bpp — bites per pixel); кількість кольорів залежить від кількості бітів (зображення 1 bpp використовує один біт для кожного пікселя). Піксель може буте активним чи неактивним. Із додаванням кожного біта кількість кольорів подвоюється. Наприклад, зображення 2 bpp матиме чотири кольори, а картинка 3 bpp — шість. Зменшуючи або збільшуючи кількість кольорів, ми також змінюємо й розмір графічного файлу. Якщо кольорів замало, це може спричинити нечіткість чи розмитість меж зображення. Із пікселями також пов’язані такі терміни, як точки на дюйм (dpi) та пікселі на дюйм (ppi).

Розмір пікселя залежить від екрану, який використовується. Наприклад, на моніторі з високою роздільною здатністю кількість пікселів зростає, хоча фізичний розмір екрану не змінюється.

Початкове зображення, збережене в пікселях на дюйм, відображене на екрані в пікселях та надруковане в точках на дюйм.


Пікселі
Піксель — це квадратик з інформацією про колір та його насиченість. Усі растрові зображення зберігаються в пікселях. На екрані вони відображаються у пікселях на дюйм (ppi), але друкують їх у точках на дюйм (dpi), як показано нижче.

Колірні моделі
Загалом, графічним дизайнерам варто знати три різні системи кольорів: шістнадцяткові кольори (веб-кольори), суцільні (чисті) кольори (Pantone Matching System, PMS — система відповідності кольорів Pantone) та композитні кольори (тріадна колірна модель CMYK, яку переважно використовують для друку, і колірна модель RGB, яку використовують для перегляду зображень на екранах та для публікацій в інтернеті).


Шістнадцяткове кодування кольору
Шістнадцяткове кодування кольору використовується під час роботи з HTML (для веб-сторінок). Шістнадцяткове кодування кольору (веб-кольори)

Шістнадцяткове кодування кольору використовується під час роботи з дизайном веб-сторінок. Тут використовується мова розмітки HTML, тож кольори описуються шістнадцятковою системою (і поєднують значення червоного, зеленого та синього кольорів). Найменше значення, яке можливо використати, дорівнює 0 (у шістнадцятковій системі — 00), а найбільше — 255 (FF). Шістнадцяткові коди записуються у формі трьох двоцифрових чисел із символом # на початку. Є 216 кольорів, які вважають безпечними для роботи з веб-сторінками (websafe). Монітори та браузери колись мали обмежене відображення кольорів — до 256, проте нині комп’ютери можуть відображати мільйони відтінків.

Дизайнерів веб-сторінок раніше заохочували користуватися виключно 216 кольорами, щоб уникнути некоректного відображення кольорів, та завдяки вдосконаленню комп’ютерних технологій це тепер зовсім не обов’язково.

Суцільні кольори (система відповідності кольорів Pantone)
Суцільні кольори використовують, коли точна відповідність кольору має велике значення, як-от у роботі з брендованими матеріалами та логотипами. Pantone — це оригінальна система кольорів з індивідуальними ідентифікаційними номерами, наразі стандартна модель для роботи з суцільними кольорами. Спочатку систему Pantone було розроблено для друкарської промисловості, та нині її використовують у низці інших галузей. Система складається зі зразків кольору на крейдованому (C — coated paper), некрейдованому (U — uncoated paper) та матованому папері (M — matt paper), тож один колір на різних палітрах буде представлено, наприклад, як Pantone 151 C, Pantone 151 U та Pantone 151 M. Палітри допомагають дизайнерові підібрати кольори і точно передати їх на друці.


Кольори системи Pantone
Систему Pantone застосовують, коли потрібна точна відповідність кольору на різних носіях.

Композитний друк (колірна модель CMYK)
Для композитного друку використовують набір із чотирьох кольорів: cyan, magenta, yellow, black — блакитний, пурпуровий, жовтий і чорний (літера K в абревіатурі означає «ключовий» колір — всі друкарські форми зводять за формою чорної фарби). Фарби наносять на папір по черзі, витворюючи плавні переходи кольору (як на кольорових фотографіях).

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


CMYK
Первинні субстрактивні кольори: блакитний, пурпуровий і жовтий. Коли два кольори накладаються, отримуємо первинні адитивні кольори (червоний, зелений або синій). Якщо ж накласти всі три, вийде чорний колір.

RGB
Первинні адитивні кольори: червоний, зелений і синій. Якщо накласти два адитивні кольори, отримаємо первинні субтрактивні кольори. Якщо ж накласти всі три, вийде білий колір.

Порядок друку
Повноколірний друк (тобто чотириколірний) включає кілька необхідних кроків, що дозволяють створювати якісні кольорові відбитки.

Спочатку оригінальне графічне зображення слід розділити на червоний, зелений та синій компоненти. Це зазвичай роблять за допомогою цифрового сканера. Відтак кожен компонент інвертується, перетворюючись на негатив. Опрацьовані негативні зображення відповідають за окремі кольори: блакитний, пурпуровий і жовтий.

Блакитний, пурпуровий і жовтий — основні кольори для створення повноколірних відбитків. Їх поєднання утворює досить точну копію оригінальних зображень. Проте найтемніші кольори зазвичай набувають відтінків коричневого. Щоб досягти справжнього розмаїття темних відтінків, треба додати четвертий — чорний компонент. Він увиразнить тінь і поглибить контраст зображення.


Друкарські форми
Ці зображення показують послідовність, у якій зазвичай відбувається друк фарбами колірної моделі CMYK. Глибина та насиченість кольорів зростають із додаванням відбитків кожної наступної форми. Зверніть увагу, як додавання останнього, чорного відбитка збільшило глибину й контрастність зображення.

Продовження читайте в книзі Ґевіна Емброуза і Найджела Оно-Біллсона «Основи. Графічний дизайн 01: Підхід і мова»

__________________________________________________________

Читати  «Новини» видавництва ArtHuss

__________________________________________________________

Більше про світове та українське мистецтво читайте в нашому блозі.

Читати блог ArtHuss

Наверх