Share
I den følgende opplæringen lærer du å lage en fin navigasjonsmeny. Dette er spesielt nyttig for folk som ønsker å lage perfekt tilpassede overføringstilstander for nettsteder og applikasjoner.
Lag et dokument med 630 x 190 px. Først slår du på rutenettet (Vis> Rutenettet) og Snap to Grid (Vis> Snap to Grid). Deretter trenger du et rutenett hver 10px. Gå til Rediger> Innstillinger> Ruter og rutenett, skriv inn 10 i Rutenettlinjen hver boks og 1 i Retningslinjene underdelinger. Du kan også åpne Info-panelet (Vindu> Info) for et forhåndsvisning med størrelsen og plasseringen av figurene dine. Ikke glem å bytte måleenheten til piksler fra Rediger> Innstillinger> Enhet> Generelt. Alle disse alternativene øker arbeidshastigheten betydelig.
Start med rektangelverktøyet (M). Lag en 610 x 50 px form. For øyeblikket fyll det med hvilken som helst farge og fjern slaget. Velg denne friske figuren og gå til Effekt> Stylize> Avrundede hjørner. Skriv inn en 4,5 px radius, klikk OK, og gå til Objekt> Utvid utseende. Fyll den resulterende formen med den lineære gradienten vist nedenfor.
Hvis du ser nærmere på gradientbildet, vil du legge merke til noe hvit tekst. Den står for glidebryterens plassering. Først velg midtskyvingen og sett posisjonen til 25%, velg deretter ikonet for venstre diamant og sett posisjonen til 25% også. Til slutt, gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som vises i det endelige bildet, og klikk deretter OK.
For de følgende trinnene trenger du et rutenett hver 1px. Gå til Rediger> Innstillinger> Ruter og rutenett og skriv inn 1 i Rutenettlinjen hver boks. Plukk pennverktøyet (P) og tegne en 56px vertikal bane. Legg til et svart slag for denne banen slik at du enkelt kan skille den fra. Til slutt legger du det 101px til høyre for venstre side av det avrundede rektangel.
Deretter må du lage to tynne og høye rektangler. Opprett den første (1 ved 50px) og legg den til venstre for den vertikale banen. Lag en kopi av denne formen og flytt den 1px til høyre. Gå tilbake til venstre form, velg den og fyll den med den første lineære gradienten. Igjen, ta en nærmere titt på graderingsbildene, og du vil merke litt gul tekst. Det står for ugjennomtrengelighet. Velg riktig form og fyll den med den andre lineære gradienten. Velg begge formene som er opprettet i dette trinnet, og grupper dem (Control + G). For øyeblikket, gjør denne gruppen usynlig.
Gå tilbake til den vertikale banen. Velg den og gå til Effect> Distort & Transform> Transform. Skriv inn 4 i boksen Kopier og 102 i Flytt> Horisontal boks. Klikk på OK, og gå til Objekt> Utvid utseende. Du får en gruppe på fem vertikale stier.
Kopier det runde rektangelet. Velg denne kopien sammen med gruppen vertikale stier og klikk på Divide-knappen fra Pathfinder-panelet. Dette vil dele rektangelet i fem forskjellige former. Velg hver form og fjern dropshadow-effekten fra Utseendepanelet.
La oss nå fokusere på en av figurene i det forrige trinnet. Jeg valgte den venstre. Den skal allerede være fylt med den lineære gradienten som er nevnt i andre trinn. Velg denne fyllingen og erstatt fargen fra den eksisterende gradienten med fargene vist i den første gradienten. Deretter går du til Utseende-panelet, åpner utløpsmenyen og klikker på Legg til ny fylling. Dette vil legge til en ny fylling for den valgte figuren.
Velg denne nye fyllingen (fra Utseendepanelet), bruk den radiale gradienten som vises under det andre bildet og endre blandingsmodus til Overlay. Legg til en tredje fylling og gjør den svart. Senk opaciteten til 5%, endre blandingsmodusen til Multiply, og gå deretter til Effect> Artistic> Film Grain. Skriv inn dataene som vises nedenfor, og klikk deretter OK.
Velg formen redigert i forrige trinn og gå til Effect> Path> Offset Path. Skriv inn en -2px Offset og klikk OK. Velg den resulterende formen, fjern alle fyllene, legg til 0,5 px, hvit, justert til innsiden, og endre blandingsmodus til Overlay.
Legg til samme effekt for resten av figurene og ikke glem stroke. Du bør opprette et eget lag for hver blå form. På den måten blir det lettere for deg å styre utseendet på menyen.
Slå på synligheten for gruppen laget i fjerde trinn. Flytt den øverst i lagpanelet. Senk opaciteten til 80%, og gå til Effekt> Forvreng & Transform> Transform. Skriv inn dataene som vises nedenfor, og klikk deretter OK.
Til slutt, teksten. Først trenger du Quigley Wiggly skrifttypen. Nå velg Type Tool (T) og legg til teksten som vist. Utvid teksten, velg deretter de resulterende figurene og klikk på Unite-knappen fra Pathfinder-panelet. Hvis du får mer enn en form etter at Unite-alternativet går til Objekt> Sammensatt sti> Lag.
Deretter må du justere denne teksten. Start med "hjem". Velg valgverktøyet (V). Velg tekstformen sammen med den blå formen, klikk på grensen til den andre (den skal bli understreket), og klikk deretter på Horisontale justeringssenter og Vertikale justeringssenter-knapper. Gjenta den samme teknikken for resten av teksten.
La oss nå legge til noen effekt for teksten. Først, den blå versjonen. Velg tekstformen og fyll den med den lineære gradienten som vises nedenfor. Velg fyllingen (fra Utseendepanelet) og gå til Effect> Stylize> Inner Glow. Skriv inn dataene som vises nedenfor, og klikk deretter OK. Deretter legger du til et nytt fyll og flytter det under den eksisterende. Velg den, fyll den med R = 52 G = 160 B = 230 og gå til Effect> Distort & Transform> Transform. Skriv inn dataene som er vist nedenfor, og klikk OK. Nå skal teksten din se ut i bildet nedenfor.
Nå den grå versjonen. Du trenger ikke å fjerne eller legge til noen effekt. Alt du trenger å gjøre er å redigere eksisterende fyllinger. Velg toppfylling og erstatt utløpende gradient med den som vises under, velg deretter nederst påfyll og erstatt fyllfarge med den som vist nedenfor. Til slutt bør teksten din se ut i bildet nedenfor.
Endelig, lage en blå og grå versjon for hver tekstform og du er ferdig.
Der har du det, en enkel måte å lage en navigasjonsmeny med overgangsstater. Et annet tips er å lagre stilene dine, slik at du kan bruke dem på andre elementer du måtte trenge, for eksempel ikoner og skjemaer. Jeg håper du har hatt glede av denne tut.
Accentsconagua