Share
Några gånger i varje månad besöker vi några av våra läsares favoritinlägg från hela Vectortuts + historien. Denna handledning av Scott Jackson publicerades först den 8 maj 2009.
I denna handledning ska jag ge en översikt över hur en karaktär har utvecklats från den första korten till den sista platsens maskot och sedan fortsätter att skapa flera ställen för olika delar av webbplatsen.
Denna karaktär var ursprungligen gjord för en Envato-webbplats som inte tog av och konstverket användes inte, så jag har omarbetat detta lite för att bli ett Vectortuts + -tecken. Låt oss kolla in processen med att göra denna webbplats maskot och lära dig massor av tips längs vägen!
Karaktär och maskotdesign är inget nytt och har funnits länge, men med internetets framträdande har det sett något av en renässans. På nätet står vi inför en daglig spärr av information, data och bilder. Användningen av en maskot på webbplatsen kan vara ett effektivt sätt att skära igenom denna information överbelastning och ansluta till tittaren på en känslomässig nivå. Mascots och tecken kan användas som en del av en logotyp, eller självständigt, men den fördel de har över en logotyp ensam är att de har karaktär och en personlighet helt egen.
Jag använde Adobe Illustrator för att skapa maskoten med hjälp av dess mest grundläggande verktyg och funktioner, och därför kommer jag att koncentrera mig på att visa den aktuella utvecklingen och arbetsflödet. Förhoppningsvis ger detta dig insikt i karaktärsskapande och hjälper dig att skapa dina egna maskotar.
Jag kommer också att ge en sammanfattning av några av de bästa karaktärsdesignplatserna på webben och släppa några tips när vi går vidare.
För extra inspiration och som en bonus ger de goda personerna på Vectortuts + dig möjlighet att ladda ner originalfilerna för egen användning, vilket är en super freebie. Se nedladdningsfilen för ytterligare användningsinformation. Tecknet finns tillgängligt i både AI- och EPS-format.
Även om detta är en fiktiv studie, var det ursprungligen baserat på ett verkligt Envato-projekt. Men med tanke på denna handledning kommer jag att ta det som att denna maskot kommer att vara för Vectortuts + -siten, vilket ger oss ett mål att använda som ett exempel.
Maskoten ska vara "The Tuts Guy" och han ska vara representativ för Vectortuts + läsarna, och även handledarnas författare. En positiv, vänlig disposition och överklagande till alla åldersgrupper. Att vara professionell men fortfarande avslappnad. Dessutom måste han passa in i sidans färgschema för att kunna enkelt infoga karaktären i sidlayouten.
På deras naturområde är maskoterna till användning på webben. Kom ihåg att ställa in din fil till RGB.
Som nämnts i Briefet måste tecknet passa in i sidans färgschema. Med en mänsklig maskot kan detta göras genom att använda kläderna och håret för att matcha eller accentera sajten. Med ett djur eller en fiktiv skapelse har du mycket mer flexibilitet.
Ge noggrann övervägande åt målgruppen, bilden och webbplatsen. Låt oss titta på några fler tips också.
Är karaktären integrerad tillsammans med en logotyp eller en rubrik? Om så är fallet är duken oftast en bred remsa och med en lång upprätt figur kan det leda till att den ser bort och ansiktsfunktionerna minskar. Så vad kan man göra om detta?
Gör teckenhöjden så nära bredden som möjligt.
Genom att beskära kroppens övre del och koncentrera sig på de viktigaste funktionerna kan du spara värdefullt utrymme och öka maskulans påverkan. Du kan också se hur den mer kondenserade karaktären ger sig mycket bättre till huvudformatets format.
Det kan vara till stor hjälp för konstruktören att sätta webbplatsen tillsammans om du ger dem en maskot i en platt sida i höjdled, eftersom det här kan göra det mycket lättare att integrera i layouten på webbplatsen. Alternativt kan skärpedjup göra en mer intressant bild.
Jag har ingen hård och snabb regel när det gäller linjevikt eller hur man använder linjearbetar alls. Medan ingen linje används kan man ge en ljus känsla till maskoten, det kan också gå vilse i bakgrunden, speciellt om det är en upptagen. Genom att använda linjearbete och / eller en tyngre disposition kan bilden ge mer närvaro och definition.
Det sägs att ögonen är fönstret till själen. Med karaktärsdesign är ögonen den första som vi ansluter till. Vi ansluter när vi först ser en karaktär på samma sätt som när vi först träffar någon, så det är viktigt att överväga detta i din design. Ögonen kan kommunicera en mängd känslor mycket snabbt och lägga livet till en karaktär.
Det är lätt att tänka på att ju mer komplexa ögonframträdandet är, desto bättre, men i själva verket när det är gjort ordentligt, kan ett par prickar göra det lika bra.
Även om jag har en Wacom tablett, använder jag sällan det för att skissa ut idéer. Jag väljer för penna, papper och förmågan att ge mening ur en kaotisk hög med idéer som sprids runt mitt arbetsområde.
I detta skede försöker jag få allt och allt på papper innan du siktar igenom det för att se vad som fungerar för mig. Jag förädlar sedan grovbanden innan du använder en layoutplatta för de sista grovarna. Jag föredrar layoutkuddar för att spåra papper, eftersom de är mycket billigare och pennaarbetet är mindre benäget att smutsas.
Jag skickar sällan ut penna grovdrag till en klient. Jag brukar gå den extra milen och arbeta upp dem i vektorer, särskilt om det finns ett antal ställen av samma karaktär så att de har en klar bild av det färdiga resultatet. Detta har lett till att jag knappast använde en scanner för att få en snäpp på penna grovt med en digitalkamera, eller till och med kameran på min mobiltelefon, som snabbt och enkelt importeras via Bluetooth.
Här har jag arbetat upp ett antal variationer för kunden att titta på.
Jag kommer att ta det som jag har fått feedback och vi ska gå till No.4-karaktären, men jag känner att det skulle fungera bättre med en goatee björn borttagen.
Här är huvudpersonen (minus goatee) att visas på hemsidan på webbplatsen, men jag behöver nu utveckla karaktärerna för resten av sajten.
Dessa kommer alla att ha en mycket liknande placering till huvudpersonen så det finns möjlighet att återanvända element i den ursprungliga karaktären. Detta minskar inte bara din arbetsbelastning dramatiskt, det ger också en känsla av kontinuitet för webbplatsen. Att ha separata delar av karaktären på enskilda lager är en stor hjälp här, eftersom rörelse av armarna och lutning av huvudet kan förvandla posen.
Det finns ingen bakgrund till maskoterna för att föreslå deras syfte, men justering av hållning och tillsättning av några enkla rekvisita kan kommunicera med tittaren.
Att använda den ursprungliga ritningen för huvudpersonen i samband med en layoutpod ger mig en liten start när det gäller de andra poserna. När det gäller resten av saken är det fallet att skicka in dessa till kunden och göra ändringar som behövs tills de är nöjda med dem.
Nedan finns de färdiga tecknen. Allt som är kvar att göra är att förse dem till kunden i det format de väljer. I det här fallet kan du ladda ner originalfilerna till eget bruk här.
Här är en sammanfattning av några av mina favorit karaktärsdesignbaserade webbplatser för ytterligare inspiration:
Mojizu.com - Moji är det japanska ordet för karaktär och det är det här handlar om. Det är ett samhälle av karaktärsdesigners där du kan registrera dig för en profil och skicka in din egen Mojis. Ett veckovis Moji-krig ställer dem mot varandra i en tävling för att hitta Moji Champ genom en rad rundor.
Ilikecharacters.com - En ganska ny webbplats dedikerad till att presentera den bästa karaktärsdesignen som skapades av konstnären Steve Rack.
characterhunter - En blogg som följer en fortsatt sökning efter karaktärsdesign på gatorna i Tokyo. En bra en om du gillar kawaii (söt). Skriven på franska om japansk design, visar denna sida hur maskotdesign kan spåra språk och kulturella skillnader.
Smashing Magazine 40 Character Illustration Tutorials - Ett monster runt upp till 40 tecken design tutorials.
vinylpulse - Karaktärsdesign som har korsat över i 3D-världen.
patchtogether - Om du någonsin har lust att få ditt arbete till vinyl kan det vara platsen för dig.
Prenumerera på Vectortuts + RSS-flödet för att hålla dig uppdaterad med de senaste vektorhandledningarna och artiklarna.
Accentsconagua