Ikoner er en integrert del av designene våre. De er visuelle signaler for å indikere forskjellige handlinger, og de kan gi en unik identitet til et produkt. Men altfor ofte velger vi å feire deres betydning ved å laste ned de samme ikonsettene og gjøre hvert ikon for hvert nettsted mer eller mindre det samme. Hva en måte å behandle noe av så viktig.
For å løse dette problemet har jeg laget en guide for å hjelpe designere å legge til visuell dybde i ikonene sine og gjøre dem unike for produktet de representerer. Denne opplæringen er i stor grad inspirert av den innflytelsesrike Google Material-designen.
Som Google sier det, “materiale er en metafor.” Det låner visuelle signaler fra den fysiske verdenen og skaper et nytt visuelt språk for å standardisere alle deres grensesnitt. Prinsipper for materialdesign er tilgjengelig og kan raskt brukes for å forbedre grensesnittets appell og brukeropplevelse.
Den flate designtrenden inspirerte Material Design, som også er basert på grunnleggende flate former. Velg nøye hvilken form som best representerer elementet som ikonet viser.
En skygge er en god måte å lure øyet og gi en følelse av dybde til designet ditt, fordi det stimulerer effekten av at lys blir kastet på en gjenstand.
Legg merke til at naturlig lys ofte simuleres som å komme fra øvre, venstre hjørne.
Hver farge brukes i flere nyanser for å simulere visuell dybde. I Gmail-ikonet kan du for eksempel se at forskjellige røde nyanser brukes til formen på M, og en mørkere grå nyanse brukes under konvoluttlokket.
Vi bruker en forenklet versjon av Material Design-stilen, og for hvert ikon bruker vi bare tre nyanser av samme farge og holder skyggene flate og korte, i stedet for den vanlige 'lange skyggen' -effekten.
Bryt originalikonet i to, og få den øverste delen til å virke løftet. Du kan oppnå dette ved å skape en skyggeeffekt i skjæringspunktet mellom de to formene. Bruk tre gule nyanser - lysere på toppen, en mørkere i bunnen, og hold den mørkeste nyansen for skyggen.
På det opprinnelige ikonet har vi et snev av en skyggeeffekt i gapet mellom de to boblene, det er her du vil lage en skygge.
På den nedre formen velger du punktet som danner den rette vinkelen i spalten, og beveger det oppover til venstre til du danner en rett vinkel øverst til venstre.
Dupliser toppboblen og flytt kopien ned og til høyre. Velg kopien og den nedre bobleformen, bruk 'Pathfinder' for å lage en divisjon, og hold bare skjæringspunktet med den forrige kopien.
Nå kan du bruke tre nyanser av blått og gi den lyseste på toppen, mørkest i midten og den nest mørkeste til bunnen.
Vi lager en brettet papireffekt.
Dupliser ikonet, og fjern de to ekstra punktene helt øverst til høyre, deretter helt til venstre for å få to stykker ut.
Dupliser venstre brett, og flytt den på høyre side.
Kryss de to formene for å skape skyggeeffekten. Påfør deretter tre nyanser av farger mens du holder det mørkeste for skyggen, det nest mørkeste for det lange stykket og den lysere nyansen for toppen.
Start med å avrunde kantene, og trekk deretter ut basen av flagget.
For å skape en sammenleggbar effekt, spor to linjer som krysser diagonalt. Bruk 'Pathfinder' til å dele flaggformen med linjene, og påfør tre nyanser av grønt på flagget mens du holder basen grå.
Dupliser hjerteikonet.
Isoler venstre halvdel av formen.
Spor en diagonal linje nedover, fra toppunktet til høyre.
Overlapp den resulterende formen med hjertet, og flytt den til høyre for å trekke skyggeformen. Påfør de tre nyanser av rosa.
Det tomme gapet inne i det opprinnelige ikonet indikerer hvor vi kan plassere en skygge.
Lag de to trekantformene ut av hvert valg.
Flytt en kopi av den mindre til høyre, og trekk ut det resulterende skjæringspunktet som skyggeform.
Påfør tre nyanser av brunt ved å holde den lyseste til venstre, den nest lyseste til den store trekanten og den mørkeste for skyggen i midten. Bruk en hjørneradius for å myke resultatet.
Velg og dupliser den nedre delen av personen til venstre. Juster kopien med personen til høyre. Velg nå de tre overlappende formene, og bruk verktøyet 'Del' fra 'Pathfinder' -panelet. Nå, implementer fargene for å fullføre.
Velg den nedre formen, og flytt midtpunktet oppover til det ser ut som en diamant.
Dupliser den øvre diamantformen, og flytt kopien ned 10 eller 20 px.
Velg de to nedre figurene, og bruk 'Divide' -verktøyet fra 'Pathfinder' -panelet.
Fra de resulterende kryssede figurene, beholder du bare de to nederste delene, og sletter eventuelle ekstra poeng.
Pakk den opp ved å bruke tre nyanser av rødt mens du tildeler den mørkeste i midten.
Velg det andre høyere punktet i konvoluttformen med 'Direkte markeringsverktøy (A)'.
Legg til et punkt på segmentet til høyre ved å bruke 'Penneverktøyet'.
Nå som du har et ekstra punkt, kan du omforme det negative rommet slik at det ser ut som et papir ved å løfte de to øvre punktene og flytte dem til høyre og venstre som vist.
Velg alt, og bruk en inndeling fra 'Pathfinder' -panelet. Skill den øverste papirformen fra konvolutten, og dupliser deretter konvoluttdelen på toppen av papiret for å klippe ut skyggeformen før du bruker tre blå nyanser.
Isoler en duplisert versjon av den nederste delen av kaken.
Smal bredden ved å flytte venstre og høyre kant innover.
Flytt den resulterende formen på toppen av det opprinnelige ikonet, og utvid de høyere punktene for å overlappe glasurformen.
Lag en inndeling av all den overlappende formen med 'Pathfinder', og fjern de ekstra punktene ved siden av den smale kakebunnen du opprettet tidligere.
Fullfør kaken din ved å bruke en lys oransje på glasuren og stearinlyset, en mørkere nyanse på basen og en enda mørkere oransje for flammeformen og skyggekanten.
Å lage ikoner med Materials stil kan oppnås med enkelhet. Du trenger bare en god kombinasjon av gjennomtenkte geometriske former, dristige fargenyanser og en skyggeeffekt.
Den gode nyheten er at du ikke engang trenger å lage alle ikonene fra bunnen av, slik vi gjorde i denne opplæringen. Du kan starte fra eksisterende gratis, flate ikoner og bruke de enkle teknikkene du nettopp har lært.
Gi oss beskjed om hva du synes! Legg igjen dine tanker, kommentarer og tilbakemeldinger nedenfor.
• • •