Tips för att arbeta med Illustrator. För webbdesigners som föredrar Photoshop

Tips för att arbeta med Illustrator. Här är en galen idé - designa ditt nästa webbprojekt i Illustrator. Om du är en primär webbdesigner är chansen stor att du inte kommer att svara särskilt bra på det här förslaget. Illustrator kan bara inte göra allt Photoshop kan göra, eller hur?

Inte säkert på det sättet.

Även Photoshop har blivit det de facto verktyget webbdesign, är Illustrator mer än kapabel att möta dina behov. Tack vare dess layoutverktyg är det ofta ett bättre och mer lämpligt program för webbdesign.

Eftersom de flesta webbdesignproffs inte vill vandra runt i Illustrator och leta efter bevis, har jag sammanställt en lista över webbrelaterade funktioner du behöver känna till för att börja experimentera med webbdesign i Illustrator.

Prova några av dessa och jag garanterar att du kommer att börja använda Illustrator som ett standardverktyg i ditt arbetsflöde för webbdesign.

1. Först till kvarn: ställ in alla enheter på Pixels. Tips för att arbeta med Illustrator

Som standard använder Illustrator metrisk enheter för objekt- och punktstorlekar för text. Dessa är bra inställningar för de flesta designsituationer, men för webbdesign du vill förmodligen se pixlar överallt. Så innan du börjar arbeta med något annat, se till att dina enheter är korrekt inställda.

Så här ställer du in enheterna till pixlar:

1. Öppna i Redigera-menyn
2. Välj måttenheter från undermenyn Inställningar.
3. Ställ in alla alternativ på "pixlar"

2. Skapa dokument med hjälp av en webbdokumentprofil.

 

När du vill börja arbeta med en ny design kan du enkelt bläddra igenom fönstret Nytt dokument och hoppa över några viktiga detaljer – som att berätta för Illustrator att du planerar att arbeta med en webbdesign så att du inte använder CMYK-färger. och suddiga kanter på objektet. Kom bara ihåg att välja inställningen för Internetprofilen i fönstret Nytt dokument så kommer det att gå bra.

3. Aktivera pixelrutnätsjustering för objekt. Tips för att arbeta med Illustrator

Den här funktionen är en livräddare om du någonsin har haft problem med suddiga formkanter i Photoshop.

Pixel Grid Alignment kommer att justera de raka horisontella och vertikala segmenten av ett objekt så att de passar perfekt i pixelrutnätet, samtidigt som krökta och lutande segment hålls jämna. Resultatet är skarpa, pixelperfekta former – något du definitivt vill ha inom webbdesign.

Den övre knappen har pixelrutnätsjustering aktiverad, vilket alltid resulterar i skarpa kanter.

Så här aktiverar du pixelrutnätsjustering på objektnivå:

1. Välj objekt
2. Öppna panelen Transformera (Fönster > Transformera).
3. Markera kryssrutan "Align to Pixel Grid" längst ned på panelen (om du inte ser den, dubbelklicka på panelen för att visa alternativen)

Notera. Pixelrutnätsjustering är aktiverad som standard för alla nya objekt som skapas med webbdokumentprofilen. Men om du klistrar in objekt från andra Illustrator-filer måste du manuellt justera pixeljusteringen för dem. Tips för att arbeta med Illustrator

4. Aktivera pixelförhandsgranskning.

Pixel-Preview-funktionen kommer att få Illustrator att bete sig precis som Photoshop när du skalar din bild över 100 % – istället för att få perfekta vektorer varje gång, kommer du faktiskt att se pixlarna som om du arbetade med en rasterbild.

Om du aktiverar pixelförhandsgranskning kommer du att känna att du är i Photoshop.

Tänk på hur coolt det är – du har all kraften av vektorgrafik till hands, och du kan se hur resultatet ser ut på pixelnivå.

Snyggt, inte sant?

Aktivera eller inaktivera pixelförhandsvisning

1. Öppna vymenyn
2. Välj Pixel View.

5. Använd konstverksfönster. Tips för att arbeta med Illustrator

Föreställ dig att två videokameror är riktade mot ditt projekt.

