Quick Tips: Hvordan lage en Pixel Perfect Glass Knapp med Adobe Illustrator CS5
Dette innlegget er en del av en serie kalt Web og Interface Design Med Vector.Create en grønn Liggende Nettstedet på Adobe IllustratorCreate et sett med glanset Etiketter og lagre dem for Web

I denne opplæringen vil du lære hvordan du oppretter en glass-knappen ved hjelp av enkle former, stifinner boks, klipping og opasitet masker, og blandingsmodi. Du vil også lære hvordan du kan optimalisere din vektor arbeid som en web grafisk og hvordan du raskt skifte fargene på de nødvendige elementene.

Trinn 1

Ta rektangelverktøyet (M) og lage en firkant med en blå fylling (C = 25, M = 2, Y = 0 og K = 0)

Trinn 2

Ta Ellipse Tool (L) og skape en sirkel. Velg kvadrat og sirkel, justere dem mot midten og horisontale linjer, bruker Align palett.

Nå trim sirkelen til firkantet form. Kopier torget og lim den inn foran, velge sirkelen og den øvre torg og traff Snitt knappen fra Pathfinder paletten.

Trinn 3

Fyll formen resulterer med en lineær gradient fra blått (C = 100, M = 65, Y = 0 og K = 0) til lyseblått (C = 53, M = 0, Y = 0 og K = 0), og sett Blending Mode til Multipliser i Transparency paletten .

Trinn 4

Lag to sirkler. Radius av disse sirklene lik verdien av plassen sin side, og deres sentre ligge i nedre venstre og øvre høyre hjørne av plassen.

Bruk av teknikken beskrevet i trinn 2 trimme disse sirklene til firkantet form .

Trinn 5

Velg de to resulterende former og treffer Divide knappen fra Pathfinder paletten. Del opp de resulterende stedene. Som et resultat, bør du ha tre figurer

Fyll dem med ulike gradienter og sett Blending Mode -. Multipliser for hver av dem. Fyll den første form 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 form 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 form 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 form i midten og lim den inn foran, skifte fargene på sin gradient med: 1 (C = 100, M = 72, Y = 0 og K = 0) og 2 (C = 33, M = 0, Y = 0 og K = 0).

Trinn 6

Lag to flere figurer ved hjelp av sirkelen og Pathfinder paletten, bruke teknikkene som er nevnt ovenfor.

Fyll den første form med en lineær gradient fra hvit til hvit med 0% opasitet og sett Blending Mode til Screen i Transparency paletten

Fyll den andre formen med lineær gradient fra hvitt til hvitt med 0% opasitet og sett Blending Mode -. overlegg i Transparency palett.

Kopier første form og lim den over alle gjenstandene, flytte den opp i lagpaletten. Endre gradient av denne formen, flytte venstre skyveknapp en littler litt til høyre.

Trinn 7

Sett knappen inn i en firkantet form med avrundede hjørner. Kopier den nederste plassen og lim den inn foran over alle stedene. Hold plassen valgt, gå til Effect > Konverter til figur > Avrundet rektangel og sette verdiene angitt i figuren nedenfor. Krumningen radius avhenger av størrelsen på knappen, så jeg vil la deg lage dine egne valg.

Kopier denne formen og lim den inn foran, vil vi trenger det for videre oppbygging. Lås underlag med denne form i lagpaletten og gjøre det usynlige. Velg alle objektene (kommando + A) og gå til Objekt > Klipping Mask > Gjør.

Trinn 8

Lås opp underlaget med formen på en avrundet firkant og gjøre den synlig. Kopier denne formen og lim den inn i front. Nå redusere størrelsen på denne form - bare litt - ved hjelp av Selection Tool (V) og holder nede Alt og Shift

Velg de to avrundede firkanter og traff Minus Front knappen fra Pathfinder paletten..

Fyll innhentet form med lineær gradient fra blått (C = 100, M = 0, Y = 0 og K = 0) med Opacity 50% til hvit farge med Opacity 0%.

Trinn 9

Opprett en avrundet rektangel med Avrundet rektangel Tool av en litt større størrelse enn én av knappen. Plasser opprettet figuren under alle barrierelag 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).

Trinn 10

Nå opprette metalldelen av knappen. Det vil bestå av to avrundede firkanter. Den første er fylt med lineær gradient bestående av tre nyanser av grått.: 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ått: 1 (K = 45), 2 (K = 0) og 3 (K = 14). Når knappen er klar, gruppe opp alle dens elementer.

Trinn 11

Lag en refleksjon av-knappen. Kopier knappen og lim den inn i front. Flytt knappen vertikalt ned, holde nede Skift-tasten. Det vil bli en refleksjon av knappen

Velg refleksjon og gå til Objekt >.; Transform > Reflektere og sette parametrene i dialogboksen vist i figuren nedenfor.

Nå tar rektangel Tool (M) og lage et rektangel med en svart og hvit gradient fyll. Størrelsen på rektangelet bør være slik at de kunne helt skjule refleksjonen av-knappen.

Velg refleksjon av-knappen og topp rektangel, velger Make Opacity Mask fra menyen i Transparency paletten.

Knappen med refleksjon er klar.

Trinn 12

Ofte må du ha flere identiske elementer i forskjellige farger. La oss se hvordan du raskt det er å erstatte fargen på en knapp.

Velg alle elementene du ønsker å skifte farge på, og gå til Rediger > Redigere Farger > Recolor Artwork, klikk deretter på Rediger-fanen i den åpne dialogboksen. Trykk til slutt på Link harmoni farger knappen.

Nå kan du gjøre alle de tilgjengelige farge rotasjoner i ønsket farge seksjonen mens du ser på fargeendringer av våre kunstverk.

Trinn 13

Når du lager bilder for web og enheter, er vektoren bildet ikke sluttproduktet, må du bruke rasterbilder. Derfor må du se vektoren som et raster. For å gjøre dette, gå til Vis > Forhåndsvisning piksel. Som du kan se, er det en rekke problemområder når du zoomer inn. De vises siden bildet ikke er gjengivelse innenfor Pixel Grid, og det er derfor linjene ser uskarpt når det er et raster.

Adobe Illustrator CS5 gjør oss i stand til å gjøre bildet skarpere. Velg knappen grafisk og åpne Transform paletten (Vindu > Transform)., Nå klikke på Align være Pixel Grid i denne paletten

Nå bildet ditt er klar til å bli lagret som et raster type som PNG eller JPG (Fil > Lagre for Web og enheter).

Konklusjon

Når du har denne kunnskapen og den nødvendige programvaren du vil være i stand til enkelt å lage web-grensesnitt elementer som ikke bare ser bra ut, men gjengi perfekt. Anmeldelser