Типографика. 2D и 3D графика

1. Направление 3. Типографика. Основы типографики. 2D и 3D Графика.

2. Типографика. Основы типографики.

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

3. Типографика. Основы типографики.

Основные термины Типографики
• Гарнитура - шрифт или несколько шрифтов, имеющих
стилистическое единство начертания. Состоит из набора знаков
(обычно - цифры, буквы, знаки пунктуации, сцецсимволы, но может
состоять так же исключительно из неалфавитных знаков).
• Кегль - высота буквы, включающая в себя нижние и верхние
выносные элементы. Измеряется в типографских пунктах
(обозначается как pt).
• Интерлиньяж - межстрочный интервал. Расстояние между
базовыми линиями соседних строк. Измеряется интерлиньяж в
типографских пунктах

4. Типографика. Основы типографики.

• Кернинг - расстояние между буквами. Основная суть кернинга подбор различных интервалов между различными парами
конкретных букв, для увеличения удобочитаемости.
• Трекинг - межбуквенные пробелы, применяемые к группе символов
(слово, строка, абзац…). Трекинг служит для разрядки (осветления)
или уплотнения (затемнения) набора, а так же для вгонки и выгонки
слов (изменения числа набранных строк).
• Рубрикация - система деления текста, при которой соподчиненные
заголовки различного уровня выражают взаимосвязь и
соподчиненность возглавляемых ими частей (рубрик, глав,
разделов, подразделов).

5. Типографика. Основы типографики.

• Графема - базовая форма знака, помогающая отличить этот его от
любого другого осмысленного знака, вне зависимости от
художественных особенностей исполнения. Графема, как правило,
определяет единицу текста. Например, базовая форма (графема)
буквы "А" позволяет отличить ее от буквы "Б" вне зависимости от
того, какой гарнитурой она набрана.
• Глиф - конкретное графическое исполнение графемы. Если в тексте
используется несколько глифов для одной и той же графемы
(например, в зависимости от контекста), такие глифы называются
аллографами друг друга.

6. Типографика. Основы типографики.

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

7. Типографика. Основы типографики.

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

8. Типографика. Основы типографики.

Характеристики шрифтов и текстов
• Удобочитаемость - свойство текста и шрифтов для его набора,
характеризующее легкость восприятия. Удобочитаемость важна в
текстах, предназначенных для сплошного чтения. Графическое
исполнение шрифтов, используемых для набора таких текстов,
должно быть максимально привычным и нейтральным.
• Заметность - Характеристика важная для текста, который мы хотим
выделить. В отличие от удобочитаемого текста, заметный текст в
первую очередь видят, и только потом читают.
• Различимость - характеристика шрифта и текста, являющаяся
важной для чтения в условиях пониженной видимости и/или за
короткое время.

9. Типографика. Основы типографики.

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

10. Типографика. Основы типографики.

В первом приближении основными можно назвать следующие
группы или подвиды шрифтов:
• с засечками, или серифные;
• без засечек, или рубленые;
• акцидентные, или декоративные;
• рукописные;
• символьные и орнаментальные.

11. Типографика. Основы типографики.

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

12. Типографика. Основы типографики.

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

13. Типографика. Основы типографики.

Как выбрать ТОТ самый шрифт?
1. Определите свою цель
• Перед тем, как что-либо делать, обязательно обозначьте цель
вашего дизайна. Какую информацию вы собираетесь подать? Для
какой среды создается ваш дизайн?
• В хорошем дизайне типографика полностью соответствует его
цели. Все потому, что именно типографика — ключ в задании
настроения, тона и стиля в дизайн-проекте

14. Типографика. Основы типографики.

2. Определите свою аудиторию
• После задания цели дизайна, определите свою аудиторию. Этот шаг
критичен, так как возраст и интересы пользователей будут влиять
на выбор шрифтов.
3. Ищите вдохновение
• Посмотрите на работы других дизайнеров. Попытайтесь понять, на
чем основывался их выбор шрифтов.

