Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Burns Night

Как создать инфографику о хаггисе в Adobe Photoshop

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Infographic Templates.
How to Create Infographics With Connector Tools in CorelDRAW

Russian (Pусский) translation by Anastassiya Abramenko (you can also view the original English article)

Final product image
What You'll Be Creating

Т.к. подходит 25 января, годовщина со дня рождения Роберта Бернса, я думаю, что мир должен узнать о редком и достаточно вкусном блюде под названием хаггис (Haggis Haggis на латинском).

Вот фотография сырого, ощипанного хаггиса, готового к приготовлению к праздничному ужину. 

Photodune Scottish Raw Haggis

Что вам понадобится

Ниже перечислено то, что было использовано при создании этого руководства. 

Стоковые фото с Photodune:

Ссылки:

Шрифт:

1. Настройка документа

Для этой иллюстрации мы настроим документ для печати. Нам нужен размер печати А3, поэтому в диалоговом окне Нового документа (Файл > Новый или Control-N) мы устанавливаем: 

  • Ширину 297 мм 
  • Высоту 420 мм 
  • Разрешение 350 точек на дюйм (стандартные точки на дюйм для печати)

Цветовой режим установлен на CMYK, т.к. мы будем печатать этот документ. Однако, если ваша работа не будет распечатываться, установите Цветовой режим RGB. Обратите внимание, что для этого рисунка я установила разрешение 350 точек на дюйм,  т.к. я могу захотеть распечатать элементы на бумаге большего размера. Всегда лучше работать на большом масштабе, т.к. рисунок проще изменить с большого масштаба на маленький, чем наоборот. 

Artwork dimensions

2. Краткая информация о рисунке

Немного об истории хаггиса. 

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

Есть два вида хаггисов: левши и правши. Это касается лап хаггиса, которые короче на одной стороне.  Это отличное преимущество при перемещении по холмам, т.к. их тело остаётся вертикальным (хаггисы очень склонны к укачиванию). Левши передвигаются по холмам против часовой стрелки, а правши – по часовой стрелке.  Хотя теоретически возможно смешение левшей с правшами, это физически невозможно из-за ног. Это ещё одна причина, почему приручение хаггисов было признано невероятно сложным. 

У Haggis Haggis есть общий предок с современным утконосом Ornithorhynchus anatinus.

Photodune Platypus

Приблизительно 110 миллионов лет назад предки хаггисов и утконосов – стероподоны гальмани (также известные у палеонтологов как хаггипус) населяли центральную Пангею. Эти существа жили вместе с крокодилами, динозаврами и ранними пернатыми.  Предполагается, что были некоторые мутации в потомстве предков, что привело к тому, что ранние хаггисы потеряли навык плавания и отрастили среднего размера плотную шубку, как у морских свинок. 

Photodune Guinea Pig

Они мигрировали в северное полушарие, в то время как утконосы остались в Австралии, т.к. Пангея раскололась. 

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

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

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

Photodune Zebra Finch

Чтобы отдать дань хаггисам, на ужине Бернса подают еду, которую хаггисы любят сами (по крайней мере, ту, которую люди могут есть – брюкву и картошку). Ко вкусу хаггиса нужно привыкнуть, и он подчёркивается стопкой виски. 

На протяжении веков шкуру хаггисов использовали для создания гобеленов, и иногда нитки используются в шотландских пледах.  Фиолетовая шерсть – самая ценная. Ношение кожаной сумки с мехом наружу символизирует великую жертву, которую принесло это позднеянварское угощение».  

Нам нужно оформить всю эту потрясающую информацию в простую для восприятия графику, поэтому выделим некоторые ключевые моменты: 

  • Предок: стероподон гальмани (хаггипус) 
  • Внешний вид и анатомия: ноги на одной стороне короче, чем на другой, густая, фиолетово-зелёная шерсть, короткий, высокий клюв как у зебровой амадины для поедания черники и вереска
  • Враги: москиты и Несси
  • Относительный размер: между кошкой и морской свинкой 
  • Яд: шотландское печенье
  • Еда: черника, вереск, брюква и картошка

У нас есть вся информация для начала планирования нашей инфографики! Т.к. в этом руководстве рассказывается об инфографике, я не буду слишком вдаваться в процесс иллюстрации. Дальше идёт интересная часть – отрисовка элементов! 

3. Отрисовка элементов

Для этого руководства я буду использовать базовую Твёрдую кисть Photoshop с чувствительностью к давлению. Панель Кисти можно быстро открыть, нажав F5 на клавиатуре.  

