Tips til at arbejde med Illustrator. For webdesignere, der foretrækker Photoshop

Tips til at arbejde med Illustrator. Her er en skør idé - design dit næste webprojekt i Illustrator. Hvis du er en primær webdesigner, vil du sandsynligvis ikke reagere særlig godt på dette forslag. Illustrator kan bare ikke alt, hvad Photoshop kan, vel?

Ikke sikkert på den måde.

Skønt Photoshop er blevet de facto-værktøjet webdesign, er Illustrator mere end i stand til at opfylde dine behov. Takket være dets layoutværktøjer er det ofte et bedre og mere velegnet program til webdesign.

Da de fleste webdesignprofessionelle ikke ønsker at vandre rundt i Illustrator og lede efter beviser, har jeg samlet en liste over webrelaterede funktioner, du skal kende for at begynde at eksperimentere med webdesign i Illustrator.

Prøv et par af disse, og jeg garanterer, at du begynder at bruge Illustrator som et standardværktøj i dit webdesign-workflow.

1. Første ting først: Indstil alle enheder til Pixels. Tips til at arbejde med Illustrator

Som standard bruger Illustrator metrisk enheder for objekt- og punktstørrelser til tekst. Disse er gode indstillinger til de fleste designsituationer, men til webdesign du vil sikkert gerne se pixels overalt. Så før du begynder at arbejde på noget andet, skal du sørge for, at dine enheder er konfigureret korrekt.

Sådan indstilles enhederne til pixels:

1. Åbn i menuen Rediger
2. Vælg måleenheder fra undermenuen Indstillinger.
3. Indstil alle muligheder til "pixels"

2. Opret dokumenter ved hjælp af en webdokumentprofil.

 

Når du vil begynde at arbejde på et nyt design, kan du nemt rulle gennem vinduet Nyt dokument og springe nogle vigtige detaljer over – som at fortælle Illustrator, at du planlægger at arbejde på et webdesign, så du ikke bruger CMYK-farver. og slørede kanter af objektet. Bare husk at vælge internetprofilindstillingen i vinduet Nyt dokument, så klarer du dig.

3. Aktiver justering af pixelgitter for objekter. Tips til at arbejde med Illustrator

Denne funktion er en livredder, hvis du nogensinde har haft problemer med slørede kanter i Photoshop.

Pixel Grid Alignment justerer de lige vandrette og lodrette segmenter af et objekt, så de passer perfekt til pixelgitteret, samtidig med at buede og skrå segmenter holdes glatte. Resultatet er sprøde, pixel-perfekte former - noget du helt sikkert ønsker i webdesign.

Den øverste knap har justering af pixelgitter aktiveret, hvilket altid resulterer i sprøde kanter.

Sådan aktiverer du justering af pixelgitter på objektniveau:

1. Vælg objekt
2. Åbn panelet Transformer (Vindue > Transformer).
3. Marker afkrydsningsfeltet "Juster til Pixel Grid" i bunden af ​​panelet (hvis du ikke kan se det, skal du dobbeltklikke på panelet for at vise mulighederne)

Bemærk. Pixelgitterjustering er aktiveret som standard for alle nye objekter, der er oprettet ved hjælp af webdokumentprofilen. Men hvis du indsætter objekter fra andre Illustrator-filer, skal du manuelt justere pixeljusteringen for dem. Tips til at arbejde med Illustrator

4. Slå pixel preview til.

Pixel-Preview-funktionen får Illustrator til at opføre sig ligesom Photoshop, når du skalerer dit billede til over 100 % - i stedet for at få perfekte vektorer hver gang, vil du faktisk se pixels, som om du arbejdede med et rasterbillede.

Aktivering af pixel-forhåndsvisning vil få dig til at føle, at du er i Photoshop.

Tænk på, hvor sejt det er – du har al kraften fra vektorgrafik lige ved hånden, og du kan se, hvordan resultatet ser ud på pixelniveau.

Pænt, ikke?

Aktiver eller deaktiver pixel preview

1. Åbn visningsmenuen
2. Vælg Pixel View.

5. Brug Artwork-vinduer. Tips til at arbejde med Illustrator

Forestil dig, at to videokameraer peger mod dit projekt.

Et kamera har et normalt zoomniveau, der viser 100 % af dit arbejde. Det andet kamera har et zoomniveau på 400 % og er rettet mod et specifikt ikon, du arbejdede på.

