Share
Med utgivelsen av Apples nyeste mobiloperativsystem iOS 7 trodde jeg det ville være fint å lage noen egendefinerte ikoner for ikonene for dette nye operativsystemet. I denne opplæringen vil vi lage noen ikoner i den flate, tynne linjestilen som brukes i hele iOS 7. Vi lager både normale og valgte stater for disse ikonene i Adobe Illustrator, så følg fri for å følge med!
La oss begynne med å lage vår base faneblad. Vi må opprette et nytt dokument som er 640 x 98pt. Vær oppmerksom på at vi bruker "Poeng"for denne opplæringen. Vi vil også aktivere Snap to Grid samt justere dokumentgitteret for å være hver 1pt.
Når dokumentet er satt opp, velg Rektangelverktøy (M) og tegne et rektangel som er i samme størrelse som Artboard, og juster fargen som vist nedenfor.
For å fullføre bakgrunnslinjens bakgrunn, legger vi til en skillelinje langs toppen som har samme bredde som Artboard, men bare 2PT høyt deretter juster det med toppen av Artboard og fyll det med følgende farge
Dette vil fullføre fanebladet slik at når du er ferdig, vær så snill å låse laget slik at du ikke ved et uhell velger det senere.
Velg Avrundet rektangelverktøy og opprett et nytt rektangel som vist nedenfor. Fjern nå fyllingen og juster Stroke til det du ser nedenfor.
Aktiver Ellipseverktøyet (L) og lag en sirkel med samme slag som før og og sentrere det i det avrundede rektangel som vist under.
Med Ellipseverktøyet (L) fremdeles valgt, lag opp to sirkler med følgende størrelser og juster dem som vist nedenfor. Fyll disse med samme farge som slag og fjern slaget.
For denne neste delen vil du zoome inn litt, slik at du kan se hva du gjør. Aktiver Pennverktøyet (P) og klikk for å lage fire nye ankerpunkter øverst på det avrundede rektangel. Gruppe (Command + G) dem sammen i to og de to nærmeste punktene skal være 3pt fra hverandre med et stort gap mellom begge grupper.
Bytt til Direkte utvalgsverktøy (A) og velg de to interpunktene vi nettopp har laget, og trykk på pilknappen på tastaturet 5PT.
Aktiver Rektangelverktøy (M) og lag et nytt rektangel og fyll det og juster det som vist nedenfor.
Med det er selve ikonet ganske mye fullført. Du er velkommen til å velge alt elementet og Gruppe (Command + G) dem sammen.
Aktiver Typeverktøy (T) og vi legger til en etikett. Standard font for iOS 7 er "Helvetica Neue" som skal være en forhåndsinstallert font. Vi gjør fargene det samme som ikonet og justerer innstillingene som vist nedenfor.
Med det er vårt kameraikon ganske mye komplett, men la oss ta det et skritt videre og også designe en valgt / aktivert tilstand.
For å gjøre det, dupliser kameraikonet og skjul originalen i lag panel. Velg nå det avrundede rektangelet som utgjør kameraets kropp, samt det lille rektangelet som angitt lukkerknappen og fjern stroke og legg til en fyllfarge etter eget valg. Jeg skal bruke en fin blå farge
Velg den større sirkelen som har slag og besøk Objekt> Utvid Utseende å konvertere slagtilfellet til en form.
Med denne nye formen valgte, velg også de mindre kretsene og besøk Objekt> Forbindelsesvei> Lag å bli med i disse figurene i en. Velg nå både sirkler og kamerahus og under Pathfinder panelet (Vindu> Pathfinder) å velge Minus Front for å fjerne sirkler fra kamerahuset.
Du kan nå kopiere tekstetiketten og justere fargen for å matche den nye ikonfargen
Med Ellipseverktøyet (L) aktivert, opprett to sirkler og senter dem med hverandre som vist nedenfor.
Bytt til Konverter Anchor Point Tool og klikk på det nederste ankerpunktet for den største sirkelen for å lage et punkt. Med det punktet fortsatt valgt, hold Shift på tastaturet og trykk på Pil ned på tastaturet to ganger for å flytte det punktet nede 20 pkt.
Jeg er ikke en stor fan av hva kretsens kurve gjør til den nederste halvdelen av stiften, så la oss justere dette litt.
Bytt til Pennverktøyet (P) og hvor midtpunktet på pinformen er å skape et nytt ankerpunkt ved å klikke på banen.
Med denne nye ankerbanen opprettet, byttes til Direkte utvalgsverktøy (A) og velg det nederste håndtaket og dra det mot selve ankerpunktet slik at det ikke er noe bunnhåndtak.
Nå juster topphåndtaket til dette ankerpunktet til det er nede og over litt mer og ta deretter ned håndtaket på ankerpunktet fra siden av en gangs sirkel.
Pass på at du kopierer denne prosessen på motsatt side før du går videre.
Du kan nå legge til en etikett på dette ikonet som du gjorde før med det forrige ikonet. Du kan også gruppere ikonformene sammen også.
For å lage den valgte versjonen dupliserer ikonet og fyller det med høydefargen
Velg den lille sirkelen og juster størrelsen som skal være 12 x 12pt. Velg nå sirkelen og pinformen sammen og velg Minus Front fra Pathfinder.
Juster nu fargen på etikettteksten.
Velg Avrundet rektangelverktøy og lag et rektangel med et indre slag som sett under.
Bytt til Rektangelverktøy (M) og lag et rektangel som er den samme bredden som den avrundede under og juster den til toppen av det avrundede rektangel.
Velg både avrundet rektangel og mindre rektangel og velg Forene fra Pathfinder panel.
Med Rektangelverktøy (M) fortsatt valgt, lag tre flere rektangler som er 2 x 40pt og senter dem inn i større rektangel.
Velg disse rektanglene og Gruppe (Command + G) dem sammen. Med gruppen valgt besøk Effekt> Warp> Shell Upper og bruk følgende innstillinger.
Med dette warped formet valgt besøk Objekt> Utvid Utseende å konvertere den til en form.
Bytt nå til Direkte utvalgsverktøy (A) og velg stiene langs toppen og fjern dem.
Bytt tilbake til Rektangelverktøy (M) og lag et rektangel som er 46 x 2pt og juster den til toppen av ikonet.
Aktiver Avrundet rektangelverktøy og opprett et avrundet rektangel med indre slag og juster det som vist nedenfor.
Tegn et annet rektangel rett under toppen av søppelhetten, og kontroller at den dekker det nederste håndtaket.
Velg både håndtaket og det nye rektangelet og velg Minus Front fra Pathfinder panel.
Gruppe (Command + G) søppelikonelementene sammen, og du kan nå legge til en etikett nedenfor som du har gjort før.
Dupliser papirkurvgruppens gruppering og juster fyllfargen til høydepunktsfargen din
Bytt til Direkte utvalgsverktøy (A) og velg et ankerpunkt fra innsiden av papirkurven og treff slett på tastaturet to ganger for å lage en fylt form.
Velg de tre rektangelet inne i søppelikonet (jeg har tilbakemelding dem slik at du kan se dem på skjermbilder) og besøke Objekt> Forbindelsesvei> Lag. Velg nå papirkurvformen og de tre rektanglene og velg Minus Front fra Pathfinder panel.
Pass på at du også justerer etikettens høydefarge også.
Velg Ellipseverktøyet (L) og lag en sirkel som er 52 x 52pt og har et intervall som de andre ikonene.
Med Ellipseverktøyet (L) fortsatt aktivert opprette en ny sirkel som er 8 x 8pt fyll den med vår grå farge og plasser den øverst i vår større sirkel. Bytt nå til Direkte utvalgsverktøy (A) og velg det nederste ankerpunktet og knyt det opp 3pt ved å trykke Opp på tastaturet tre ganger. Dupliser denne dentedformet og roter den og legg den deretter på bunnen av den større sirkelen.
Velg begge døde former og Gruppe (Command + G) dem sammen. Med den gruppen valgt Høyreklikk og besøk Transform> Transform hver og skriv inn følgende innstillinger og klikk deretter Kopiere. Når det er blitt kopiert, trykk Kommando + D på tastaturet for å duplisere denne kopien / roteringsfunksjonen fire ganger, slik at du oppretter alle tannhjulene.
Velg Ellipseverktøyet (L) og lag en sirkel som er 12 x 12pt med vårt indre slag som før og senter det i større sirkel.
Bytt til Rektangelverktøy (M) og tegne et rektangel som er 2PT Bred og strekker seg inn i radiusen til den indre sirkelen til ytre sirkel og fyll den med vår grå farge
Med dette rektangelet er valgt, bytt til Rotate Tool (R). Mens du holder på Alternativ tasteklikk i midten av sirkler hvor du vil at rotasjonsaksen skal skje, deretter skriv inn 120 i Angle-boksen og trykk Kopiere. Gjør dette igjen med kopien som er valgt for å lage ditt tredje og siste rektangel.
Du kan også legge til etiketten din i samme stil som de andre.
Gruppe (Command + G) elementene sammen og kopiere dem og justere fargen slik at vi kan lage vår uthevede versjon.
Velg begge sirkler som utgjør kjøretøyets kropp og besøk Objekt> Utvid Utseende å konvertere dem til former.
Velg den minste sirkelen og de tre rektanglene og Forene dem fra Pathfinder panel.
Bytt til Direkte utvalgsverktøy (A) og velg et ankerpunkt fra den indre delen av den større sirkelen, trykk deretter på Slett på tastaturet et par ganger for å fjerne det slik at du er igjen med en stor fylt sirkel.
Velg den større sirkelen så vel som tannhjulene og Forene dem fra Pathfinder panel.
Velg både girformen og de indre stolpene og liten sirkelform og velg Minus Front dem fra Pathfinder panel.
Pass på at du også justerer etikettfargen
Med Avrundet rektangelverktøy opprett en pilleform av følgestørrelsen og vårt indre slag.
Tegn en annen Avrundet rektangel med følgende informasjon og posisjon som vist nedenfor. Med denne nye pillen form valgte besøk Objekt> Utvid Utseende å konvertere slagtilfellet til en form.
Bytt til Rektangelverktøy (M) og tegne et rektangel så det dekker den øverste halvdelen av pilleformen vi gjorde i det forrige trinnet.
Velg både rektangelet og pilleformen og velg Minus Front fra Pathfinder panel.
Bytt til Rektangelverktøy (M) og lag et rektangel med følgende dimensjoner og plasser det som vist nedenfor.
Opprett et annet rektangel med følgende informasjon og posisjonering.
Lag ett siste rektangel med følgende informasjon og posisjonering.
Bytt til Ellipseverktøyet (L) og opprett en 3 x 3pt sirkel og senter den inne i pillerformen to punkter vekk fra innsiden av toppen.
Dupliserer sirkelen ni flere ganger og plasser dem to punkter fra hverandre. Du kan nå legge til etiketten din nedenfor.
Gruppe (Command + G) mikrofonen deler sammen og dupliserer dem og bytter den til vår høydepunktsfarge
Velg prikker og indre rektangel sammen og besøk Objekt> Forbindelsesvei> Lag
Velg pilleformen og bytt stroke til fyllingen av vår høydepunktsfarge. Velg nå pilleformen og sirkler / rektangel og velg Minus Front fra Pathfinder panel.
Pass på at du også justerer etikettfargen også.
Din faneboks er ferdig og klar til å bli lagt til iOS i neste 7-designprosjekt. Jeg håper jeg kunne vise deg noen teknikker for å lage tynne IOS 7-inspirerte ikoner som du enkelt kan duplisere for andre former som passer til appikonet ditt behov.
Accentsconagua