Share
Hej Photoshop-artister, jag heter Sergio Ordóñez, det självutnämnda geni bakom SOSFactory, pionjär i företags mascotdesign för webben. Du kan också hitta mig på min blogg SOSNewbie eller på Deviantart på sergitosuanez.
Du kan hitta Photoshop PSD-filen i en katalog som heter "PSD" som kom i ZIP-filen som du hämtade. Vi har också inkluderat det ursprungliga utkastet till denna handledning för er spanska läsare. Du kanske vill titta igenom dem kort innan vi börjar. En förhandsvisning av den slutliga bilden finns nedan. Du kan också se den större versionen här också.
När jag började utforma maskotar, som varje bra noob, brukade jag börja mina mönster utan att ha någon aning om vad jag verkligen ville säga. Under den tiden lärde jag mig att planeringen är skillnaden mellan en professionell designer och en annan som inte är det. Av den anledningen och för att jag betalas per ord, kommer jag att klämma dig med lite teori!
Personlighet är nyckeln till en väldesignad maskot. Alla designelement (ansiktsuttryck, kroppsuttryck, symboler, kläder, etc.) måste uppmuntra karaktärens attityd, vilket kommer att bero på våra kunders företagsvärden. Låt oss se några exempel nedan.
Vi vill överföra den attityd vi vill ha i bara en minnesvärd posera, ren, lätt att komma ihåg, och lätt att känna igen. För det måste vi titta på handlingslinjen och siluetten.
Ett mycket vanligt fel när vi designar för en webbplats är att ställa maskoten utan att överväga det område som ska användas. För att se till att karaktären ser så stor ut som möjligt måste vi anpassa posen till området, se exemplen Nedan.
Åtgärdslinjen definierar karaktärens rörelsens avsikt, den riktning dess energier riktas mot. Du kan se några exempel nedan.
Animationsmästaren Raúl Garcia förklarar allt perfekt i det här exemplet är det en övning där vi letar efter karaktären som bättre definierar historien: "Fylla en kopp te."
Det första försöket är vagt och definierar inte handlingen kortfattat. Det finns ingen åtgärdslinje som beskriver "hällande te i koppen" -rörelsen eller spänning som kan tyder på vikt eller jämvikt. Den här ritningens silhuett är amorf och utan intresse.
Letar efter den tydliga silhuetten försöker han skilja armen som håller tekanna från kroppen.
Kopp och tekanna är nu klart separerade från kroppen, men siluetten är fortfarande inte exakt.
Armens silhuett är mycket tydligare. Tekanna lutar ner för att visa "hällande te" åtgärden.
Armens ställning, som håller koppen, har modifierats för att få det att se mer naturligt ut. Karaktärens nacke har betonats för att få en bättre övergripande siluett.
Silhuetten blir mer effektiv genom att lägga en platta under koppen och inkludera en bättre ställning för handen.
Böjning av armen som håller potten och sträcker fingret får vi en mer intressant siluett.
När vi böjer huvudet får vi en mer effektiv silhuett, vi skapar ett negativt utrymme som leder klockarens uppmärksamhet åt tekannens pipa.
Observera att siluettnumret 4 är fullständigt beskrivande, vi behöver inte mer att förstå åtgärden. När vi utformar företags mascots, kan vi vanligtvis inte få en sådan perfekt silhuett. Ändå är det det perfekta.
I det här fallet gav PSDTUTS mig total kreativ frihet, så jag låter min instinkt leda mig och vi kommer att hoppa över briefing.
Efter att ha känt klienten är det bästa vi kan göra är att leta efter referenser, eftersom ursprungliga idéer kanske inte kommer att förstås först. Sökandet efter referenser kan hjälpa oss att förkasta de uppenbara idéerna och överväga några alternativa.
Nu överväganden för att komma fram till nya idéer:
Exempel:
VARNING 1: Inspirera själv är tillåtet, plagiera inte.
VARNING 2: Vissa artister och webbplatser erbjuder gratis resurser. Du borde visa uppskattning för detta genom att ange var du fick konstverket och överväga att donera donera minst en amerikanska dollar.
Pen-tablett eller -mus? Om du fortfarande inte äger en Pen Tablet rekommenderar jag att du köper en Wacom, det finns några mycket prisvärda, men jag rekommenderar att du går med en Wacom. Om du inte har en kan du först rita skissen med traditionell penna och papper, använd sedan musen och Photoshops digitala ritverktyg för att bläcka det, men processen tar dig mycket längre. Vid färgning rekommenderas det starkt att använda tabletten. Se videon nedan om denna process.
När jag köpte min älskade Wacom Cintiq 21UX (skärmen till höger), ändrade jag min metod. Nu gör jag hela processen digitalt, från den första skissen till de sista detaljerna. Jag ritar linjerna för hand eftersom jag tycker att det är lättare och snabbare än att använda vektorritningsverktygen.
Photoshop eller Illustrator? Det är ditt eget val, jag personligen hittar Illustrator vectorial ritverktyg galning. Jag använder hellre Photoshop, dra linjerna för hand och jag använder bara ritverktygen för svåra linjer. Jag jobbar i hög upplösning, så den senare vektoriseringen är ganska lätt. För det använder jag en illustration plugin kallad Silhouette.
Det är väldigt viktigt att arbeta i hög upplösning, jag använder en A3-storleksanpassad duk på 300 pixlar per tum. Arbetsprocessen är densamma i denna storlek och det finns många fördelar:
Här kan du se några teckningar av tecknet i de olika stegen, från skiss till sista linjen. Tyvärr finns det inga knep, bara träna och träna mer:
Observera att linjetyckan (linjevikt) är variabel, det här är en av de mest krävande delarna. Den allmänna regeln är: tjocka linjer för konturerna, tunnare linjer för inre delar.
På så sätt kan observatören skilja formerna mycket bättre. Detta är speciellt användbart för komplexa illustrationer där vi kan spela med linjetyckelse för att skapa djup i illustrationen.
När vi har ritat färdigt och i ett lager, kan vi extrahera raderna från bakgrunden, eller lägga lagret i multiplikationsläge och lägga till färgen i nya lager under den. Jag föredrar att extrahera dem, så jag kan färga dem lätt senare.
Lägg märke till att jag ska måla skridskan och karaktären separat, så när vi är klar kommer vi att ha två versioner: med och utan skridsko.
För att extrahera raderna gör du följande:
Om du är lite lat kan du ladda ner den här Photoshop-åtgärden för att extrahera ritningens linjer. På så sätt behöver du inte göra det manuellt.
Jag har redan skrivit olika handledning om hur man färgar i Photoshop. Jag vill inte köra dig så jag ska prova något annat:
Det här är de tre färgerna jag har valt att måla karaktären. Som jag redan sagt kommer vi att färga karaktären med Photoshop-kommandon senare, så valet av färgerna är inte så viktigt. Kom bara ihåg att du behöver en mörk färg för skuggor, mitt för allmänt ljus och ljus för konturer och mer intensiva ljus.
History Brush är ett kraftfullt verktyg som jag använder mycket ofta, eftersom vi kan blockera delar av vår design som redan är färdiga och fortsätter arbeta på vila utan att förstöra dem. Jag ska ge dig ett grundläggande exempel, som visas nedan.
Med lite mer övning kommer du att vara medveten om de gränslösa möjligheterna för detta verktyg. Som du kan se i exemplet kan vi använda den som en suddgummi (utan att vara rädd för att radera färdiga delar); vi kan göra detsamma att måla istället för att radera om vi tar olika ögonblicksbilder av samma design kan vi få mellanliggande versioner; vi kan sänka borstens opacitet och slå samman olika versioner av samma design; vi kan även spela med tonaliteterna ... Var inte rädd för att experimentera.
VARNING: Historikborsten fungerar med lager, det lager vi vill ändra måste finnas i båda punkterna i historien. Om vi sammanfogar eller tar bort det aktuella skiktet fungerar inte historikborsten.
Du kan besöka den här videoprocessen om hur du färgar med Photoshop för att se historikborsten i åtgärd.
Under linjelagret skapar vi ett nytt lager och heter "Flat Colors", och sedan fyller vi teckningen med färger som måste skilja sig tillräckligt från varandra för att göra det enklare att välja senare. Du kan göra det med alla verktyg du vill ha, var uppmärksam på att inte lämna några luckor.
Vi använder endast det här laget för att göra val, till exempel: Om vi vill måla vår karaktärs hår, väljer vi Magic Wand-verktyget och klickar på håret. På så sätt får vi ett snabbt och exakt urval.
Vi inaktiverar lageret "Flat Colors" och vi placerar det varhelst det inte stör oss. Vi kan få ett urval av hela karaktären av karaktären genom att klicka på Kommandoklikk på den här lagikonen.
Då skapar vi ett nytt lager, vi heter "Color Base" och vi fyller den med en platt färg. I det här fallet valde jag # e37750 färg, eftersom det är en bekväm och neutral färg för mig.
Vi skapar ett nytt lager ovanför "Color Base" och vi heter "Shadows." I det här skiktet ska vi måla skuggorna med samma basfärg, men vi lägger tillfälligt lagret i Multiplicerat läge.
Jag har valt en ljuskälla som kommer från ovan till vänster. Att veta att vara samstämmigt med belysningsvolymen är den svåraste delen och det finns inget annat trick än att öva ... du kan använda en artikulerad leksak i ett mörkt rum med en stark belysningspunkt och använda den som referens.
Observera att skuggorna inte behöver ockupera hela ritningen, vi måste lämna utrymme för belysningen. Jag använder några bildtexter så att du kan se hur jag brukar måla skuggorna.
När vi redan har målade skuggorna skapar vi ett nytt lager nedan och vi heter "Soft Light".
Vi använder Gradient-verktyget för att skapa en mjuk belysning som kommer att vara basen för den senare belysningen.
Här kan du se konfigurationen jag använder för att göra gradienterna:
Vi skapar ett nytt lager strax under "linjerna" och vi heter "Hard Light". Processen är i grunden densamma som den som vi använde för skuggorna, men inversed. Istället för att måla djupa zoner, målar vi de utstående. Jag använder en #ffeeae färg.
Jag skapar ett nytt lager under skuggorna och jag heter "Reflektioner". Jag gillar att betona volymerna genom att lägga reflektioner i konturerna, konturerna och volymerna är mycket tydligare på så sätt. Kom ihåg att vi raderade konturerna i skuggans steg, nu behöver vi bara lägga ett lager under skuggorna och måla noga.
Här kommer den roliga delen! Vi har redan slutat belysningen, alla volymer definieras och vi har olika ljusnivåer (skuggor, mellansignaler och ljustoner) separat. Nu spelar du med Command + U i Photoshop, vi kommer att färga tecknet snabbt.
Observera att färgerna jag har valt är alla från samma område, men lite annorlunda, så vi får ett bredare kromatiskt intervall. Vi kan gå vidare och använda olika färger, även i samma lager. Här överdrev jag lite, så du kan se möjligheterna:
Nedan kan du se hur jag färgade varje del av tecknet. Prova dina egna färgkombinationer tills du får den du vill.
Vi har redan slutat färgbasen, nu ska vi spela med lager i olika fusionslägen (Layer palett, menyn upp till vänster) för att ge mer djup till färgen. Alla lager måste ligga över "Lineart" -laget.
När vi är färdiga kan vi slå samman alla lager (skapa en säkerhetskopia före det) och lägg till fler effekter. Vi kan använda Dodge-verktyget för att lysa upp vissa zoner eller Burn-verktyget för att mörka dem. Vi kan spela med färgbalansen (Command + B) eller med alla nivåer (Command + L). Med lite fantasi kan du få enastående resultat.
Som jag sa i början ska jag måla skridan separat, så vi har två versioner. Jag använde samma teknik som jag gjorde med karaktären. Den slutliga karaktärsdesignen är nedan.
Och vi slutade äntligen. Det ser bra ut, tycker du inte?
Som bra professionella är vi, vi måste vara uppmärksamma på presentationen. Med några logotyper, några bilder från våra vänner på Gomedia och lite fantasi kan vi göra en presentation som den som visas nedan. Du kan ta tag i tapetstorleken här.
Se! Det var en bra idé att göra skridskan separat, nu har vi 2 olika versioner med praktiskt taget samma ansträngning. Du kan ta tag i tapetstorleken här.
Det här är den begränsade färgversionen, men vi kan bara spela med raderna (lyckligtvis gjorde jag dem ganska tjocka). Du kan ta tag i den här versionen av tapetstorlek.
Var inte rädd, jag kommer inte att förklara hur man gör dessa bakgrundsbilder. Vi har täckt en hel del grund för denna handledning redan, jag kan gå glad nu!
Jo mina vänner, bara en sak kvar att göra. Jag vill göra en förfrågan ... till de "stora" förlagsföretagen, som får sitt material tack vare exploatering, som fyller sina fickor med pengar utan att dela en cent (de lämnar FAME för våra artister). de borde följa modellen av PSDTUTS, alltid så generös och omtänksam med både artisten och läsaren, vilket visar att lönsamheten i ett företag inte är beroende av lågkostnadskällmaterialet men på dess kvalitet och på resursförmågan när det kommer att sälja det.
Tack vare Eden för att skapa en så stor resurs som PSDTUTS, speciellt för Sean för sin flexibilitet. Tack till min vän Anita, för att hjälpa mig osjälviskt och för att översätta denna artikel (vi har inkluderat den ursprungliga versionen på spanska också i hämtningen). Och till sist tack vare PSDTUTS-läsare hoppas jag att du har läst till slutet, att du har lärt dig många nya saker, eller åtminstone att du har haft den här handledningen.
Självklart, om du har några frågor ska jag svara med nöje. Gärna kommentera det relaterade nyhetsbrevet på webbplatsen. Hälsningar
Accentsconagua