Hvordan lage en gjennomsiktig Battery Icon

How å lage en gjennomsiktig Battery Icon

I denne opplæringen, vil vi lage en detaljert ikon av et batteri som ligner på den som brukes for iPhone touch. Batteriet " drivstoff " Fargen kan endres samt " drivstoff " nivå, slik at ikonet som skal brukes til å opprette et batteri eller strømmåleren for applikasjoner, eller bare som en grafisk i alle typer design.



1. Lag Metal Cap av batteriet

Trinn 1

Vi vil begynne med å lage et nytt dokument og fylle det med en solid svart bakgrunn. Du kan lage din uansett størrelse du ønsker, mine er 600 x 400 piksler.

Nå som vi har vår dokumentet, vil vi begynne med å lage metal cap på slutten av batteriet. Start med å tegne en figur, som vist nedenfor. Fargene i gradient fra venstre til høyre er 90% grått, hvitt og svart. I tillegg gir objektet en 1px Feather og senke Opacity til 75%.

Trinn 2

Kopier (Kommando + C) dette objektet og lime inn kopien rett foran (Command + F) . Deretter dytte kopien én piksel til høyre med høyre piltast. Fargene for gradient fra venstre til høyre er 80% grå, svart, og 80% Gray. I tillegg heve Opacity av denne formen tilbake opp til 100%, og fjerne fjær på den ved å flytte den fra listen i Utseende-panelet til den lille papirkurvikonet under.

Trinn 3
< p> for å legge til noen høydepunkter til kantene, tegne to figurer som vist nedenfor med Pen Tool (P). Fyll dem begge med hvitt. Endre toppen figurens Opacity til 75% og den nederste figuren til 25%. Også gi både former en 2 piksler Feather.

Trinn 4

Det kan ikke være tydelig ennå, men vi nå kommer til å legge refleksjonene til metallet. Tegn en figur med Pen Tool (P) og plasser den som vist nedenfor. Den venstre farger på graderingen glideren er hvit og den riktige fargen er 90% grått. Gi den formen en 1px Feather også.

For bunnen refleksjon, tegne en annen form som vist. Stigningen er hvit til svart og formen har en 1px Feather. Også senke Opacity til 50%.

2. Opprett Transparent Body

Trinn 1

Nå skal vi begynne på den gjennomsiktige delen av batteriet. Begynn med å tegne figuren nedenfor med Pen Tool (P). Når trukket, fylle formen med hvit og senke Opacity til 50%

En enkel måte å tegne formen er å trekke den ene halvdelen av det -. Forlate banen åpen, da, Kopier, Lim inn, og reflektere kopien av formen for å skape den andre halvparten. Til slutt, bare koble poeng med Pen Tool (P). Dette sikrer også at den endelige formen vil være symmetrisk.

Trinn 2

Nå kunne vi bare bruke en svart til grå gradient på denne formen, men vi kommer til å bruke en opasitet maske i stedet. Det er litt mer arbeid å lage, men det vil tillate oss å endre bakgrunnen bak vår batteri når vi er ferdige. For å opprette masken, kopiere og lime inn formen foran den opprinnelige. Bringe sin Opacity tilbake opp til 100%, og fyll den med en gradient som vist nedenfor. Den venstre glidebryteren er 50% grå og retten glideren er svart.

Trinn 3

Nå velger begge former, så i rullegardinmenyen i Transparency panelet velger Lag Opacity Mask. Når du oppretter masken, kan du ikke legge merke til en endring, men endre fargen på dokumentet bakgrunnen, og du vil se fordelene av tettheten masken.

Trinn 4

Vi vil nå begynne å legge litt gjenskinn og refleksjoner å gjøre glasset ser gjennomsiktig. Begynn med å tegne to figurer som vist nedenfor. Fyll dem begge med hvite og senke sine Uklarheter til 75%. Fjær toppen en av 2 piksler og den nederste av 3.5px.

Trinn 5

Vi vil også legge til en Opacity Mask til toppen høydepunkt. Lime inn en kopi av den toppform foran seg selv, ta sitt Opacity tilbake til 100%, og ta av Feather. Fylle den med en gradient som vist nedenfor, som går fra 75% grå til svart. Til slutt, opprette en Opacity Mask som vi gjorde før.

Trinn 6

Vi vil legge til en annen refleksjon til glasset for å matche den på metall. Tegn en figur som vist nedenfor, fyll den med hvitt, gir det en 2 piksler Feather, og senke Opacity til 50%.

