Sådan oprettes webtemaer i Adobe Illustrator

Opbygning af grundlaget for et websted eller blogdesign i Adobe Illustrator giver dig en hurtig måde at prototype side skabeloner og websted udseende for din virksomhed eller dine kunder. Fordi den skarpe, skarpe udgave af vektor tegningsværktøjer giver små filstørrelser, kan du dele flere filer med dine programmører via enkle email vedhæftede filer og gemme dine designs uden behov for store mængder diskplads. Hvordan du opsætter dine arbejdsfiler går langt hen imod gode resultater.

1.

Klik på rullemenuen "Fil", og vælg "Ny" for at oprette et nyt Adobe Illustrator-dokument. Navngiv dit dokument og sæt rullemenuen Ny dokumentprofil til "Web". Størrelsesmenuen tilbyder automatisk tre standardindstillinger for sidestørrelse: "640 x 480", "800 x 600" og "1024 x 768". For at oprette en brugerdefineret størrelse skal du kontrollere, at du har indstillet menuen Enheder til "Pixels" og indtast en bredde og højde i felterne for disse målinger.

2.

Klik på trekanten ud for Avanceret for at vise sine indstillinger. Kontroller, at dit dokument vil bruge RGB-farvemodus og raster-effekter på skærmeopløsning med 72 pixel pr. Tomme. Vigtigst er det, at du markerer afkrydsningsfeltet nederst i afsnittet Avancerede indstillinger, så dine objekter stemmer overens med Adobe Illustrators pixelgitter. Denne indstilling sikrer, at når du bruger Illustrators tegningsværktøjer, er deres ægte lodrette og vandrette output linje op med et gitter, der matcher den 72 ppi skærmopløsning, der bruges til webgrafik og -design, så du undgår de bløde kanter, der ser ud, hvis dine objekter falder mellem pixelgrænser .

3.

Klik på "OK" knappen for at oprette din fil. Bemærk, at Adobe Illustrator automatisk tilføjer et afgrødeareal, der definerer størrelsen på din webside, og viser afgrødemærker i hjørnerne.

4.

Klik på rullemenuen "Vindue" og vælg "Farve" for at afsløre panelet med samme navn. Hvis du kun vil bruge Web-sikre farver, skal du klikke på menuen Flyve i øverste højre hjørne af panelet og indstille farvevisningen til "Web Safe RGB."

5.

Klik på rullemenuen "Vindue" og vælg "Lag." Klik på menuen Flyve i panelets øverste højre hjørne og vælg "Nyt lag" for at hente dialogboksen Lagindstillinger. For at forenkle dit arbejde kan du ønske at tildele samme lagfarve til alle lag, der indeholder specifikke typer af web-interfaceelementer. Navngiv hvert lag, du opretter, så du kan identificere hvilke ressourcer den indeholder med et blik på panelet Lag. Brug navngivne underlag til at placere underordnede elementer i et lag. For eksempel kan du oprette et underlag, der hedder "Home" i et lag kaldet "Hovedmenu". Du kan måske finde det lettere at oprette elementer først og navngive - eller endda organisere - dem efterfølgende, men du kan oprette de lag, du skal bruge, før du begynder dit arbejde. Opret et lag kaldet "Etiketter", hvor du opretter tekstelementer, der identificerer formålet med hver af dine grænsefladeelementer.

6.

Klik på rullemenuen "Vis", vælg undermenuen "Linjaler" og vælg "Vis linjaler" for at afsløre horisontale og lodrette linjer kalibreret for at matche det pixelbaserede målesystem i dit dokument. Linjeledere ligger på bestemte lag, så klik på det lag, som du vil tildele dine guider for at sikre, at de lukker på den rigtige placering.

7.

Træk linjaledere fra den tilsvarende vandrette eller lodrette linjal på din pap, svarende til placeringen og dimensionen af ​​dine grænsefladeelementer. For at placere guider i præcise positioner skal du klikke på rullemenuen "Vis", vælge undermenuen "Guides" og slukke for "Låseguider". Når du har valgt en guide med et markeringsværktøj, kan du placere det ved hjælp af målefelterne i panelet Kontrol eller Transformation.

8.

Brug panelet Farve til at blande den skygge, du vil bruge til et enkelt objekt eller et sæt objekter. Klik på "Flyve" -menuen i øverste højre hjørne af Farvepanelet og vælg "Opret en ny farveprøve" for at oprette en klikbar farveprøve fra din valgte farve. Adobe Illustrator bruger som standard RGB-farvemetoden for din farve som navnet på din farveprøve. Overstyr standardindstillingen for at tildele meningsfulde eksplosionsnavne, som f.eks. "Hovedmenu" eller "Sidebjælkeboks".

9.

Vælg det første lag, som du vil tilføje websideelementer på. Brug rektangelværktøjet til at tegne bokse til menuelementer. Du kan klikke på dit tavle for at hente dialogboksen Rektangel og indtaste en nøjagtig bredde og højde for dit objekt. Dine kasser kan repræsentere faktiske grænsefladeelementer eller pladsholdere, der angiver de dimensioner, i hvilke et grænsefladeelement vil blive vist.

10.

Vælg værktøjet "Type" og tryk på "Ctrl-T" for at åbne tegnpanelet. Indstil din skrifttype til en websikker skrifttype, en pladsholder eller et skrifttype, der vises på dine websider gennem et type udskiftningssystem som Cufon eller Typekit.

11.

Skift til dit Labels-lag, og identificer dine grænsefladeelementer med individuelle typeset-etiketter. Brug en kontrastfarve til disse typer elementer, så de ikke vil blande ind med dine designelementer.

12.

Gem din fil med et beskrivende dokumentnavn, der identificerer webstedet, klienten og formålet med layoutet. Send filen til din programmør for videre udvikling.

Tips

  • Hvis du ved et uheld begynder at arbejde i en Adobe Illustrator-fil, hvor du ikke har aktiveret pixelgitterjusteringsfunktionen, kan du vælge dine objekter og åbne Transformpanelet for at anvende justeringsfunktionen til eksisterende objekter.
  • Aktivering af justeringsfunktionen justerer ikke automatisk objekter, du indsætter eller placerer i dit dokument. Illustrator behandler justering til pixelgitteret som en objektniveaufunktion, så du skal overholde ikke-justerede objekter, når du har tilføjet dem til din fil.
  • Selvom du gør billedgitteret synligt, kan du ikke se det, medmindre du zoomer ind på eller over 600 procent af den faktiske størrelse.
  • Åbn panelet Farvevejledning for at se farvefamilier bygget op omkring din nuværende farveprøve af Illustrators farvealgoritmer. Color Guide bruger farve teori til at oprette swatch grupper, der harmonerer med din nuværende nuance.

Advarsel

  • Gennemgå dine designs i Pixel Preview-tilstand for at sikre, at dit vektorgrafik oversætter korrekt til pixelbaseret output, hvilket giver din programmør et optimalt udgangspunkt for hendes arbejde med at oprette HTML, CSS og andre websitfiler.
 

Efterlad Din Kommentar