How å illustrere en Brain Ikon for OSX og Vista
Dette innlegget er en del av en serie som heter Icon Design.How å lage en Golden, Vector Compass i IllustratorHow å lage en girkasse Settings symbol Bruke enkle former

i denne opplæringen vil jeg vise deg hvordan du oppretter en tegneserie stil illustrasjon av en hjerne, så hvordan å konvertere bildet til bruk som et ikon for OSX og Vista. Jeg vil diskutere noen punkter om detaljering for ikon design også. La oss komme i gang!

Final Bilde Forhåndsvisning

Nedenfor er det siste bildet vi skal jobbe mot. I denne opplæringen, vil vi også lage et ikon fra dette også. Vil ha tilgang til hele Vector kildefiler og nedlastbare kopier av hver tutorial, inkludert denne? Bli Vector Plus for bare 9 $ i måneden

Tutorial Detaljer

Program
. Illustrator CS4, Icon Composer - Independent (OSX)

Vanskelighetsgrad:
Intermediate

Beregnet Fullføringstidspunkt:
2-3 timer

Seksjon 1: Illustrasjon

Trinn 1 Forskning

Samle noen referansemateriale og bilder /illustrasjoner av hjernen. Medisinske bøker er en perfekt kilde. Hjernen er så komplisert eksternt som det er internt. Viktigste tingene å huske på er at hjernen er en generell oval form som danner den grå materie, så er det lillehjernen og hjernestammen. Ser fra front /topp utsikt, er hjernen bipolar og består av to halvkuler.

Trinn 2 Tegning

Jeg liker å skissere ut en grunnleggende form på papir eller digitalt først, før jeg tar det til Illustrator. Dette gjelder spesielt med en organisk form, som du ikke er helt sikker på hvordan det vil se ut, så det vil være gunstig å skissere det grunnleggende før han går videre vektorer.

Når du skissere utseendet hjernen, bør du vurdere følgende:

Point of View - Hvilken side er du nødt til å gjengi hjernen din fra? En side utsikt tendens til å være ikke så dimensjonal, derav jeg foreslår at du plasserer den litt fra siden for å integrere den linjen som skiller de to halvkulene

modulere -. En hjerne ser nesten ut som et stort nettverk av ikke-uniform rør som var bøyd sammen på en spaghetti ball. Disse rør
har en unik krumning, men du kan bruke slike elementer som s
og M
formet svinger, T
kryss og diverse andre elementer i hjernen; bare husk å holde den generelle formen og til å bule ut på steder

Overdrive -. Vi har ikke tenkt for en realistisk anatomisk korrekt gjengivelse. Benytt deg av kurvene til å uttale visse områder

Simplify -. Du trenger ikke å gjøre så mange squiggles som en faktisk hjernen. Igjen, vi ikke gjør en realistisk gjengi, så unngå unødvendige detaljer. Dette er fordi når det kommer til å konvertere bildet til et ikon, kan enkelte detaljer være tapt eller bryte når den vises i mindre oppløsninger. Jeg selv utelatt lillehjernen og hjernestammen for å forenkle bildet

Konsekvent -. Hold strektegninger konsekvent. Linjetykkelse dikterer nærhet og vekten av kurvene blant hverandre, så hold det i tankene.

Det kan være en unødvendig skritt for noen, men jeg pleier å gå over en blyantskisse i Flash for å produsere rene strektegninger, og deretter jobbe som i Illustrator, men gjerne bruke ditt foretrukne arbeidsflyt

Trinn 3 -. Vectorizing

Opprett en 512 piksel for 512 piksel lerret i Illustrator . Importer skisse på lerretet og bruke Pen Tool, begynne å opprette strektegninger. Hvis du er komfortabel med Illustrator er Brush Tool, eller ved hjelp av en tablett, kan du bruke den i stedet, men konvertere dem til skisserer etter. Husk å krysse kurvatur med retning i tankene og lage passende folder og overlapper.

Hold ekstreme folder med skarpe kanter, og for mykere folder, skape mer avrundede ender eller legg små folder for å støtte visuell struktur. Flett alle figurene i en enkelt fyll med stifinner Unite verktøy og endre navn på lag til ". Linework "

Bruk Bucket Bool å fylle med farger, så Extrude

Trinn 4. - Coloring

