Share
I denne opplæringen lærer du hvordan du oppretter en glassknapp ved hjelp av enkle former, pathfinder-boks, klipping og opasitetsmasker og blandemodus. Du lærer også hvordan du optimaliserer vektorgradsarbeidet som en webgrafikk, og hvordan du raskt erstatter fargene til de nødvendige elementene.
Ta Rektangelverktøyet (M) og opprett et firkant med en blå fylling (C = 25, M = 2, Y = 0 og K = 0)
Ta Ellipseverktøyet (L) og lag en sirkel. Velg firkanten og sirkelen, juster dem mot senter og horisontale linjer, ved hjelp av paletten Juster.
Nå trim sirkelen til firkantet form. Kopier torget og lim det inn foran, velg sirkelen og øvre firkant og trykk på kryssskjermknappen fra paletten Pathfinder.
Fyll den resulterende formen med en lineær gradient fra blå (C = 100, M = 65, Y = 0 og K = 0) til lyseblå (C = 53, M = 0, Y = 0 og K = 0) Sett blandemodus til Multiply i paletten Transparency.
Lag to flere sirkler. Radien av disse kretsene er lik verdien av torgets side, og deres sentre ligger i torgets nedre venstre og øverste høyre hjørne.
Ved å bruke teknikken som er beskrevet i trinn 2, trim disse sirkler til firkantet form.
Velg de to resulterende figurene og klikk på Divide-knappen fra paletten Pathfinder. Opphev de resulterende objektene. Som et resultat bør du ha tre former.
Fyll dem med forskjellige gradienter og sett Blending Mode - Multiply for hver av dem. Fyll den første formen med en radial gradient bestående av tre farger: 1 (C = 17, M = 0, Y = 0 og K = 0); 2 (C = 25, M = 2, Y = 0 og K = 0); 3 (C = 62, M = 9, Y = 0 og K = 0).
Fyll den andre formen med lineær gradient bestående av to farger 1 (C = 100, M = 33, Y = 0 og K = 0); 2 (C = 17, M = 0, Y = 0 og K = 0).
Fyll den tredje formen med lineær gradient bestående av tre farger: 1 (C = 38, M = 4, Y = 0 og K = 0); 2 (C = 100, M = 65, Y = 0 og K = 0) og 3 (C = 34, M = 0, Y = 0 og K = 0).
Kopier formen i midten og lim inn den foran, erstatt fargenene med sin gradient med: 1 (C = 100, M = 72, Y = 0 og K = 0) og 2 (C = 33, M = 0, Y = 0 og K = 0).
Lag to andre former ved hjelp av sirkelen og paletten Pathfinder, ved å bruke teknikkene nevnt ovenfor.
Fyll den første formen med en lineær gradient fra hvit til hvit med 0% opasitet og sett blandemodus til skjerm i transparentpaletten.
Fyll den andre formen med lineær gradient fra hvit til hvit med 0% opacity og sett blandingsmodus - overlegg i paletten Transparency.
Kopier den første formen og lim den over alle objekter, flytte den opp i paletten Lag. Endre gradienten i denne formen, flytt den venstre glidebryteren en littler til høyre.
Sett knappen i firkantet form med avrundede hjørner. Kopier bunnfeltet og lim det inn foran alle objektene. Hold plassen valgt, gå til Effekt> Konverter til form> Avrundet rektangel og angi verdiene som er angitt i figuren under. Krumningsradiusen avhenger av størrelsen på knappen, så jeg lar deg gjøre ditt eget valg.
Kopier denne formen og lim den inn foran, vi trenger det for videre oppbygging. Lås underlaget med denne formen i Lagpaletten og gjør den usynlig. Velg alle objekter (kommando + A) og gå til Objekt> Klippemask> Lag.
Lås opp underlaget med formen av et avrundet torg og gjør det synlig. Kopier denne formen og lim den inn foran. Reduser nå størrelsen på denne formen - bare litt - ved å bruke valgverktøyet (V) og hold nede Alt og Shift.
Velg de to runde rutene og trykk Minus Front-knappen fra paletten Pathfinder.
Fyll oppnådd form med lineær gradient fra blå (C = 100, M = 0, Y = 0 og K = 0) med Opasitet 50% til hvit farge med Opacity 0%.
Opprett et annet avrundet rektangel ved hjelp av det avrundede rektangelverktøyet med en litt større størrelse enn den en av knappen. Plasser den opprettede figuren under alle underlagene og fyll den med en lineær gradient bestående av tre farger: 1 (C = 100, M = 100, Y = 0 og K = 77); 2 (C = 100, M = 16, Y = 0 og K = 0); 3 (C = 100, M = 66, Y = 0 og K = 0).
Lag nå metalldelen av knappen. Den vil bestå av to avrundede firkanter. Den første er fylt med lineær gradient bestående av tre nyanser av grå farge: 1 (K = 71), 2 (K = 14) og 3 (K = 26).
Den andre er litt mindre enn den første og er fylt med lineær gradient bestående av tre nyanser av grå farge: 1 (K = 45), 2 (K = 0) og 3 (K = 14). Når knappen er klar, grupperer du alle elementene.
Lag en refleksjon av knappen. Kopier knappen og lim den inn foran. Flytt knappen vertikalt ned, hold nede Skift-tasten. Det vil bli refleksjon av knappen.
Velg refleksjonen og gå til Objekt> Transform> Reflekter og sett parametrene i dialogboksen vist i figuren nedenfor.
Ta nå rektangelverktøyet (M) og opprett et rektangel med en svart og hvit gradientfylling. Størrelsen på rektangelet bør være slik at de helt kunne gjemme refleksjonen av knappen.
Velg refleksjon av knappen og det øverste rektangelet, velg Lag oppaktsmaske fra menyen på paletten Transparency.
Knappen med refleksjon er klar.
Ofte må du ha flere like elementer i forskjellige farger. La oss se hvor raskt det er å erstatte fargen på en knapp.
Velg alle elementene du vil erstatte fargen til, og gå til Rediger> Rediger farger> Recolor Artwork, og klikk deretter på Rediger-fanen i den åpne dialogboksen. Til slutt klikker du på Link Harmony farger knappen.
Nå kan du gjøre alle tilgjengelige fargeversjoner til den nødvendige fargeseksjonen mens du ser på fargeendringer i vårt kunstverk.
Når du lager bilder for web og enheter, er vektorbildet ikke sluttproduktet, du må bruke rasterbilder. Derfor må du se vektoren som en raster. For å gjøre dette, gå til Vis> Pixel forhåndsvisning. Som du ser, er det mange problemområder når du zoomer inn. De vises siden bildet ikke gjengis innenfor Pixel Grid, og det er derfor linjene ser sløret ut når det er en raster.
Adobe Illustrator CS5 gjør at vi kan gjøre bildet ser skarpere ut. Velg din grafikk og åpne Transform paletten (Vindu> Transform), klikk nå på Juster til pikselruten i denne paletten.
Nå er bildet ditt klart for å bli lagret som en rastertype som PNG eller JPG (Fil> Lagre for web og enheter).
Når du har denne kunnskapen og den nødvendige programvaren, kan du enkelt lage webgrensesnittelementer som ikke bare ser bra ut, men gjør det perfekt.
Accentsconagua