Как да проектирате фонове

Може би не го осъзнавате, но рисуването на фона е една от най-важните части на всяка илюстрация на персонаж.

Героите ви не бива да плуват на бял фон. Те принадлежат на своя собствена, уникална вселена, която определя начина, по който героите ви са се развивали до момента, в който сте ги нарисували.

В тази статия с уроци ще разгледаме как художничката Maddy Zoli създава фон. Следвайте във Vectornator и научете как да го направите сами!

Дизайн на персонажа

Ако сте прочели първия ни урок за проектиране на персонажи, знаете, че историята на героя е в основата на всяка нарисувана линия.

Трябва да заложите героите си в по-дълбока история, отколкото се вижда на пръв поглед; от това кога са родени, през това къде живеят, каква работа имат, до това коя е любимата им храна. Звучи ли ви пресилено? За нас звучи по-скоро като забавление!

Без да изпадате в дълбока заешка дупка, помислете за всички тези детайли от миналото, настоящето и бъдещето на вашия герой и ги проявете в неговата среда. С други думи, проектирайте историята, която имате в ума си, във фона на героя. Използването на визуален разказ по този начин ще направи вашите герои и светове много по-богати и по-реални.

Художникът

Този урок е направен в сътрудничество с невероятната Мади Золи. Заедно създаваме цяла поредица за героите в нашия канал в YouTube и с нея не само е удоволствие да си сътрудничим, но и тя е супер компетентна по тази тема. Не бихме могли да работим с никой по-добър за това ръководство стъпка по стъпка.

Ще забележите, че всяка стъпка, която споменаваме в този урок, не навлиза в най-малките подробности. Това означава, че няма да споменаваме стъпка всеки път, когато се създава нов слой или се рисува нова форма. Вместо това ще сгъстим всяко структурно допълнение към процеса на проектиране като една всеобхватна стъпка.

- iPad

- Apple Pencil

- Procreate (или друг софтуер за скициране)

- Последна версия на Vectornator Какво ще научите:

- Как да скицирате

- Как да подготвите платното и фона си

- Как да добавяте и управлявате слоеве

- Усъвършенствано използване на инструментите за писане с перо, молив, четка, възел и форма

- Усъвършенствано използване на редактора за избор на цветове и градиенти

- Как да добавяте светлина, сенки и движение

- Как да използвате функцията за дублиране, за да облекчите работното си натоварване

- Как да създавате ръчно рисувани надписи

- Как да създавате сложни форми

Тук сме съчетали практиката и теорията, така че закопчайте коланите!

Подберете правилно референциите си

Тази стъпка е свързана с намирането на подходящо вдъхновение за типа фон, който искате да създадете.

Можете ли да предположите откъде идват препратките на Мади? Вдъхновението ѝ са пастелните градски пейзажи с неонови светлини от аниметата от 80-те и 90-те години на миналия век като Sailor Moon и Cardcaptor Sakura. Тя ще включи тяхната естетика във фоновия си дизайн.

Те вече са подготвени да имат интересно осветление, действие и добра композиция. Но можете също така просто да излезете навън и да рисувате пейзажи или градски сцени, които виждате около себе си.

Най-важното тук е да придадете смисъл на всичко. Не бива да мислите за героя си и неговия фон като за отделни неща, а като за едно цяло. Вие не просто рисувате фон за героя си, а рисувате сцената, в която се случва да присъства вашият герой.

Скициране на основните форми

Популярен стил на скициране е да се направят няколко малки, 5-минутни "жестови" етюда по референтни материали, при които просто се зачеркват основните стойности.

След това изберете един или два етюда, които да превърнете в по-подробни скици, за чието създаване ще отделите около 30 минути, точно както при скицата, която Мади създава в Procreate.

Мисленето по този начин ви помага да интегрирате всички елементи по по-добър и по-интересен начин. Защото вашият зрител ме кара да инвестирам повече в средата, отколкото ако тя е само декоративен фон.

