Als u nieuw bent op het gebied van website- of grafisch ontwerp, bent u misschien niet bekend met vectorbestanden. Vectorbestanden vormen het grootste deel van de illustraties die u online en in gedrukte vorm ziet, maar ze moeten moeizaam worden gemaakt in een gespecialiseerd programma. Aangezien de meesten van ons ze alleen bekijken, is het maken en bewerken ervan de taak van de professionele grafisch ontwerper.
Maar vectoren komen steeds vaker voor. Ze zijn ook erg handig als je je website een persoonlijk uiterlijk wilt geven. Hier ziet u wat vectorkunst precies is en hoe u vectorkunst maakt in Photoshop.
Wat is vectorkunst?
Eens het domein van de grafische ontwerpprofessional, zijn vectorafbeeldingen meer mainstream geworden naarmate meer en meer mensen hun eigen websites en afbeeldingen maken.
Hoewel waarschijnlijk onmerkbaar voor de eindgebruiker, vormen vectorbestanden een belangrijk onderdeel van app- en webontwikkeling. Deze bestanden helpen websites sneller te laden, waardoor uw afbeeldingen er scherp en professioneel uitzien, ongeacht waar u ze neerzet. Van t-shirtontwerpen tot billboards, vectorbestanden worden voor alles in grafische afbeeldingen gebruikt. Hier is een uitgebreid artikel over grafisch ontwerp, de verschillende typen en softwaretools voor een aspirant-grafisch ontwerper.
Definitie van vectorkunst
In de eenvoudigste bewoordingen bestaan de bestanden die vectorafbeeldingen maken uit wiskunde in plaats van uit pixels. Een standaard rasterfoto is een kaart van bits - een "bitmap" zo u wilt. Maar een vectorbestand bestaat uit coördinaten waar lijnen, vormen en ontwerpelementen moeten verschijnen.
Vectorafbeeldingen kunnen zo eenvoudig zijn als een lijntekening of een complexe, meerlagige illustratie die bestaat uit duizenden afzonderlijke elementen.
Raster versus vectorafbeeldingen
In de wereld van computergraphics zijn er twee typen: raster en vector. De meeste mensen zijn bekend met rasterafbeeldingen. Deze omvatten JPG's en PNG's - de typen afbeeldingsbestanden die door onze digitale camera's zijn vastgelegd.
Evenzo is iedereen waarschijnlijk bekend met wat er gebeurt als u inzoomt op een rasterafbeelding of deze vergroot. Het beeld wordt korrelig. Als u inzoomt, kunt u elke pixel zien terwijl de afbeelding vervaagt in zijn componenten. Daarom kun je niet oneindig inzoomen op een digitale foto - hij bestaat uit maar een beperkt aantal pixels. U kunt inzoomen op die pixels, maar uw afbeelding verliest aan kwaliteit naarmate elke pixel meer van uw scherm vult.
Vectorkunstafbeeldingen begrijpen
Vector grafische bestanden lossen dit probleem op door een afbeelding te bouwen met computerprogrammering in plaats van pixels. Stel je een computerbestand voor van een zwarte horizontale lijn. Een rasterbestand geeft een set pixels naast elkaar weer die allemaal zwart zijn. Een vectorbestand vertelt de computer om een zwarte lijn weer te geven van punt A naar punt B die drie punten breed is. Naast elkaar zien de twee afbeeldingen er identiek uit wanneer ze voor 100 procent worden weergegeven. Maar zoom in en de rasterafbeelding wordt korrelig terwijl het vectorbestand een strakke lijn blijft weergeven.
Het klassieke voorbeeld van vectorkunst is de typische clipart die je in een publicatieprogramma zou vinden. Deze eenvoudige lijntekeningen kunnen in elke publicatie of website worden ingevoegd en zijn meestal in vectorformaat.
Wanneer je een professionele grafisch ontwerper inhuurt om een bedrijfslogo, shirtontwerp of poster te maken, ontvang je een vectorbestand terug. Op die manier beschikt u altijd over afbeeldingen van de beste kwaliteit, ongeacht wat u met het bestand doet.
Maar vectorkunst kan veel meer zijn dan eenvoudige lijntekeningen. Het kan kleuren, patronen en verlopen bevatten. En kunstenaars kunnen vectorprogramma's gebruiken om prachtige meesterwerken te maken - complexe kunstwerken van alles wat je maar kunt bedenken. Goede vectorartiesten kunnen de tools gebruiken en een vectorafbeelding maken die bijna op een foto lijkt.
Het belang van vectorkunst in ontwerp
Op grotere schaal heeft dit grote gevolgen voor computerbestanden. Waar een rasterbestand met een lage resolutie er misschien slecht uitziet op een ultramoderne 5K-monitor, ziet het vectorbestand er zo scherp mogelijk uit. Wat als u uw illustraties wilt verkleinen zodat ze op een visitekaartje passen? De drukkerij kan uw vectorbestand nemen en het naar wens schalen. Evenzo kan het worden opgeblazen en op een reclamebord worden geplaatst.
Wat is een vectorbestand?
Het grootste verschil tussen raster- en vectorbestanden is waarschijnlijk de complexiteit. De meesten van ons hebben te maken gehad met rasterbestanden. Als je ooit hebt getekend met een programma als Microsoft Paint, weet je hoe je er een moet maken. De meeste tools in Photoshop zijn rastertools.
Maar het maken van een vectorbestand is ingewikkelder. U kunt een lijn uit de vrije hand tekenen, maar de beste resultaten krijgt u als u een pengereedschap gebruikt om perfect vloeiende paden op de pagina te tekenen. U kunt de vloeiendheid of scherpte van elke curve en de dikte en kleur van elke streek regelen.
Photoshop en andere grafische programma's voor rasters hebben mogelijk beperkte mogelijkheden om met vectorbestanden om te gaan. Met name Photoshop heeft een paar vectortools om mee te beginnen, maar het is verre van een volledig vectorprogramma.
De betere tactiek is om een programma te gebruiken dat speciaal is bedoeld voor het omgaan met vectorbestanden. De industriestandaard is Adobe Illustrator. Maar er zijn natuurlijk veel alternatieven.
Net zoals de rasterwereld JPG, GIF en PNG heeft, heeft de vectorwereld een paar standaard bestandstypen die op alle vectorprogrammaplatforms werken. De meest voorkomende zijn EPS-bestanden (Encapsulated PostScript) en Scalable Vector Graphics (SVG)-bestanden.
EPS-bestanden zijn een ouder formaat met details in hoge resolutie voor drukkerijen. Ze zijn een uitvoerformaat en kunnen niet worden bewerkt. Met andere woorden, u maakt het bestand aan in het formaat van uw programma (.AI voor Adobe Illustrator) en slaat het vervolgens op in EPS om naar de drukkerij te sturen. Mac-computers kunnen een EPS openen voor weergave in Voorvertoning. Windows-machines hebben echter een aparte applicatie nodig.
SVG-bestanden zijn geschikter voor kleine bestandspakketten die worden gebruikt bij het ontwerpen van websites. SVG wordt gebruikt voor tweedimensionale afbeeldingen zoals grafieken, illustraties en infographics. In tegenstelling tot EPS is het webvriendelijk zoals een JPG-foto. Als gevolg hiervan zal elke webbrowser een SVG-bestand weergeven.
Voor- en nadelen van vectorbestanden
Dus wanneer moet je vectorkunst gebruiken en wanneer kies je voor een vertrouwde oude jpeg? Hier volgt een overzicht van de voor- en nadelen van vectorafbeeldingen.
Vectorvoordelen
- Schaalbaar - u kunt vectorbestanden zo klein of zo groot maken als u wilt, zonder dat de kwaliteit van het product verandert
- Nauwkeurig: u kunt lijnen, rondingen en vormen maken met een scheermesprecisie
- Kleinere bestanden voor webgebruik zorgen ervoor dat websites sneller laden
- Animaties zijn eenvoudig te maken van vectorbestanden en zullen kleinere, eenvoudigere bestanden zijn dan een rasterequivalent
- Eenvoudig te bewerken met het juiste programma en de juiste kennis - u kunt snel en eenvoudig één kleur of vorm wijzigen zonder de andere elementen in een lay-out te beïnvloeden
- Converteert indien nodig eenvoudig naar een rasterafbeelding
Vector nadelen
- Vereist gespecialiseerde vaardigheden en tijd om te bewerken en te creëren - de meeste mensen weten niet hoe ze met vectorbestanden moeten werken
- Beperkt aantal softwaretoepassingen die ze kunnen bewerken
- Minder detail voor complexe dingen zoals de natuurlijke schaduwen in foto's
- Moeilijk te maken van een rasterafbeelding - vereist meestal uren om met de hand opnieuw te worden getekend
Beste vector grafische softwaretoepassingen om vectoren te maken
Er zijn letterlijk tientallen softwareprogramma's voor het maken en bewerken van vectorbestanden. Hier zijn slechts enkele van de meest voorkomende.
Adobe Illustrator
Net zoals Photoshop de professionele sector van rasterafbeeldingen domineert, is Illustrator de go-to voor professionele grafische ontwerpers. Het programma bestaat al jaren en is analoog aan Photoshop. Het is net zo gecompliceerd, net zo volledig en net zo duur. Illustrator maakt deel uit van de Adobe Creative Suite/Cloud-softwarefamilie.
Affinity Designer
Sinds Adobe zijn maandelijkse abonnementsprijzen heeft geïntroduceerd, hebben verschillende bedrijven grafische softwareprogramma's met volledige functionaliteit aangeboden om te concurreren. Affinity Designer, gemaakt door Serif Europe, heeft 90 procent of meer van de mogelijkheden van Illustrator, maar dan voor een eenmalige softwarelicentie in plaats van een maandelijks bedrag. Het kan werken met PDF- of Photoshop-bestanden, plus Illustrator AI-bestanden.
Inkscape
Inkscape is een gratis, open-source vectorprogramma dat SVG als native formaat gebruikt. Het kan ook vele andere formaten aan, waaronder Illustrator- en CorelDRAW-bestanden. Hoewel het niet zoveel functies heeft als Illustrator of Designer, heeft het genoeg om prachtige vectorillustraties te maken. Inkscape wordt vaak vergeleken met GIMP, een vergelijkbare open-sourceoplossing voor rasterafbeeldingen.
CorelDRAW
Corel is een oude naam in grafische software, maar het is nog steeds de vaandeldrager in signmaking en fashion design. Het heeft meer dan 50 filters voor het verwerken van import- en exportbestanden. Het is echter vrij beperkt in vergelijking met andere vectorprogramma's. Corel Designer was het speciale programma voor vectorverwerking van het bedrijf en kreeg de voorkeur in de technische ontwerpsector. De functies zijn nu opgenomen in CorelDRAW Technical Suite.
Schets
Sketch is alleen beschikbaar voor macOS. Het wordt voornamelijk gebruikt door mensen die grafische gebruikersinterfaces of gebruikerservaringen maken, dus het bevat geen functies voor afdrukontwerp. Als u echter een Mac-gebruiker bent en op zoek bent naar een app voor vectorontwerp van websites, is Sketch de moeite van het bekijken waard.
Lees ons artikel over de 21 beste grafische ontwerpsoftware voor Ontwerpers in 2023.
Bekijk deze artikelen over grafisch ontwerp
Hier zijn enkele geweldige tips voor het maken van unieke vectorillustraties
Een ding dat je jezelf moet afvragen is: wat is vectorkunst voor jou? Wil je een echte vectorillustratie of is de vectoresthetiek alles wat je zoekt? Vectorbestanden hebben een unieke stijl en verschillende ontwerpers maken dit op verschillende manieren mogelijk. Maar een bijna komisch gevoel van de lijnen en kleuren maakt het interessant en perfect voor grafische projecten.
Dus als u al een Photoshop-gebruiker bent, kunt u overwegen hoe u kunst in vectorstijl kunt maken in gemakkelijk te realiseren stukken. Je hoeft het niet allemaal in één keer te leren. Er zijn veel apps en filters die een afbeelding snel en eenvoudig kunnen vectoriseren tot een vectorachtig kunstbestand.
Hoe u vectorkunst op uw website gebruikt
SVG-vectorbestanden worden veel gebruikt in moderne website-afbeeldingen. Ze worden gebruikt in knoppen, pictogrammen en andere gebruikersinterface-items en verschillende ontwerpelementen op de pagina. Bedrijfslogo's zijn bijvoorbeeld bijna universeel op vectoren gebaseerd, hoewel het soms gebruikelijk is om het vectorbestand naar een raster-JPG of GIF te converteren voor gebruik op het web.
Sommige websites hebben meer afbeeldingen dan andere, dus veel hangt af van hoe u wilt dat de pagina eruitziet. Gemeenschappelijke webpagina-elementen zijn onder meer tekstblokken, foto's en andere afbeeldingen. Als wat u wilt doen in de categorie "andere afbeeldingen" valt, is een vectorafbeelding waarschijnlijk de juiste keuze. Alles als een rasterfoto doen, zou waarschijnlijk te langzaam laden en er onhandig uitzien.
Een winnend grafisch ontwerperportfolio is cruciaal als u een succesvolle carrière in de ontwerpindustrie ambieert. Hier zijn een paar verbluffende ontwerpportfolio's op Pixpa die u zeker zullen inspireren om uw portfoliowebsite te maken.
Uw online portfolio is de sleutel om potentiële werkgevers, klanten of medewerkers aan te trekken en indruk te maken. Ontwerpportfoliowebsites moeten verder gaan dan alleen het presenteren van uw ontwerpen. Je moet ook out of the box denken, je creatieve genialiteit ontdekken, je expressie vinden en je werk op de best mogelijke manier presenteren. We hadden eerder samengezeten een gids voor het bouwen van uw ontwerpportfolio, een must-read voor iedereen die grafisch ontwerp als carrièrepad serieus neemt.
Zorg ervoor dat de websitebouwer van uw portfolio de flexibiliteit, functies en het gebruiksgemak biedt die u nodig hebt om een professionele website samen te stellen zonder enige kennis van coderen. Dan komt een beetje inspiratie goed van pas. Pixpa is een platform voor het bouwen van websites waarop wordt vertrouwd creatieve profs rond de wereld.
Hoe vectorkunst te maken in Photoshop
De beste oplossing voor vectorillustraties is Illustrator of een van de andere vectorprogramma's, zoals Designer of Inkscape. Als je echter al Photoshop hebt, zijn er een paar tools waarmee je kunt spelen om vertrouwd te raken met het proces.
De basis van vectorwerk is het pengereedschap. Het pengereedschap tekent een lijn - of een pad, zoals het in vectorafbeeldingen wordt genoemd - tussen punten terwijl u op het scherm klikt. Elk punt waarop u klikt, wordt een knooppunt. U kunt elk knooppunt instellen om te bepalen hoe het pad doorloopt. Maakt het knooppunt bijvoorbeeld een punt, zoals in de punt van een driehoek? Of maakt het de top van een curve? U kunt de precieze hoek van de curve regelen met behulp van hendelbedieningen bij het knooppunt. U kunt doorgaan met het toevoegen van knooppunten met het pengereedschap totdat u het pad sluit en een aangepaste vorm maakt.
Het pad is niet zichtbaar in de illustratie totdat u programmeert hoe u wilt dat het eruit ziet. Een lijn voegt een lijn over de curve toe en u kunt de breedte ervan instellen. Met het vormgereedschap kunt u paden in veelgebruikte vormen zoals rechthoeken, cirkels of sterren neerzetten. U kunt de lijn voor een vorm instellen, die de omtrek wordt, of deze vullen met een kleur, textuur of verloop. Op vormen kunt u elk knooppunt besturen om het op elke gewenste manier aan te passen.
Met deze paar eenvoudige vectorgereedschappen kunt u een volledige afbeelding maken. De meeste vectorbestanden zijn lagen op lagen van elkaar kruisende elementen. Als je de pen- en vormgereedschappen eenmaal ruw hebt gebruikt, kun je met de software spelen om elk gewenst ontwerp te ontwikkelen.
Een gevoel krijgen voor deze basisvectorgereedschappen is essentieel voordat u doorgaat met het proberen van een eindproduct. Ze vormen de basis van elk vectorprogramma dat er is, en hoewel ze er misschien een beetje anders uitzien, werken ze allemaal in wezen hetzelfde.
Het is ook mogelijk om rasterafbeeldingen om te zetten in vectorbestanden met behulp van een paar hulpmiddelen in Photoshop. Dit leidt zelden meteen tot perfecte resultaten, maar het biedt een prima startpunt van waaruit u meer kunt leren over het maken van vectorkunst in Photoshop. Het is duidelijk dat deze tactiek je niet het voordeel geeft van het uiteindelijke SVG-vectorbestand, maar het geeft je wel het uiterlijk van de illustratie.
Pen een pad naar je toekomst en vul het met vectorillustraties
Wanneer u net begint, kunnen vectorbestanden intimiderend aanvoelen om mee te werken. Maar terwijl u ervaring opdoet met het werken met het pengereedschap, vormen, lijnen, vullingen, zult u snel de fundamentele bouwstenen oppikken die deze bestanden maken. Als ze nieuw voor je zijn, bouw je ook waardering op voor artiesten die in dit precieze en mooie medium werken.