Når du har alle strektegninger sortert, bruker live Paint Bucket Tool til å skape fyllingene. Velg strektegninger og bruke en litt desaturert rosa farge for basen, ikke gjør det grått eller for rosa heller, men det er opp til deg.

Fordi bøtte verktøyet er en Live Paint funksjonen, dine vektorer vil bli en gjenstand under en live Paint Group. For å fikse det og skille dem, gå til Object > Levende maling > Utvide. Dette vil konvertere Live Paint-konsernet i en normal gruppe av fyllinger i ditt lag paletten. Så gå videre og skille den rosa fargen fyller ut et annet lag og endre navnet " bunn ".

Trinn 5 - Shading

Vi må legge til noen ytterligere detaljer for å gjøre hjernen ser glossy og mer tredimensjonal ved å legge til høylys og skygger. Bestem deg for hvilken retning lyset kommer fra. I mitt tilfelle, er det standard øverst til venstre. Lag et nytt lag som heter " høydepunkter ".. Nå bruker Pen Tool, begynne å lage svært avrundede former din står overfor antatt lys ved hjelp av en litt lysere farge enn din base.

Husk at det ikke er ment å være realistisk, men for å gi en følelse av glans ved å legge noen reflektering. Hold det enkelt og ikke legge for mye, fordi fargene ville blande i mindre oppløsninger.

Mens høydepunktene er avrundet og er helt uavhengig, vil skyggene være grenser til kantene, på motsatt side av høydepunktene. På et annet lag som kalles "skygger", ved hjelp av pennen og en mørkere farge fra basen, lage noen skygger. Sørg for å legge dem på steder hvor hjernen former lapper og kastet skygger på hverandre.

Duplicate dine-linjer og base lag på en ny en som heter "gradient", som vi skal bruke til å legge til en annen skyggelegging funksjonen til hjernen. Bruk stifinner Unite verktøyet på nytt for å slå sammen de strektegninger og basen rosa sammen til et enkelt fyll. Deretter gjør det en gradient fyll, ved hjelp av en nyanse av rosa andre enn de som allerede er i bruk, og noen myk farge. Jeg brukte en nyanse av rosa en bit av oransje i det med. Still lag over alt annet og sette blending mode til " Farge ".

Det siste trinnet er å skape litt skygge under ut hjernen, strengt for ikonet bruk. Duplisere bakgrunnslaget og satte den under den. Fyll formene med sort og bruke effekter > Photoshop Effects > Blur > Gaussian Blur med 10px verdi å viske ut skyggen. Sørg for å skalere og posisjonere alt slik at ingenting berører kanten av lerretet og at skyggen ikke beskjæres ved det enten

Du bør ende opp med 6 hovedelementer:. "Gradient", "-linjer, "" høydepunkter "," nyanser "," basen rosa "og" skygge ". Den endelige illustrasjonen er nedenfor. Nå er du klar til å konvertere illustrasjonen i en fil-ikon

Seksjon 2 - Å gjøre vår hjerne til et ikon

Trinn 1 - Oversikt

Den nyeste Mac OS Leopard og selvfølgelig den kommende Snow Leopard støtter ikonet størrelser opp til 512 piksler x 512 piksler, mens windows Vista støtter bare 256 px av 256 px. Mac OSX støtter alle typer formater som skal brukes som et ikon, på grunn av måten operativsystemet gjengir bilder. Dessverre, omhandler Windows med ICO format, noe som ikke er forenlig mellom Vista og eldre versjon av Windows

Mac OSX kommer med en ryddig verktøy kalt ". Ikon Komponist " og det sitter i Root > Utvikler > Programmer > Verktøy. Det er en del av Apples gratis utviklerverktøy tilgjengelig her (gratis konto nødvendig).

Windows har ingen innebygd verktøy som du kan bruke, men det er et freeware ikon editor IcoFX som kan eksportere til ICO blant annet.

Ved anvendelsen av denne opplæringen, vil jeg bare bruke den originale 512x512 bilde og la programvaren endre størrelsen automatisk. De nødvendige vedtak for Mac OS er 512x, 256x, 128x, 32x, 16x. Merkelig nok, for Windows, de er 256x, 48x, 32x, 24x, 16x.

I virkeligheten ville du redigere og finpusse på ikonet hvert trinn har størrelsen ned, fordi det er en utrolig tap av detaljer, og på laveste oppløsning figurene blir utvisket, og du må ty til manuell redigering ned til piksler