Шаг 1: Семейное древо

На Новом слое (Control-Shift-N) нарисуйте двух членов фамильного древа – стероподона гальмани (хаггипуса) и утконоса. Пусть все элементы будут на разных слоях, т.к. их будет проще передвигать. ч  Если вы случайно нарисовали их на одном слое, что иногда случается, вы можете применить Лассо (L) к нужной области. Затем Вырезать (С), создать Новый слой (Control-Shift-N) и нажать Control-Shift-V, чтобы вставить объект на нужное место. 

Platypus and steropodon galmani

Шаг 2: Внешний вид и анатомия

Нам нужно каким-то образом показать внешний вид и анатомию. Вместо сложного рисунка хаггиса-левши и правши на склоне, мы можем упростить форму, т.к. нам нужно показать только ноги.  Эта простая иллюстрация показывает, как хаггис передвигается по крутым склонам при помощи их удивительных адаптированных ног. Эти парни – патрульные полицейские королевства Хаггисов! 

Leg graphic

Шаг 3: Хищники

Большинство существ в дикой природе – хищники, поэтому нам нужно показать врагов хаггисов – неизвестных шотландских москитов и, конечно же, Несси!  Это чисто художественное изображение Несси, т.к. никто не знает, как она выглядит на самом деле (она изворотливая!). Шотландские москиты очень похожи на обычных москитов или других маленьких жалящих мух.  Имейте в виду, что они не соответствуют масштабам Несси на иллюстрации. Москиты больше похожи на летающие точки, поэтому нарисуем их так. Помните о том, чтобы рисовать объекты на разных слоях! 

Haggis Predators

Шаг 4: Относительный размер

Насколько хаггисы большие? Лучше предложить читателю представить размер хаггисов, сравнив их с более известными животными.  В данном случае я взяла домашнюю кошку и морскую свинку, т.к. шотландские исследователи, которые были в Андах, подумали, что они были хаггисами. Но это не так, т.к. морские свинки лучше приручаются. 

Как потомок Великого охотника на хаггисов, я знаю, что хаггисы по размерам не больше домашней кошки.  В целях демонстрации у нас есть кошка, морская свинка и фигура, символизирующая хаггиса. Я ещё не решила, какую форму придам своему зверьку! 

Haggis size comparison

Шаг 5: Яд

Шотландское печенье ядовито для хаггисов, т.к. сочетание муки и масла, а также рассыпчатая структура еды, вызывают ужасный метеоризм. Хаггисы не могут выпускать газы и разрываются.  

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

Haggis Poison

Шаг 6: Еда

Хаггисы любят чернику, но её сезон короткий, а хаггисы прожорливы. Основную часть их диеты составляет вереск, и при возможности хаггисы с удовольствием пируют брюквой и картошкой.  Немного скучно изображать отдельные элементы еды в линию или так, как показано ниже, поэтому на графике я распределю еду по кучкам, которые понравятся любому хаггису!

Haggis food

4. Размещаем элементы для инфографики

Теперь, когда у нас есть основные элементы, мы можем собрать их в инфографику. Т.к. все элементы собраны у нас в одном документе, легко выбрать нужные слои, и при помощи Инструмента «Перемещение» разместить элементы.  Элементы можно преобразовать, нажав на Control-T для Трансформирования либо перейдя в Изображение > Вращение изображения и использовав параметры.  

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

Haggis Rough Layout A

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

Haggis Rough Layout B

5. Цветовая палитра

Когда речь идёт об инфографике, нужно ограничить выбор цветов. Здесь я выбрала фиолетовый, зелёный и оранжевый. Чтобы иллюстрация не выглядела плоской, я добавила несколько вариаций. 

Фиолетовый: вересковые цветы, шерсть хаггиса, черника, картошка, горы, брюква 

Зелёный: листва, Несси, клюв хаггиса

Оранжевый: печенье, кошка, морская свинка, шерсть на щеках хаггиса 

Haggis Basic Palette

Haggis Colour Scheme

Вот сейчас будет интересная часть: раскрашивание элементов! 

6. Раскрашиваем еду

Шаг 1

На отдельных слоях нанесите цвета еды. Быстро создайте Новый слой, нажав Control-Shift-N.

Food colours - flats

Шаг 2

Взяв светло-фиолетовый на палитре, раскрасьте светлые области на картошке. Затем, в цветовой палитре Photoshop добавьте немного больше белого к светло-фиолетовому и раскрасьте основу брюквы.  Для вершков брюквы возьмите самый тёмный фиолетовый в палитре. Добавьте светлые области на листьях и корешке брюкв. Пусть детали будут простыми, чтобы зритель не отвлекался.  

