Книга: Научись уже делать картинки! «Учебник» маминой подруги, или Книга-презентация. Визуальные принципы мультимедиа для начинающих
Назад: Картинки. Манипулирование вниманием
Дальше: Основы типографики
Картинки.
Выбор цвета, композиция, пропорции
Посмотри на эту карточку внимательно! В проекте «.три. точки.» мы на ее примере рассказывали, как, используя цвета, размеры иконок и цифры, можно ненароком или специально исказить восприятие реальности. И этому способствует использование визуальных штампов (да, точно таких же, как речевые штампы).
Голландское издание De Correspondent на примере инфографики, предоставленной Европейской службой пограничной и береговой охраны – Frontex, показало, как создается визуальная манипуляция. Frontex подготовила миграционную карту «незаконного пересечения границы». Ее растиражировали многие новостные сайты. На первый взгляд это обычная миграционная карта с цифрами и данными от агентства.
Но журналисты De Correspondent, перерисовавшие ее в стиле своего издания, обнаружили, что она, мягко говоря, необъективна:
● Красные стрелки ассоциируются с угрозой. Размер стрелок на карте больше территории многих европейских стран и создает ощущение, что на них надвигается огромный поток мигрантов.
● Если верить стрелкам, то мигранты направляются прямо в Европу, хотя большинство из них попадают к этим границам долгими обходными и опасными путями.
● Кроме того, карта называется «Незаконное пересечение границы», создавая образ всех мигрантов как преступников.
● На карте не указано, откуда прибывают мигранты, и не сказано о причинах их переезда.
Эта карта может сформировать негативное отношение к мигрантам, вызывая у пользователей чувство тревоги, сделали вывод в De Correspondent.
Как можно было смягчить негатив? Журналисты предложили свой вариант:
● Изменить цвет стрелок.
● Изменить заголовок «Маршрут направления мигрантов с неурегулированным статусом в Европу».
● Уменьшить размер стрелок или использовать другие знаки вместо них.
Такой визуальный подход создаст иное впечатление о мигрантах. Карта будет выглядеть менее тревожной, чем в оригинальном дизайне.
Почему это важно? Журналисты ради удобства восприятия информации часто визуализируют цифры и данные. Это возможность рассказать о сложном просто. Наличие значков, иконок и цифр создает ощущение объективности. Мы воспринимаем данные на карте как достоверную визуализацию того, как устроен мир. Но что, если мы ее недостоверно визуализируем?
На курсе графического дизайна для меня самой сложной до сих пор остается тема цвета. Сочетание, теплые и холодные, контрастность и т. д. и т. д.
Я постоянно обращаюсь к лекциям, кругу Иттена, сайту Pantone, когда необходимо самой создавать карточки, макеты и рисунки. Еще о двух ресурсах, которые очень помогают, я расскажу чуть позже. Растянем удовольствие!
Но при этом изучать теорию цвета оказалось самым увлекательным. Вот что я узнала.
Для начала: цвет по-научному называется тон.
У цвета есть иерархия. Аха!
Первичные или три особенных цвета: красный, желтый, синий. Их нельзя получить смешением других цветов. Вот такая уникальная триада. Используем их, если нужны броскость, яркость.
Вторичные. Их можно получить из смешения первых трех. Ко вторичным относятся: оранжевый, зеленый, фиолетовый. Менее яркие.
Третичные. Их получают из смешения двух вторичных или одного первичного и одного вторичного цветов. Еще менее яркие. Например, сочетание желтого и оранжевого даст желто-оранжевый, синего и зеленого – сине-зеленый.
Цветовые круги: первичный, вторичный, третичный
Далее по схеме идут четверичные и т. д. Вариации множатся. Яркость с каждой -ичностью все приглушеннее и приглушеннее. Но нам с тобой так глубоко копать не нужно. Будем знать про первые три.
Они составляют 12 базовых цветов: три первичных, три вторичных и шесть третичных (по два цвета от каждого первичного). Уже запутался? Не заморачивайся, просто заложи это место в книге вечной закладкой!
12 основных цветов – это чистый цвет, цветовой тон.
Добавляем в них черный и получаем оттенок.
Добавляем в них белый и получаем ненасыщенный тон.
Оттенки и ненасыщенные тона расширяют цветовые вариации. Используй эту информацию, когда в палитре в графической программе или онлайн-сервисе будешь выбирать необходимый цвет. Уведи курсор в сторону белого и получишь ненасыщенный тон, уведи в сторону черного, и будет тебе припыленный оттенок. Мне почему-то кажется, что капелька черного, добавленная в яркие цвета, делает их сложными, более приятными глазу. Мне самой такие оттенки нравятся больше.
Белый цвет – это смешение всех цветов (ну это все знаем по урокам физики).
Черный – отсутствие цвета. Если по науке, он не является цветом.
Хроматические – цветные цвета.
Ахроматические – черно-белые.
Монохромные состоят из одного основного цвета и любого количества его ненасыщенных тонов и оттенков.
Теплые – преобладают красный или желтый цвета.
Холодные – преобладает синий.
При сочетании теплых и холодных цветов помни, что теплые забивают холодные! Они их подавляют, вот такой цветовой абьюз. Теплые ярче и виднее – сразу бросаются в глаза. Холодные на их фоне менее заметны, но они за счет этого дают глубину картинке.
Холодные цвета можно «утеплить», добавив в них красный или желтый. А теплые, наоборот, «остудить», добавив синий.
Далее, что нам точно надо знать. Есть деление на RGB и CMYK.
Излучаемые цвета
Для экранов. Не подходит для печати, потому что в печати цвета в RGB дают темный, припыленный тон.
Любой цифровой визуальный контент состоит из большого количества оттенков. Все они получены путем смешивания красного, зеленого и синего цветов в разных пропорциях.
Еще его называют аддитивной цветовой моделью. Смешение световых лучей видимого спектра дает белый цвет.
39. Почему черный цвет в CMYK обозначен как Key? Key color – ключевой цвет. Обычно им выступает черный.
Отражаемые цвета
Используется в печати, потому что дает яркий цвет. Название цветов переводится: голубой, пурпурный, желтый и черный.
Изображение на любом печатном материале состоит из голубого, пурпурного, желтого и черного цветов.
Его еще называют субтрактивной цветовой моделью. Смешение световых лучей видимого спектра дает черный цвет.
Цвет – влиятельный. Он – важная величина, которая воздействует на окружающие его объекты. Вот почему правильно выбрать правильный цвет – это так сложно.
Если ты хочешь создать серию визуальных материалов на одну тему, то хорошо бы разработать цветовую палитру, с которой ты будешь работать при создании контента. Вернись к началу главы, где я рассказывала о визуальной эволюции картинок в нашем проекте «.три. точки.», и ты увидишь, что мы ровно это и сделали. Это ускоряет процесс работы над вижуалами, не надо ломать голову над выбором цвета для каждой новой карточки.
Если ты готовишь большой мультимедийный спецпроект, то выбор палитры важен и тут. Это цвета, в которые ты покрасишь весь проект: от фавикона до фона. Цвет – первая информация, которую считают в твоем проекте читатели. Что они сделают в первую секунду – ахнут или охнут, – зависит от него.
А теперь мое любимое!
Круг Иттена. В сети ты найдешь и сторонников, и противников. Кто-то считает цветовой круг слишком упрощенной схемой. А кто-то говорит, что это хорошее подспорье, а не готовое решение для всех цветовых идей на полвека вперед. Для меня круг спасительный, он помогает разобраться в сочетании цветов. А это сложная наука, поверь!
В сети ты найдешь много версий этого круга.
Результаты поиска Google Image по запросу «круг Иттена»
Но так выглядит круг в том виде, в котором его нарисовал автор.
Как правильно с ним работать? Надо знать, что существует несколько вариантов сочетания цветов, это и показывает круг Иттена.
Внимание! Далее весьма субъективное трактование.
1. Комплементарное. Не путай с комплиментарным (как я поначалу). Означает – взаимно соответствующий чему-либо, взаимосвязанный с чем-либо. Так что дело тут не в комплиментах. Скорее в том, что противоположности притягиваются. Это сочетание цветов, расположенных на противоположных сторонах круга. Хорошо подходит для расстановки акцентов. Для этого один из цветов делают основным, другой – дополнительным. Цветовая гамма нашей книги выбрана по этому принципу, если ты заметил. Фиолетовый и желтый – сочетание противоположностей.
2. Контрастная триада. Мне этот принцип напоминает игру в бутылочку. Ставишь посередине, раскручиваешь, и на кого указало горлышко, тот – основной цвет. А те два, что оказались по ту сторону дна, – дополнительные. Или наоборот. Этот принцип похож на комплементарный, но, в отличие от него, контрастная триада умеет «соображать на троих». Это позволяет ей слегка расширить палитру. Правда, при этом ей приходится быть слегка навеселе. Кто не понял аналогию с бутылочкой, представьте триаду в виде равнобедренного треугольника, по углам которого сочетаемые цвета. Душнилы!
3. Классическая триада. Равносторонний треугольник? Как бы не так! Влечения тут нешуточные – перед нами любовный треугольник! Поместите его в цветовой круг, цвета, расположенные на углах, сочетаются. Любовь, страдания, ревность – вот почему все палитры получаются яркими, страстными и даже вызывающими. «Танго втроем! Разве это возможно?» Ох и любят эти цвета пошалить!
4. Аналоговая триада. Я бы назвала эту триаду «три сестры». Сидят рядышком, перемывают косточки соседкам. Три цвета, расположенные рядом на внешнем круге, сочетаются. А как иначе, все ж таки родственники! Палитра получается местами монохромной, местами разноцветной, но с мягким переходом от одного к другому. Поэтому цветовой подбор, созданный по этому принципу, спокойный и выдержанный, без резких акцентов. Флегматичная палитра.
5. Тетрада. Вот где идет настоящая борьба за власть! Не смотри на то, что название этого принципа похоже на добрую школьную тетрадку! Ничего общего! Только борьба, только хардкор! Потому что с квадратом не шутят. Он объемный, он агрессивный, и у него четыре угла. Цвета, расположенные по этим углам, как бы им ни хотелось другого, сочетаются! Тебе нужно красочное, броское и разнообразное цветовое решение – бери и используй! И пусть удача всегда будет с тобой!
6. Прямоугольная схема. Прямоугольник, косплеющий жесткий квадрат, – это ли не жалкое зрелище! Сходить к хорошему психотерапевту и отработать травмы, вот что надо этой геометрической фигуре. Тогда бы он увидел, что, в отличие от тетрады, он умеет создавать пары. Цветовой Купидон! На каждой своей узкой стороне он создает пару из похожих между собой оттенков, которые еще и сочетаются с противоположной. «Дружите семьями», – говорит прямоугольная схема. Ну или подталкивает к свингу. Кто их тут разберет! Палитра получается спокойная, но насыщенная.
Если тебе все еще сложно пользоваться кругом Иттена (а зря, какие там страсти!), то на помощь придут онлайн-сервисы.
Генератор цветовых палитр – . Здесь ты в интерактивном формате сможешь подобрать нужное сочетание цветов. Можно извлечь цвета или градиенты цветов с выбранной тобой картинки – ее нужно будет загрузить. Очень круто то, что он покажет, по какому правилу гармонии подбирает цвета – да-да, по правилу цветового круга. Заодно можно натренировать понимание работы круга Иттена. Еще одна супернужная вещь: ты можешь выбрать цвет фона и цвет текста и проверить их на контрастность. Читается ли твой текст на этом фоне или нет.
Еще один ресурс, который поможет неофиту в графическом дизайне, – . Он помогает быстро подобрать палитру сочетаемых цветов. Можно скопировать предложенные сервисом палитры. Или, как и в Adobe Color, можно загрузить картинку, цвета на которой тебе понравились. Сервис разложит ее по кодам. В выбранную палитру можно добавить дополнительные оттенки, для этого нужно нажать плюсик между цветами. Также ты можешь заблокировать понравившийся цвет. Он будет оставаться основным, к нему будут подбираться остальные тона.
Давай покрасим холодильник в черный цвет! Иди пробовать прямо сейчас!
«ИСТОРИЧЕСКАЯ СПРАВКА» № 5
Иттен баласы!
Иоганнес Иттен, швейцарский художник, педагог, теоретик искусства, буддист, вегетарианец и мистик. Преподаватель легендарной школы Баухауз и автор книги «Искусство цвета». В ней он впервые представил публике 12-частный цветовой круг. До него теорией цвета занимались многие, в том числе Исаак Ньютон и Иоганн Вольфганг Гёте, но именно Иттен сумел создать удобный и понятный инструмент. Круг облегчает понимание правил работы с цветом. Ты встретишь его во многих графических сервисах – их палитры созданы на его основе. Если изначально круг предназначался для художников, то теперь его используют все, кто работает с цветом. Например, инстастилисты. Собирая модные луки, они прибегают к помощи цветового круга, чтобы объяснить аудитории, как правильно сочетать цвета в одежде.
Цитаты из книги «Искусство цвета»:
«…самые глубокие и подлинные тайны цветового воздействия не видны даже глазом и воспринимаются только сердцем.
…Существуют ли в изобразительном искусстве и эстетике общие цветовые правила и законы или же эстетическая оценка цвета определяется только субъективным мнением? Мои ученики часто задавали мне этот вопрос, и мой ответ каждый раз звучал так: "Если вы, не зная законов владения цветом, способны создавать колористические шедевры, то ваш путь заключается в этом 'незнании'. Но если вы в своем 'незнании' шедевры создавать неспособны, то вам следует позаботиться о получении соответствующих знаний".
Законы и теории хороши в ситуации неуверенности. В моменты вдохновения задачи разрешаются интуитивно, сами собой».
Изображение сгенерировано ИИ
Композиция – это когда красиво!
Есть несколько, на мой взгляд, главных ошибок в создании вижуалов, которые допускает начинающий. Что с него взять? Новичок! (Құдай сақтасын, тьфу, тьфу!)
Далее по списку:
● Объекты и тексты внутри картинок не выстраивает композиционно. Я ж не композитор, гы-ы-ы!
● Фото вставляет целыми, как есть. Не вырезает фон, не обрезает лишнее. А чотакова? Из лишнего тут только самоирония!
● Фото не подвергает цветокоррекции. Как сняли, так сняли!
● Шрифты выбирает неподходящие. Старый добрый Times New Roman тоже нормальный! Уау-уау-уау, полехче, а что это за Comic Sans?
● Для текста всегда выбирает выравнивание по центру. Центровым центровое!
● Не следит за интервалами между строками и буквами. Чем дальше, тем лучше!
● Цвета подбирает несочетаемые. Сочетаются только браком, а я брак не произвожу, есьже!
А вот и пример. Постаралась в одной картинке собрать все ошибки.
Предположим, что это постер для магазина цветов. Он должен быть простым, без креативности, с фотографией букета и неброским слоганом.
Как мы исправим ошибки, чтобы на выходе получить другой результат: аккуратную картинку, приятную глазу?
Пойдем по списку:
● Выстроим композицию по правилу третей: основные объекты расположим в точках пересечения (схему и подробности об этом читай ниже).
● В фото вырежем фон, нам нужен только букет с рукой без стены сзади.
● Подкорректируем цвет фотографии, выберем фильтр, который смягчит жесткий свет на ней.
● Выберем для названия жирное начертание шрифта Geometria. Для слогана – тонкое начертание Open Sans. Оба без засечек – хочется, чтобы постер выглядел современнее. Шрифты без засечек, на мой вкус, лучше с этим справляются (можно спорить!).
● Проследим за тем, чтобы интервалы между буквами не скакали. Сбой в интервалах бывает при выборе шрифтов – например, не адаптированных под кириллицу или под специфические буквы казахского языка. Поэтому, выбирая шрифт, надо смотреть, чтобы он не «сходил с ума». Если все-таки не знаешь, как это исправить, выбирай другой.
● Размер шрифтов выберем так, чтобы они смотрелись пропорционально фотографии. Не терялись на ее фоне, но и не занимали слишком много места.
● Оба текста выровняем по левому краю. Такое выравнивание упорядочивает текст.
● Выберем цвета: основной и дополнительный. Воспользуемся кругом Иттена. Используем комплементарный принцип, так как больше двух тонов для нашего постера не нужно. Остановимся на сочетаемой паре – фиолетовом и желтом.
А теперь соберем постер заново!
– Вы вижуалы создаете?
– Нет, только показываю!
– Красивое!
Любая изобразительная форма начинается с точки. Это предельно минимальная фигура на плоскости. Увеличиваешь точку – получаешь пятно. Пятно я назову шаром. И правила построения композиции объясню на шарах.
На разных сайтах о фотографии, киносъемках или дизайне ты найдешь большое количество композиционных схем – как ее выстраивать, чтобы было красиво. Я выбрала три, которые удобнее всего понять и использовать недизайнеру, нечасто создающему визуальный контент. Их правда достаточно. Вообще на первых порах можно было бы обойтись и одной – правилом третей, но хорошо, когда есть варианты. Разнообразие!
Так что там за правило третей?
Правило третей
Из всех композиционных схем эта – самая известная, используемая, простая и понятная. Считается упрощенной версией «золотого сечения».
В этой схеме самые важные объекты располагают вдоль линий или в точках их пересечения. Причем вдоль горизонтальных линий принято располагать линию… горизонта. «Спасибо, Кэп, это логично!» «Пожалуйста, у тебя горизонт завален!» Объекты – человека, животное или дерево – помещают вдоль вертикальных линий, чтобы они занимали только ¹⁄³ от всей картинки. Это фокусирует внимание зрителя на главных объектах. Правило третей используют для любого изображения, будь то фотография, картина, графический постер или видео.
Вот что у меня получилось, когда я разместила шары на сетке по правилу третей, но задействовала все четыре точки. Рабочая схема!
Правило треугольников
Основано на делении листа линией, идущей от одного угла к другому. Из оставшихся углов проводятся две перпендикулярные линии к диагональной. Объекты располагают вдоль линий или помещают в треугольники. Их получается шесть (считайте внимательнее!). Использование этой схемы помогает создавать динамическое напряжение на холсте или в кадре. К этой схеме часто обращаются киношники. Например, много кадров, выстроенных по правилу треугольников, вы найдете в фильме «Отель "Гранд Будапешт"».
Экспериментирую дальше: шары в четырех треугольниках. Хочу посмотреть, будет ли это смотреться гармонично. На мой взгляд, вполне! Шары как будто двигаются, получился упорядоченный хаос.
Правило диагоналей
Возникло из-за сомнений в эффективности правила третей. Важные элементы располагаются вдоль диагональных линий, расположенных под углом 45°. Длинные элементы вдоль диагонали делают картину динамичной. Я решила эту схему использовать буквально – поместила шары в каждый треугольник. И они превратились в орнамент.
Можно ли не использовать эти схемы? Можно. Но, чтобы нарушать какие-то правила, сначала надо их изучить. Умеешь как надо, значит, увидишь, когда не надо как надо. Редко бывает так, что, сев за графическую программу впервые, человек сразу рисует композиционно интересную картинку. Именно поэтому я приводила в примеры вижуалы а-ля «областное ТВ».
Композиция – это про то, чтобы на картинке все было красиво, взаимосвязано и не было неприятного беспорядка.
Нужна гармоничная система, в которой форма, цвет и настроение будут единым целым? Зовите композицию!
На картинке важно соотношение между объектами и воздухом вокруг. Если отдалить объекты друг от друга, воздух будет проникать между ними. Если пятно преобладает над воздухом, то композиция будет перегруженной.
Если воздуха больше, то она будет воздушной.
Ничто не должно располагаться на странице произвольно. Каждый элемент должен иметь визуальную связь с чем-то другим. Если несколько объектов на картинке расположены в непосредственной близости, они превращаются в один визуальный элемент вместо нескольких отдельных. Близость = взаимосвязь!
Информация воспринимается лучше, если объекты на холсте расположены в организованном порядке.
Чем меньше размер твоего вижуала, тем меньше в него надо пихать невпихуемое. То есть формат плаката или постера позволяет разместить на нем больше информации и объектов, чем почтовая марка. Это вроде бы очевидно, но не так вероятно, как хотелось бы. Часто проблема неудачных вижуалов в том, что их перегружают текстами, элементами, фотографиями. Если у тебя серия работ, состоящая из вижуалов разных размеров, стоит подумать над тем, какой формат выбрать для размещения всей информации, а на каком поместится только одна короткая фраза.
Выделяйся, чтобы заметили! Объекты, на которых должно быть сфокусировано внимание, надо выделять. Вот несколько вариантов, как это можно сделать.
Выделение тоном
Выделение формой
Выделение размером
Выделение доминантой. Объект, который отчетливо выделяется на фоне всего остального
Выделение через цветовой контраст
Все мы хотим создавать нечто креативное! Иногда в погоне за тем, чтобы «не как у всех», мы не замечаем, как создаем кричащую безвкусицу. Поэтому, прежде чем делать «креативное», научись делать простое.
Это так же, как перестать «кучерявить» в тексте, используя напыщенные, громоздкие обороты. Например, называть фонтан «мощным механизмом для рождения освежающих струй». «Кучерявость» придает тексту ненужную многословность и, самое главное, неясность. Пойди догадайся, что за механизм придумал автор. Не умеешь писать красиво – пиши просто! Вот и весь секрет. С вижуалами – та же история.
Закончить свой рассказ о композиции хочу бонусом. Это еще один прием, который чаще всего используют в фотографии и в кино. Есть интересные примеры и в графическом дизайне. Он кажется самым простым из всех, которые я описала. Но в этом кроется его опасность. Прием называется заполнение.
Если ты фотографируешь по этой схеме, то cнимаемый объект должен заполнить практически весь кадр. Если рисуешь графическую картинку, размещаешь объект на большую часть холста. Так в чем опасность? Объект должен быть равнозначен приему. Не просто любой цветок или любое лицо человека, а очень красиво раскрытый тюльпан, очень говорящее лицо. Вспомните фирменный стиль обложек журнала Esquire – все они сняты по этой схеме.
Фотопортрет – пример применения схемы заполнения. Из мультимедийного лонгрида «Никогда море. Never more». Создан проектом «Ливень. Living Asia»
Схематично я бы изобразила его так. Делим пространство прямой горизонтальной линией, так, чтобы получились два четырехугольника. Соотношение их размеров где-то три или четыре к одному. Объект, который помещаем в больший из них, должен его заполнить. Прям полностью. В нижний отсек можно поместить при необходимости текст или другой второстепенный объект/элемент. Примеряем к этой схеме наши шары!
Задание для преподавателейРазберите со студентами композиционные схемы и виды выделения объектов. Им необходимо создать (необязательно в программе, можно нарисовать от руки) три рекламных плаката о приюте для животных. Важное условие: использовать разные правила композиции и несколько вариантов выделения объектов.
Стань соавтором!Твои заметки на пустых страницах этой книги делают тебя моим соавтором.Страница для твоих размышлений по теме: запиши их или нарисуй.
Назад: Картинки. Манипулирование вниманием
Дальше: Основы типографики