Trinn 2 -. Mac OSX

Hvis du ikke ønsker å registrere deg på Apple og laste ned utviklerverktøy bare for å få Icon Composer, har du flaks, fordi Mac OS støtter standard RGBA PNG-er i sine ikoner. Alt du trenger å gjøre er å lagre filen ut av Illustrator som en 512x512 PNG med åpenhet, åpne den med Preview, klikker du på Rediger > Kopier for å kopiere bildet. Så gå til mappen du ønsker å endre ikonet og høyreklikk > få info (eller Command + I). Se etter ikonet i øverste venstre hjørne ved siden av mappenavnet, og klikk på den. Det vil markere med en lyseblå farge

Når du har fått det markert, kan du gå videre og klikk på Rediger >.; Lim. Og som vil sette inn PNG du kopierte.

Ulempen med det er at bildet fortsatt er 512 x 512 piksler, selv for mindre størrelser som påvirker hukommelse når viser ikonet. En annen er at du vil ha en hard tid å gå tilbake den tilbake hvis du byttet en av de systemikoner.

For å opprette en innfødt OSX ICNS filen, kjører Ikon Komponist og dra 512 x 512 piksler PNG inn er av samme størrelse. Programmet vil spørre deg om du ønsker å kopiere og endre størrelsen på bildet over til andre oppløsninger. Hvis du ønsker å opprette et eget bilde for hvert, gå videre. På dette punktet, vil jeg bare la datamaskinen endre størrelsen for meg.

Du kan se det er en Masker fane på bunnen. Hva den gjør, er lar deg importere en uavhengig bilde som vil håndtere åpenhet. Siden vi bruker PNG-tallet, er vi godt å gå Fil > Eksport og spare ut en ICNS fil.

Hvis du åpner våre nye ICNS i forhåndsvisningen, vil du se at det er en beholder for 5 bilder av sine respektive størrelser.

På dette punktet, er det vanskelig å implementere ICNS som et ikon, siden du ikke kan bare kopiere og lime den inn som en hel fil. Hvis du er i tilpasning på din mac, og liker tilpassede ikoner, eller du er en designer som trenger å teste sine kunstverk, foreslår jeg en veldig ryddig verktøyet candybar. Det er ikke gratis, men er vel verdt det, hvis du planlegger å ta tilpasning alvor.

Trinn 2 Windows Vista

Vista er forskjellig fra Windows XP. Ikoner med PNG-komprimering ble innført, og blir fraktet videre til Windows 7, slik at du kan lage fine ikoner med tilstrekkelig åpenhet. Windows håndterer ikoner gjennom ICO-filer. De er tilsvarende den ICNS for mac, som er beholdere for bilder for ulike oppløsninger.

Vi kommer til å bruke et freeware program som heter IcoFX. . Windows støtter ikke ikonet oppløsninger over 256px ved 256px, så jeg foreslår at du eksporterer en 256px bilde rett ut av Illustrator for å unngå ekstra kompresjon

Gå til Fil > import bildet for å importere 256px png. Bruk 32 bits 256x256 innstillinger

I venstre panel, høyreklikker >.; nytt bilde for å importere en med neste oppløsning. Du kan gå videre og gjøre en tilpasset import av 128x128 som en ekstra størrelse. Deretter importerer resten av bildene.

Når du har alle bildene lastet inn, er du klar til å lagre filen som en ICO-fil.

For å endre et ikon av en mappe /plassering i Vista, i dette tilfellet vil jeg endre " min datamaskin " ikon. Høyreklikk på den, velg egenskaper. Hvis du endrer en snarvei, gå til kategorien Snarvei, eller om det er en mappe gå til kategorien Tilpass. Klikk på Velg ikonet knappen og velge ICO-filen du lagret.

Bekreft bildet valg og ikonet skal laste inn egendefinerte ett.

Konklusjon

Nå vet du prosessen med å lage et ikon fra grunnen av, for både Mac OSX og Windows Vista. Enten du lese veiledningen fra § 1 å følge illustrasjonen prosessen, eller hoppet rett til punkt 2 for å se hvordan du kan konvertere bilder til brukbar system ikoner, jeg takker deg for å følge opplæringen og håper å se noen stor tilpasning kunst! Det er mange gode steder å starte.

Abonner på Vectortuts + RSS-feed for å holde deg oppdatert med de nyeste vektor tutorials og artikler.