Hvordan illustrere en hjerneikon for OSX og Vista

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

Endelig bildeforhåndsvisning

Nedenfor er det endelige bildet vi skal jobbe for. I denne opplæringen vil vi også lage et ikon fra dette også. Ønsker du tilgang til hele Vector Source-filene og nedlastbare kopier av hver opplæring, inkludert denne? Bli med Vector Plus for bare 9 $ i måneden.

Opplæringsdetaljer

  • Program: Illustrator CS4, Ikon Komponist - Uavhengig (OSX)
  • Vanskelighet: mellom~~POS=TRUNC
  • Anslått sluttid: 2-3 timer

Seksjon 1: Illustrasjon

Trinn 1 Forskning

Samle noen referansemateriale og bilder / illustrasjoner av hjerner. Medisinske bøker er en perfekt kilde. Hjernen er så kompleks eksternt som det er internt. Viktigste ting å huske på er at hjernen er en overordnet oval form som danner den grå saken, så er det hjernen og hjernestammen. Ser fra front / toppvisning, er hjernen bipolar og består av to halvkugler.

Trinn 2 Tegning

Jeg liker å skisse ut et grunnskjema på papir eller digitalt først, før jeg tar det med til Illustrator. Dette gjelder spesielt med en organisk form, da du ikke er helt sikker på hvordan det vil se ut, så det vil være fordelaktig å skissere det grunnleggende før du beveger deg på vektorer.

Når du skisserer ut hjernens utseende, bør du vurdere følgende:

    Synsvinkel - Hvilken side skal du gjengi hjernen din fra? Et sidebilde har en tendens til ikke å være så dimensjonal, derfor foreslår jeg at du plasserer den litt fra siden for å integrere linjen som skiller de to halvkule.

    modulere - En hjerne ser nesten ut som et stort nettverk av ujevne rør som ble bøyd sammen på en spaghetti ball. Disse rør Har en unik krumning, men du kan gjenbruke slike elementer som S og M formede zigzags, T kryss og forskjellige andre elementer i hjernen din; Bare husk å holde den generelle formen og å bøye den ut på steder.

    Overdrive - Vi går ikke for en realistisk anatomisk korrekt gjengivelse. Benytt kurver for å aksentere visse områder.

    Forenkle - Du trenger ikke å gjøre så mange squiggles som en faktisk hjerne. Igjen gjør vi ikke en realistisk gjengivelse, så unngår unødvendig detalj. Dette skyldes at når det kommer til å konvertere bildet til et ikon, kan noe detaljene gå tapt eller ødelegge når de vises ved mindre oppløsninger. Jeg utelatt selv hjernen og hjernestammen for å forenkle bildet.

    Konsistent - Hold linjekunsten din konsistent. Linjetykkelse dikterer nærhet og vekt av kurver mellom hverandre, så hold det i bakhodet.

Det kan være et unødvendig skritt for noen, men jeg går vanligvis over en blyantskisse i Flash for å produsere ren linjekunst, og deretter jobbe fra det i Illustrator, men vær så snill å bruke din foretrukne arbeidsflyt.

Trinn 3 - Vectorisering

Opprett en 512 piksler med 512 piksler i Illustrator. Importer skissen på lerretet ditt og bruk pennverktøyet, begynn å lage linjekunsten. Hvis du er komfortabel med Illustrators børsteverktøy, eller bruker en nettbrett, kan du bruke det i stedet, men konvertere dem til konturer etter. Pass på å skjære krumningen med retning i tankene og skape passende bretter og overlapper.

Hold de ekstreme brettene med skarpe ender, og for mykere bretter, skape mer avrundede ender eller til og med legge til små bretter for å støtte visuell struktur. Slå sammen alle figurene i en enkelt fylling ved hjelp av pathfinder Unite-verktøyet og omdøft laget til "linework".

Bruk Bucket Bool til å fylle med farger, og deretter Extrude.

Trinn 4 - Coloring

Når du har sortert alle linjene, bruker du Live Paint Bucket Tool til å lage fyllene. Velg linjekunsten og bruk en litt desaturated rosa farge for basen, ikke gjør den grå eller for rosa heller, men det er opp til deg.