Trinn 7

Følg vår rutine for å legge til Opacity Mask. Lime inn en kopi av formen foran den opprinnelige og fyll den med en gradient som går fra 15% grå til 85% grått (ikke glem å fjerne fjær på formen).

Trinn 8

igjen opprette Opacity Mask. Også, når du har opprettet masken, endre formen er Blending Mode til Screen i Gjennomsiktighet-panelet.

Trinn 9

Nå er du sannsynligvis får ideen om hvordan å skape vår refleksjoner. Så, tegne en annen form for en refleksjon som vist nedenfor, og fyll den med hvitt. Senke Opacity til 40% og Feather det ved 2 piksler.

Trinn 10

For kopi av formen som brukes for tettheten masken, bruker en 50% grå til svart gradient, som vist nedenfor .

Step 11

Og nå? Du gjettet det. Lag Opacity Mask.

Trinn 12

Alright, vår siste refleksjon! En gang til, tegne formen vist nedenfor, fyll den med hvit, senke Opacity til 50%, og Feather det ved 2 piksler.

Trinn 13

Kopier og lim inn formen å gjøre opacity Mask. Bruk en hvit til svart gradient for formen.

Trinn 14

Og for siste gang, lage Opacity Mask.

3. Duplisere Metal Cap

Trinn 1

Vi skal nå legge den andre metallendestykket til vår batteri, noe som er ganske lett, ettersom de er begge identiske. Velg alle former som utgjør endestykket, og gå til Object > Transform > Reflektere. I dialogboksen som vises, velger Vertikal alternativknappen for Axis og klikk på Kopier. Dra de kopierte og reflekterte figurer til den andre enden av batteriet.

Trinn 2

Opprette den positive kontakten på batteriet er raskt og enkelt. Bare velg alle figurene du bare brukes til metallendestykke, deretter kopiere og lime dem inn i front. Med dem alle valgt, Alt-klikk og dra på toppen eller bunnen håndtaket midt i gruppen til å krympe dem vertikalt. Du kan også være lurt å krympe dem horisontalt litt også.

Når du har fått dem riktig størrelse, send dem til baksiden (Command + Shift + [), og deretter bringe dem frem ett nivå ( Command +]). Hvis det gjøres riktig, bør kontakten være rett bak metallendestykke.

4. Lag den grønne batteri Glow

Trinn 1

Det siste vi må gjøre for å fullføre selve batteriet er å legge til noen avrundede lunter å representere inne endene av glass. Tegn to figurer, som vist nedenfor (eller bare tegne en og kopiere og lime). Fyll den til høyre med hvit og senke Opacity til 25%, og fylle den på igjen med svarte og senke Opacity til 50%. I tillegg endre Blending Mode til en til venstre for å overlegg. Endelig Feather begge former av 3.5px

Trinn 2

Vi skal nå jobbe på det siste elementet av design, ". Drivstoff " (Batteri energi). Tegn en figur med Pen Tool (P) som vist nedenfor. Du kan lage energi nivå hva du ønsker, så vel som den fargen du ønsker. Jeg valgte om to tredjedels fulle og brukte en grønn gradient

Trinn 3

Når du har det utseendet du ønsker for ". Drivstoff, " sende den til baksiden. Etterpå hente den frem to ganger slik at det er rett foran basen gjennomsiktig lag, men bak refleksjoner.

Trinn 4

Til slutt kopierer den svarte avrundet sliver form på venstre kant av glasset og dra den til kanten av " drivstoff, " endre deretter sin fyllfarge til hvit.

Trinn 5

Til slutt av design, legge til noen høydepunkter på metalldelene på batteriet ved å tegne ovaler og fylle dem med hvitt. Deretter legger en fjær til dem og senke sine Uklarheter

Trinn 6

I tillegg legger en Ytre glød til ". Drivstoff " forme (Effect > Stylize > Ytre glød). Kontroller at Blending Mode er satt til Screen. Det er lurt høydepunkt farge for å matche fargen på drivstoff. For min grønne " drivstoff, " Jeg brukte en lys limegrønn farge på skinnet (# 19FF00). Gjør Opacity 75% og Blur 11px.

Power Up, er du ferdig!

Det er det! Du har nå fått et batteriikon som kan brukes til hva design du trenger det for, og selv som en modifiserbar grafisk for en interaktiv animasjon eller et program. Jeg håper du har fått noen nyttige teknikker og ideer fra denne opplæringen.



Previous:
Next Page: