Tips for å jobbe med Illustrator. For webdesignere som foretrekker Photoshop

Tips for å jobbe med Illustrator. Her er en sprø idé - design ditt neste nettprosjekt i Illustrator. Hvis du er en primær webdesigner, er sjansen stor for at du ikke vil svare veldig godt på dette forslaget. Illustrator kan bare ikke gjøre alt Photoshop kan gjøre, ikke sant?

Ikke sikkert på den måten.

Selv Photoshop har blitt de facto-verktøyet webdesign, er Illustrator mer enn i stand til å møte dine behov. Takket være layoutverktøyene er det ofte et bedre og mer egnet program for webdesign.

Siden de fleste nettdesignere ikke vil vandre rundt i Illustrator og lete etter bevis, har jeg satt sammen en liste over nettrelaterte funksjoner du trenger å vite for å begynne å eksperimentere med webdesign i Illustrator.

Prøv noen av disse, og jeg garanterer at du vil begynne å bruke Illustrator som et standardverktøy i arbeidsflyten for webdesign.

1. Først: Sett alle enheter til piksler. Tips for å jobbe med Illustrator

Som standard bruker Illustrator metrikk enheter for objekt- og punktstørrelser for tekst. Dette er gode innstillinger for de fleste designsituasjoner, men for webdesign du vil sannsynligvis se piksler overalt. Så før du begynner å jobbe med noe annet, sørg for at enhetene dine er riktig konfigurert.

Slik setter du enhetene til piksler:

1. Åpne i Rediger-menyen
2. Velg måleenheter fra undermenyen for innstillinger.
3. Sett alle alternativer til "piksler"

2. Opprett dokumenter ved hjelp av en webdokumentprofil.

 

Når du vil begynne å jobbe med et nytt design, kan du enkelt bla gjennom vinduet Nytt dokument og hoppe over noen viktige detaljer – som å fortelle Illustrator at du planlegger å jobbe med et webdesign slik at du ikke bruker CMYK-farger. og uskarpe kanter på objektet. Bare husk å velge Internett-profilinnstillingen i vinduet Nytt dokument, så går det bra.

3. Aktiver justering av pikselnett for objekter. Tips for å jobbe med Illustrator

Denne funksjonen er en livredder hvis du noen gang har hatt problemer med uskarpe formkanter i Photoshop.

Pixel Grid Alignment vil justere de rette horisontale og vertikale segmentene til et objekt for å passe perfekt til pikselnettet, samtidig som buede og skrå segmenter holdes jevne. Resultatet er skarpe, pikselperfekte former – noe du definitivt vil ha i webdesign.

Den øverste knappen har pikselrutejustering aktivert, noe som alltid resulterer i skarpe kanter.

Slik aktiverer du pikselrutenettjustering på objektnivå:

1. Velg objekt
2. Åpne Transform-panelet (Vindu > Transformer).
3. Merk av for "Align to Pixel Grid" nederst på panelet (hvis du ikke ser det, dobbeltklikk panelet for å vise alternativene)

Merk. Justering av pikselnett er aktivert som standard for alle nye objekter som er opprettet ved hjelp av nettdokumentprofilen. Men hvis du limer inn objekter fra andre Illustrator-filer, må du manuelt justere pikseljusteringen for dem. Tips for å jobbe med Illustrator

4. Slå på pikselforhåndsvisning.

Pixel-Preview-funksjonen vil få Illustrator til å oppføre seg akkurat som Photoshop når du skalerer bildet over 100 % – i stedet for å få perfekte vektorer hver gang, vil du faktisk se pikslene som om du jobbet med et rasterbilde.

Hvis du slår på pikselforhåndsvisning, vil du føle at du er i Photoshop.

Tenk på hvor kult det er – du har all kraften til vektorgrafikk for hånden, og du kan se hvordan resultatet ser ut på pikselnivå.

Ryddig, ikke sant?

Aktiver eller deaktiver pikselforhåndsvisning

1. Åpne visningsmenyen
2. Velg Pixel View.

5. Bruk Artwork-vinduer. Tips for å jobbe med Illustrator

Tenk deg at to videokameraer er rettet mot prosjektet ditt.

Ett kamera har et normalt zoomnivå, som viser 100 % av arbeidet ditt. Det andre kameraet har 400 % zoomnivå og er rettet mot ett spesifikt ikon du jobbet med.