В нашия случай вече знаем, че Йокаста е тийнейджърка със свръхспособности. Но това, което Мади като създател знае, е, че тя живее в бъдещето, в оживен град, където всяка вечер трябва да чака обществения транспорт, за да се прибере у дома.

Можете да го разберете по този малък елемент, който привлича вниманието - знакът на автобусната спирка всъщност е космическа совалка.

Качване на скица във Vectornator

От Procreate просто експортирайте скицата си като jpeg/png и я импортирайте във Vectornator. Можете да направите това чрез плъзгане и пускане от раздела Галерия.

Позиционирайте героя си

Мади постави Йокаста на сцената, следвайки правилото за третините.

Има много начини да създадете страхотна композиция, като използвате различни изпитани правила (като правилото на третините), които ви помагат да постигнете балансирана естетика. Ако искате да научите повече за това, вижте нашия видео урок за създаване на страхотни композиции, заснет от друг невероятен илюстратор - Судабех Дамаванди.

Организирайте слоевете си

Важно е да поддържате чистота и организираност на слоевете - допълнителните усилия, които полагате в тази стъпка, ще ви помогнат десетократно в процеса на работа с илюстрацията.

Затова, след като поставите героя си, скрийте слоя с героя. След това заключете слоя със скицата, след като намалите непрозрачността му.

Това е и подходящ момент да поговорим за техниката!

Има два начина за оформяне на фон: използване на перспектива или наслояване на пейзажа. Днес се фокусираме върху техниката за наслояване. Ако искате да разгледаме теорията за перспективата в друг видеоклип, коментирайте по-долу.

Ако разделим пейзажа, ще видим, че имаме общо пет слоя. Отпред назад, т.е. от най-близкия до най-далечния, слоевете са следните:

• Йокаста и призракът.
• Автобусната спирка и железопътната линия.
• Първият ред сгради.
• Вторият ред сгради.
• И накрая - небето, луната и облаците.

От този момент нататък просто не забравяйте винаги да създавате нов слой за всеки нов елемент от дизайна на илюстрацията си - например автобусната спирка е на отделен слой, както и вторият ред сгради, както и луната и звездите, и т.н. Разбирате.

Разкажете историята с цветове

Цветът е друг изключително важен аспект, който може да разкаже повече за историята на вашия герой.

И така, да обобщим: този свят е в бъдещето, изпълнен е с магия и е вдъхновен от Sailor Moon. Не е шокиращо, че Мади е избрала смели цветове като неонови, пастелни, розови и зелени. Всичко друго, но не и скучно!

Ето всички шестнайсетични кодове, които са ви необходими, за да пресъздадете творбата на Мади:

Тъмно лилаво - 7125D0

Оранжево - EFB09F

Средно синьо - 869FEF

Тъмно синьо - 3E6AED

По-тъмно синьо - 4265D2

Тил - 2885C7

Жълто - FEF66F

Розово - F9A3D8

Светло розово - F9DCEE

В крайна сметка трябва да сте сигурни, че използвате цветова комбинация, която е достатъчно контрастна, но в същото време остава хармонична с вашия персонаж. Ето защо Мади избра много сходни нюанси с тези, които използва за Йокаста.

Ще забележите, че нюансите, които Мади е избрала, ще бъдат използвани и преизползвани в най-различни елементи на дизайна в композицията ѝ. Изборът на разнообразна, но ограничена цветова палитра ще ви помогне в творческия процес, но също така ще направи творбите ви по-сплотени и разпознаваеми.

Създаване на настроение с времето на деня

Не използвайте плътен цвят на фона и използвайте времето от деня, за да създадете настроение. За тази сцена Мади избра ранна вечер.

Тя съответства на начина, по който се чувстват и Йокаста, и приятелят ѝ дух в момента. Йокаста изглежда така, сякаш вече го е преодоляла, но тъй като духовете се появяват през нощта, той тъкмо е на път да започне деня си!