En kamera har en normal zoomnivå som visar 100 % av ditt arbete. Den andra kameran har en zoomnivå på 400 % och är riktad mot en specifik ikon du arbetade med.

Som en kirurg använder du zoomkameran för att göra små pixelnivåändringar av ikonen och tittar då och då på kameran med 100 % zoom för att se hur den faktiskt ser ut i sin verkliga storlek.

Täckfönster är bra när du behöver arbeta med små element som ikoner – du behöver inte hela tiden zooma in och ut för att kontrollera hur allt ser ut.

Dessa är konstverksfönster – de låter dig se din design samtidigt med olika zoomnivåer, färginställningar och andra varianter. Detta är mycket användbart för webbdesign, speciellt när du arbetar med detaljer på pixelnivå.

Så här använder du konstfönster:

1. Öppna menyn Fönster och välj sedan Nytt fönster. Illustrator skapar en ny flik med samma dokument i vy.
2. Gå till menyn Fönster igen, välj Ordna > Flytta alla till fönster. Detta gör att du kan ändra storlek och placering av fönster bredvid varandra som du tycker passar.
3. Experimentera med olika zoomnivåer i windows och börja göra några ändringar för att se hur det fungerar. Tips för att arbeta med Illustrator

6. Använd symboler för att snabbt skapa knappar, ikoner och mer.

Hur många gånger har du skapat samma (eller nästan samma) knapp, ikon eller widget i Photoshop? Om du gillar webbdesign gör du det förmodligen varje dag.

Illustrator kan hjälpa dig att spara tid och undvika detta repetitiva arbete med symboler.

I huvudsak är symboler en oändlig uppsättning färdiga designelement, som kan läggas till i arbetet genom att helt enkelt dra och släppa och sedan ändras vid behov. Detta är idealiskt för knappar, ikoner och andra standardobjekt som inte behöver skapas från grunden.

Men det finns en annan anledning till varför symboler är kraftfulla, och det kallas instansiering.

Symboler är inte bara bekväma, utan de gör det också enkelt att uppdatera återkommande designelement.

 

I huvudsak, när du gör ändringar i den ursprungliga symbolen, återspeglas dessa ändringar omedelbart i alla instanser av symbolen som finns i ditt konstverk. Behöver du större knappar på din hemsida? Byt bara symbolen. Vill du att dina formulärfält ska se olika ut på varje sida? Byt bara symbolen. Du förstår idén.

Tips: Om du inte vill att detta ska hända med en specifik instans av symbolen som, högerklicka på objektet i din illustration och välj Bryt symbolreferens. Detta kommer att utesluta den från automatiska uppdateringar.

Här är en bra video som förklarar hur man använder och manipulerar symboler:

Använda symboler i Adobe Illustrator av Adobe TV .

Så här använder du en befintlig symbol:

1. Öppna symbolpanelen från menyn Fönster.
2. Dra den valda symbolen till ditt arbete

Skapa en ny symbol:

1. Skapa en symbolbild
2. Öppna symbolpanelen från menyn Fönster.
3. Dra en illustration till panelen
4. Klicka på OK i dialogrutan för att bekräfta.

Så här redigerar du en symbol:

1. Öppna symbolpanelen från menyn Fönster.
2. Dubbelklicka på en symbol för att gå in i redigeringsläge.
3. När du är klar dubbelklickar du var som helst utanför symbolbilden för att avsluta redigeringsläget.

7. Expandera enkelt objekt med 9-segmentsskalning. Tips för att arbeta med Illustrator

Detta är en avancerad symbolikfunktion som låter dig definiera vilka delar av ett objekt som sträcks ut under skalning och vilka som förblir oförändrade.

Vänster: Ett exempel på en utsträckt knapp med och utan 9-segments zoominställning. Höger: Skalningsinställningen med 9 segment innebär att fyra stödlinjer flyttas som talar om för Illustrator vilka delar av objektet som är skyddade och vilka delar som kan skalas.

 

Ett praktiskt exempel är en knapp med rundade hörn - om du vill göra den längre kan du inte bara sträcka den horisontellt eftersom det kommer att förvränga hela objektet. Istället måste du flytta formpunkterna manuellt. Med 9-segmentsskalning fungerar stretchen som du tänkt dig. Tips för att arbeta med Illustrator

