In deze eerste tutorial in onze serie over tekenen en werken met vormen in Photoshop, zullen we snel kijken naar het belangrijke verschil tussen de twee belangrijkste soorten vormen die we kunnen tekenen - vectorvormen en pixelvormen .

Adobe Photoshop staat bekend als een op pixels gebaseerde afbeeldingseditor, die door fotografen en andere imaging-professionals wordt gebruikt voor het retoucheren, restaureren en samenstellen van foto's. Maar het is ook een krachtig, op vectoren gebaseerd tekenprogramma waar webontwerpers, grafisch ontwerpers en andere kunstenaars zich op richten voor het maken van paginalay-outs, ontwerpen van gebruikersinterfaces en andere op vectoren gebaseerde illustraties.

Wat betekent "op vectoren gebaseerd"? Welnu, in tegenstelling tot digitale afbeeldingen die bestaan ​​uit (meestal) miljoenen kleine vierkantjes die pixels worden genoemd, worden vectorvormen gemaakt van wiskundige punten met elkaar verbonden door lijnen en curven om verschillende vormen te maken. Omdat ze op wiskunde zijn gebaseerd, niet op pixels, zijn vectorvormen extreem flexibel en hebben ze niet dezelfde beperkingen als pixels. We kunnen vectorvormen tekenen in elke gewenste grootte, en ongeacht hoeveel we ze bewerken en schalen of hoe groot we ze afdrukken, ze blijven altijd scherp en scherp! Voordat we de details leren kennen over het tekenen van vectorvormen in Photoshop en alle manieren waarop we ermee kunnen werken, zullen we deze belangrijke manier waarop vectorvormen verschillen van op pixels gebaseerde vormen, nader bekijken. En waarom, wanneer een keuze tussen de twee wordt gegeven, vectorvormen meestal de beste optie zijn.

Deze zelfstudie is voor Photoshop CC- gebruikers. Gebruikers van Photoshop CS6 willen onze tutorial Tekeningvector versus pixelvormen in Photoshop CS6 bekijken.

Vectoren versus pixels

Een verhaal over twee vormen

Omdat ik in de volgende tutorial alles zal behandelen wat we moeten weten over het tekenen van vectorvormen, bespaar ik ons ​​hier wat tijd door te beginnen met een document dat ik al heb gemaakt. Hier zien we een eenvoudig document dat eruit ziet als twee identieke vormen. Hoewel ze er momenteel hetzelfde uitzien, zijn ze eigenlijk heel anders. De vorm links is een vectorvorm, terwijl de vorm rechts met pixels is gemaakt:

Links een vectorvorm en rechts een pixelvorm.

Als we in mijn deelvenster Lagen kijken, zien we elke vorm op zijn eigen laag. Ik ben doorgegaan en heb de lagen hernoemd om dingen gemakkelijker te maken. De pixelgebaseerde vorm bevindt zich op de bovenste laag "Pixelvorm" en de vectorgebaseerde vorm bevindt zich op de slim genoemde laag "Vectorvorm" eronder:

Het deelvenster Lagen toont de vector- en pixelvormen op afzonderlijke lagen.

De vormlaag spotten

Zelfs als ik ze niet had hernoemd, zou er nog steeds een gemakkelijke manier zijn om te bepalen welke laag de vectorvorm bevat, en dat is door te zoeken naar het kleine vormpictogram rechtsonder in de voorbeeldminiatuur van de laag. Dit pictogram geeft aan dat het een vormlaag is, geen normale pixellaag:

Vormlagen zijn gemakkelijk te herkennen aan het kleine pictogram rechtsonder in de voorbeeldminiatuur.

De vectorvorm schalen

Zoals ik al zei, zien beide vormen er op dit moment identiek uit, maar laten we kijken wat er gebeurt als we ze schalen. Ik zal beginnen met de vectorvorm. Eerst moet ik het selecteren, dus ik klik op de laag "Vectorvorm" in het deelvenster Lagen:

De vectorvorm selecteren.