Fordi bøtteverktøyet er en Live Paint-funksjon, blir vektorene dine ett objekt under en Live Paint Group. For å fikse det og skille dem, gå til Objekt> Levende maling> Utvid. Dette vil konvertere Live Paint Group til en normal gruppe som fyller inn lagpaletten din. Deretter går du og separerer den rosa fargefyllingen på et annet lag og gir det nytt navn til "base".

Trinn 5 - Skygge

Vi må legge til ytterligere detaljer for å få hjernen til å se skinnende og mer tredimensjonal ved å legge til høydepunkter og skygger. Bestem hvilken retning lyset kommer fra. I mitt tilfelle er det standard øverst til venstre. Lag et nytt lag kalt "høydepunkter". Nå bruker du pennverktøyet, og begynner å lage veldig avrundede former mot ditt antatte lys med en litt lysere farge enn din base.

Husk at det ikke skal være realistisk, men å gi en følelse av glans ved å legge til litt spekulasjon. Hold det enkelt og legg ikke for mye, fordi fargene vil blande seg med mindre oppløsninger.

Mens høydepunktene er avrundet og helt uavhengige, vil skyggene være tilstøtende til kantene, motsatt av høydepunktene. På et annet lag kalt "skygger", ved hjelp av pennverktøyet og en mørkere farge fra basen, skaper du noen skygger. Pass på at du legger til dem på steder hvor hjerneformene overlapper og støtter skygger på hverandre.

Dupliser dine linjer og basislag på en ny som heter "gradient", som vi skal bruke for å legge til en annen skyggefunksjon i hjernen. Bruk pathfinder Unite-verktøyet igjen for å slå sammen linjekunsten og basen rosa sammen i en enkelt fylling. Deretter gjør du en gradientfylling, med en nydelig rosa annen enn de som allerede er brukt, og litt myk farge. Jeg brukte en nyanse med rosa med litt oransje i den. Sett laget over alt annet og sett blandemodus til "Farge."

Det siste trinnet er å skape litt skygge under hjernen, strengt for ikonbruk. Dupliser grunnlaget og legg det under det. Fyll figurene med svart og bruk Effekter> Photoshop Effects> Blur> Gaussian Blur med 10px-verdi for å utrydde skyggen. Sørg for å rescale og plassere alt slik at ingenting berører kanten av lerretet og at skyggen ikke blir beskåret av den heller.

Du bør ende opp med 6 hovedelementer: "gradient", "linjer", "høydepunkter", "nyanser", "base rosa" og "skygge". Den endelige illustrasjonen er under. Nå er du klar til å konvertere illustrasjonen til et filikon!

Seksjon 2 - Gjør hjernen til et ikon

Trinn 1 - Oversikt

Den nyeste Mac OS-leoparden og selvfølgelig støtter kommende Snow Leopard ikonstørrelser opptil 512 piksler med 512 piksler, mens Windows Vista bare støtter 256 px ved 256 px. Mac OSX støtter alle slags formater som skal brukes som et ikon, på grunn av hvordan operativsystemet gjør bilder. Dessverre handler Windows om ICO-format, som ikke er konsekvent mellom Vista og eldre versjon av Windows.

Mac OSX kommer med et pent verktøy som heter "Icon Composer", og det sitter i Root> Developer> Applications> Utilities. Det er en del av Apples gratis utviklerverktøy tilgjengelig her (gratis konto kreves).

Windows har ingen innfødt verktøy som du kan bruke, men det er en freeware ikonredigerer IcoFX som kan eksportere til ICO blant annet.

I forbindelse med denne opplæringen vil jeg bare bruke det opprinnelige 512x512-bildet og la programvaren endre størrelsen på den automatisk. De nødvendige resolusjonene for Mac OS er 512x, 256x, 128x, 32x, 16x. Merkelig nok, for Windows, er de 256x, 48x, 32x, 24x, 16x.

I virkeligheten vil du redigere og finjustere ikonet hvert trinn det er dimensjonert, fordi det er et utrolig tap av detaljer, og ved lavest oppløsning vil figurene være skilleverdige, og du må ty til manuell redigering ned til piksler.