För att verkligen förstå hur det fungerar, lyssna på denna fantastiska videohandledning från Adobe TV för att snabbt komma igång:

Använder 9-segmentsskalning med symboler av Adobe TV .

8. Rundade hörn överallt!

Du kan skapa en rundad rektangel i Photoshop, men Illustrator låter dig tillämpa en icke-förstörande rundade hörneffekt på nästan alla objekt. Vad är oförstörande effekt? Det betyder att du kan slå på, stänga av eller ändra dess inställningar utan att påverka det underliggande originalobjektet.

Du kan tillämpa effekten av rundade hörn på nästan alla typer av objekt och justera den efter behov. Tips för att arbeta med Illustrator

Så här tillämpar du den rundade hörneffekten:

1. Skapa en rektangel eller något annat föremål med skarpa hörn
2. På menyn Effekter väljer du Stylisera > Rundade hörn.
3. Ange en hörnradie och klicka på Förhandsgranska för att se hur det ser ut.
4. Klicka på OK för att tillämpa effekten.

Så här ändrar du effekten med rundade hörn:

1. Välj ett objekt med rundade hörn
2. Öppna panelen Utseende från menyn Fönster.
3. Hitta effekten av rundade hörn och dubbelklicka på den för att ändra dess inställningar, eller klicka på ögonikonen för att slå på eller av den.

9. Skapa en snabbfyllning med ett rastermönster. Tips för att arbeta med Illustrator

Subtila bakgrundsmönster är en stor hit inom webbdesign, men många designers tror att de inte är lätta att applicera i Illustrator.

Jag måste erkänna att det inte är intuitivt, men lösningen är enkel.

Så här skapar du ett bitmappsmönster:

1. Placera en bild av mönstret på din pjäs
2. Klicka på "Infoga" på det översta bandet (viktigt - det fungerar inte utan det!)
3. Dra ett mönster till paletten Swatches
4. Applicera en färgruta på ett objekt för att fylla det med ett mönster

10. Automatisk placering av text runt bilder och objekt.

Photoshop är känt för sina mycket grundläggande textredigeringsmöjligheter. Om du vill linda text runt en bild måste du skapa två eller tre olika textramar och simulera effekten. Tips för att arbeta med Illustrator

Lyckligtvis har Illustrator dig täckt.

Så här lindar du text runt en bild:

1. Välj bilden eller objektet som du vill linda text runt
2. Öppna menyn Objekt, välj Radbryt text > Nytt.
3. För att ställa in radbrytningsavståndet, öppna menyn Text Wrap igen och välj Text Wrap Options.
4. Flytta bilden över texten för att se omslagseffekten

11. Skapa rika visuella effekter med inställningar för objektets utseende. Tips för att arbeta med Illustrator

I Illustrator fungerar ett objekts utseendepanel ungefär som lagereffekter i Photoshop – du kan lägga till flera fyllningar och linjer till ett objekt och sedan leka med deras överföringslägen, opacitet och effekter för att få intressanta resultat.

Den här texten är bara ett enda vektorobjekt, formaterad med hjälp av panelen Utseende och effekter.

Lekplatsen är ganska stor – från skuggor, oskärpa och glöd till texturering, distorsion och 3D. På så sätt kan du återskapa de flesta effekterna från Photoshop medan du fortfarande arbetar med vektorgrafik.

Utseendepanelen är kraftfull och rolig - jag uppmuntrar dig att prova den direkt eller titta på handledningen nedan för att förstå hur den fungerar:

Bemästra utseendepanelen av Adobe TV .

Är du redo att börja experimentera med Illustrator?

Att skapa webbplatser och användargränssnitt med Photoshop har nu blivit normen och de flesta designers är nöjda med denna lösning. Tips för att arbeta med Illustrator

Men bara för att Photoshop har blivit så utbrett betyder det inte att Illustrator inte har något att erbjuda – snarare tvärtom. Med verktyg som pixelrutnätsjustering, textbrytning och objekts utseende är det ett starkt skiftläge.

Kombinerat med kraftfullt layoutverktyg och vektorgrafik, skärning och export av bilder är Illustrator definitivt ett självklart val för webbdesigners som snabbt vill utveckla webbplatser.