Som en kirurg bruger du zoomkameraet til at foretage små ændringer på pixelniveau af ikonet, mens du af og til kigger på kameraet med 100 % zoom for at se, hvordan det rent faktisk ser ud i dets faktiske størrelse.

Dækvinduer er fantastiske, når du skal arbejde med små elementer som ikoner – du behøver ikke konstant at zoome ind og ud for at tjekke, hvordan alt ser ud.

Disse er Artwork-vinduer – de giver dig mulighed for at se dit design samtidigt med forskellige zoomniveauer, farveindstillinger og andre variationer. Dette er meget nyttigt til webdesign, især når du arbejder med detaljer på pixelniveau.

Sådan bruger du illustrationsvinduer:

1. Åbn menuen Vindue, og vælg derefter Nyt vindue. Illustrator opretter en ny fane med det samme dokument i udsigt.
2. Gå til vinduesmenuen igen, vælg Arranger > Flyt alle til vindue. Dette vil give dig mulighed for at ændre størrelse og placering af vinduer ved siden af ​​hinanden, som det passer dig.
3. Eksperimenter med forskellige zoomniveauer i vinduer, og begynd at lave nogle ændringer for at se, hvordan det fungerer. Tips til at arbejde med Illustrator

6. Brug symboler til hurtigt at oprette knapper, ikoner og mere.

Hvor mange gange har du oprettet den samme (eller næsten den samme) knap, ikon eller widget i Photoshop? Hvis du er til webdesign, gør du det sandsynligvis hver dag.

Illustrator kan hjælpe dig med at spare tid og undgå dette gentagne arbejde med symboler.

I bund og grund er symboler et endeløst sæt færdiglavede designelementer, som kan føjes til værket ved blot at trække og slippe, og derefter ændres efter behov. Dette er ideelt til knapper, ikoner og andre standardobjekter, der ikke skal oprettes fra bunden.

Men der er en anden grund til, at symboler er kraftfulde, og det kaldes instansiering.

Symboler er ikke kun praktiske, men de gør det også nemt at opdatere gentagne designelementer.

 

I det væsentlige, når du foretager ændringer til det originale symbol, afspejles disse ændringer med det samme i alle forekomster af symbolet, der findes i dit kunstværk. Har du brug for større knapper på din hjemmeside? Skift blot symbolet. Vil du have, at dine formularfelter skal se anderledes ud på hver side? Skift blot symbolet. Du forstår ideen.

Tip: Hvis du ikke ønsker, at dette skal ske med en specifik forekomst af as-symbolet, skal du højreklikke på objektet i din illustration og vælge Break Symbol Reference. Dette vil udelukke det fra automatiske opdateringer.

Her er en god video, der forklarer, hvordan man bruger og manipulerer symboler:

Brug af symboler i Adobe Illustrator af Adobe TV .

Sådan bruger du et eksisterende symbol:

1. Åbn symbolpanelet fra vinduesmenuen.
2. Træk det valgte symbol til dit arbejde

Opret et nyt symbol:

1. Lav et symbolbillede
2. Åbn symbolpanelet fra vinduesmenuen.
3. Træk en illustration til panelet
4. Klik på OK i dialogboksen for at bekræfte.

Sådan redigerer du et symbol:

1. Åbn symbolpanelet fra vinduesmenuen.
2. Dobbeltklik på et symbol for at gå ind i redigeringstilstand.
3. Når du er færdig, skal du dobbeltklikke et vilkårligt sted uden for symbolbilledet for at afslutte redigeringstilstand.

7. Udvid nemt objekter med 9-segments skalering. Tips til at arbejde med Illustrator

Dette er en avanceret symbolfunktion, der giver dig mulighed for at definere, hvilke dele af et objekt, der strækkes under skalering, og hvilke der forbliver uændrede.

Venstre: Et eksempel på en strakt knap med og uden 9-segment zoomindstillingen. Til højre: Skaleringsindstillingen med 9 segmenter involverer at flytte 4 hjælpelinjer, der fortæller Illustrator, hvilke dele af objektet der er beskyttet, og hvilke dele der kan skaleres.

 

Et praktisk eksempel er en knap med afrundede hjørner - hvis du vil gøre den længere, kan du ikke bare strække den vandret, fordi det vil forvrænge hele objektet. I stedet bliver du nødt til manuelt at flytte formpunkterne. Med 9-segments skalering fungerer strækningen, som du havde tænkt dig. Tips til at arbejde med Illustrator