Turnip base

Шаг 3

На слое с черникой нанесите светло-синий, чтобы ягоды выглядели круглыми. 

Blueberry paint

Шаг 4

В палитре Photoshop выберите синий и белый для блика, а затем нанесите их. 

Blueberry Highlight

Шаг 5

На Новом слое (Control-Shift-N) поверх вересковых стеблей вручную нанесите цветы, настроив кисть на 60% плавности и непрозрачности. Изменение в давлении создаст различие в фиолетовых оттенках для придания реализма.  

Heather flowers

Шаг 6

Продолжайте проставлять цветы над стеблями. Это требует времени, но мне кажется, что таким образом создаётся более приятный эффект, чем использование дискретной кисти –плюс к тому, у вас есть больше контроля. 

Additional Heather Flowers

Шаг 7

На Новом слое (Control-Shift-N), за вересковыми цветами, продолжайте проставление точек самым тёмным зелёным для создания листьев.  

Heather leaves

Шаг 8

Чтобы вереск выглядел более пышным, Скопируйте (С) и Вставьте (V) слой с цветами. Затем, нажав Control-T для трансформирования снизьте масштаб цветов приблизительно на 33%. 

 Scale flowers

Шаг 9

Снизьте непрозрачность слоя с уменьшенными цветами, сдвинув Непрозрачность слоя на панели Слоёв до 50%. 

Extra heather flowers scaled down and lowered in opacity

Вот наш законченный элемент с едой хаггиса.

Complete Haggis Food Illustration

7. Раскрашиваем морскую свинку и кошку

Шаг 1

Возьмите светло-оранжевый и раскрасьте базовые фигуры животных. Оранжевый будет хорошо контрастировать с фиолетовым хаггисом, который будет между ними. 

Guinea Pig and Cat Base Flats

Шаг 2

Добавьте тень и более тёмные области с тёмно-оранжевым. 

Cat and guinea pig colour roughs

Шаг 3

Создайте коричневый/оранжевый на цветовой палитре Photoshop и быстро нарисуйте несколько определяющих линий для полосок, лап и лица. Пусть линии будут свободными! У нас готова иллюстрация кошки! 

Finished cat illustration

Шаг 4

Нанесите несколько отметин на морской свинке и тени под ухом. 

Guinea pig colour patches

Шаг 5

Взяв такой же коричневый цвет для кота, нарисуйте лапы, край ушей, глаз, рот и несколько пятен. 

Guinea Pig Brown Details

Шаг 6

При помощи инструмента «Размазывание» смягчите края зверька. Этот инструмент можно найти на панели инструментов – он выглядит как палец.  

Guinea Pig Fluffy Edge

Шаг 7

Нарисуйте несколько случайных пучков шерсти и вибриссы. У нас готова иллюстрация морской свинки! 

Finished detailed Guinea Pig Illustration
Cat and Guinea Pig Illustrations side by side

8. Раскрашиваем членов семейного древа

Шаг 1

Наносим базовые цвета. 

Family flats

Шаг 2

Нанесите более светлые цвета. Хаггипус немного похож на рептилию – неужели я спутала его цвет?  Я заглянула в свою пыльную, замусоленную копию Альманаха охотника за хаггисами, и в ней говорится, что хаггипусы были преимущественно фиолетовыми с более светлой нижней половиной и оранжевыми щеками. К счастью, в Photoshop это быстро исправить.
Green Haggipus

Шаг 3

Чтобы быстро изменить цвет хаггипуса, я создаю Новый слой (Control-Shift-N), который я устанавливаю на Цвет. Кликаю правой кнопкой мыши на этом слое и устанавливаю его на Обтравочную маску. Затем я наношу тёмно-фиолетовый цвет на всего хаггипуса.  Далее я объединяю слой Цвета с зелёной основой и начинаю раскрашивать шерсть светлым и тёмным фиолетовым цветом. На утконосе я обозначаю шерсть, растушевав более светлые и тёмные детали с ногами и хвостом.  

Completed Haggipus and Platypus

9. Раскрашиваем Несси и москитов

Шаг 1

Нанесите базовые цвета.

Nessie Flats

Шаг 2

Нанесите светлые области и начните растушёвывать их точечными движениями при помощи кисти, нажимая Alt для выбора цвета. 

Nessie base tones

Шаг 3

