Tutorial: RSS ikon

Fra Åpen sone for eksperimentell informatikk
Gå til: navigasjon, søk
RSS-ikon tutorial

Innhold

Tutorial: RSS-ikon

Dette er en tutorial for Illustrator. Den er lagd i CS5. 15 enkle steg mot et RSS ikon til bruk for web. Trykk på bildet til høyre for å se grafisk gjennomgang. Hurtigtaster ligger i parenteser bak navnet på verktøyet.

Sjekkliste

  • Illustrator

Mål

done-01.png

Steg

  1. Først velg Rounded Rectangle Tool i menyen til venstre.
  2. Klikk på ditt artboard og legg inn innstillingene. Dette ikonet må være kvadratisk. Mine valg er width: 200 px, height: 200 px og corner radius: 20 px.
  3. Nå må kvadratet fylles med en gradient. Vi bruker gradient for å få en pen dybde i ikonet. Velg gradient verktøyet i menyen til høyre (se steg 3 i illustrasjonsbildet). Fyll den ene enden med oransje (R: 247, G: 147, B: 30), og den andre enden med den samme oransje fargen. På sistnevnte, også juster fargen litt mørkere ved hjelp av paletten inne på gradient verktøyet. Merk at gradient type skal være satt til Linear og vinklingen til -90 grader.
  4. I neste steg skal vi bruke Offset Path. Denne finner på Object > Path > Offset Path i menyen øverst i programmet. Sett Offsett til -5 px.
  5. Når steget med Offset Path er gjort, vil du se et nytt kvadrat innenfor det du hadde. Klikk på dette og høyreklikk. Gå til Transform > Rotate og roter dette 180 grader.
  6. Videre skal vi lage selve RSS logoen. Velg Ellipse Tool (L) i menyen til venstre. Klikk og dra en passe stor sirkel. Velg Stroke i menyen til høyre og sett Weight til 16 pt. Fjern eventuelle farger som fyller sirkelen.
  7. Nå må vi fjerne noen punkter. Velg Direct Select Tool (A) i menyen til venstre. Og klikk på det punktet i sør på sirkelen, og så Delete. Deretter klikk på punktet i vest på sirkelen og trykk Delete. Nå har du første, og største, bue i RSS-ikonet.
  8. Kopier nå denne ved å klikke på buen og holde inn Alt knappen - og dra. Eller bare Ctrl+C, Ctrl+V om du vil. Dra den til venstre for din første bue. Velg Select Tool (V) og dra endene slik at de matcher den store. Med default innstillinger i Illustrator vil du få opp grønne hjelpe-linjer.
  9. Lag så en liten sirkel ved Ellipse Tool (L) og plasser den helt til venstre for de to buene.
  10. Nå skal du markere de to buene. Klikk på den ene, så hold inn Shift og trykk på den andre. Velg så Object > Path > Outline Stroke i toppmenyen. Dette vil gjøre om stroke til objekt (figur). Så markerer vi buene, puss sirkelen og fyller de med en gradient fra veldig lysgrå, til lysgrå.
  11. Mens du har de markert, også velg at buene og sirkelen skal ha en 1 pt stroke med lysgrå. Dra buene og sirkelen over kvadratet ditt, skaler slik at de passer fint (se illustrasjonsbilde).
  12. Klikk nå på ditt innerste kvadrat. Kopier dette, og dra det litt unna ikonet ditt.
  13. Bruk Ellipse Tool (L) og tegn en oval over kvadratet (se illustrasjonsbilde). Bruk Align verktøyet for å sentrere kvadratet i forhold til ovalen (Horizontal Align Center). Dette verktøyet finner du som en del av Pathfinder under Window > Pathfinder i toppmenyen. Jeg kan anbefale å alltid ha Pathfiner oppe, ettersom dette er et veldig nyttig verktøy.
  14. Når du har sentrert figurene, bruker du Pathfinder sitt valg Intersect. Det vil klippe bort alt annet enn det området som blir overlappet av både ovalen og kvadratet.
  15. Dra din nye figur bort til ikonet ditt og plasser den der den hører hjemme (det er bare ett mulig sted, se illustrasjonsbilde om du er usikker). Husk å fyll fargen på den nye figuren til hvit. Denne skal ikke ha noe stroke. Velg Transparency i høyremenyen og sett Opacity til 20%. Om du vil kan du legge på et par hvite, små sirkler og skru ned dems opacity til 20% for å litt fancy greier på.


Og vips du er ferdig!

Personlige verktøy
Navnerom

Varianter
Handlinger
Navigasjon
Kategorier
Verktøy