Share
Denne opplæringen er perfekt for begynnelsen til mellomliggende Adobe Illustrator-brukere. Vi vil dekke hvordan du lager et nettsted og forbereder det til bruk på nettet. Også, vi bruker den nylig utgitte Website Elements Freebie for å mock opp designet også.
Start en Ny dokument med en bredde på 960 x og en høyde du velger. Jeg har valgt denne bredden fordi dette nettstedet vil trolig påføre internettrafikk som har gjennomsnittlig til store skjermer. En bredde på 960 piksler er en sikker størrelse som vil favorisere de fleste besøkende. Sist, sett din Fargemodus til RGB.
Den svarte grensen viser dokumentstørrelsen (kalt Artboard) som vi opprettet. Jeg liker å legge et tomt skjermbilde av et nettleservindu på eget lag mens jeg designer, for å få en god ide om hvordan nettstedet mitt vil se ut når det er gjort.
Dette neste trinnet er svært viktig. Pass på at du er klar over hvilken zoom du ser på dokumentet på. Når alt er sagt og gjort, vil nettstedet ditt bli sett på 100%. Du er velkommen til å zoome inn og ut mens du arbeider på oppsettet ditt, men vær sikker på at all tekst og designelementer er lesbare når de vises på 100%. Bruk rullegardinmenyen fremhevet nedenfor (eller skriv inn prosentandelen du vil), for å endre zoomingen til.
Sidenote: Noen ganger blir Adobe Illustrator testy og viser ikke tallene mens du skriver dem inn i zoomområdet uthevet nedenfor. For eksempel, hvis du skriver 58% noen ganger, endres tallene ikke mens du skriver. Hvis dette er tilfelle, trykker du bare på retur etter at du har angitt dine verdier, og dokumentet blir endret til nummeret du skrev inn.
Artboard kan skiftes mellom synlig og usynlig ved å gå til Vis> Skjul kunstplate. Problemet med dette er at det tar litt lengre tid enn å vise og skjule guider (Command + Semicolon Key) 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 hurtignøkkelkommando i stedet for å gå til toppen av skjermen og velge fra en liste hver gang.
Du kan finne det enkelt å etablere balanse og et fint hierarki ved først å tegne enkle grå bokser på siden din. De tynne rektanglene representerer hvor jeg planlegger å bruke tekst mens de store grå boksene vil bli bilder.
Etter at du har en generell ide om hvordan utformingen vil se ut, kan du legge til guider og fjerne de grå boksene.
Bruk bare guider som referanse, legg til andre elementer som navigering, tekst og stram opp der logoen, bildene og ikonene vil gå. Det er nyttig å bytte guider på og av (Command + Semicolon Key), mens du er finessing oppsettet. Hvis støttelinjene du skrev ikke virker så godt som du trodde, må du tilpasse dem som du vil.
Sidenote: Når du bytter guider på og av, blir de automatisk låst. Du kan ikke flytte låste guider. For å låse opp støttelinjer trykker du raskt Kommando + Alternativ + Semikolon.
Fortsett å fullføre toppteksten med bilder, ikoner og grafikk.
Nedenfor har jeg bestemt meg for å legge til en lyseblå farge for å forbedre toppteksten.
Legg styling til teksten din, sørg for å bestemme hvilke koblinger og overskrifter som vil se ut. Jeg finner det mye enklere og raskere å oppnå så mange designelementer i Illustrator, så jeg kan konsentrere meg om programmering og koding av nettsiden når tiden kommer.
Det finnes et par forskjellige måter å forberede et design for bruk i en WYSIWYG (Hva du ser er hva du får) redaktør, som Adobe Dreamweaver. Den første metoden bruker skiver. Skiver kan gjøres ved hjelp av guider eller et utvalg. For å bruke guider til å lage skiver, må du først trekke guider på siden din rundt hvert objekt som vil kreve en egen lenke. For eksempel, et ikon som, når det klikkes, går til en bestemt side. Nedenfor har jeg fire ikoner, hvert ikon vil lede besøkende til en annen nettside eller et område på nettstedet.
Jeg har trukket guider mellom hvert ikon og like utenfor det blå området. Det er vanligvis renere hvis du tegner guider om 1 eller 2 piksler utenfor området du skiver. Dette sikrer at ingen av bildene dine vil bli avskåret.
Sidenote: Ikke trekk guider over hele oppsettet ditt på en gang. I stedet gjør seksjoner en om gangen. For eksempel, gjør først overskriftsområdet. Fjern alle guider ved å gå til Se> Guider> Fjern guider. Lagre dine skiver på nettet (diskuteres i et senere trinn) og gjenta denne prosessen for andre områder av oppsettet.
Når du har trukket dine guider, er neste skritt å lage skiver ut av dem. For å lage skiver fra støttelinjene dine, gå til Objekt> Slice> Lag fra guider. Noen ganger kan Illustrator ikke lage skiver første gang du prøver å. Jeg har funnet ut at jeg noen ganger trenger å gjenta dette trinnet tre eller fire ganger før Illustrator faktisk lager skiver. Nedenfor angir de svarte nummererte boksene at skivene er laget.
For å lagre skiver for bruk på et nettsted, gå til Fil> Lagre for web og enheter ... Bruke Slice Select Tool (K) uthevet i øvre venstre hjørne for å velge de spesifikke stykkene du vil lagre. Velg flere stykker samtidig ved å holde nede skiftet. Juster innstillingene til høyre for å dekke dine behov. JPEG-bilder fungerer best for elementer som har flere farger, mens GIF-filformatet fungerer bra for elementer som har store fargeområder og ikke mange farger generelt, fungerer PNG-filformat godt for gjennomsiktig grafikk (selv om det kan kreve noe arbeid å justere for eldre IE-nettlesere). Du vil kanskje teste kvalitet mot filtype og justere Kvalitet for å spare båndbredde. Når du er klar, klikk Lagre.
Bestem hvor du vil lagre bildene til. Jeg har valgt skrivebordet. Under format velger du Bare bilder, og deretter klikker du Lagre.
På skrivebordet har du nå en mappe som heter Bilder. Inne i denne mappen blir de spesifikke stykkene (bildene) du valgte. Disse bildene er ideelle i oppløsning og filstørrelse for bruk på nettet.
Ryd dine guider ved å gå til Se> Guider> Fjern guider. Nå tegne nye guider rundt neste område som du vil skille. Hover-tilstanden (når musen er over navigasjonen) vil være rød, mens avstanden vil være grå. Du må lage begge versjoner av navigasjonen. For å effektivt oppnå dette, må du først gjøre all din navigasjon rød, så gå til Fil> Lagre for web og enheter ...
Velg de spesifikke stykkene du vil lagre. Siden navigasjonen min ikke består av bilder eller en overflod av farger, har jeg bestemt den beste filtypen for navigasjonen vil være GIF, og klikk deretter Lagre. Vær også oppmerksom på at hvis brukeren er en nettstøttet skrift, kan du bestemme deg for å bruke HTML-tekst i stedet for bilder.
Du kan gi bildene et nytt navn på dette tidspunktet. Imidlertid blir de automatisk navngitt for deg, så dette er ikke obligatorisk.
Hvis du har lagret bildene dine på samme sted som før, vil du legge merke til mappen Bilder på skrivebordet, og inkluderer nå de ekstra bildene du nettopp har lagret.
Husk dette er bare en mulig arbeidsflyt. Alternativt kan du sette på og av stater et sted i dokumentet ditt, lage alle dine skiver og eksportere dem sammen.
Den andre metoden for å lage skiver er ved å velge et objekt og deretter gå til Objekt> Slice> Lag fra utvalg. Å lage skiver med hjelp av guider eller fra et utvalg er også bra. Bruk en arbeidsflyt som du finner behagelig og best for det aktuelle prosjektet du jobber med.
Noen ganger trenger du ikke å inkludere teksten som faller innenfor et stykke. For eksempel vil bunnteksten ha tekst som er skrevet innvendig i WYSIWYG-editoren. Hvis dette er tilfelle, slett du bare teksten før eller etter at du lager skivene, men tidligere for å lagre skivene for nettet.
Nedenfor vil du legge merke til at jeg slettet teksten etter at skivene ble laget.
Vær oppmerksom på den endelige nettsiden. Som du ser, legger du ut et nettsted i Adobe Illustrator, er enkelt og effektivt. Du kan raskt eksperimentere med design og gi denne fasen av webdesign prosessen oppmerksomheten og trodde den trenger. Du kan se det siste bildet under eller se en større versjon her.
Accentsconagua