15. Типографика. Основы типографики.

4. Идеи для комбинирования
• Помимо просто шрифтов, ищите идеи для их сочетания. Это не
менее важно, чем сами шрифты отдельно. Хорошие шрифтовые
комбинации задают визуальную иерархию и улучшают
читабельность дизайнов.
• Для вдохновения начните с Typewolf. Typewolf показывает идеи по
комбинированию шрифтов с разных сайтов. Кроме того, там вы
найдете рекомендации по типографике и массу углубленных уроков.

16. Типографика. Основы типографики.

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

17. Типографика. Основы типографики.

Что необходимо знать для правильной организации текста?
• Близость. Если символы или элементы текста находятся рядом,
люди имеют тенденцию воспринимать их как единое целое.
• Схожесть. Если символы схожи по размеру, цвету, форме или
очертаниям, они также воспринимаются целостно.
• Целостность. Восприятие человека стремится воспринимать
информацию целостно и упрощенно.
• Замкнутость. Человек склонен визуализировать фигуру так, чтобы
она приняла законченную форму.
• Фон и фигура. Если правильно соотнести фон и фигуры, это
положительно повлияет на восприятие.

18. 2D и 3D Графика

Компьютерная графика — раздел информатики, предметом которого
является создание и обработка на компьютере с графических
изображений (рисунков, чертежей, фотографий и пр.)
• О компьютерной графике заговорили после опытов Джей У.
Форрестера (инженер компьютерной лаборатории Массачусетского
технологического института) в 1951 году.
• К предшественникам компьютерных рисунков можно отнести
первые незатейливые картинки из точек и букв, получаемые на
телетайпах телеграфа, а позже — на печатающих устройствах,
подключенных к ЭВМ.

19. 2D и 3D Графика

Направления компьютерной графики
Направление
Назначение
Научная
Визуализация объектов научных исследований,
графическая обработка результатов расчетов,
проведение вычислительных экспериментов с
наглядным представлением их результатов.
Деловая
Создание иллюстраций, используемых составления
иллюстрации статистических отчетов и пр.
Используется в работе учреждений.
Электронные таблицы
Конструкторская
Создание плоских и трехмерных изображений.
Используется в работе инженеров-конструкторов.
Системы автоматизированного проектирования
(САПР)
Иллюстративная
Создание произвольных рисунков и чертежей.
Графические редакторы
Рекламная
Компьютерная анимация
Программное обеспечение
Создание реалистических изображений. Используется Графические редакторы (со сложным математическим
для создания рекламных роликов, мультфильмов,
аппаратом)
компьютерных игр, видеоуроков, видеопрезентаций и
пр.
Создание движущихся изображений на экране
монитора. Слово «анимация» означает «оживление».

20. 2D и 3D Графика

По способам задания изображений графику можно разделить на
категории:
• Двумерная графика (2D, two dimensions – «два измерения») –
такое изображение всегда будет выглядеть плоским, так как в нем
используется только два измерения – ширина и высота
• Трёхмерная графика (3D, three dimensions — «три измерения»)
оперирует с объектами в трёхмерном пространстве. Обычно
результаты представляют собой плоскую картинку, проекцию.
Трёхмерная компьютерная графика широко используется в кино,
компьютерных играх.

21. 2D и 3D Графика

2D в истории
Наглядный пример 2D графики – старые аркадные игры, такие как
Pac-Man и Mario. Плоские нарисованные фигурки бегают по такому
же плоскому миру, собирая плоские предметы. Пионером
компьютерной графики считается Сол Басс, дизайнер, который
создавал заставки и титры для фильмов Альфреда Хичкока, Отто
Премингера, Стэнли Кубрика, Мартина Скорсезе и др.

22. 2D и 3D Графика

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

23. 2D и 3D Графика