Som en kirurg bruker du zoomkameraet til å gjøre små endringer på pikselnivå på ikonet, og av og til ser du på kameraet med 100 % zoom for å se hvordan det faktisk ser ut i sin faktiske størrelse.

Dekkvinduer er flotte når du trenger å jobbe med små elementer som ikoner – du trenger ikke hele tiden å zoome inn og ut for å sjekke hvordan alt ser ut.

Dette er Artwork-vinduer – de lar deg se designet ditt samtidig med forskjellige zoomnivåer, fargeinnstillinger og andre variasjoner. Dette er veldig nyttig for webdesign, spesielt når du jobber med detaljer på pikselnivå.

Slik bruker du Artwork-vinduer:

1. Åpne Vindu-menyen, og velg deretter Nytt vindu. Illustrator vil opprette en ny fane med det samme dokumentet i visningen.
2. Gå til Vindu-menyen igjen, velg Ordne > Flytt alle til vindu. Dette vil tillate deg å endre størrelse og plassering av vinduer ved siden av hverandre etter eget ønske.
3. Eksperimenter med forskjellige zoomnivåer i vinduer og begynn å gjøre noen endringer for å se hvordan det fungerer. Tips for å jobbe med Illustrator

6. Bruk symboler for raskt å lage knapper, ikoner og mer.

Hvor mange ganger har du laget den samme (eller nesten samme) knappen, ikonet eller widgeten i Photoshop? Hvis du er interessert i webdesign, gjør du det sannsynligvis hver dag.

Illustrator kan hjelpe deg å spare tid og unngå dette repeterende arbeidet med symboler.

I hovedsak er symboler et endeløst sett med ferdiglagde designelementer, som kan legges til i arbeidet ved å dra og slippe, og deretter endres etter behov. Dette er ideelt for knapper, ikoner og andre standardobjekter som ikke trenger å lages fra bunnen av.

Men det er en annen grunn til at symboler er kraftige, og det kalles instansiering.

Symboler er ikke bare praktiske, men de gjør det også enkelt å oppdatere gjentatte designelementer.

 

I hovedsak, hver gang du gjør endringer i det originale symbolet, reflekteres disse endringene umiddelbart i alle forekomster av symbolet som finnes i kunstverket ditt. Trenger du større knapper på nettsiden din? Bare endre symbolet. Vil du at skjemafeltene skal se annerledes ut på hver side? Bare endre symbolet. Du skjønner ideen.

Tips: Hvis du ikke vil at dette skal skje med en spesifikk forekomst av as-symbolet, høyreklikker du objektet i illustrasjonen og velger Bryt symbolreferanse. Dette vil ekskludere den fra automatiske oppdateringer.

Her er en god video som forklarer hvordan du bruker og manipulerer symboler:

Bruke symboler i Adobe Illustrator av Adobe TV .

Slik bruker du et eksisterende symbol:

1. Åpne Symboler-panelet fra Vindu-menyen.
2. Dra det valgte symbolet til arbeidet ditt

Lag et nytt symbol:

1. Lag et symbolbilde
2. Åpne Symboler-panelet fra Vindu-menyen.
3. Dra en illustrasjon til panelet
4. Klikk OK i dialogboksen for å bekrefte.

For å redigere et symbol:

1. Åpne Symboler-panelet fra Vindu-menyen.
2. Dobbeltklikk på et symbol for å gå inn i redigeringsmodus.
3. Når du er ferdig, dobbeltklikker du hvor som helst utenfor symbolbildet for å gå ut av redigeringsmodus.

7. Utvid enkelt objekter med 9-segments skalering. Tips for å jobbe med Illustrator

Dette er en avansert symbologi-funksjon som lar deg definere hvilke deler av et objekt som strekkes under skalering og hvilke som forblir uendret.

Venstre: Et eksempel på en strukket knapp med og uten 9-segments zoominnstilling. Høyre: 9-segments skaleringsinnstillingen innebærer å flytte 4 hjelpelinjer som forteller Illustrator hvilke deler av objektet som er beskyttet og hvilke deler som kan skaleres.

 

Et praktisk eksempel er en knapp med avrundede hjørner - hvis du vil gjøre den lengre, kan du ikke bare strekke den horisontalt fordi det vil forvrenge hele objektet. I stedet må du flytte formpunktene manuelt. Med 9-segments skalering fungerer strekningen som du hadde tenkt. Tips for å jobbe med Illustrator

