Use Adobe Illustrator for å lage et rent Nettstedet Layout
Dette innlegget er en del av en serie kalt Web og Interface Design Med Vector.Quick Tips: Lag Bright Web knapper du bruker 3D Valg i IllustratorCreate en grønn Liggende Nettstedet på Adobe Illustrator
Denne opplæringen er perfekt for begynnelsen til middels Adobe Illustrator brukere. Vi vil dekke hvordan å layout en nettside og klargjøre den for bruk på web. Dessuten vil vi bruke den nylig utgitte Nettstedet Elements Freebie å spotte opp design i tillegg.
1. Setup Din Nytt dokument
Trinn 1
starte et nytt dokument med en bredde på 960 x og en høyde som du selv velger. Jeg har valgt denne bredden fordi denne nettsiden vil trolig medføre internett trafikk som har middels til store skjermer. En bredde på 960 piksler er en sikker størrelse som vil favorisere de fleste besøkende. Sist, stille inn fargemodus til RGB.
svart ramme viser dokumentstørrelsen (kalt Artboard) som vi opprettet. Jeg liker å plassere et tomt skjermbilde av et nettleservindu på sitt eget lag, mens jeg designer, for å få et godt inntrykk av hva mitt nettsted vil se ut når den er ferdig.
Trinn 2
Det neste trinnet er svært viktig. Sørg for at du er klar over hva zoome du viser dokumentet på. Når alt er sagt og gjort, vil nettstedet bli sett på 100%. Føl deg fri til å zoome inn og ut mens du arbeider med layouten, men vær sikker på alle dine tekst- og designelementer er lesbare når den vises i 100%. Bruk rullegardin uthevet nedenfor (eller bare skriv i andelen du ønsker) å endre zoom til
Sidenote:. Noen ganger Adobe Illustrator blir amper og viser ikke tallene som du skriver dem inn i zoomområdet uthevet nedenfor. For eksempel, hvis du skriver 58% noen ganger tallene endrer ikke som du skriver. Hvis dette er tilfelle, trykker du bare på retur etter at du skriver dine verdier, og dokumentet vil bli endret til det nummeret du tastet inn.
Trinn 3
Artboard kan slås mellom synlig og usynlig ved å gå til Vis > Skjule Artboard. Problemet med dette er at det tar litt lengre tid enn å vise og skjule guider (Command + Semicolon nøkkel) Så jeg synes det er best å bruke guider og skjule Artboard. I løpet av å legge ut en hel nettside vil du finne det mye lettere å trykke på en rask tastaturkommandoer i stedet for å gå til toppen av skjermen og velge fra en liste hver gang.
2. Strukturere Design Fra Guides
Trinn 1
Du kan finne det enkelt å etablere balanse og en hyggelig hierarki ved først å tegne enkle grå bokser på siden din. De tynne rektangler representerer hvor jeg planlegger å bruke tekst mens de store grå boksene vil være bilder.
Trinn 2
Når du har en generell ide om hva oppsettet vil se ut som du kan legge til hjelpelinjer og fjerne grå ruter.
Trinn 3
Bruk bare de guider som en referanse, legge til andre elementer som navigasjon, tekst, og stramme opp der logo, bilder ikonene, og vil gå . Det er nyttig å veksle dine guider på og av (Command + Semicolon Key), mens du finessing oppsettet. Hvis førerne du tegnet ikke fungerer så bra som du trodde, definitivt justere dem etter eget ønske
Sidenote:. Når du veksle guider på og av de automatisk blir låst. Du kan ikke flytte låste guider. For å låse opp guider raskt trykke Kommando + Tilvalg + Semicolon.
3. Ferdigstille Din Design
Trinn 1
Fortsett Kjøpet header med bilder, ikoner og grafikk.
Trinn 2
Nedenfor har jeg besluttet å legge en lyseblå farge for å forsterke den spissen.
Trinn 3
Legg styling til tekst, og pass på å bestemme hva lenker og overskrifter vil se ut. Jeg synes det er mye enklere og raskere å oppnå så mange designelementer inne Illustrator slik at jeg kan konsentrere seg om programmering og koding nettsiden når den tid kommer.
4. Slicing Din Design
Trinn 1
Det er et par forskjellige måter å tilberede et design for bruk i en WYSIWYG (What You See er hva du får) editor, som Adobe Dreamweaver. Den første metoden er å bruke skiver. Slices kan gjøres ved hjelp av guider eller et utvalg. For å bruke guider for å lage skiver første drag guider på siden din rundt hvert objekt som vil kreve en egen link. For eksempel, et ikon som, når den klikkes, går til en bestemt side. Nedenfor har jeg fire ikoner, vil hvert ikon lede besøkende til en annen webside eller del av området.
Jeg har tegnet guider mellom hvert ikon og like utenfor det blå området. Det er vanligvis renere hvis du tegne dine guider om 1 eller 2 piksler utenfor det området som du skjærer. Dette sikrer ingen av dine kunstverk vil bli avskåret
Sidenote:. Ikke trekke guider over hele oppsettet på en gang. I stedet, gjør seksjoner en av gangen. For eksempel, først gjøre overskriften området. Fjerne alle dine guider ved å velge Vis > Guides > Klare Guides. Lagre skiver for web (omtalt i et senere trinn) og gjenta denne prosessen for andre områder av layouten.
Trinn 2
Når du har dine guider trekkes det neste trinnet er å gjøre skiver ut av dem. Å lage skiver fra dine guider gå til Objekt > Slice > Lag fra Guides. Av og til kan Illustrator ikke lage skiver første gang du prøver å. Jeg har funnet ut at jeg noen ganger må gjenta dette trinnet tre eller fire ganger før Illustrator faktisk vil gjøre skiver. Nedenfor de svarte nummererte boksene indikerer at skivene har blitt gjort.
Trinn 3
Hvis du vil lagre skiver for bruk på et nettsted gå til Fil > Lagre for Web & Enheter ... Bruk Slice Select Tool (K) fremhevet i øvre venstre hjørne for å velge de spesifikke skiver som du ønsker å lagre. Velg flere stykker på en gang ved å holde inne shift. Juster innstillingene til høyre for å dekke dine behov. JPEG-bilder fungerer best for elementer som har flere farger, mens GIF filformatet fungerer godt for elementer som har store områder med farge og ikke mange farger generelt, PNG filformat fungerer godt for transparente grafikken (selv kan kreve en del arbeid for å justere for eldre IE nettlesere). Det kan være lurt å teste kvalitet kontra filtype og justere kvaliteten for å spare båndbredde. Når du er klar, klikker du Lagre.
Trinn 4
Bestem hvor du vil lagre bildene på. Jeg har valgt Desktop. Under format velger du Bilder Only, deretter klikker du Lagre.
Trinn 5
På skrivebordet du vil nå ha en mappe som heter Bilder. Inne i denne mappen vil være de spesifikke skiver (bilder) du har valgt. Disse bildene er ideelle i oppløsning og filstørrelse for bruk på web
Trinn 6
Tøm dine guider ved å velge Vis >.; Guides > Klare Guides. Nå, trekke nye guider rundt det neste området som du ønsker å dele. Hover state (når musen er over navigasjon) vil være rød, mens off staten vil være grå. Du må gjøre begge versjonene av navigasjon. Å effektivt oppnå dette, må du først gjøre alle navigasjons rødt og deretter gå til Fil > Lagre for Web & Enheter ...
Trinn 7
Velg de spesifikke skiver du vil lagre. Siden min navigasjon ikke er satt sammen av bilder, eller en overflod av farger har jeg besluttet den beste filtypen for navigasjon vil være GIF, deretter klikker du Lagre. Vær også oppmerksom på at hvis brukeren en web støttet font, så du kan velge å bruke html tekst i stedet for bilder.
Trinn 8
Du kan gi bildene dine et nytt navn på dette punktet. Men de navngis automatisk for deg, så dette er ikke obligatorisk.
Trinn 9
Hvis du har lagret bildene dine til samme sted som før, vil du legge merke til Bilder-mappen på skrivebordet nå omfatter flere bilder du nettopp lagret.
Trinn 10
Husk dette er bare ett mulig arbeidsflyt. Alternativt kan du plassere på og av statene et sted i dokumentet, oppretter alle skiver, og eksportere dem sammen
Den andre metoden for å skape skiver er ved å velge et objekt deretter skal Objekt >.; Slice > Lag fra Selection. Opprette skiver ved hjelp av guider eller fra et utvalg er greit også. Bruk en arbeidsflyt som du synes er behagelig og best for det konkrete prosjektet du arbeider på.
Trinn 11
På anledning du ikke trenger å inkludere tekst som faller innenfor en skive. For eksempel vil footer ha tekst som er skrevet på innsiden av WYSIWYG editor. Hvis dette er tilfelle kan du slette teksten før eller etter at du gjør skivene, men tidligere å lagre skiver for web.
Trinn 12
Nedenfor vil du se at jeg slettet Teksten etter skiver ble gjort.
Awesome Arbeid, Du er nå ferdig!
Følg finalen nettside. Som du kan se, legge ut en nettside i Adobe Illustrator er enkel og effektiv. Du kan raskt eksperimentere med design og gi denne fasen av webdesign prosessen oppmerksomhet og tenkte at det er behov for. Du kan se det endelige bildet nedenfor eller se en større versjon her. Anmeldelser