For virkelig at forstå, hvordan det fungerer, kan du lytte til denne fantastiske video-tutorial fra Adobe TV for at komme hurtigt op i hastighed:

Brug af 9-segments skalering med symboler af Adobe TV .

8. Afrundede hjørner overalt!

Du kan oprette et afrundet rektangel i Photoshop, men Illustrator giver dig mulighed for at anvende en ikke-destruktiv afrundet hjørneeffekt på næsten ethvert objekt. Hvad er ikke-destruktiv effekt? Det betyder, at du kan slå den til, fra eller ændre dens indstillinger uden at påvirke det underliggende originale objekt.

Du kan anvende effekten af ​​afrundede hjørner på næsten enhver type objekt og justere den efter behov. Tips til at arbejde med Illustrator

Sådan anvender du den afrundede hjørneeffekt:

1. Opret et rektangel eller ethvert andet objekt med skarpe hjørner
2. Vælg Stiliser > Afrundede hjørner i menuen Effekter.
3. Indtast en hjørneradius, og klik på Preview for at se, hvordan det ser ud.
4. Klik på OK for at anvende effekten.

Sådan ændres effekten af ​​det afrundede hjørne:

1. Vælg et objekt med afrundede hjørner
2. Åbn panelet Udseende fra menuen Vindue.
3. Find effekten afrundede hjørner, og dobbeltklik på den for at ændre dens indstillinger, eller klik på øjenikonet for at slå den til eller fra.

9. Oprettelse af en hurtig udfyldning med et rastermønster. Tips til at arbejde med Illustrator

Subtile baggrundsmønstre er et stort hit inden for webdesign, men mange designere mener, at de ikke er nemme at anvende i Illustrator.

Jeg må indrømme, at det ikke er intuitivt, men løsningen er enkel.

Sådan opretter du et bitmapmønster:

1. Placer et billede af mønsteret på dit stykke
2. Klik på "Indsæt" på det øverste bånd (vigtigt - det virker ikke uden det!)
3. Træk et mønster til paletten Farveprøver
4. Påfør en farveprøve på ethvert objekt for at fylde det med et mønster

10. Automatisk placering af tekst omkring billeder og objekter.

Photoshop er kendt for sine meget grundlæggende tekstredigeringsmuligheder. Hvis du vil pakke tekst rundt om et billede, skal du oprette to eller tre forskellige tekstrammer og simulere effekten. Tips til at arbejde med Illustrator

Heldigvis har Illustrator dig dækket.

Sådan ombrydes tekst omkring et billede:

1. Vælg det billede eller det objekt, du vil pakke tekst rundt om
2. Åbn objektmenuen, vælg Ombryd tekst > Ny.
3. For at indstille ombrydningsafstanden skal du åbne menuen Tekstombrydning igen og vælge Indstillinger for tekstombrydning.
4. Flyt billedet hen over teksten for at se indpakningseffekten

11. Skab rige visuelle effekter med indstillinger for objektets udseende. Tips til at arbejde med Illustrator

I Illustrator fungerer et objekts Udseende-panel meget som lageffekter i Photoshop – du kan tilføje flere udfyldninger og streger til et objekt og derefter lege med deres overførselstilstande, opacitet og effekter for at få interessante resultater.

Denne tekst er kun et enkelt vektorobjekt, stylet ved hjælp af panelet Udseende og effekter.

Legepladsen er ret stor - fra skygger, sløring og glød til teksturering, forvrængning og 3D. På denne måde kan du genskabe de fleste af effekterne fra Photoshop, mens du stadig arbejder med vektorgrafik.

Udseendepanelet er kraftfuldt og sjovt - jeg opfordrer dig til at prøve det med det samme eller se selvstudiet nedenfor for at forstå, hvordan det virker:

Mestring af udseendepanelet af Adobe TV .

Er du klar til at begynde at eksperimentere med Illustrator?

Oprettelse af hjemmesider og brugergrænseflader ved hjælp af Photoshop er nu blevet normen, og de fleste designere er glade for denne løsning. Tips til at arbejde med Illustrator

Men bare fordi Photoshop er blevet så udbredt, betyder det ikke, at Illustrator ikke har noget at tilbyde – tværtimod. Med værktøjer som justering af pixelgitter, tekstombrydning og objektudseende er det en stærk sag.

Kombineret med kraftfuld layoutværktøjer og vektorgrafik, billedudskæring og eksport, er Illustrator absolut et oplagt valg for webdesignere, der hurtigt vil udvikle hjemmesider.