Tips foar wurkjen mei Illustrator. Hjir is in gek idee - ûntwerp jo folgjende webprojekt yn Illustrator. As jo in primêre webûntwerper binne, binne de kânsen grut dat jo net heul goed sille reagearje op dizze suggestje. Illustrator kin gewoan net alles dwaan wat Photoshop kin dwaan, toch?
Net wis op dy wize.
Hoewol Photoshop is it de facto ark wurden webûntwerp, Illustrator is mear dan by steat om te foldwaan oan jo behoeften. Mei tank oan syn layout-ark is it faaks in better en geskikter programma foar webûntwerp.
Om't de measte webûntwerpprofessionals net yn Illustrator wolle omdoarmje op syk nei bewiis, haw ik in list gearstald mei web-relatearre funksjes dy't jo witte moatte om te begjinnen te eksperimintearjen mei webûntwerp yn Illustrator.
Besykje in pear fan dizze en ik garandearje dat jo sille begjinne mei it brûken fan Illustrator as standert ark yn jo workflow foar webûntwerp.
1. Earste dingen earst: set alle ienheden oan Pixels. Tips foar wurkjen mei Illustrator
Standert brûkt Illustrator metrysk ienheden foar objekt en punt maten foar tekst. Dit binne geweldige ynstellingen foar de measte ûntwerpsituaasjes, mar foar web ûntwerp jo sille wierskynlik oeral piksels sjen wolle. Dus foardat jo begjinne te wurkjen oan wat oars, soargje derfoar dat jo ienheden binne goed ynsteld.
Om de ienheden yn te stellen op piksels:
- Iepenje yn it menu Bewurkje
- Selektearje ienheden fan mjitting út it submenu ynstellings.
- Stel alle opsjes yn op "piksels"
2. Meitsje dokuminten mei help fan in web dokumint profyl.
As jo wolle begjinne te wurkjen oan in nij ûntwerp, rôlje dan maklik troch it finster fan Nij dokumint en slaan wat wichtige details oer - lykas Illustrator fertelle dat jo fan plan binne oan in webûntwerp te wurkjen, sadat jo gjin CMYK-kleuren brûke. en wazige rânen fan it foarwerp. Unthâld gewoan de ynstelling fan it ynternetprofyl te selektearjen yn it finster Nij dokumint en it sil goed wêze.
3. Ynskeakelje pikselraster alignment foar objekten. Tips foar wurkjen mei Illustrator
Dizze funksje is in libbensredder as jo oait problemen hawwe mei wazige foarmrânen yn Photoshop.
Pixel Grid Alignment sil de rjochte horizontale en fertikale segminten fan in objekt oanpasse om perfekt te passen by it pikselraster, wylst kromme en skuorjende segminten glêd wurde hâlden. It resultaat is skerpe, pixel-perfekte foarmen - iets dat jo perfoarst wolle yn webûntwerp.
De boppeste knop hat pikselraster-ôfstimming ynskeakele, wat altyd resulteart yn skerpe rânen.
Om pikselraster-ôfstimming op objektnivo yn te skeakeljen:
- Selektearje foarwerp
- Iepenje it Transformearje paniel (Finster> Transformearje).
- Kontrolearje it karfakje "Align to Pixel Grid" oan 'e ûnderkant fan it paniel (as jo it net sjogge, dûbelklikje dan op it paniel om de opsjes sjen te litten)
Noat. Pixel-raster-ôfstimming is standert ynskeakele foar alle nije objekten makke mei it webdokumintprofyl. As jo lykwols objekten út oare Illustrator-bestannen plakke, moatte jo de pikselôfstimming foar har manuell oanpasse. Tips foar wurkjen mei Illustrator
4. Skeakelje pikselfoarbyld.
De Pixel-Preview-funksje sil Illustrator krekt as Photoshop dwaan as jo jo ôfbylding boppe 100% skaalje - ynstee fan elke kear perfekte fektors te krijen, sille jo de piksels feitlik sjen as wiene jo mei in rasterôfbylding wurkje.
It ynskeakeljen fan pikselfoarbyld sil jo fiele dat jo yn Photoshop binne.
Tink oan hoe cool it is - jo hawwe alle krêft fan fektorgrafiken binnen jo fingertoppen, en jo kinne sjen hoe't it resultaat derút sjocht op it pikselnivo.
Neat, is it net?
Pikselfoarbyld yn- of útskeakelje
- Iepenje werjeftemenu
- Selektearje Pixel View.
5. Brûk Artwork finsters. Tips foar wurkjen mei Illustrator
Stel jo foar dat twa fideokamera's op jo projekt rjochte binne.
Ien kamera hat in normaal zoomnivo, en toant 100% fan jo wurk. De oare kamera hat in 400% zoomnivo en is rjochte op ien spesifyk ikoan wêrop jo wurke hawwe.
Lykas in sjirurch brûke jo de zoomkamera om lytse feroaringen op pikselnivo oan it ikoan te meitsjen, soms nei de 100% zoomkamera te sjen om te sjen hoe't it der eins útsjocht op syn werklike grutte.
Coverfinsters binne geweldich as jo moatte wurkje mei lytse eleminten lykas ikoanen - jo hoege net konstant yn- en út te zoomjen om te kontrolearjen hoe't alles derút sjocht.
Dit binne Artwork-finsters - se kinne jo jo ûntwerp tagelyk besjen mei ferskate zoomnivo's, kleurynstellingen en oare fariaasjes. Dit is heul nuttich foar webûntwerp, foaral as jo wurkje mei details op pikselnivo.
Om Artwork-finsters te brûken:
- Iepenje it finstermenu, selektearje dan Nij finster. Illustrator sil in nije ljepper meitsje mei itselde dokumint yn sicht.
- Gean wer nei it Finstermenu, kies Arrange > Ferpleats alles nei finster. Dit sil tastean jo te feroarjen grutte en pleatsing fan finsters neist elkoar sa't jo goed fine.
- Eksperimintearje mei ferskate zoomnivo's yn finsters en begjin wat feroaringen te meitsjen om te sjen hoe't it wurket. Tips foar wurkjen mei Illustrator
6. Brûk symboalen om fluch meitsje knoppen, ikoanen, en mear.
Hoefolle kearen hawwe jo deselde (of hast deselde) knop, ikoan of widget makke yn Photoshop? As jo fan webûntwerp binne, dogge jo it wierskynlik elke dei.
Illustrator kin jo helpe om tiid te besparjen en dit repetitive wurk mei symboalen te foarkommen.
Yn wêzen, symboalen binne in einleaze set fan klear makke design eleminten, dat kin wurde tafoege oan it wurk troch gewoan te slepen en te fallen, en dan oanpast as nedich. Dit is ideaal foar knoppen, ikoanen en oare standertobjekten dy't net fanôf it begjin moatte wurde makke.
Mar der is in oare reden wêrom't symboalen binne machtich, en it hjit instantiation.
Symboalen binne net allinich handich, mar se meitsje it ek maklik om werheljende ûntwerpeleminten te aktualisearjen.
Yn essinsje, as jo wizigingen meitsje oan it orizjinele symboal, wurde dy wizigingen fuortendaliks wjerspegele yn alle gefallen fan it symboal fûn yn jo keunstwurk. Binne jo gruttere knoppen nedich op jo webside? Feroarje gewoan it symboal. Wolle jo dat jo formulierfjilden op elke side oars sjogge? Feroarje gewoan it symboal. Jo krije it idee.
Tip: As jo net wolle dat dit bart mei in spesifyk eksimplaar fan it as symboal, klik dan mei rjochts op it objekt yn jo yllustraasje en selektearje Break Symbol Reference. Dit sil it útslute fan automatyske fernijings.
Hjir is in goede fideo dy't ferklearret hoe't jo symboalen brûke en manipulearje:
Symboalen brûke yn Adobe Illustrator fan Adobe TV .
Om in besteand symboal te brûken:
- Iepenje it paniel Symboalen út it finstermenu.
- Sleep it selektearre symboal nei jo wurk
Meitsje in nij symboal:
- Meitsje in symboal ôfbylding
- Iepenje it paniel Symboalen út it finstermenu.
- Sleep in yllustraasje nei it paniel
- Klikje OK yn it dialoochfinster om te befêstigjen.
Om in symboal te bewurkjen:
- Iepenje it paniel Symboalen út it finstermenu.
- Dûbelklik op in symboal om de bewurkingsmodus yn te gean.
- As klear, dûbelklik dan oeral bûten it symboalôfbylding om de bewurkingsmodus te ferlitten.
7. Maklik útwreidzje foarwerpen mei 9-segment skaalfergrutting. Tips foar wurkjen mei Illustrator
Dit is in avansearre symboalyske funksje wêrmei jo te definiearjen hokker dielen fan in objekt wurde útrekt tidens skaalfergrutting en hokker bliuwe net feroare.
Lofts: In foarbyld fan in útwreide knop mei en sûnder de 9-segment zoomynstelling. Rjochts: De skaalfergrutting mei 9 segminten omfettet it ferpleatsen fan 4 gidsen dy't Illustrator fertelle hokker dielen fan it objekt wurde beskerme en hokker dielen kinne wurde skalearre.
In praktysk foarbyld is in knop mei rûne hoeken - as jo it langer meitsje wolle, kinne jo it net gewoan horizontaal útrekkenje, om't dat it hiele objekt ferfoarme. Ynstee moatte jo de foarmpunten manuell ferpleatse. Mei skaalfergrutting fan 9 segminten wurket de stretch lykas jo bedoeld hawwe. Tips foar wurkjen mei Illustrator
Om echt te begripen hoe't it wurket, harkje nei dizze geweldige fideotutorial fan Adobe TV om fluch op 'e hichte te kommen:
Mei help fan 9-segment skaalfergrutting mei symboalen fan Adobe TV .
8. Oeral rûne hoeken!
Jo kinne in rûne rjochthoek meitsje yn Photoshop, mar Illustrator kinne jo in net-destruktyf rûne hoeke-effekt tapasse op hast elk objekt. Wat is net-destruktyf effekt? Dit betsjut dat jo it yn-, út-, of feroarje kinne sûnder it ûnderlizzende orizjinele objekt te beynfloedzjen.
Jo kinne it effekt fan rûne hoeken tapasse op hast elk type objekt en oanpasse as nedich. Tips foar wurkjen mei Illustrator
Om it effekt mei rûne hoeken ta te passen:
- Meitsje in rjochthoek of in oar objekt mei skerpe hoeken
- Kies yn it menu Effekten Stylearje > Rûnde hoeken.
- Fier in hoekradius yn en klik op Foarbyld om te sjen hoe't it derút sjocht.
- Klik OK om it effekt ta te passen.
Om it effekt fan 'e rûne hoeke te feroarjen:
- Selektearje in objekt mei rûne hoeken
- Iepenje it paniel Uterlik fanút it finstermenu.
- Fyn it effekt Rounded Corners en dûbelklik derop om de ynstellings te feroarjen, of klik op it eachikoan om it yn of út te skeakeljen.
9. It meitsjen fan in flugge fill mei in raster patroan. Tips foar wurkjen mei Illustrator
Subtile eftergrûnpatroanen binne in grutte hit yn webûntwerp, mar in protte ûntwerpers tinke dat se net maklik binne te brûken yn Illustrator.
Ik moat tajaan, it is net yntuïtyf, mar de oplossing is ienfâldich.
Om in bitmappatroan te meitsjen:
- Plak in foto fan it patroan op jo stik
- Klikje op "Ynfoegje" op it boppeste lint (wichtich - it sil net wurkje sûnder it!)
- Sleep in patroan nei it palet Swatches
- Tapasse in swatch op elk objekt om it te foljen mei in patroan
10. Automatyske pleatsing fan tekst om bylden en objekten.
Photoshop is bekend om syn heul basale tekstbewurkingsmooglikheden. As jo tekst om in ôfbylding wolle wrapje, moatte jo twa of trije ferskillende tekstframes meitsje en it effekt simulearje. Tips foar wurkjen mei Illustrator
Lokkich hat Illustrator jo behannele.
Om tekst om in ôfbylding te draaien:
- Selektearje de ôfbylding of it objekt wêr't jo tekst om wolle wrapje
- Iepenje it Objektmenu, kies Tekst wrap > Nij.
- Om de wrapôfstân yn te stellen, iepenje it menu Tekstwrap opnij en selektearje Tekstwrap-opsjes.
- Ferpleats de ôfbylding oer de tekst om it wrappingseffekt te sjen
11. Meitsje rike fisuele effekten mei foarwerp uterlik ynstellings. Tips foar wurkjen mei Illustrator
Yn Illustrator wurket it Uterlikpaniel fan in objekt in protte as laacheffekten yn Photoshop - jo kinne meardere vullingen en streken tafoegje oan in objekt, en spielje dan mei har oerdrachtmodi, dekking en effekten om ynteressante resultaten te krijen.
Dizze tekst is mar ien fektorobjekt, stylearre mei it paniel Uterlik en effekten.
De boarterstún is frij grut - fan drop-shadows, blur en gloed oant tekstuer, ferfoarming en 3D. Op dizze manier kinne jo de measte effekten fan Photoshop opnij oanmeitsje, wylst jo noch wurkje mei fektorgrafiken.
It paniel Uterlik is krêftich en leuk - ik moedigje jo oan om it direkt te besykjen of de tutorial hjirûnder te besjen om te begripen hoe't it wurket:
Behearskje it Uterlik Panel fan Adobe TV .
Binne jo ree om te begjinnen te eksperimintearjen mei Illustrator?
It meitsjen fan websiden en brûkersynterfaces mei Photoshop is no de noarm wurden en de measte ûntwerpers binne bliid mei dizze oplossing. Tips foar wurkjen mei Illustrator
Mar krekt om't Photoshop sa wiidferspraat wurden is, betsjut net dat Illustrator neat te bieden hat - krekt oarsom. Mei ark lykas ôfstimming fan pikselraster, tekstomwikkeling, en it uterlik fan objekten, makket it in sterke saak.
Kombinearre mei krêftige layout ark en vector graphics, image slicing en eksportearjen, Illustrator is perfoarst in foar de hân lizzende kar foar web ûntwerpers dy't wolle fluch ûntwikkeljen websiden.
Leave a comment