За да постигне този вид, Мади създава лилав квадрат, който запълва цялото платно (C18FF0). След това прилага тъмносин (3E6AED) линеен градиент, започващ от горния десен ъгъл.

След това Мади дублира квадрата, завърта го така, че градиентът да се намира в противоположния ъгъл, и променя цвета на градиента на красиво оранжево (EFB09F). Някой каза ли "вибрации на залеза"?

Създаване на втория ред сгради

Ще започнем с втория най-отдалечен слой от обекти (най-отдалеченият е небето).

Този конкретен ред не е толкова важен. Но ако имате група слоеве, които се припокриват един друг, като сградите, гарата и т.н., най-добре е да започнете с най-отдалечения, за да разберете как да разположите обектите си на преден план, с колко отрицателно пространство трябва да си играете и кои цветове контрастират най-добре.

Мади взема инструмента Shape Tool и започва да създава геометрични форми, за да определи фронталния изглед на сградите. Нюансът на синьото, който тя използва, е 869FEF.

Рисуване на перспективата

А за да очертае страните, тя избира по-тъмен нюанс - 957AE1.

Не само това, но тя използва и инструмента "Възли", за да промени ъгъла на горната страна на правоъгълника, така че да съвпадне с точката на изчезване на композицията.

Добави подробности

Мади добавя банер към сградите, които са по-близо до гледната точка на зрителя.

Въпреки че тези сгради технически все още са във втория ред, те са най-близките от най-отдалечените сгради. Така че добавянето на каквито и да било детайли тук само ще създаде по-реалистична обстановка.

Начертайте първия ред сгради

Както и преди, вземете инструмента Shape Tool и нарисувайте правоъгълници, за да запълните града. Мади отново избра 957AE1, а за страните - 4265D2.

Създаване на атмосфера

За да придадете още по-голяма дълбочина на фона си, помислете за включване на детайли като мъглата в града.

Просто нарисувайте правоъгълник с инструмента Shape Tool (Форма) и му придайте забавен линеен градиент, който избледнява отдолу нагоре. Левият цвят (в нашия случай долният цвят) е красив тил (2885C7), а левият цвят (в нашия случай горният) е бял (FFFFFF) с непрозрачност 0. Можете да постигнете това, като сведете канала A до нула.

Добави повече подробности

Имайте предвид, че колкото повече се приближавате, толкова по-тъмни и детайлни ще бъдат обектите ви. Докато предишната редица от сгради ще остане струпване на минимални правоъгълници и плътни блокове с много малко прозорци.

Така че в сградите, които са най-близо до героя, не забравяйте да добавите всякакви детайли като прозорци, светлини или рекламни табели. Като тази табела "Кула", която Мади създава със свободни движения на четката, използвайки втората предварителна настройка от нашия панел за избор на четка.

Съвет за добавяне на няколко прозореца към сградите на преден план е да изберете няколко обекта с инструмента за избор и да ги дублирате последователно.

Нарисувайте автобусната спирка

С инструмента "Правоъгълник" проследете всички основни форми, които съставляват автобусната спирка.

Както и преди, използвайте инструмента "Възли", за да промените всички ъгли, които трябва да водят до изчезващата точка на перспективата. Тук тя използва лилаво за оградата (7125D0), бяло (FFFFF) и жълто (FEF66F) за покрива и допълнителен нюанс на синьото (957AE1) за знака.

Добавяне на повече измерение

Елементите на автобусната спирка също са част от сцената на залеза.

За да предизвикаме това, ще направим нещо с тези плътни цветове. Така че дублирайте горния правоъгълник, който използвахте за създаване на оградата, направете го по-тесен, поставете го отгоре и му придайте градиент, който показва отразената светлина на залеза.

Мади избира линеен градиент (градиентът в центъра) и променя десния и левия цвят на светлооранжев (EFB09F). След това прави левия цвят напълно прозрачен, като променя канала A на нула.

Приложете същия ефект по същия начин за всяка отделна релса.

Добавяне на елементи в небето

Накрая ще преминем към детайлите на небето, където ще добавим няколко облака, звезди и луната.