Анимация
Термин "анимировать" дословно означает "оживить" изображение.
Теория анимации базируется на положении о способности
человеческого глаза сохранять на сетчатой оболочке след увиденного
и соединять быстро меняющиеся изображения в единый зрительный
ряд. Это создает иллюзию непрерывного движения.
Частота смены кадров за секунду экранного времени составляет
• 12-16 - для компьютерной анимации, в зависимости от
использования различных пакетов программного обеспечения,
• 24 - для кинематографа,
• 25 - для системы PAL телевещания,
• 30. - для системы NTSC телевещания.

24. 2D и 3D Графика

Что такое 2D анимация?
Прежде всего, 2D анимация - это то, что вы привыкли смотреть в
детстве. Каждый кадр 2D анимации рисуется или дополняется с нуля
(есть исключения), от руки или какого-нибудь механического
манипулятора (например, мыши). И поэтому 2D анимация является
уникальной, а точнее каждый кадр её уникален, это одно из немногих
превосходств 2D анимации от 3D (сама по себе 2D анимация в
настоящее время проигрывает 3D).

25. 2D и 3D Графика

Почему 2D-анимация столь популярна?
• Во-первых: из-за скорости и простоты восприятия информации. С
помощью такой анимации можно быстро донести до зрителя суть
послания без лишних отвлекающих элементов.
• В-вторых, на замену тотальному минимализму и двумерности
пришел более современный дизайн флэта «почти плоский дизайн» в виде длинных теней и некоторых других элементов.
• В-третьих, создавать двумерную графику одно удовольствие. Зная
определенные техники, можно легко и быстро создать
потрясающую анимацию.
• Главные характерные элементы такой анимации: шейповые
переходы (transitions) очень популярны в 2D моушн-дизайне, они
привносят динамику и смотрятся очень эффектно.

26. 2D и 3D Графика

• Анимированная инфографика – тренд в плоском дизайне.
Отличный способ представить информацию при помощи
интуитивно-понятных визуальных образов и короткого текста.
• Длинные тени добавляют изображениям глубину и объем.
• Динамичные цвета - чистые, яркие, энергичные цвета - идеальный
выбор в 2D. Также очень популярны цвета в духе ретро.

27. 2D и 3D Графика

Типографика
• Типографика – центральный элемент во флэте. Обычно
используются «читабельные» шрифты без засечек и вычурных
элементов.
• Минимализм и простота – главные элементы 2D-анимации. Но
простой, не значит скучный и неинтересный, флэт может быть
стильным и очень изящным. Чтобы сделать качественную флэтанимацию дизайнеру как минимум необходим развитый вкус и
определенные знания.

28. 2D и 3D Графика

2D - Анимацию условно можно разделить по способу
реализации(воспроизведения) на следующие категории :
• Кадровую анимацию (FLI, FLC)
• Спрайтовая анимация
• Программную анимацию
• Специальную анимацию(GIF)

29. 2D и 3D Графика

По технологии создания 2D-анимация делится на следующие способы
• Полиморфные преобразования
• Операции над фликами
• Анимация с преобразованием матрицы
• Классическая анимация

30. 2D и 3D Графика

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

31. 2D и 3D Графика

Операции над фликами
Можно выделить следующие операции над фликами :
• Изменение направления просмотра последовательности кадров
( прямой и обратный )
• Создание эффекта отштриховки изображения
• Создание эффекта следа ( просветка ряда предыдущих кадров :
более ранние кадры - менее заметны )

32. 2D и 3D Графика

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

33. 2D и 3D Графика

Анимация матрицы
В данном случае для матрицы задается комбинация из следующих преобразований :
• Перемещение матрицы
• Вращение матрицы
• Изменение размера матрицы
Перемещение
Для матрицы задается начальное положение и конечное положение либо начальное положение
и путь (вектор или кривая) перемещения
Вращение
Для матрицы задается угол поворота (или конечное положение) и комбинация осей,
относительно которых происходит поворот.
Изменение размера
Для матрицы задается изменение размера или ее конечный размер.

