Tips voor het werken met Illustrator. Hier is een gek idee: ontwerp uw volgende webproject in Illustrator. Als u een primaire webontwerper bent, is de kans groot dat u niet zo goed op deze suggestie zult reageren. Illustrator kan gewoon niet alles wat Photoshop kan, toch?
Niet zeker op die manier.
Hoewel Photoshop is het de facto hulpmiddel geworden webdesign, Illustrator kan ruimschoots aan uw wensen voldoen. Dankzij de lay-outtools is het vaak een beter en geschikter programma voor webdesign.
Omdat de meeste webontwerpprofessionals niet door Illustrator willen ronddwalen op zoek naar bewijs, heb ik een lijst samengesteld met webgerelateerde functies die u moet kennen om te gaan experimenteren met webontwerp in Illustrator.
Probeer er een paar en ik garandeer dat u Illustrator als standaardhulpmiddel in uw webontwerpworkflow zult gaan gebruiken.
1. Allereerst: stel alle eenheden in op Pixels. Tips voor het werken met Illustrator
Standaard gebruikt Illustrator metrische gegevens eenheden voor object- en puntgroottes voor tekst. Dit zijn geweldige instellingen voor de meeste ontwerpsituaties, maar ook voor webontwerp je wilt waarschijnlijk overal pixels zien. Zorg er dus voor dat uw eenheden correct zijn ingesteld voordat u aan iets anders gaat werken.
Om de eenheden in te stellen op pixels:
- Openen in het menu Bewerken
- Selecteer maateenheden in het submenu Instellingen.
- Zet alle opties op "pixels"
2. Maak documenten met behulp van een webdocumentprofiel.
Als u aan een nieuw ontwerp wilt gaan werken, bladert u eenvoudig door het venster Nieuw document en slaat u enkele belangrijke details over, zoals het vertellen aan Illustrator dat u van plan bent aan een webontwerp te werken, zodat u geen CMYK-kleuren gebruikt. en vage randen van het object. Vergeet niet om de internetprofielinstelling in het venster Nieuw document te selecteren, dan komt alles goed.
3. Schakel pixelrasteruitlijning voor objecten in. Tips voor het werken met Illustrator
Deze functie is een levensredder als u ooit problemen heeft gehad met onscherpe vormranden in Photoshop.
Pixel Grid Alignment past de rechte horizontale en verticale segmenten van een object aan zodat ze perfect in het pixelraster passen, terwijl gebogen en schuine segmenten vloeiend blijven. Het resultaat zijn scherpe, pixel-perfecte vormen, iets wat je zeker wilt bij webdesign.
Op de bovenste knop is pixelrasteruitlijning ingeschakeld, wat altijd resulteert in scherpe randen.
Uitlijning van pixelrasters op objectniveau inschakelen:
- Selecteer object
- Open het deelvenster Transformeren (Venster > Transformeren).
- Vink het selectievakje 'Uitlijnen op pixelraster' onder aan het paneel aan (als u dit niet ziet, dubbelklikt u op het paneel om de opties weer te geven)
Opmerking. Uitlijning van pixelrasters is standaard ingeschakeld voor alle nieuwe objecten die zijn gemaakt met behulp van het webdocumentprofiel. Als u echter objecten uit andere Illustrator-bestanden plakt, moet u de pixeluitlijning daarvoor handmatig aanpassen. Tips voor het werken met Illustrator
4. Schakel pixelvoorbeeld in.
De Pixel-Preview-functie zorgt ervoor dat Illustrator zich net als Photoshop gedraagt bij het schalen van uw afbeelding boven de 100%. In plaats van elke keer perfecte vectoren te krijgen, ziet u de pixels feitelijk alsof u met een rasterafbeelding werkt.
Als u het pixelvoorbeeld inschakelt, voelt het alsof u in Photoshop bent.
Bedenk eens hoe cool het is: je hebt alle kracht van vectorafbeeldingen binnen handbereik en je kunt zien hoe het resultaat eruit ziet op pixelniveau.
Netjes, nietwaar?
Pixelvoorbeeld in- of uitschakelen
- Weergavemenu openen
- Selecteer Pixelweergave.
5. Gebruik illustratievensters. Tips voor het werken met Illustrator
Stel je voor dat twee videocamera's op jouw project zijn gericht.
Eén camera heeft een normaal zoomniveau en laat 100% van uw werk zien. De andere camera heeft een zoomniveau van 400% en is gericht op één specifiek pictogram waar je aan werkte.
Net als een chirurg gebruik je de zoomcamera om kleine wijzigingen op pixelniveau aan te brengen in het pictogram, waarbij je af en toe een blik werpt op de 100% zoomcamera om te zien hoe deze er op ware grootte uitziet.
Omslagvensters zijn ideaal als u met kleine elementen zoals pictogrammen moet werken. U hoeft niet voortdurend in en uit te zoomen om te controleren hoe alles eruit ziet.
Dit zijn illustratievensters. Hiermee kunt u uw ontwerp tegelijkertijd bekijken met verschillende zoomniveaus, kleurinstellingen en andere variaties. Dit is erg handig voor webontwerp, vooral als u met details op pixelniveau werkt.
Om illustratievensters te gebruiken:
- Open het menu Venster en selecteer vervolgens Nieuw venster. Illustrator maakt een nieuw tabblad met hetzelfde document in beeld.
- Ga opnieuw naar het menu Venster en kies Schikken > Alles naar venster verplaatsen. Hierdoor kun je veranderen grootte en plaatsing van de ramen naast elkaar zoals u wilt.
- Experimenteer met verschillende zoomniveaus in vensters en breng enkele wijzigingen aan om te zien hoe het werkt. Tips voor het werken met Illustrator
6. Gebruik symbolen om snel knoppen, pictogrammen en meer te maken.
Hoe vaak heb je dezelfde (of bijna dezelfde) knop, pictogram of widget in Photoshop gemaakt? Als u van webdesign houdt, doet u dit waarschijnlijk elke dag.
Illustrator kan u helpen tijd te besparen en dit repetitieve werk met symbolen te vermijden.
In wezen zijn symbolen een eindeloze reeks kant-en-klare symbolen ontwerp elementen, die aan het werk kan worden toegevoegd door eenvoudigweg te slepen en neer te zetten, en vervolgens indien nodig kan worden aangepast. Dit is ideaal voor knoppen, pictogrammen en andere standaardobjecten die niet helemaal opnieuw hoeven te worden gemaakt.
Maar er is nog een reden waarom symbolen krachtig zijn, en die wordt instantiatie genoemd.
Symbolen zijn niet alleen handig, maar maken het ook gemakkelijk om herhalende ontwerpelementen bij te werken.
Wanneer u wijzigingen aanbrengt in het originele symbool, worden deze wijzigingen in wezen onmiddellijk weerspiegeld in alle exemplaren van het symbool in uw kunstwerk. Heeft u grotere knoppen nodig op uw website? Verander gewoon het symbool. Wilt u dat uw formuliervelden er op elke pagina anders uitzien? Verander gewoon het symbool. Je snapt het idee.
Tip: Als u niet wilt dat dit gebeurt met een specifiek exemplaar van het as-symbool, klikt u met de rechtermuisknop op het object in uw illustratie en selecteert u Symboolreferentie verbreken. Hierdoor wordt het uitgesloten van automatische updates.
Hier is een goede video waarin wordt uitgelegd hoe u symbolen kunt gebruiken en manipuleren:
Symbolen gebruiken in Adobe Illustrator van Adobe-tv .
Een bestaand symbool gebruiken:
- Open het deelvenster Symbolen vanuit het menu Venster.
- Sleep het geselecteerde symbool naar uw werk
Maak een nieuw symbool:
- Maak een symboolafbeelding
- Open het deelvenster Symbolen vanuit het menu Venster.
- Sleep een illustratie naar het paneel
- Klik op OK in het dialoogvenster om te bevestigen.
Een symbool bewerken:
- Open het deelvenster Symbolen vanuit het menu Venster.
- Dubbelklik op een symbool om de bewerkingsmodus te openen.
- Wanneer u klaar bent, dubbelklikt u ergens buiten de symboolafbeelding om de bewerkingsmodus te verlaten.
7. Breid objecten eenvoudig uit met schaling van 9 segmenten. Tips voor het werken met Illustrator
Dit is een geavanceerde symbologiefunctie waarmee u kunt definiëren welke delen van een object tijdens het schalen worden uitgerekt en welke ongewijzigd blijven.
Links: Een voorbeeld van een uitgerekte knop met en zonder de 9-segment zoominstelling. Rechts: Bij de schaalinstelling met 9 segmenten worden vier hulplijnen verplaatst die Illustrator vertellen welke delen van het object worden beschermd en welke delen kunnen worden geschaald.
Een praktisch voorbeeld is een knop met afgeronde hoeken. Als je hem langer wilt maken, kun je hem niet zomaar horizontaal uitrekken, want dan vervormt het hele object. In plaats daarvan moet u de vormpunten handmatig verplaatsen. Met schaling van 9 segmenten werkt de rek zoals u het bedoeld had. Tips voor het werken met Illustrator
Om echt te begrijpen hoe het werkt, luister je naar deze geweldige video-tutorial van Adobe TV om snel aan de slag te gaan:
Schalen met 9 segmenten met symbolen van Adobe-tv .
8. Overal afgeronde hoeken!
U kunt in Photoshop een afgeronde rechthoek maken, maar met Illustrator kunt u op vrijwel elk object een niet-destructief afgerond hoekeffect toepassen. Wat is een niet-destructief effect? Dit betekent dat u het kunt in- of uitschakelen of de instellingen kunt wijzigen zonder dat dit gevolgen heeft voor het onderliggende originele object.
U kunt het afgeronde hoekeneffect op vrijwel elk type object toepassen en indien nodig aanpassen. Tips voor het werken met Illustrator
Om het afgeronde hoekeffect toe te passen:
- Maak een rechthoek of een ander object met scherpe hoeken
- Kies in het menu Effecten Stileren > Afgeronde hoeken.
- Voer een hoekradius in en klik op Voorbeeld om te zien hoe deze eruit ziet.
- Klik op OK om het effect toe te passen.
Om het afgeronde hoekeffect te wijzigen:
- Selecteer een object met afgeronde hoeken
- Open het deelvenster Vormgeving vanuit het menu Venster.
- Zoek het effect Afgeronde hoeken en dubbelklik erop om de instellingen te wijzigen, of klik op het oogpictogram om het in of uit te schakelen.
9. Een snelle vulling maken met een rasterpatroon. Tips voor het werken met Illustrator
Subtiele achtergrondpatronen zijn een grote hit in webdesign, maar veel ontwerpers denken dat ze niet eenvoudig toe te passen zijn in Illustrator.
Ik moet toegeven dat het niet intuïtief is, maar de oplossing is eenvoudig.
Een bitmappatroon maken:
- Plaats een afbeelding van het patroon op uw werkstuk
- Klik op 'Invoegen' op het bovenste lint (belangrijk: zonder werkt het niet!)
- Sleep een patroon naar het Stalen-palet
- Breng een staal aan op een voorwerp om het met een patroon te vullen
10. Automatische plaatsing van tekst rond afbeeldingen en objecten.
Photoshop staat bekend om zijn zeer eenvoudige tekstbewerkingsmogelijkheden. Als u tekst rond een afbeelding wilt laten lopen, moet u twee of drie verschillende tekstkaders maken en het effect simuleren. Tips voor het werken met Illustrator
Gelukkig heeft Illustrator je gedekt.
Tekst rond een afbeelding laten lopen:
- Selecteer de afbeelding of het object waar u tekst omheen wilt laten lopen
- Open het menu Object en kies Tekstomloop > Nieuw.
- Om de terugloopafstand in te stellen, opent u opnieuw het menu Tekstomloop en selecteert u Opties voor tekstomloop.
- Beweeg de afbeelding over de tekst om het terugloopeffect te zien
11. Creëer rijke visuele effecten met instellingen voor de weergave van objecten. Tips voor het werken met Illustrator
In Illustrator werkt het deelvenster Vormgeving van een object ongeveer hetzelfde als laageffecten in Photoshop: u kunt meerdere vullingen en lijnen aan een object toevoegen en vervolgens spelen met hun overdrachtsmodi, dekking en effecten om interessante resultaten te krijgen.
Deze tekst is slechts één vectorobject, opgemaakt met behulp van het deelvenster Vormgeving en effecten.
De speeltuin is behoorlijk groot: van slagschaduwen, onscherpte en gloed tot textuur, vervorming en 3D. Op deze manier kunt u de meeste effecten uit Photoshop nabootsen terwijl u nog steeds met vectorafbeeldingen werkt.
Het deelvenster Uiterlijk is krachtig en leuk. Ik raad u aan het meteen uit te proberen of de onderstaande tutorial te bekijken om te begrijpen hoe het werkt:
Het uiterlijkpaneel beheersen van Adobe-tv .
Ben je klaar om te gaan experimenteren met Illustrator?
Het maken van websites en gebruikersinterfaces met behulp van Photoshop is nu de norm geworden en de meeste ontwerpers zijn blij met deze oplossing. Tips voor het werken met Illustrator
Maar het feit dat Photoshop zo wijdverspreid is geworden, betekent niet dat Illustrator niets te bieden heeft, integendeel. Met tools als pixelrasteruitlijning, tekstomloop en objectweergave is dit een sterk argument.
Gecombineerd met krachtig lay-outhulpmiddelen en vectorafbeeldingen, het snijden en exporteren van afbeeldingen, Illustrator is absoluut een voor de hand liggende keuze voor webontwerpers die snel websites willen ontwikkelen.
Laat een reactie achter