Om du är ny på webbplats eller grafisk design, kanske du inte är bekant med vektorfiler. Vektorfiler utgör det mesta av de konstverk du ser online och i tryck, men de måste skapas mödosamt i ett specialiserat program. Eftersom de flesta av oss bara ser dem, har skapa och redigera dem varit den professionella grafiska designerns jobb.
Men vektorer blir mer och mer utbredda. De är också super användbara om du försöker ge din webbplats ett anpassat utseende. Här är en titt på vad som är vektorkonst exakt och hur man gör vektorkonst i Photoshop.
Vad är vektorkonst?
När den grafiska designprofessionellt väl var domän, har vektorgrafik blivit mer mainstream eftersom fler och fler människor dyker in i att skapa sina egna webbplatser och grafik.
Även om det förmodligen är omärkligt för slutanvändaren, är vektorfiler en viktig del av app- och webbutveckling. Dessa filer hjälper webbplatser att laddas snabbare, vilket gör att din grafik ser skarp och professionell ut oavsett var du placerar den. Från t-shirtdesign till skyltar, vektorfiler används för allt inom grafik. Här är en detaljerad artikel om grafisk design, dess olika typer och mjukvaruverktyg för en blivande grafisk designer.
Definition av vektorkonst
I enklaste termer är filerna som gör vektorgrafik uppbyggda av matematik istället för pixlar. Ett standardrasterfotografi är en karta av bitar – en "bitmapp", om du så vill. Men en vektorfil består av koordinater där linjer, former och designelement ska visas.
Vektorgrafik kan vara så enkelt som en linjeteckning eller ett komplext konstverk i flera lager gjorda av tusentals separata element.
Raster vs vektorgrafik
I en värld av datorgrafik finns det två typer - raster och vektor. De flesta är bekanta med rastergrafik. Dessa inkluderar JPG och PNG - de typer av bildfiler som fångas av våra digitalkameror.
Likaså är säkert alla bekanta med vad som händer när man zoomar in på en rasterbild eller förstorar den. Bilden blir pixlad. Genom att zooma in kan du se varje pixel när bilden suddas ut i dess komponenter. Det är därför du inte kan zooma in på obestämd tid på ett digitalt fotografi – det består av bara så många pixlar. Du kan zooma in på dessa pixlar, men din bild tappar kvalitet eftersom varje pixel fyller upp mer av din skärm.
Förstå vektorgrafik
Vektorgrafikfiler fixar detta problem genom att bygga en bild med datorprogrammering istället för pixlar. Föreställ dig en datorfil med en svart horisontell linje. En rasterfil visar en uppsättning pixlar sida vid sida som alla är svarta. En vektorfil säger åt datorn att visa en svart linje från punkt A till punkt B som är tre punkter bred. Sida vid sida ser de två bilderna identiska ut när de visas till 100 procent. Men zooma in och rasterbilden blir pixlad medan vektorfilen fortsätter att visa en ren linje.
Det klassiska exemplet på vektorkonst är den typiska clipart som du hittar i ett publiceringsprogram. Dessa enkla streckgrafik kan infogas i vilken publikation eller webbplats som helst och är vanligtvis i vektorformat.
När du anlitar en professionell grafisk designer för att göra en företagslogotyp, skjortadesign eller affisch får du en vektorfil i gengäld. På så sätt kommer du alltid att ha den bästa grafikkvaliteten oavsett vad du gör med filen.
Men vektorkonst kan vara mycket mer än enkel linjekonst. Det kan innehålla färger, mönster och övertoningar. Och konstnärer kan använda vektorprogram för att skapa vackra mästerverk - komplexa konstverk av allt man kan tänka sig. Bra vektorkonstnärer kan ta verktygen och göra en vektorbild som nästan ser ut som ett fotografi.
Vikten av vektorkonst i design
I en större skala har detta stora konsekvenser för datorfiler. Där en lågupplöst rasterfil kan se dålig ut på en toppmodern 5K-skärm, kommer vektorfilen att se skarp ut som den kan vara. Vad händer om du vill skala ner ditt konstverk för att passa på ett visitkort? Tryckeriet kan ta din vektorfil och skala den hur de vill. Likaså kan det sprängas och anslås på en skylt.
Vad är en vektorfil?
Förmodligen den största skillnaden när det kommer till raster kontra vektorfiler är komplexiteten. De flesta av oss har hanterat rasterfiler. Om du någonsin har klottrat med ett program som Microsoft Paint vet du hur man gör ett. De flesta verktygen i Photoshop är rasterverktyg.
Men att göra en vektorfil är mer komplicerat. Du kan rita en linje på fri hand, men det bästa resultatet kommer om du använder ett pennverktyg för att rita perfekt jämna banor på sidan. Du kan kontrollera jämnheten eller skärpan för varje kurva och tjockleken och färgen för varje slag.
Photoshop och andra rastergrafikprogram kan ha vissa begränsade förmågor att hantera vektorfiler. Photoshop, i synnerhet, har några vektorverktyg att börja med, men det är långt ifrån ett fullfjädrat vektorprogram.
Den bättre taktiken är att använda ett program specifikt för att hantera vektorfiler. Branschstandarden är Adobe Illustrator. Men det finns naturligtvis många alternativ.
Liksom rastervärlden har JPG, GIF och PNG, har vektorvärlden några standardfiltyper som fungerar över alla vektorprogramplattformar. De vanligaste är EPS-filer (Encapsulated PostScript) och Scalable Vector Graphics (SVG)-filer.
EPS-filer är ett äldre format som har högupplösta detaljer för tryckerier. De är ett utdataformat och kan inte redigeras. Du skapar med andra ord filen i ditt programs format (.AI för Adobe Illustrator) och sparar den sedan i EPS för att skickas till tryckeriet. Mac-datorer kan öppna en EPS för visning i Preview. Däremot kommer Windows-maskiner att behöva en separat applikation.
SVG-filer är mer lämpliga för små filpaket som används i webbdesign. SVG används för tvådimensionell grafik som diagram, illustrationer och infografik. Till skillnad från EPS är det webbvänligt som ett JPG-foto är. Som ett resultat kommer alla webbläsare att visa en SVG-fil.
Fördelar och nackdelar med vektorfiler
Så när ska du använda vektorkonst, och när ska du välja en pålitlig gammal jpeg? Här är en titt på fördelarna och nackdelarna med vektorgrafik.
Vector fördelar
- Skalbar - du kan göra vektorfiler så små eller stora som du vill utan att kvaliteten på produkten ändras
- Exakt - du kan göra linjer, kurvor och former med rakknivsliknande precision
- Mindre filer för webbanvändning gör att webbplatser laddas snabbare
- Animationer är lätta att göra från vektorfiler och kommer att vara mindre, enklare filer än en rastermotsvarighet
- Lätt att redigera med rätt program och kunskap - du kan ändra en färg eller form snabbt och enkelt utan att påverka de andra elementen i en layout
- Konverterar enkelt till rasterbild vid behov
Vector nackdelar
- Kräver specialkunskaper och tid för att redigera och skapa - de flesta människor vet inte hur man arbetar med vektorfiler
- Begränsat antal program som redigerar dem
- Mindre detaljer för komplexa saker som den naturliga skuggningen som finns i foton
- Svårt att göra från en rasterbild - kräver vanligtvis timmar att ritas om för hand
Bästa vektorgrafikprogram för att skapa vektorer
Det finns bokstavligen dussintals program för att bygga och redigera vektorfiler. Här är bara några av de vanligaste.
Adobe Illustrator
Precis som Photoshop dominerar den professionella rasterbildssektorn är Illustrator det bästa för professionella grafiska designers. Programmet har funnits i flera år och är analogt med Photoshop. Det är lika komplicerat, lika fullfjädrat och lika dyrt. Illustrator är en del av programfamiljen Adobe Creative Suite/Cloud.
Affinity Designer
Sedan Adobe introducerade sina månatliga prenumerationspriser har flera företag erbjudit fullfjädrade grafikprogram för att konkurrera. Affinity Designer, tillverkad av Serif Europe, har 90 procent eller mer av funktionerna i Illustrator, men för en engångsprogramvarulicens istället för en månadsavgift. Det kan fungera med PDF- eller Photoshop-filer, plus Illustrator AI-filer.
Inkscape
Inkscape är ett gratis vektorprogram med öppen källkod som använder SVG som sitt ursprungliga format. Den kan också hantera många andra format, inklusive Illustrator- och CorelDRAW-filer. Även om den inte har så många funktioner som Illustrator eller Designer, har den massor för att skapa vackra vektorkonstverk. Inkscape jämförs vanligtvis med GIMP, en liknande öppen källkodslösning för rasterbilder.
Draw
Corel är ett gammalt namn inom grafisk programvara, men det är fortfarande fanbärare inom skylttillverkning och modedesign. Den har över 50 filter för import och export av filhantering. Det är dock ganska begränsat jämfört med andra vektorprogram. Corel Designer var företagets dedikerade vektorhanteringsprogram och gynnades inom ingenjörsdesignsektorn. Dess funktioner har nu rullats in i CorelDRAW Technical Suite.
skiss
Sketch är endast tillgängligt för macOS. Det används främst av dem som gör användargränssnitt eller grafik för användarupplevelser, så det innehåller inga funktioner för utskriftsdesign. Men om du är en Mac-användare som letar efter en app för webbplatsvektordesign är Sketch värt att titta på.
Läs vår artikel om 21 bästa programvara för grafisk design för designers 2023.
Kolla in dessa artiklar om grafisk design
Här är några bra tips för att skapa unika vektorkonstverk
En sak att fråga dig själv är, vad är vektorkonst för dig? Vill du ha ett äkta vektorkonstverk, eller är vektorestetiken allt du är ute efter? Vektorfiler har en unik stil, och olika designers får det att hända på olika sätt. Men en nästan komisk känsla av linjer och färger gör den intressant och perfekt för grafiska projekt.
Så om du redan är en Photoshop-användare kan du överväga att dela upp hur man gör vektorliknande konst till delar som är lätta att utföra. Du behöver inte lära dig allt på en gång. Det finns många appar och filter där ute som snabbt och enkelt kan vektorisera en bild till en vektorliknande konstfil.
Hur man använder vektorkonst på din webbplats
SVG-vektorfiler används ofta i modern webbplatsgrafik. De används i knappar, ikoner och andra objekt i användargränssnittet och olika designelement på sidan. Till exempel är företagslogotyper nästan universellt vektorbaserade, även om det ibland är vanligt att konvertera vektorfilen till en raster JPG eller GIF för webbanvändning.
Vissa webbplatser har mer grafik än andra, så mycket beror på hur du vill att sidan ska se ut. Vanliga webbsidaelement inkluderar textblock, fotografier och annan grafik. Om det du siktar på att göra faller inom kategorin "annan grafik", är en vektorbild troligen rätt väg att gå. Att göra allt som ett rasterfoto skulle sannolikt laddas för långsamt och se klumpig ut.
En vinnande grafisk designerportfölj är avgörande om du strävar efter att göra en framgångsrik karriär inom designbranschen. Här är några fantastiska designportföljer på Pixpa som säkerligen kommer att inspirera dig att skapa din portföljwebbplats.
Din onlineportfölj är nyckeln till att attrahera och imponera på potentiella arbetsgivare, kunder eller samarbetspartners. Designportföljwebbplatser måste gå längre än att bara visa upp din design. Du måste också tänka utanför boxen, avslöja ditt kreativa geni, hitta ditt uttryck och presentera ditt arbete på bästa möjliga sätt. Vi hade satt ihop tidigare en guide för att bygga din designportfölj, ett måste att läsa för alla som är seriösa om grafisk design som en karriärväg.
Se till att portföljwebbplatsbyggaren du väljer erbjuder den flexibilitet, funktioner och användarvänlighet du behöver för att sätta ihop en professionell webbplats utan att behöva någon kodkunskap. Det är där lite inspiration kommer väl till pass. Pixpa är en webbplatsbyggarplattform som är betrodd av kreativa proffs runt om i världen.
Hur man gör vektorkonst i Photoshop
Den bästa lösningen för vektorgrafik är Illustrator eller något av de andra vektorprogrammen, som Designer eller Inkscape. Om du redan har Photoshop finns det dock några verktyg du kan spela med för att bli bekväm med processen.
Grunden för vektorarbete är pennverktyget. Pennverktyget ritar en linje - eller en bana, som det kallas i vektorgrafik - mellan punkter när du klickar på skärmen. Varje punkt du klickar på blir en nod. Du kan ställa in varje nod för att styra hur vägen går igenom. Till exempel, gör noden en punkt, som i spetsen av en triangel? Eller gör den toppen av en kurva? Du kan styra kurvans exakta vinkel med hjälp av handtagskontroller vid noden. Du kan fortsätta lägga till noder med pennverktyget tills du stänger banan och skapar en anpassad form.
Sökvägen är inte synlig i teckningen förrän du programmerar hur du vill att den ska se ut. Ett streck lägger till en linje över kurvan och du kan ställa in dess bredd. Formverktyget låter dig lägga ner banor i vanliga former som rektanglar, cirklar eller stjärnor. Du kan ställa in strecket för en form, som ska vara dess kontur, eller fylla den med en färg, struktur eller gradient. På former kan du styra varje nod för att justera den på vilket sätt du behöver.
Med dessa få enkla vektorverktyg kan du skapa en hel bild. De flesta vektorfiler är lager på lager av korsande element. När du har den grova användningen av pennan och formverktygen kan du leka med programvaran för att utveckla vilken design du vill.
Att få en känsla för dessa grundläggande vektorverktyg är viktigt innan du går vidare till att försöka en slutprodukt. De är grunden för varje vektorprogram där ute, och även om de kan se lite olika ut, fungerar de alla i huvudsak likadant.
Det är också möjligt att dölja rasterbilder till vektorfiler med hjälp av några verktyg i Photoshop. Detta leder sällan till perfekta resultat direkt, men det ger en bra utgångspunkt från vilken du kan lära dig mer om hur man gör vektorkonst i Photoshop. Uppenbarligen ger den här taktiken dig inte fördelen av att ha den slutliga SVG-vektorfilen, men den ger dig utseendet på konstverket.
Skriv en väg till din framtid och fyll den med vektorkonstverk
När du först börjar kan vektorfiler kännas skrämmande att arbeta med. Men när du bygger upp erfarenhet av att arbeta med pennverktyget, former, streck, fyllningar, kommer du snabbt att ta reda på de grundläggande byggstenarna som gör dessa filer. Om du är ny på dem kommer du också att bygga upp en uppskattning för artister som arbetar i detta exakta och vackra medium.