34. 2D и 3D Графика

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

35. 2D и 3D Графика

3D Графика
3D графика или трёхмерная графика – это один из разделов
компьютерной графики, комплекс приемов и инструментов, которые
позволяют создать объемные объекты при помощи форма и цвета. От
двухмерных изображений она отличается тем, что подразумевает
построение геометрической проекции трехмерной модели сцены
(виртуального пространства) на плоскость, делается это при помощи
специализированных программ.

36. 2D и 3D Графика

Сегодня 3D графика прочно вошла во многие сферы нашей жизни – это:
• строительство (визуализация объемных архитектурных изображений
зданий, объектов, интерьера, экстерьера);
• производство (объектное моделирование);
• телевидение (моделированные фото в глянцевых журналах,
видеоролики, спецэффекты в кино),
• игровая индустрия (3D-анимация и виртуальные миры, разработка
компьютерных игр);
• полиграфия (создание полиграфической продукции),
• реклама (электронные презентации и каталоги, рекламные щиты и пр.)

37. 2D и 3D Графика

Моделирование
Традиционно рисуют в 2D (по осям X и Y) — на бумаге, холсте, дереве и т.п.
При этом отображают какую-то одну из сторон предмета. Картинка сама по
себе плоская.
Но если мы хотим получить представление обо всех сторонах предмета, то
необходимо нарисовать несколько рисунков. Так поступают в
традиционной рисованной анимации.
Но, вместе с тем, существует, (кстати, в СССР была довольно хорошо
развита) т.н. кукольная анимация. Один раз изготовленную куклу снимают
в необходимых позах и ракурсах, получая серию «плоских картинок».
3D (к X и Y добавляется координата глубины Z) визуализация — это те же
«куклы», только существующие в цифровом виде. Другими словами, в
специальных программах (Blender, 3ds Max, Maya, Cinema 4D и т.п.)
создается объемное изображение, например авто.

38. 2D и 3D Графика

Преимущества 3D – моделирования:
• В распоряжении аниматора есть объемная модель, необходимо
лишь поместить ее должным образом в кадр, анимировать (задать
траекторию передвижения или рассчитать с помощью симулятора)
при необходимости, а уж отображение авто в финальной картинке
ложится на специальную программу называемую визуализатором
(render)
• Модель достаточно нарисовать один раз, а потом использовать в
других проектах (скопировав), изменять, деформировать и т.п. по
своему усмотрению
• Можно создавать практически бесконечно детализированные
модели

39. 2D и 3D Графика

Среди множества областей применения 3D-графики основными
являются:
• 3D-моделирование.
• 3D-анимация.
• Визуализация.
3D анимация — это автоматизация перемещения и трансформаций
3D модели в пространстве с течением времени.

40. 2D и 3D Графика

Способы 3D анимации
В основном применяются три способа анимации 3D объектов:
• перемещение и вращение целого объекта, без изменения его
формы
• динамические деформации
• скелетная анимация

41. 2D и 3D Графика

Анимация по ключевым кадрам в 3D по своему принципу очень похожа
на работу традиционных аниматоров, когда главный художник рисует
ключевые позы персонажа, а его подчинённые художники-позировщики
заполняют промежуточные кадры, отрисовывая надлежащие
трансформации фигуры.
Анимация по кривым движениям - это, собственно, представление
перемещения или трансформации объекта в виде графиков для каждой из
его координат XYZ.
Анимация по траектории - отдельно задаётся путь перемещения объекта
(с направлением), определяется его скорость и возможные изменения
ориентации объекта в пространстве, каковая регулируется обычно всё теми
же вышеупомянутыми кривыми.
Описанные методы и способы как правило используются в комбинациях,
особенно, когда речь идёт о более-менее сложной анимации.