Vectortools gebruiken: de aanpak van een webontwerper

Sep 14, 2025

Procedures

Als u een webontwerper bent, is er een goede kans dat Photoshop op dit moment opent op uw computer. Laten we het onder ogen zien - Photoshop is altijd de werkpaard en de facto-standaard geweest voor webdesign. Maar in de afgelopen jaren gaan steeds meer ontwerpers (en ontwikkelaars!) Naar vector gebaseerde grafische afbeeldingen en weg van de op pixel gebaseerde varianten van gisteren.

100 Amazing Adobe Illustrator Tutorials

In dit bericht zullen we onderzoeken waarom u moet overwegen uw sites met op vector gebaseerde tools te ontwerpen en hoe ze u kunnen helpen bij het versnellen van het pijplijnproces.

Webdesign Software: een korte geschiedenis

Het origineel van Photoshop, primair gebruik was voor het bewerken van foto's - geen websites ontwerpen. In feite was er een ander programma speciaal voor dat doel: vuurwerk.

Natuurlijk, als je nieuw bent op webdesign, weet je misschien niet over vuurwerk. Dat komt omdat Adobe er een feature-freeze erop heeft gezet - en in principe stopte het - in 2013. Persoonlijk was ik nooit een fan van vuurwerk, maar ik ken veel ontwerpers die het vandaag nog steeds gebruiken. De meeste ontwerpers gebruiken echter Photoshop of enkele andere pixel-gebaseerde ontwerpsoftware.

OK. Laten we zeggen dat u deze pixel-gebaseerde ontwerpsoftware gebruikt om volledige mockups te maken; Of misschien gebruik je het om alleen de activa-achtige knoppen, werkbalken en pictogrammen te maken. Maar vraag jezelf dit: waarom maak deze dingen niet in een meer bruikbare vorm? Waarom de kracht van vectoren niet gebruiken?

Waarom vectoren?

In het verleden hoefde webontwerpers zich geen zorgen te maken over responsief ontwerp. Onze sites zijn ontworpen met een basisvoornaam in gedachten: om tegemoet te komen aan de maximale pixelbreedte van de meest gebruikte displays.

Tegenwoordig moeten we anders denken. We moeten denken in termen van gebruikerservaring. En die ervaring komt in verschillende apparaten en schermmaten. Het probleem is, wanneer we onze pixel-gebaseerde afbeeldingen schalen, hebben ze de neiging om een beetje wankel te krijgen.

Pixel-based images can become distorted when resized or zoomed in — Pixel-gebaseerde afbeeldingen kunnen vervormd worden wanneer ze worden gewijzigd of ingezoomd

Als u geen vectoren gebruikt, is de manier waarop dit is om meerdere activa te maken. Helaas is deze taak tijdrovend en niet altijd eenvoudig. Met vectorontwerpen worden dingen een stuk eenvoudiger.

Dit komt omdat vector ontwerpen schaal. Ongeacht de grootte, ze zijn altijd fris en schoon. Het is waar: in dit geval past de ene maat echt alles.

Vector-based images remain crips and clear at all sizes — Vector-gebaseerde afbeeldingen blijven crips en duidelijk op alle maten

Maar meer dan dat, vectoren zijn gemakkelijker om mee te werken. Ze kunnen worden gecontroleerd door de code en resulteren in het algemeen resulteren in kleinere bestanden. Het voorkeursformaat voor webvectoren is SVG. Wat is leuk aan SVG, is dat veel populaire applicaties dit formaat ondersteunen.

Software-opties

Dus waar wacht je op? Begin die vectoren te maken. Oh dat is juist! Photoshop is een Pixel-gebaseerde ontwerp-app. Maak je geen zorgen, er is geen tekort aan apps die je kunt helpen om aan de slag te gaan met vectoren. Er zijn echter twee die u kunt overwegen als topconchules.

Adobe Illustrator

Het spreekt vanzelf dat Adobe Illustrator is een topkeuze tussen vectorartiesten. Het is wat je het vlaggenschipproduct zou bellen als het gaat om vector-gebaseerd ontwerp. Illustrator is echter niet goedkoop, en het is niet gemakkelijk om te beheersen. Gelukkig zijn er andere opties.

Affinity Designer

Affinity Designer Is een van de 'nieuwe kinderen op het blok' in Web Design-tools, en het is mijn favoriete keuze als het gaat om vectorontwerpen. Vanwege dit, en omdat je het voor kunt gebruiken meer dan alleen webdesign , de rest van dit artikel zal zich richten op affiniteitsontwerper.

Affinity Designer gebruiken voor webdesign

Affinity Designer, volgens zijn makers, is een "volwaardige professionele grafische ontwerptoepassing". Ik ben het daar niet mee eens; Als het gaat om UI, UX en Web Design, is dit een fantastische tool.

In feite, bij elke aankoop van Affinity Designer krijg je een GRATIS-UI-KIT , inclusief lichte en donkere variaties van meer dan 1000 pictogrammen en elementen. Het heeft alles wat je nodig hebt om te beginnen met vector-gebaseerde webontwerpen.

Het bevat ook veel meer. U kunt bijvoorbeeld symbolen gebruiken om instanties van uw ontwerpelementen te maken. Als dat symbool verandert als gevolg van een ontwerpverandering, wordt elk geval van dat symbool onmiddellijk bijgewerkt. Je kunt zelfs geneste symbolen hebben, zodat je ontwerpen kunt bouwen die ingewikkeld genoeg zijn om aan je behoeften te voldoen, maar toch gemakkelijk genoeg om te beheren.

Mogelijk is de beste functie voor webontwerpers beperkingen. Met beperkingen kunt u mockups maken die reageren in een pseudo-responsieve mode. Zie de ware kracht van vectoren: een enkel element creëren en dat element op meerdere apparaten / resoluties kan gebruiken. Zoals je je kunt voorstellen, is dit een enorme time-saver! Ga voor een volledige lijst met functies naar de Affinity Designer-website

Dus nu weet je over vectoren, ik denk dat het tijd is om die pixels te sloegen!

Gerelateerde artikelen:

Maak een logo met Affinity Designer
De 25 beste plekken om gratis vector kunst online te vinden
Hoe een app-pictogram in Illustrator te maken

Vectortools gebruiken: de aanpak van een webontwerper

Webdesign Software: een korte geschiedenis

Waarom vectoren?

Software-opties

Affinity Designer gebruiken voor webdesign

Procedures - Meest populaire artikelen

Google Dia's: Hoe een document te ontwerpen

Cinema 4D-tutorials: 13 van de beste

Converteer Flash Games naar HTML5

Adobe Capture CC gebruiken

Ontwerp een speelbare avatar voor een videogame

Hoe een betere verlichting te bereiken met V-Ray

5 dingen die je niet wist dat je kon doen met HTML

Hoe beweging in uw 3D-renders vast te leggen

Categorieën