Продолжайте растушёвывать зелёный цвет по всему рисунку и добавлять ярко-зелёный цвет. На спинных плавниках нарисуйте центральную линию тёмно-зелёным цветом и добавьте несколько точек для обозначения текстуры.  

Nessie Scale Detail

Шаг 4

Возьмите синий и добавьте волны для придания иллюзии, что Несси находится в воде. Возьмите почти чёрный цвет и нарисуйте выражение лица. 

Nessie waves

Шаг 5

Добавьте светло-фиолетовый блик на москитах и нарисуйте крылья и лапки чёрным цветом. Хищники готовы! 

Midgie Detail

10. Раскрашиваем хаггиса

Шаг 1

Нанесите базовые цвета. У хаггисов тёмно-фиолетовые лапы (чтобы спрятать грязь), светло-фиолетовое тело, зелёный нос, оранжевые щёки и фиолетовое перо для спаривания, которое называется «дамским пером», если это самец. Оно привлекает самок! 

Haggis Flats

Шаг 2

Используйте тёмно-фиолетовый, чтобы нарисовать тени под подбородком, вокруг лап и живота. Смешайте очень бледный фиолетовый, чтобы нанести немного густой шерсти там, где падает свет.  Выделите щёки, сделав оранжевый цвет ярче при помощи жёлтого, и нанесите его также на «дамское перо». 

Вот наш зверёк. Он милый, правда?

Haggis Rendered

11. Иллюстрация гор

Вот простая иллюстрация, чтобы показать, как левши и правши передвигаются по склонам. Растушуйте фиолетовые оттенки на горе похожим образом и выделите снежный пик.  Кругляши-хаггисы – всего лишь простая иллюстрация тёмно-синего цвета. Они нужны только для того, чтобы показать их ноги (хаха), поэтому им не нужно много деталей! 

Haggis Mountain

12. Заголовки и аннотация

Я решила сделать заголовок достаточно простым. При помощи Инструмента «Горизонтальный текст» (Т) я выбрала шрифт Futura Handwritten тёмно-фиолетового цвета, и затем напечатала «Хаггис: простое руководство».  

Шаг 1

Чтобы централизировать текст Инструментом «Горизонтальный текст» (Т), кликните на центральном тексте на панели инструментов и измените «Хаггис:» на 98 точек.  Затем нажмите Enter, чтобы сдвинуть «Простое руководство» на следующую линию. Затем выделите эти слова Инструментом «Горизонтальный текст» (Т) и измените размер на 50 точек.  В данном случае горизонтальное Расстояние между словами установлено на 70 точек. В зависимости от шрифта и вкуса, можно внести поправки, изменив размер точек.  

Text Sample

Шаг 2

Повторите этот процесс для латинских названий, фактов и ярлыков. Сделайте заголовки большими и тёмно-синими для привлечения внимания. 

Illustration Labelling

Шаг 3

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

Direction of Movement

13. Финальные штрихи

Шаг 1

Для улучшения композиции я передвинула элементы, чтобы они не стояли слишком близко друг к другу. Я сгруппировала элементы (текст и иллюстрации) в отдельные папки, чтобы их можно было легко двигать по холсту Инструментом «Перемещение» (V).

Haggis Guide - No Arrows

Шаг 2

Чтобы создать фокус на рисунке, я добавила оранжевые стрелки, чтобы связать текст с иллюстрациями или привлечь внимание к определённым зонам. 

Haggis Guide - Arrows

Шаг 3

Дважды кликните на слое со стрелками, чтобы появились Стили слоя. 

В Стилях слоя я установила Падающую тень на Умножение с синим цветом тени. Таким образом, стрелки будут выделять на белом фоне. 

Если хотите использовать такие же настройки на другом слое, кликните правой кнопкой на слое со Стилями слоя и выберите «Копировать стиль слоя». Затем на нужном слое снова кликните правой кнопкой и выберите «Вставить стиль слоя».  Если, например, стрелки расположены на разных слоях, вам не нужно будет запоминать все параметры и вручную вводить их на каждом слое.

Drop Shadow Layer Style

Готовая инфографика!

Completed Haggis Infographic

Вы заметите, что на финальной версии я не изобразила шерсть и типы тела для того, чтобы разделить инфографику.  Самое важное то, что на одном листе не слишком много информации. Хороший микс – это приблизительно 2/3 иллюстрации и 1/3 текста. 

Заключение

Надеюсь, вам понравилось это руководство по созданию инфографики о хаггисе, и вы узнали для себя что-то новое! В следующий раз вы с аппетитом съедите ужин Бернса! Sláinte!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.