Share
I den här handledningen visar jag dig hur man skapar en tecknadstilsillustration av en hjärna, hur man konverterar bilden för att användas som en ikon för OSX och Vista. Jag ska diskutera några punkter om detaljering för ikondesign också. Låt oss börja!
Nedan är den slutliga bilden vi ska arbeta för. I den här handledningen skapar vi också en ikon från detta. Vill du ha tillgång till hela Vector Source-filerna och nedladdningsbara kopior av varje handledning, inklusive den här? Bli med Plus Plus för bara 9 $ per månad.
Samla lite referensmaterial och bilder / illustrationer av hjärnor. Medicinska böcker är en perfekt källa. Hjärnan är lika komplex externt som det är internt. Viktiga saker att tänka på är att hjärnan är en övergripande oval form som bildar den gråa substansen, då finns det cerebellum och hjärnstammen. Titta på framifrån / uppifrån är hjärnan bipolär och består av två halvkärmar.
Jag gillar att skissera en grundläggande blankett på papper eller digitalt först innan jag tar den till Illustrator. Detta gäller särskilt med en organisk form, eftersom du inte är helt säker på hur det kommer att se ut, så det kommer att vara fördelaktigt att skissa ut grunderna innan du flyttar på vektorer.
När du skisserar ut seriet av hjärnan, överväga följande:
Synpunkt - Vilken sida ska du göra din hjärna av? En sidovy tenderar att vara inte så dimensionell, därför föreslår jag att du placerar den lite från sidan för att integrera linjen som skiljer de två halvkärmarna.
Modulera - En hjärna ser nästan ut som ett stort nätverk av ojämna rör som böjdes samman på en spaghettiboll. Dessa rör ha en unik krökning, men du kan återanvända sådana element som S och M formade zigzags, T korsningar och olika andra delar i din hjärna; Kom bara ihåg att behålla den övergripande formen och utbuka den på platser. driva - Vi går inte för en realistisk anatomiskt korrekt rendering. Använd kurvorna för att accentera vissa områden. Förenkla - Du behöver inte göra så många squiggles som en faktisk hjärna. Återigen gör vi inte en realistisk renhet, så undvik onödig detalj. Det beror på att när det kommer att konvertera bilden till en ikon, kan vissa detaljer gå vilse eller bryta när de ses vid mindre upplösningar. Jag utelämnade till och med hjärnbenet och hjärnstammen för att förenkla bilden. Konsekvent - Håll din konst konst konsekvent. Linjetyckor dikterar kurvarnas närhet och vikt bland varandra, så håll det i åtanke.
Det kan vara ett onödigt steg för vissa, men jag brukar gå över en penna skiss i Flash för att producera ren linjekonst, och sedan arbeta från det i Illustrator, men gärna använda ditt föredragna arbetsflöde.
Skapa en 512 pixel med 512 pixel duk i Illustrator. Importera din skiss på din duk och använd Penverktyget, börja skapa linjekonst. Om du är bekväm med Illustrators borstverktyg eller använder en surfplatta kan du använda den istället, men konvertera dem till konturer efter. Var noga med att korsa krökningen med riktning i åtanke och skapa lämpliga veck och överlappningar.
Håll de extrema vikarna med skarpa ändar och för mjukare veck, skapa mer avrundade ändar eller till och med lägga små veck för att stödja visuell struktur. Slå samman alla former i en enda fyllning med hjälp av pathfinder Unite-verktyget och byt namn på skiktet till "linework".
Använd Bucket Bool för att fylla med färger och sedan Extrude.
När du har sorterat alla rader, använd verktyget Live Paint Bucket för att skapa fyllningarna. Välj linjekonst och använd en något desaturated färgad färg för basen, gör den inte grå eller för rosa heller, men det är upp till dig.
Eftersom skopverktyget är en Live Paint-funktion blir dina vektorer ett objekt under en Live Paint Group. För att fixa det och separera dem, gå till Objekt> Levande färg> Expand. Detta kommer att konvertera din Live Paint Group till en vanlig grupp som fyller i din lagerpalett. Sedan fortsätt och separera de rosa färgfyllningarna på ett annat lager och byt namn på den "basen".
Vi behöver lägga till ytterligare detaljer för att få hjärnan att se blankt och mer tredimensionellt genom att lägga till höjdpunkter och skuggor. Bestäm i vilken riktning ljuset kommer ifrån. I mitt fall är det standard till vänster. Skapa ett nytt lager med namnet "höjdpunkter". Använd nu Penverktyget, börja göra mycket rundade former mot ditt antagna ljus med en något ljusare färg än din bas.
Tänk på att det inte är tänkt att vara realistiskt, utan att ge en känsla av glans genom att lägga till lite specularitet. Håll det enkelt och lägg inte till för mycket, eftersom färgerna skulle blandas i mindre upplösningar.
Medan höjdpunkterna är rundade och är helt oberoende kommer skuggorna att vara intill kanterna, mittemot höjdpunkterna. På ett annat lager som kallas "skuggor", med hjälp av pennverktyget och en mörkare färg från basen, skapar du några skuggor. Se till att du lägger till dem på platser där hjärnans former överlappar varandra och kastar skuggor på varandra.
Duplicera dina linjer och baslager på en ny som heter "gradient", som vi ska använda för att lägga till en annan skuggningsfunktion i hjärnan. Använd pathfinder Unite-verktyget igen för att sammanfoga linjekonst och basfärgen tillsammans till en enda fyllning. Gör sedan en lutning fyllning, med en nyans av rosa än de som redan används, och någon mjuk färg. Jag använde en nyans med rosa med lite orange i den. Ställ in skiktet över allt annat och sätt blandningsläget till "Färg".
Det sista steget är att skapa en viss skugga underifrån hjärnan, strängt för ikonanvändning. Duplicera basskiktet och sätt det under det. Fyll formerna med svart och använd Effekter> Photoshop-effekter> Blur> Gaussisk oskärpa med 10px-värde för att oskärpa skuggan. Se till att du ska skifta och placera allt så att ingenting rör vid kanvasens kant och att skuggan inte beskärs av den heller.
Du borde sluta med 6 huvudelement: "gradient", "linework", "highlights", "nyanser", "rosa" och "skugga". Den slutliga illustrationen är nedan. Nu är du redo att konvertera bilden till en filikon!
Den senaste Mac OS-leoparden och det kommande Snow Leopard-programmet stödjer naturligtvis ikonstorlekar upp till 512 bildpunkter med 512 bildpunkter, medan Windows Vista endast stöder 256 px med 256 px. Mac OSX stöder alla typer av format som ska användas som en ikon, på grund av hur operativsystemet gör bilder. Tyvärr handlar Windows om ICO-format, vilket inte är konsekvent mellan Vista och äldre version av Windows.
Mac OSX levereras med ett snyggt verktyg som heter "Icon Composer" och det sitter i Root> Developer> Applications> Utilities. Det är en del av Apples gratisutvecklingsverktyg tillgängligt här (gratis konto krävs).
Windows har inget inbyggt verktyg som du kan använda, men det finns en freeware ikonredigerare IcoFX som bland annat kan exportera till ICO.
I den här handledningen använder jag bara den ursprungliga 512x512-bilden och låter programvaran ändra storlek på den automatiskt. De nödvändiga resolutionerna för Mac OS är 512x, 256x, 128x, 32x, 16x. Otroligt nog, för Windows, är de 256x, 48x, 32x, 24x, 16x.
I själva verket skulle du redigera och förfina ikonen varje steg det är dimensionerat, eftersom det finns en otrolig detaljförlust och vid lägsta upplösning kommer formerna att skilja sig från varandra och du måste tillgripa manuell redigering ner till pixlar.
Om du inte vill anmäla dig till Apple och hämta utvecklingsverktygen för att få Icon Composer, har du tur, eftersom Mac OS stöder standard RGBA PNG i dess ikoner. Allt du behöver göra är att spara din fil ur Illustrator som en 512x512 PNG med öppenhet, öppna den med Preview, klicka på Redigera> Kopiera för att kopiera bilden. Gå sedan till mappen du vill ändra ikonen till och högerklicka> få info (eller Kommando + I). Leta efter ikonen i det övre vänstra hörnet bredvid mappnamnet och klicka på det. Det kommer att markera med en ljusblå färg.
När du har markerat det, kan du fortsätta och klicka på Redigera> Klistra in. Och det kommer att infoga PNG du tidigare kopierat.
Nackdelen med det är att bilden fortfarande är 512px med 512px, även för mindre storlekar som påverkar minnet när ikonen visas. Ett annat är det faktum att du har svårt att återställa den om du bytte ut en av systemikonen.
För att skapa en inbyggd OSX ICNS-fil, kör Icon Composer och dra 512px med 512px PNG i samma storlek. Programmet kommer att uppmana dig om du vill kopiera och ändra storlek på bilden till andra upplösningar. Om du vill skapa en separat bild för varje, fortsätt. Vid den här tiden kommer jag bara att låta datorn ändra storlek på den för mig.
Du kan se att det finns en flik Masks längst ner. Vad det gör kan du importera en oberoende bild som hanterar öppenhet. Eftersom vi använder PNG, är det bra att gå på Arkiv> Exportera och spara en ICNS-fil.
Om du öppnar våra nya ICNS i förhandsgranskning ser du att det är en behållare för 5 bilder av deras respektive storlekar.
Vid denna tidpunkt är det knepigt att implementera ICNS som en ikon, eftersom du inte bara kan kopiera och klistra in den som en hel fil. Om du är anpassad på din Mac, och som anpassade ikoner, eller om du är en designer som behöver testa deras konstverk, föreslår jag ett mycket snyggt nyttjande CandyBar. Det är inte gratis, men det är väl värt det, om du planerar att ta anpassning på allvar.
Vista skiljer sig från Windows XP. Ikoner med PNG-komprimering introducerades och transporteras vidare till Windows 7, så att du kan skapa trevliga ikoner med tillräcklig öppenhet. Windows hanterar ikoner via ICO-filer. De motsvarar ICNS för mac, som är behållare för bilder för olika upplösningar.
Vi ska använda ett freeware program som heter IcoFX. Windows stöder inte ikonupplösningar över 256px med 256px, så jag föreslår att du exporterar en 256px-bild rakt ut ur Illustrator för att undvika extra komprimering.
Gå till Arkiv> importera bild för att importera din 256px png. Använd 32-bitars 256x256-inställningar.
Högerklicka på> Ny bild för att importera en med nästa upplösning i den vänstra panelen. Du kan gå vidare och göra en anpassad import av 128x128 som en extra storlek. Importera sedan resten av bilderna.
När du har laddat upp alla bilder är du redo att spara filen som en ICO-fil.
För att ändra en ikon för en mapp / plats i Vista, ändras i så fall ikonen "min dator". Högerklicka på den, välj egenskaper. Om du ändrar en genväg, gå till fliken Genväg, eller om det är en mapp gå till fliken Anpassa. Klicka på Välj ikonen och välj den ICO-fil du sparade.
Bekräfta bildvalet och ikonen ska laddas in i din anpassade.
Nu vet du processen att skapa en ikon från grunden, för både Mac OSX och Windows Vista. Oavsett om du läser handledningen från avsnitt 1 för att följa illustrationsprocessen eller hoppar direkt till avsnitt 2 för att se hur man konverterar bilder till användbara systemikoner, tackar jag dig för att följa handledningen och hoppas att du får se några bra anpassningsartiklar! Det finns många bra ställen att börja.
Prenumerera på Vectortuts + RSS-flödet för att hålla dig uppdaterad med de senaste vektorhandledningarna och artiklarna.
Accentsconagua