For å virkelig forstå hvordan det fungerer, lytt til denne flotte videoopplæringen fra Adobe TV for å komme raskt i gang:

Bruker 9-segments skalering med symboler av Adobe TV .

8. Avrundede hjørner overalt!

Du kan lage et avrundet rektangel i Photoshop, men Illustrator lar deg bruke en ikke-destruktiv avrundet hjørneeffekt på nesten alle objekter. Hva er ikke-destruktiv effekt? Dette betyr at du kan slå den på, av eller endre innstillingene uten å påvirke det underliggende originale objektet.

Du kan bruke effekten med avrundede hjørner på nesten alle typer objekter og justere den etter behov. Tips for å jobbe med Illustrator

Slik bruker du den avrundede hjørneeffekten:

1. Lag et rektangel eller et annet objekt med skarpe hjørner
2. Velg Stiliser > Avrundede hjørner fra Effekt-menyen.
3. Angi en hjørneradius og klikk på Forhåndsvisning for å se hvordan den ser ut.
4. Klikk OK for å bruke effekten.

For å endre effekten av det avrundede hjørnet:

1. Velg et objekt med avrundede hjørner
2. Åpne Utseende-panelet fra Vindu-menyen.
3. Finn Rounded Corners-effekten og dobbeltklikk på den for å endre innstillingene, eller klikk på øyeikonet for å slå den på eller av.

9. Lage en hurtigfylling med et rastermønster. Tips for å jobbe med Illustrator

Subtile bakgrunnsmønstre er en stor hit innen webdesign, men mange designere tror de ikke er enkle å bruke i Illustrator.

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

Slik lager du et punktgrafikkmønster:

1. Plasser et bilde av mønsteret på stykket ditt
2. Klikk "Sett inn" på det øverste båndet (viktig - det vil ikke fungere uten det!)
3. Dra et mønster til fargeprøvepaletten
4. Påfør en fargeprøve på en gjenstand for å fylle den med et mønster

10. Automatisk plassering av tekst rundt bilder og objekter.

Photoshop er kjent for sine helt grunnleggende tekstredigeringsmuligheter. Hvis du vil vikle tekst rundt et bilde, må du lage to eller tre forskjellige tekstrammer og simulere effekten. Tips for å jobbe med Illustrator

Heldigvis har Illustrator deg dekket.

Slik vikler du tekst rundt et bilde:

1. Velg bildet eller objektet du vil vikle tekst rundt
2. Åpne Objekt-menyen, velg Bryt tekst > Ny.
3. For å angi bryteavstanden, åpne tekstbrytingsmenyen igjen og velg Alternativer for tekstbryting.
4. Flytt bildet over teksten for å se innpakningseffekten

11. Lag rike visuelle effekter med innstillinger for objektutseende. Tips for å jobbe med Illustrator

I Illustrator fungerer et objekts Utseende-panel omtrent som lageffekter i Photoshop – du kan legge til flere fyll og streker til et objekt, og deretter leke med overføringsmodusene, opasiteten og effektene for å få interessante resultater.

Denne teksten er bare et enkelt vektorobjekt, stilt ved hjelp av panelet Utseende og effekter.

Lekeplassen er ganske stor – fra skygger, uskarphet og glød til teksturering, forvrengning og 3D. På denne måten kan du gjenskape de fleste effektene fra Photoshop mens du fortsatt jobber med vektorgrafikk.

Utseendepanelet er kraftig og morsomt - jeg oppfordrer deg til å prøve det ut med en gang eller se veiledningen nedenfor for å forstå hvordan det fungerer:

Mestring av utseendepanelet av Adobe TV .

Er du klar til å begynne å eksperimentere med Illustrator?

Å lage nettsider og brukergrensesnitt ved hjelp av Photoshop har nå blitt normen og de fleste designere er fornøyd med denne løsningen. Tips for å jobbe med Illustrator

Men bare fordi Photoshop har blitt så utbredt, betyr det ikke at Illustrator ikke har noe å tilby – snarere tvert imot. Med verktøy som justering av pikselrutenett, tekstbryting og objektutseende er det en sterk sak.

Kombinert med kraftig layoutverktøy og vektorgrafikk, bildeskjæring og eksport, er Illustrator definitivt et opplagt valg for webdesignere som ønsker å raskt utvikle nettsteder.