Как сделать инфографику в фотошопе

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

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

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

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

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

• Утконос
• Морская свинка
• Шотландский сырой хаггис
• Зебровая амадина

• TheHaggis.com
• Википедия — хаггис
• Википедия — утконос
• Википедия — стероподон

• Futura Handwritten

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 5: Яд

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

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

Шаг 6: Еда

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

Шаг 8

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

Шаг 9

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

Шаг 1

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

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

Шаг 1

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

Шаг 2

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

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

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

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

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

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

Заключение

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

Making an Infographic in Photoshop

After creating an infographic in PowerPoint, I was asked to make another. Rather than use the same program twice, I decided to try Photoshop, as I have used the program for years and figured it would allow more creative freedom!

The purpose of this infographic was to teach students how to properly summarize and paraphrase, with the theme being Star Wars. The infographic is a little text-heavy, but I found a way to work with the material to try and make it more visually appealing.

I used light colors for the text to be more legible against the dark backgrounds. I also tried to maintain the Star Wars feel by sticking to the same color scheme as the original films, such as the yellow scrolling text.

The benefit of making an infographic in Photoshop is how much you can do. Photoshop allows the user to use multiple shapes, colors, texts, and even allows the creator to draw their own elements within the piece. I used this to my advantage.

Overall Photoshop allows the user to implement almost whatever they want into their creation, as they have the ability to make their own graphics. The program may take a while to completely figure out, but it’s definitely worth it. This infographic took me significantly less time than the last one as well, in case speed is a necessity for your own project!

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

Rowena Aitken Last updated Jan 25, 2015
What You’ll Be Creating

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 5: Яд

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

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

Шаг 6: Еда

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

Шаг 8

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

Шаг 9

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

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

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

Шаг 1

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

Шаг 2

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

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

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

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

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

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

Заключение

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

Как сделать инфографику: пошаговая инструкция, особенности и рекомендации

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

Популярность инфографики

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

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

Самостоятельно создаем инфографику

Для начала следует понять, что при создании инфографики необходимо ориентироваться на:

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

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

На самом же деле тут нет ничего сложного. Сделать инфографику самостоятельно вполне реально.

Первые шаги. Из чего состоит инфографика?

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

1. Статическая показывает факты и цифры, порой служит для отображения зависимости между событиями.
2. Инструкция – это рецепты, пошаговые инструктажи и так далее.
3. Бизнес-инфографика. Помогает компаниям наглядно показать историю своего существования, приобретения опыта и восхождения к успеху.
4. Рекламная инфографика. Служит для помощи в продаже товаров и услуг, при этом не перегружает потенциального клиента излишней информацией, а кратко и лаконично рассказывает о плюсах и минусах, эффективности и достоинствах, о других качествах товара или услуги.
5. Презентации – от начальных классов в школе до бизнес-заседания, везде применяется это классическое средство наглядного представления. Презентации вмещают большой объем информации, лаконичные и легко воспринимаются.
6. Видео-инфографика. Видеоформат инфографики имеет особое воздействие на человека, осуществляется это за счет использования броской графики, а также добавления подходящей музыки и звуковых эффектов. Что представляет из себя самостоятельно сделанная видеоинфографика? Тут предстоит создавать не просто видео, а короткометражный фильм, который зрители поймут, прочувствуют и примут на себя его идею, а еще лучше – которым они захотят поделиться с друзьями в социальных сетях.

Как сделать инфографику?

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

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

Как сделать инфографику в «Фотошопе»? Во-первых, набросайте план, отражающий основные пункты информации, которую необходимо передать слушателю. Упрощайте свой текст по максимуму, в одной картинке должно быть как можно меньше текстовой информации. Стили шрифтов, иконок и цветовой фон, предметы на картинке — это также очень важные элементы. Они все должны сочетаться и в итоге быть органичным целым.

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

Основные программы для создания инфографики

Как сделать видеоинфографику самому? Самостоятельно создать инфографику можно в обычных программах вроде PowerPoint или Photoshop. Для работы понадобится найти приемлемые шрифты, подборки картинок по интересующей теме и заготовки таблиц и схем.

Какие приемы можно использовать в стандартных программах?

Что можно использовать в стандартных программах:

1. Чередуйте цвета, чтобы выделять основные мысли. Так люди лучше поймут, какие идеи вы пытаетесь до них донести.
2. Используйте различные фигуры и обозначения. Перед вами неограниченное поле возможностей. Все свои основные мысли подавайте в различных вариациях.
3. В статистике должны быть справедливые цифры. Если вы акцентируете внимание на статистике, то размер ее цифр должен быть подобен реальному факту существования проблемы.
4. Графики способствуют снижению интереса у посетителей. Попробуйте использовать их как можно меньше. Хорошей альтернативой будет, если вы попытаетесь донести необходимую информацию в виде изображений и картинок. В случае крайней необходимости использования графиков, нужно сделать их максимально информативными, привлекающими внимание.

Как сделать инфографику в PowerPoint или Photoshop? Очень часто, приступая к созданию презентации, стоит для начала определиться с вопросом, зачем вообще этот документ создается, с какой целью. И это только начало, ведь создание любого визуального ряда — это целый комплекс вопросов, на которые нужно ответить прежде, чем садиться за работу.

Инструменты, которые позволят реализовать инфографику

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

Создать инфографику можно в таких онлайн-программах:

1. Vizualize – ресурс, который генерирует резюме в виде инфографики. Этот сервис будет полезен, если нужно составить информацию о себе в краткой структурированной схеме, выделив при этом основные моменты и факты, касающиеся вашей жизни. В результате получается креативное резюме, которому будет приятно удивлен работодатель. Многие компании, кстати, обращают особое внимание на креативность кандидата, такой сервис пригодится и дизайнерам, фриленсерам или фотографам.
2. Google Developers – инструменты от «Гугла», позволяющие создать графики и диаграммы среди предложенных, то есть рекомендованных под конкретный сайт. Плюсом данного ресурса служит то, что заполненная вами статистика может меняться в реальном времени.
3. Easel.Ly – сервис предоставляет множество бесплатных шаблонов для инфографики. Все элементы будущей инфографики можно отредактировать по собственному вкусу и цвету.
4. Infogr.am — удобное решение для создания схем, графиков и карт с возможностью загрузки видео- и фотоматериалов для создания интерактивной инфографики. Все данные вносятся в таблицу, очень похожую на Excel. Их всегда можно отредактировать, а после внесения всех правок на данном ресурсе поделиться своим творением с друзьями из знакомыми из различных социальных сетей.
5. Venngage – сервис, созданный для помощи в реализации и публикации инфографики с довольно легким в использовании набором инструментов. Для пользователей доступны уже готовые, заранее разработанные схемы, шапки оформления, графики и иконки, а также поддерживается загрузка авторских картинок и фонов для готовых решений.

Среди дополнительных возможностей есть поддержка анимации.

Инфографика на русском

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