Ikoner er en integrert del av designet vårt. De er visuelle ledetråder for å indikere ulike handlinger, og kan gi et produkt en unik identitet. Men mange ganger velger vi å feire viktigheten ved å laste ned de samme ikonsettene og gjøre hvert ikon for hvert nettsted det samme som det før. For en måte å behandle noe av så viktig!

For å løse dette problemet har jeg laget en guide som hjelper 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 Google Material Design guide.

Prinsippene for Google Material Design

Hvordan sier du Google , 'Materiale er en metafor.' Den låner visuelle signaler fra den fysiske verden og skaper et nytt visuelt språk for å standardisere alle grensesnittene. Prinsippene for Material Design er tilgjengelig og det kan raskt brukes for å forbedre den visuelle appellen og brukeropplevelsen til forskjellige grensesnitt.

1. Bruk enkle geometriske former og slående farger

Materialdesigns “flat” designtrend, som også er basert på flate former, valgte nøye hvilken form som best representerte elementet som ikonet representerer. Velg nøye hvilken form som best representerer elementet som ikonet viser.

2. Legg til dybde med subtile skygger

En skygge er en god måte å lure øyet på og gi designet ditt en følelse av dybde, fordi det simulerer effekten av lys på et objekt.

Merk at naturlig lys ofte simuleres som å komme fra øvre venstre hjørne.

3. Bruk fargenyanser for å erstatte dråpeskygger

Hver farge brukes i flere fargetoner for å simulere visuell dybde. I Gmail-ikonet kan du for eksempel se forskjellige nyanser av rødt som brukes til M-formen, og en mørkere nyanse for grå brukes under konvoluttklaffen.

Hvordan du kan gjøre det: trinnvise demonstrasjoner

Vi vil bruke en enklere 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

• Last ned de ti ikonene som vi skal jobbe videre med her .
• Sjekk ut hele Googles gratis ikonsett her .

La oss komme i gang.

1. Lynikon

Del ikonet i to, og få toppen til å se forhøyet ut. Du kan oppnå dette ved å skape en skyggeeffekt i skjæringspunktet mellom begge former. Bruk tre gule nyanser - den lyseste på toppen, en mørkere i bunnen og hold den som er enda mørkere for skyggen.

2. Chatikon

I det opprinnelige ikonet har vi litt av skyggeeffekten i rommet mellom de to boblene, og det er der du vil lage en skygge.

I figuren nedenfor velger du punktet i rett vinkel i rommet, og beveger det opp til venstre til du danner en rett vinkel i øvre venstre hjørne.

Dupliser boblen over og flytt kopien ned og til høyre. Velg kopien og bobleformen under den, bruk Pathfinder for å lage et stykke, og hold bare ett skjæringspunkt med forrige kopi.

Nå kan du bruke de tre nyanser av blått og sette den lyseste på toppen, en mørkere i midten og den nest mørkeste under.

3. Merk av ikon

Vi vil lage en brettet papireffekt. Dupliser ikonet og fjern de to ekstra tipsene øverst til høyre, deretter venstre side på den andre siden for å fjerne to stykker til.

Dupliser bretten til venstre og flytt den over høyre.

Kryss de to formene for å skape en skyggeeffekt. Påfør deretter de tre fargenyansene mens du etterlater den mørkeste for skyggen, den nest mørkeste for det lengste stykket og den lyseste for toppen. ### 4. Flagg-ikon

Start med å avrunde kantene, og fjern deretter flaggbunnen.

Lag en fold-effekt, tegn to kryssende linjer diagonalt. Bruk 'Pathfinder', del formen på flagget med linjene, og bruk tre nyanser av grønt på flagget mens du lar basen være grå.

5. Hjerteikon

Dupliser hjerteikonet.

Isoler venstre halvdel av formen.

Tegn en diagonal linje ned fra det øverste høyre punktet.

Legg den resulterende formen over med hjertet, og flytt den til høyre for å trekke formen fra skyggen. Påfør de tre nyanser av rosa.

6. Fjellikon

Det tomme rommet inne i det opprinnelige ikonet indikerer hvor vi kan sette en skygge.

Lag to trekantformer fra hver topp.

Flytt en kopi av den minste til høyre, og trekk ut det resulterende skjæringspunktet som skyggeform.

Påfør tre nyanser av brunt ved å ha den lyseste til venstre, den nest lyseste for den største trekanten og den mørkeste for skyggen i midten. Påfør en liten radius i hjørnet for å glatte resultatet.

7. People-ikon

Velg og dupliser den nederste delen av personen til venstre. Juster kopien med personen til høyre. Velg nå de tre overlappende figurene, og bruk 'Divide' -verktøyet fra 'Pathfinder' -panelet. Nå, implementer fargene for å fullføre.

8. Kvadratisk flytende ikon

Velg bunnformen, og flytt deretter toppen av den øverste midten opp til den ser ut som en diamant.

Dupliser toppformen på diamanten, og flytt kopien ned 10 eller 20 px.

Velg de to nederste figurene, og bruk 'Divide' -verktøyet fra 'Pathfinder' -panelet.

Av de resulterende skjærende formene, er det bare å beholde de to nederste delene og slette eventuelle ekstra poeng.

Avslutt med å bruke tre nyanser av rødt mens du tildeler den mørkeste i midten.

9. Brevikon

Velg verktøyet 'Direkte valg (A)', og velg det nest høyeste punktet i bokstavformen.

Legg til et punkt på segmentet til høyre ved hjelp av 'Pen' -verktøyet.

Nå som du har et ekstra poeng, kan du omforme det negative rommet for å få det til å se ut som papir ved å løfte de to øverste punktene og flytte dem til høyre og venstre som vist.

Velg alle, og bruk en skilleform fra 'Pathfinder' -panelet. Skill den øverste papirformen fra konvolutten, og dupliser deretter toppen av konvolutten på toppen av papiret for å klippe ut skyggeformen før du påfører tre nyanser av blått.

10. Kakeikon

Isoler en duplikatversjon av bunnen av kaken.

Det reduserer bredden ved å flytte venstre og høyre kant innover.

Flytt den resulterende formen på toppen av det originale ikonet, og utvid de høyeste punktene for å overlappe frostingsformen.

Lag en inndeling av alle de overlappende formene med 'Pathfinder', og fjern de ekstra prikkene ved siden av den smale bunnen av kaken du opprettet tidligere.

Fullfør kaken din ved å bruke en lys oransje på frostingen og stearinlyset, en mørkere nyanse i bunnen og til og med en mørkere oransje for flammeformen og kantskyggen.

Forbedre utseendet til ditt ikonsett

Å lage ikoner med materialstilen kan oppnås med enkelhet. Du trenger bare en god kombinasjon av gjennomtenkte geometriske former, rike fargetoner og fallskyggeeffekter.

Den gode nyheten er at du ikke 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.

Jeg vil veldig gjerne se hva du lager. Del gjerne dine kommentarer og egendefinerte ikoner.