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

1. ШРИФТЫ, ЦВЕТА
И ИЗОБРАЖЕНИЯ В CANVA
онлайн сервис графического дизайна

2. Шрифты, цвета и изображения —
это важные составляющие любого
графического дизайна.
Мы рассмотрим базовые понятия
типографики, в том числе правила сочетания
шрифтов, «навигацию» по цветовому кругу
для составления цветовой палитры работы,
использование фотофильтров для создания
стиля, соответствующего всему дизайну.

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

4. Почему шрифты,
цвета и изображения
имеют значение?
Сочетание цветов — это основа
хорошей художественной работы.
Знание принципов цветового круга
помогает начинающему дизайнеру
понять, как создается гармоничное и
запоминающееся цветовое сочетание.

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

6. Шрифты
Цвета
Изображения
Содержание

7. ШРИФТЫ

8. БАЗОВЫЕ ПОНЯТИЯ ТИПОГРАФИКИ
Гарнитура шрифта (тип начертания)

9. Шрифт с засечками (антиква) —
тип начертания с небольшими декоративными штрихами
на концах букв.

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

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

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

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

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

18. Придают работе выразительный, динамичный стиль
и отлично сочетаются с шрифтами без засечек.

19. БАЗОВЫЕ ПОНЯТИЯ ТИПОГРАФИКИ
Межбуквенный интервал и высота строки

20. Межбуквенный
интервал —
расстояние между
буквами в строке
текста.

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

22. Высота строки —
это расстояние между
соседними строками по
вертикали.

24. УЧЕТ СТИЛЯ
ШРИФТА
Стиль гарнитуры
необходимо соотносить
с брендом и другими
элементами дизайна.
Помните: стиль должен
воплощать характер
и идею вашего бренда.

25. Например, рукописный тип шрифта Walt Disney
создает настроение магии и волшебства

26. Компания L’Oreal , ассоциирующаяся с красотой,
использует шрифт элегантный, изысканный

27. Компания IKEA применяет жирный шрифт,
отражающий надежность и основательность.

28. Примеры
гарнитур Canva
и характеров,
которые они
придают
посланию
(кириллические
шрифты)

29. созерцательность,
неторопливость
традиционность,
классичность
легкость,
четкость
сосредоточенность
акцент,
призыв к действию

30. сила, весомость
элегантность,
изыск
простота,
непритязательность
шутливость,
спонтанность, игра

31. ЧИТАЕМОСТЬ
ШРИФТА
Важнейшее требование
к любому шрифту —
это удобство его
чтения, особенно,
если речь идет
о больших объемах
текста.

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

33. СОЗДАНИЕ
ИЕРАРХИИ
Важно понимать и использовать
идею иерархичности, упорядочивая
текст по степени важности
для читателя.
Заголовки должны быть самыми
крупными элементами на странице,
моментально захватывающими
внимание, текст основного
содержания должен быть мельче,
так как читается после заголовка
и подзаголовков.

34. СОЧЕТАНИЕ ШРИФТОВ

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

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

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

38. РАСПОЛОЖЕНИЕ ЗАГОЛОВКА

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

40. ЦВЕТА

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

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

43. Шестнадцатиричный код содержит шесть цифр,
обозначающих цвет; каждый шестизначный код состоит
из трех пар цифр, которые передают количество красного,
зеленого и голубого в составе оттенка.

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

46. Цветовой
градиент
На цветовом круге
сервиса Canva есть
градиентные слайдеры,
которые помогают
подобрать максимально
точный оттенок
(темнее или светлее)
одного цвета.

47. Гармония
в аналогичных
цветах
Аналогичные цвета
расположены рядом
друг с другом на
цветовом круге.

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

49. Визуальное
единство в
монохромной
гамме
Монохромные цвета -
это темные или
светлые версии одного
и того же цвета
(насыщенность цвета).

50. Различные оттенки достигаются
добавлением белого или черного
тона в цвет.
Дизайны в монохромной гамме
отличаются цельностью, сильным
визуальным единством элементов.

51. Контраст
в дополнительных
цветах
Дополнительные цвета
расположены на
противоположных
сторонах цветового
круга и образуют
контраст.

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

53. Создание
цветовой палитры
• выбрать один
доминирующий
цвет для выделения
самого важного
элемента в работе.

54. Создание
цветовой палитры
• поддерживать
зрительный фокус в
дизайне, ограничить
палитру до 4-х
цветов.

55. Создание
цветовой палитры
• использовать цвета,
подходящие к идее
дизайна, например,
природные оттенки
в плакате об
окружающей среде.

56. ИЗОБРАЖЕНИЯ

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

58. Рамки помогают сохранить
место для всех элементов —
текста, рисунков, значков.

59. Фотофильтры —
коррекция и улучшение
качества фотографии
Изменение параметров
фильтра — яркости,
контрастности, насыщенности
— корректирует
или улучшает качество
изображения.
Есть также настройки оттенка,
размытия, «кросспроцесс»
и «эффект виньетирования».

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

61. Фотофильтры —
создание настроения
Фотофильтры —
это отличное средство
создать определенное
настроение или подчеркнуть
эмоции, воплощенные
в фотографии.

62. На фото слева фильтр "Летний" создает ощущение
теплого летнего дня, на фото справа фильтр "Блюз"
передает более грустное настроение,
дождливого дня или старого журнала.

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

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

65. Источник:
https://designschool.canva.com/teaching-materials/fonts-colors-images/
В презентации использованы изображения:
http://s0.geograph.org.uk/geophotos/05/02/97/5029757_02c35728.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/2000px-
Ikea_logo.svg.png
http://i.vimeocdn.com/video/546043815_1280x720.jpg
Icons made by Freepik from http://www.flaticon.com