Create en stilisert Navigasjonslinje og Slice det for Web
Dette innlegget er en del av en serie kalt Web og grensesnittdesign Med Vector.Quick Tips: Hvordan lage en enkel Registrer Form DesignLearn en Professional arbeidsflyt for å illustrere en Comic-Style Header Image
i det følgende opplæringen vil du lære hvordan du oppretter en stilisert navigasjonsfeltet. Du vil lære å bruke Utseende Panel å style et navigasjonsfelt, og hvordan du bruker Slice Tool til å klippe ut og eksportere bildene slik at de kan brukes som en del av en nettside. La oss begynne!
Trinn 1
Trykk Kommando + N for å opprette et nytt dokument. Skriv inn 1025 i bredden boksen og 53 i høyden boksen klikk deretter på knappen Avansert. Velg RGB, Screen (72ppi) og sørge for at " Rett nye objekter til Pixel Grid " er merket før og klikk på OK. Aktiver Grid (View > Vis rutenett) og Fest til rutenett (View > Fest til rutenett).
Deretter trenger du et rutenett hver 5px. Gå til Rediger > Innstillinger > Guides & Grid, skriv 5 i linjenettet hver boks og en i underinndelinger boksen. Du kan også åpne infopanelet (Vindu > Info) for en live forhåndsvisning med størrelsen og plasseringen av figurer. Ikke glem å bytte måleenhet for å piksler fra Rediger > Innstillinger > Enhet > General. Alle disse alternativene vil øke arbeidshastigheten.
Trinn 2
Velg den rektangelverktøyet (M), skape en 1025 x 50 piksler form, fyll den med lineær gradient vist under og gå til Effect > Stylize > Avrundede hjørner. Skriv en 3px radius, klikk på OK og gå til Object > Utvid Utseende.
Trinn 3
For neste trinn må du et rutenett hver 1px. Så, gå til Rediger > Innstillinger > Guides & Grid og skriv en i linjenettet hver boks. Fokus på venstre side av formen opprettet i forrige trinn. Plukk Pen Tool (P), tegne en 50 piksler, vertikal bane og plasser den som vist i følgende bilde. Legg en 1pt, svart strek for denne veien for å gjøre det lettere å legge merke til.
Trinn 4
Velg det vertikale bane som er opprettet i forrige trinn, og dra den 128px til høyre. Du kan gjøre det manuelt eller ved å gå til Object > Transform > Flytt alternativer. Simply, skriv 128 i den horisontale boksen og trykk deretter ENTER.
Trinn 5
reselektere den vertikal bane og gå til Effect > Forvrenge & Transform > Transform. Tast inn dataene vist i følgende bilde, klikker du på OK og gå til Object > Utvid Utseende.
Trinn 6
Velg gruppen av vertikale baner opprettet i forrige trinn sammen med avrundet rektangel opprettet i det andre trinnet, åpne Pathfinder-panelet og klikk på Divide knappen . Flytt til Lag-panelet, velger du den resulterende gruppe og dele opp det (Shift + Ctrl + G). Hold fokus på Lag-panelet og navngi figurer fra " en " til " 8 " (Start med venstre form).
Trinn 7
Deaktiver Fest til rutenett (View > Fest til rutenett) og deretter gå til Rediger > Innstillinger > Generelt og sørge for at tastaturet Økning er satt til 1px. Velg form " en " og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopiere og flytte den 1PX til venstre med venstre pil fra tastaturet. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Ta den resulterende formen til front (Shift + Ctrl + Høyre hakeparentes), fyll den med svart og endre blending mode til Overlay
Trinn 8
Velg formen ".; en " og lage to nye kopier foran (Ctrl + C > Ctrl + F > Control + F). Fokus på Lag-panelet velge nederste kopiere og flytte den 1PX til høyre med pil høyre på tastaturet. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Ta den resulterende formen til front (Shift + Ctrl + Høyre hakeparentes), fyll den med hvit og endre blending mode til Overlay.
Trinn 9
Velg det to figurer skapt i de to siste trinnene og gruppere dem (Control + G). Lag en kopi av denne gruppen (Ctrl + C > Ctrl + F), velg det og klikk på Unite knappen fra Pathfinder-panelet. Fylle den resulterende form med lineær gradient er vist i det andre bildet.
Trinn 10
Åpne Gjennomsiktighet-panelet. Reselect formen og gruppen ble opprettet i forrige trinn, åpner fly-out menyen i Transparency panel og klikk på Make Opacity Mask. Til slutt din maskerte gruppen bør se ut i det andre bildet.
Trinn 11
Velg det maskerte gruppen ble opprettet i forrige trinn, og gå til Object > Transform > Bevege seg. Skriv inn 128 under horisontale boksen og klikk på Kopier-knappen. Selvfølgelig vil dette legge en kopi av din gruppe 128px til høyre. Velg denne kopien og gjenta Move kommandoen. Hold gjenta denne teknikken til du har sju maskerte grupper.
Trinn 12
Aktiver Fest til rutenett (View > Fest til rutenett). Plukk rektangel Tool (M), skape en fire, 3px torg og plasser dem som vist i følgende bilde. Også fylle dem med svart og hvitt som vist nedenfor. Velg alle fire figurer og bare dra dem inn i Fargeprøver-panelet for å slå dem inn i et mønster. Når du har fått din mønster kan du slette de fire rutene fra Lag-panelet.
Trinn 13
Deaktiver Grid (View > Vis rutenett) og Fest til rutenett (View > Fest til rutenett). Returner til å forme " en ". Velg det, fokus på Utseende panel og legge til en annen fylling ved hjelp av Legg til ny Fill-knappen. Velg det, sette farge på R = 28 G = 117 B = 188 og endre blending mode til Color Burn.
Trinn 14
Marker på nytt formen " en ", fokusere på utseendet panel og legge til en tredje fyll. Velg det, senk opacity til 15%, endre blending mode til Soft Light og legge mønsteret laget i tolvte trinnet.
Trinn 15
Marker på nytt formen " en ", fokusere på utseendet panel, sørg for at det ikke fyll eller hjerneslag er valgt og gå til Effect > Stylize > Drop Shadow. Legg inn dataene som vises i det øverste vinduet, klikk på OK og gå igjen til Effect > Stylize > Drop Shadow. Legg inn dataene som vises i midten vinduet, klikk på OK og gå igjen til Effect > Stylize > Drop Shadow. Legg inn dataene som vises i det nederste vinduet og klikk på OK.
Trinn 16
Nå må du kopiere de egenskaper som brukes for formen " 1 " og lime dem på resten av figurene. Her er hvordan du enkelt kan gjøre det. Gå til Lag-panelet, fokus på høyre side, og du vil merke at hver figur kommer med en litt grå sirkel. Det kalles et mål ikon. Hold Alt, klikk på målet ikonet som står for formen " en " og dra på sirkelen som står for formen " 2 ". Bruk denne teknikken til å legge de samme egenskapene for de seks andre figurer.
Trinn 17
Velg formen " 2 ", fokusere på utseendet panel og legge fjerde fyll. Velg det, gjør det hvitt, senk opacity til 50% og endre blending mode til Soft Light. Dette vil være den hover modus for navigasjonslinjen.
Trinn 18
Grab Type Tool (T) og din tekst som vist i følgende bilde. Bruk Calibri skrift med en størrelse på 15pt, setter stil på fet og fargen på R = 0 G = 86 B = 140. Sørg for at all tekst er valgt og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK.
Trinn 19
Nå, la oss skjære denne menyen. Fokus på venstre maskert gruppe og velg Slice Tool (Shift + K). Først tegne en 6 av 53px stykke langs formen " en " som vist i følgende bilde. Fortsett med Slice Tool (Shift + K) og tegne en andre seks av 53px stykke langs formen " 2 " som vist nedenfor.
Trinn 20
Nå som du har din første skiver gå til Filer > Lagre for Web & Enheter (Alt + Ctrl + Shift + S). Velg Slice Select Tool (K) og dobbeltklikk på venstre side, seks av 53px skive. Skriv nav i navnefeltet og trykk deretter på OK.
Fokus på den andre seks av 53px skive. Dobbeltklikk på det, skriv "nav.hoover" i navnet, og velg deretter OK. Velg PNG-24 fra Preset rullegardinmenyen, og klikk på Lagre. Velg en plassering for bilder som du er i ferd med å lagre og klikk deretter på Lagre. Flytt til det stedet, og du vil finne en ny mappe med en haug med nye bilder. Drag " nav.png " og " nav.hoover.png " utenfor mappen, og deretter slette mappen.
Step 21
Gå tilbake til Ai-filen, velger Slice Tool (Shift + K) og tegne en to av 53px skive sammen som venstre maskert gruppe. Flytt til Lag-panelet og slå av synligheten for alle figurene bortsett fra venstre, maskert gruppe.
Trinn 22
Gå igjen til filer > Lagre for Web & Enheter (Alt + Ctrl + Shift + S). Grab Slice Select Tool (K) og dobbeltklikk på den nye skive opprettet i forrige trinn. Name it " skillelinjen " og klikk OK. Kontroller at PNG-24 er fortsatt velges fra Preset rullegardinmenyen, og klikk på Lagre. Igjen, plukke et sted for bilder som du er i ferd med å lagre og klikk deretter på OK. Flytt til denne plasseringen, åpne den nye mappen, dra " divider.png " utenfor mappen, og deretter slette mappen. Til slutt bør du ha tre enkle bilder: " nav ", " nav.hoover " og " divider.png ".
Trinn 23
Til slutt kan du enkelt endre fargene som brukes for navigasjonslinjen. Bare erstatte den som er brukt for teksten og andre fylle med noen av fargene som vises i følgende bilder.
Konklusjon
Nå arbeidet er gjort, er det slik det skal se ut.