Trinn 2 - Mac OSX

Hvis du ikke vil registrere deg på Apple og laste ned utviklerverktøyene for å få Icon Composer, har du lykke, fordi Mac OS støtter standard RGBA PNG i ikonene. Alt du trenger å gjøre er å lagre filen ut av Illustrator som en 512x512 PNG med gjennomsiktighet, åpne den med Preview, klikk Rediger> Kopier for å kopiere bildet. Gå deretter til mappen du vil endre ikonet til og høyreklikk> få info (eller kommando + jeg). Se etter ikonet øverst til venstre ved siden av mappenavnet, og klikk på det. Det vil markere med en lyseblå farge.

Når du har merket det, kan du gå videre og klikke på Rediger> Lim inn. Og det vil sette inn PNG du tidligere kopierte.

Ulempen med det er at bildet fortsatt er 512px ved 512px, selv for mindre størrelser som påvirker minnet når ikonet vises. Et annet er at du har det vanskelig å returnere det hvis du byttet ut en av systemikonene.

Hvis du vil opprette en innfødt OSX ICNS-fil, kjør ikonkomponist og dra 512px med 512px PNG inn i størrelsene av samme størrelse. Programmet vil spørre deg om du vil kopiere og endre størrelsen på bildet til andre oppløsninger. Hvis du ønsker å lage et eget bilde for hver, fortsett. På dette tidspunktet vil jeg bare la datamaskinen endre størrelsen på den for meg.

Du kan se at det er en masker-fan nederst. Hva det gjør, lar deg importere et selvstendig bilde som håndterer gjennomsiktighet. Siden vi bruker PNG, er det godt å gå Fil> Eksporter og lagre en ICNS-fil.

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

På dette tidspunktet er det vanskelig å implementere ICNS som et ikon, siden du ikke bare kan kopiere og lime det inn som en hel fil. Hvis du er i tilpasning på din Mac, og som tilpassede ikoner, eller du er en designer som trenger å teste deres kunstverk, foreslår jeg et veldig pent verktøy CandyBar. Det er ikke gratis, men det er vel verdt det, hvis du planlegger å ta tilpasning seriøst.

Trinn 2 Windows Vista

Vista er forskjellig fra Windows XP. Ikoner med PNG-komprimering ble introdusert, og blir videreført til Windows 7, slik at du kan lage fine ikoner med tilstrekkelig gjennomsiktighet. Windows håndterer ikoner gjennom ICO-filer. De er ekvivalenter av ICNS for Mac, som er beholdere for bilder for ulike oppløsninger.

Vi skal bruke et freeware program kalt IcoFX. Windows støtter ikke ikonoppløsninger over 256px ved 256px, så jeg foreslår at du eksporterer et 256px bilde rett ut av Illustrator for å unngå ekstra komprimering.

Gå til Fil> importer bilde for å importere 256px png. Bruk 32 biters 256x256 innstillinger.

I venstre panel, høyreklikk> nytt bilde for å importere en med den neste oppløsningen. Du kan gå videre og lage en tilpasset import av 128x128 som en ekstra størrelse. Deretter importerer du resten av bildene.

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

For å endre et ikon for en mappe / plassering i Vista, endrer jeg i så fall ikonet "min datamaskin". Høyreklikk på det, velg egenskaper. Hvis du endrer en snarvei, går du til snarvei-fanen, eller hvis det er en mappe, går du til Tilpass-fanen. Klikk på Velg-ikonet og velg ICO-filen du lagret.

Bekreft bildevalg og ikonet skal lastes inn i den egendefinerte.

Konklusjon

Nå kjenner du prosessen med å lage et ikon fra grunnen, for både Mac OSX og Windows Vista. Enten du leser opplæringen fra Seksjon 1 for å følge illustrasjonsprosessen, eller hoppet rett til Seksjon 2 for å se hvordan du konverterer bilder til brukbare systemikoner, takker jeg deg for å følge opplæringen og håper å se noen flotte tilpasningskunst! Det er mange flotte steder å starte.

Abonner på Vectortuts + RSS-feed for å holde deg oppdatert med de nyeste vektoropplæringene og artiklene.