Ui Design
Hvordan du raskt kan gjøre kjedelige ikoner til originale mesterverk
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.
Googles prinsipper for materialdesign
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.
1. Bruk enkle geometriske former og fet farger
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.
2. Legg til dybde med subtil skyggelegging
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.
3. Bruk fargenyanser til å erstatte skyggene
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.
Hvordan du kan gjøre det også: trinnvise demonstrasjoner
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.
Ressurser
- Sjekk hele gratis ikonet fra Google her .
La oss komme i gang.
1. Boltikon
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.
2. Chatikon
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.
3. Merk av ikon
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.
4. Flaggikon
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å.
5. Hjerteikon
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.
6. Fjellikon
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.
7. People Icon
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.
8. Flytende firkantet ikon
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.
9. Brevikon
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.
10. Kakeikon
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.
Forbedre ikonets sett og følelse
Å 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.
• • •