За облаците вземете инструмента "Четка" и си поиграйте с натиска, който прилагате върху платното, за да създадете форма, която започва с малки размери и постепенно се увеличава. Чрез промяна на натиска линията може да стане от много тънка до много дебела с един замах. За да постигне този ефект, Мади използва четвъртата четка от нашите предварителни настройки с включена чувствителност на натиска.

След като нарисувате облаците, използвайте инструмента Node Tool, за да направите корекции на формата им.

Тъй като облаците естествено ще отразяват светлината на залеза, придайте им градиент, който преминава от оранжев нюанс (F92CEE, вляво) до светлорозов (F9DCEE, вдясно).

Що се отнася до луната, създайте две окръжности и използвайте булевата функция Subtract, за да изрежете перфектна полусветла луна. Не забравяйте да задържите един пръст върху платното, за да запазите съотношението на страните.

Накрая добавете звезди с инструмента Shape Tool (Форма). Мади решава да избере звезда с 12 точки. Можете да редактирате броя на точките чрез плъзгача вляво и да променяте формата им, като задържите натиснат един пръст, докато плъзгате молива по платното.

Добавяне на интересни детайли

И вие ли сте от хората, които оставят най-доброто за накрая? Време е да добавите един от последните и най-яки графични елементи към тази част.

Създайте космическата совалка с минимални усилия с функцията Iconator. Просто докоснете последния раздел в Инспектора, за да получите достъп до Iconator, и използвайте лентата за търсене, за да намерите това, което ви трябва.

Мади избира космическата совалка, която ѝ харесва най-много, променя размера ѝ, оцветява я в бяло и я центрира в средата на знака. Лесно!

Добавяне на светлинни ефекти

За допълнителен разкош завършете, като добавите няколко светлинни кръга, за да придадете искрящ ефект на далечния град. Използвайте инструмента Shape Tool за кръговете, разбира се, и след това си поиграйте с функцията за градиент в раздела Style (Стил), за да придадете по-хубав ефект.

Мади избра линеен градиент с розово (F9A3D8) отляво, докато дясната част остана 100% прозрачна.

След това отидете на Blend Modes и изберете Overlay.

Добавяне на движение

За да стане режимът на илюстрация динамичен, добавете последен слой със светлини от частици, които пресичат сцената. За целта Мади използва същата четка като преди (четвъртата от нашите предварителни настройки), за да създаде много фини щрихи, изпълнени със същия градиент от стъпка 15. И след това отново задайте режим на смесване Overlay.

Моментът, който чакахме: След всички тези стъпки илюстрацията е завършена!

Защо е важно да рисувате фонове

Какъвто и да е фонът на рисунката, той оказва огромно влияние върху крайното произведение - независимо дали е добър или лош!

След като сте се научили да рисувате обекти и герои в динамични пози, фонът е последното парче от пъзела, което обединява всичко.

Фонът ви действа като ин към ян на вашия герой. Ако сте създали героя си с помощта на заоблени форми, използвайте ъглови форми, които ще трябва да представляват фона. Ако героят ви е тъмен, използвайте светли цветове на фона и т.н. Ключът е да контрастира с вашия герой, за да му помогне да изпъкне.

Вашият фон трябва да подчертае героя ви и неговата история на техническо и концептуално ниво. Така че, ако се питате дали проектирането на фон е важно, ние вярваме, че всъщност е жизненоважно.

Надяваме се, че този урок е бил полезен за вас. Ако все още не сте го направили, не забравяйте да изтеглите Vectornator, за да можете да създавате свои собствени зашеметяващи фонове като този, създаден от Мади.

Ако сте нов потребител на нашия инструмент, разгледайте нашия център за обучение или канала ни в YouTube за уроци по графичен дизайн и свежо вдъхновение; и изберете готов шаблон, за да създадете дизайн за няколко минути.

Не забравяйте винаги да ни отбелязвате в социалните мрежи, за да можем да публикуваме отново вашата работа!