Om de vectorvorm te schalen, ga ik naar het menu Bewerken in de menubalk bovenaan het scherm en kies ik Gratis transformatiepad :

Ga naar Bewerken> Gratis transformatiepad.

Dit plaatst het vak Vrije transformatie en verwerkt rond de vectorvorm aan de linkerkant:

Het vak Vrije transformatie verschijnt rond de vectorvorm.

Ik wil ervoor zorgen dat ik beide vormen op exact dezelfde grootte schaal, dus in plaats van de Free Transform-grepen handmatig te slepen, ga ik naar de Optiebalk boven aan het scherm en verander ik zowel de Breedte ( W ) als de Hoogte ( H ) waarden van de vorm tot 10%:

Zowel de breedte als de hoogte van de vectorvorm instellen op 10%.

Ik druk op Enter (Win) / Return (Mac) op mijn toetsenbord om de nieuwe grootte te accepteren, en nu is de vectorvorm aan de linkerkant veel kleiner:

De vectorvorm is nu 10% van de pixelvorm.

Laten we eens kijken wat er gebeurt als ik de vectorvorm terugschaal naar de oorspronkelijke grootte. In plaats van terug te gaan naar het menu Bewerken boven aan het scherm en Free Transform Path te kiezen, gebruik ik deze keer de snellere sneltoets, Ctrl + T (Win) / Command + T (Mac). Dit plaatst hetzelfde vak Vrije transformatie en handelt rond de vectorvorm:

Druk op Ctrl + T (Win) / Command + T (Mac) om snel Free Transform Path te selecteren.

Omdat ik de vorm kleiner heb gemaakt door deze tot 10% te verkleinen, vergroot ik hem terug naar zijn oorspronkelijke grootte door zowel de breedte- als de hoogtewaarden in de optiebalk in te stellen op 1000% :

De breedte en hoogte van de vectorvorm instellen op 1000%.

Ik druk nogmaals op Enter (Win) / Return (Mac) op mijn toetsenbord om het te accepteren, en nu is de vectorvorm terug naar zijn oorspronkelijke grootte. Merk op dat hoewel ik het kleiner heb gemaakt en vervolgens heb vergroot, de vectorvorm er nog steeds als nieuw uitziet. De randen blijven net zo scherp en scherp als ze oorspronkelijk waren:

De vectorvorm aan de linkerkant behoudt zijn scherpe, scherpe randen, zelfs na te zijn geschaald.

Plug-in shortcodes, acties en filters: fout in shortcode (ads-basics-middle)

De pixelvorm schalen

Laten we hetzelfde proberen met de pixelvorm aan de rechterkant. Eerst selecteer ik deze door op de laag "Pixelvorm" in het deelvenster Lagen te klikken:

De pixelvorm selecteren.

Met de pixelvormlaag geselecteerd, ga ik naar het menu Bewerken boven aan het scherm en kies ik Gratis transformatie:

Ga naar Bewerken> Gratis transformeren.

Free Transform vs Free Transform Path

Merk op dat deze keer de opdracht Free Transform wordt genoemd, niet Free Transform Path . We zullen paden in een andere tutorial bekijken, maar in wezen bestaat een vectorvorm uit twee delen; de basisomtrek van de vorm, bekend als het pad, en de kleur waarmee de omtrek (het pad) is gevuld. Wanneer we een vectorvorm bewerken of schalen, bewerken en schalen we echt de padomtrek. Daarom werd de opdracht Free Transform Path genoemd toen ik de vectorvormlaag had geselecteerd. Nu ik een normale pixellaag heb geselecteerd, bewerken we pixels, geen paden, en daarom is de naam van het commando veranderd in eenvoudig Free Transform. Nogmaals, we zullen later in meer detail paden behandelen.

Dit plaatst het vak Vrije transformatie rond de pixelvorm aan de rechterkant:

Het vak Vrije transformatie verschijnt rond de pixelvorm.

Net zoals bij de vectorvorm, schaal ik de pixelvorm naar beneden door de Breedte en Hoogte in te stellen op 10% in de optiebalk:

De breedte en hoogte van de pixelvorm instellen op 10%.

Ik druk op Enter (Win) / Return (Mac) op mijn toetsenbord om het te accepteren, en nu is de pixelvorm veel kleiner. Tot nu toe, zo goed. Zelfs na het schalen van de pixelvorm tot 10%, ziet het er net zo scherp uit als oorspronkelijk, en we hebben nog steeds geen verschil gezien tussen de vectorvorm en de pixelvorm:

De pixelvorm na het verkleinen tot 10%.

Maar nu de echte test. Wat gebeurt er als ik de pixelvorm terugschaal naar de oorspronkelijke grootte? Ik druk op Ctrl + T (Win) / Command + T (Mac) op mijn toetsenbord om snel de opdracht Vrije transformatie te selecteren en om de pixelvorm terug te schalen, stel ik de breedte en hoogte in de optiebalk in op 1000% :

De pixelvorm terugschalen naar de oorspronkelijke grootte.

Ik druk op Enter (Win) / Return (Mac) om het te accepteren en de opdracht Free Transform te sluiten. En nu wordt het verschil tussen vector- en pixelgebaseerde vormen duidelijk. Hoewel ik beide vormen met exact dezelfde hoeveelheden heb geschaald en beide vormen hun scherpe randen hebben behouden bij het verkleinen, kon de pixelvorm het niet aan om opnieuw op te schalen. De ooit scherpe randen zien er nu zacht, wazig en blokkerig uit:

De vectorvorm overleefde intact na te zijn opgeschaald. De pixelvorm? Niet zo veel.

Laten we inzoomen voor een kijkje. De reden dat de randen van de pixelvorm er nu zoveel slechter uitzien, is omdat, toen ik het tot 10% van de oorspronkelijke grootte verkleinde, 90% van de pixels die de oorspronkelijke vorm vormden, moest worden weggegooid. Dat zou prima zijn geweest als ik het niet opnieuw had moeten opschalen. Photoshop kan pixels op magische wijze niet opnieuw maken, dus toen ik het opschaalde, kon Photoshop alleen die resterende pixels nemen en groter maken. Daarom zien we eigenlijk een traptreden langs de rand van de vorm. Dat zijn de randen van de afzonderlijke pixels. Ze zien er zacht en wazig uit, want dat is precies wat er met pixels gebeurt als we ze groter maken. Hoe meer we ze vergroten, hoe zachter ze worden. Vectorvormen hebben dit probleem echter niet. Het zijn slechts punten die met elkaar zijn verbonden door lijnen en curven, en we kunnen ze zoveel als we willen vergroten of verkleinen zonder ooit kwaliteit te verliezen:

Een close-up van de vector- en pixelvormranden.

Waar ga je heen …

Zoals we in deze tutorial hebben gezien, kunnen vectorvormen en pixelvormen er identiek uitzien wanneer we ze voor het eerst tekenen, en beide zien er net zo goed uit als ze worden verkleind naar kleinere formaten. Maar wanneer we ze groter moeten schalen, hebben vectorvormen letterlijk de rand. Dit geldt niet alleen wanneer ze op het scherm worden bekeken, maar ook tijdens het afdrukken. Net als digitale foto's is een met pixels getekende vorm afhankelijk van de resolutie, wat betekent dat het alleen zo groot kan worden afgedrukt voordat het er zacht en saai begint uit te zien, net zoals we in het bovenstaande voorbeeld zagen. Een vectorvorm is daarentegen resolutie-onafhankelijk . Het kan op elk formaat worden afgedrukt, zelfs zo groot als een reclamebord, en ziet er altijd fris, schoon en zo goed als nieuw uit.

Vectorvormen hebben ook andere voordelen waardoor ze veel flexibeler zijn om mee te werken dan pixels, maar voordat we te ver vooruit springen, laten we leren hoe we vectorvormen daadwerkelijk in Photoshop kunnen tekenen, en dat doen we in de volgende tutorial! Ga naar onze sectie Photoshop Basics voor meer informatie over Photoshop!