The Complete Blogger’s Guide To Vector Graphics Design
10 months ago
The success of every blog depends not only on great content and copywriting - but also on the beautiful and conveying graphics and visual branding.
Your logo must be clear and sized correctly on your web page. Blog articles covers must be simple and yet informative. Newsletters and infographics you are sharing with your users must contain well formatted graphics.
All these elements of your blog must be vectors - scalable and clear kind of graphics that use mathematical equations to draw out your designs. Fear not though - they are much easier to use them than it sounds! 😉
Many bloggers and content marketers are getting confused how to approach vector graphics design. Which tools to use for different graphic design projects, how to choose typography, which colors match well together?
In this guide we will approach these and other common questions bloggers are facing with graphics design. With just one aim in mind - taking your blog to the next level with new shiny vector graphics! 🚀
What Are Vector Graphics ⁉
Vector graphics are drawn using mathematical equations. These mathematical equations are translated into points that are tied up by lines or curves, also known as vector paths, and they make up all the different shapes you see in a vector graphic.
This allows vector graphics to be scaled to any size without sacrificing image quality as well as maintain a small file size. Amazing, right? Common vector file formats are .svg, .cgm, .odg, .eps, and .xml.
Raster graphics on the other hand are optimal for digital photo editing because raster graphics are able to portray better color depth. Each pixel can be any one of the 16 million different colors available. But if you’re not working with photographs, vector graphics editor must be your #1 choice especially because vector graphics are able to be scaled and manipulated at any size with clarity.
Things Bloggers Use Vector Graphics For
Bloggers and content marketers would need to use vector graphics for a range of different activities while establishing, developing and growing their blogs.
There are multiple things you can visualize: charts, quotes, numbers, lists. Most of the things you put in graphics are more appealing to your readers and therefore generate more engagement, which quickly transforms into revenues too.
Logotypes are essential. They are the most powerful element of personal branding present at about every important page of your website.
Do not make the mistake of using Photoshop of any other raster graphics editor to create or edit your logotype. Always use vector graphics editor like Vectr for your logos - this way you can make sure it is clear and sharp no matter how you resize it.
2. Blog Cover Images
Vector graphics are sharper and sometimes much more expressive than raster images. Even though normally you upload PNG or JPEG to WordPress, it is always a good idea to use images created in vector graphics software for your articles’ covers. Same goes for blog page sliders - they must be scalalbe and clear.
You can easily and intuitively manipulate text and images in vector graphics editor, as well as other powerful tools like a pen tool.
Here is an example of a great graphic article cover image from AhRefs marketing blog.
Creating collages is really easy and fun. Collages are great both for social media and blog articles - you can republish them easily and generate even more attention of your readers.
4. Social Media Graphics
Indeed there are plenty of tools for creating social media graphics. But vector software ain’t any worse than any of them! Since you have already been working in one tool with your logotypes and blog cover images - it makes a lot of sense to use the same tool for social media too.
Vector graphics editor allows you to create cool custom icons which you could use for Facebook, Twitter or Pinterest. There is also no better software for creating memes! :)
5. Website UI MockUps
Yes of course you are a blogger not a developer. Yet still when redesigning your website it is great to be able to prepare some basic user interface mockups to convey your vision.
Vector graphics software makes it really easy to prototype your ideal website. That would make developer’s life easier and save you lots of time and surely some money too.
Check this great short tutorial on how to use Vectr for web UI prototyping. Easy, right?
6. Business Cards
Time comes and you become famous! 😉 Your readers and fans start stalking you. Fellow writers start sending you praising emails. Means that it is time to create business cards.
Vector graphics editor is a perfect tool for creating such projects. Anything that needs to be printed must be top quality and clarity. It is pretty easy to design your business cards yourself, all you need is to play around with some fonts, backgrounds and your logotype.
Images And Icons Resources 🖼
There are multiple resources bloggers could use to source some great images, graphics and icons for their work. It is always more efficient to download some ready-made pieces and then modify them than creating everything from scratch.
We are going to list the best of them here:
Royalty Free Images
Free Vector Icons
Typography Rules 🔠
There are some simple typography rules to follow when designing vector graphics. They do differ of course depending on the type of a project you are creating. We are going to list here a couple of generic foundational rules worth following anytime.
Don’t use fancy fonts
Try to keep it as simple as possible. Don’t use fancy fonts if you do not know what you are doing. That doesn’t include some moderately creative fonts however - just be sure to know your limits.
Forget About Comic Sans
Pretend you never seen it.
Don’t mix more than two fonts
It doesn’t look too consistent when you mix up more than two fonts in one vector graphic piece or text. Just check the example below, does not look good right?
Mix only contrasting fonts
Preserving contrast is the way to go when mixing up fonts. Mix Serif + Sans-Serif, that would always work best.
Spell Numbers 🔢
Unless your blog is about mathematics or physics, spell the numbers. It is more aesthetic and makes reading easier.
Picking The Right Colors 🎨
Picking and mixing the right colors for your vector graphics ain’t easy. However there are many great tools out there which could be helpful.
We recommend using a tool like Coolors.co to create your color palettes. Coolors is very intuitive and does not require any knowledge of graphic design or color theory, it just straightforwardly helps you pick the colors that match well together.
RYB Color Wheel
If you are serious about graphic design though, it is always easy and fun learning a bit about color theory. The first circular color diagram in fact was designed by Sir Isaac Newton in 1666.
In the RYB (an abbreviation of red–yellow–blue) color model, the primary colors are considered red 🌹, yellow 🌻 and blue 💙.
The three secondary colors are green, orange and purple. They are created by mixing two primary colors.
Another six tertiary colors are formed by mixing primary and secondary colors.
Colors that are located opposite of each other on the color wheel are called complementary colors. For example - red and green. The high contrast of the complementary colors creates a bright and vibrant look especially when displayed at full saturation. Be careful however not to make it too jarring. Complementary colors are really bad for text.
Analogous color schemes use colors that are right next to each other on the color wheel. They usually match really well and create natural and good-looking designs. Be sure to have enough of contrast however when using analogous colors.
A triadic color scheme includes the colors that are evenly spaced around the color wheel. For example - purple, green and orange. Triadic color schemes tend to be quite bright, even if you use the colors which are paler.
Vectr - Intuitive And Powerful Tool To Bring Your Designs To Life
Vectr is the best vector graphics tool available for bloggers and content marketers to bring their projects into reality.
Vectr is free, forever. Our mission has always been making vector graphics design accessible to everyone - therefore Vectr is to remain free forever. We are going to develop a PRO account though which is have plenty of advanced functions. Check roadmap page for more!
Vectr is packed with powerful tools able of producing top-notch graphics.
- Create icons, website UI designs, logotypes, brochures, banners
- Easy to use pen tool - create curved and straight paths and modify them
- Intuitive freehand drawing tool - draw custom shapes
- Easily add lines, circles, rectangles and manipulate them
- Canvas size templates for most popular projects
- Grouping layers - group layers and modify them together
- Corner radius - change the radius of any corners
Vectr is simple and intuitive. See what our users are saying about Vectr:
https://t.co/aJxXhhaFLn is the best SVG editor I’ve used so far.— Volkan Özçelik (@linkibol) February 24, 2017
Vectr works both on the web and desktop - Mac, Windows, Linux or Chromebook. So now you can start designing on the web and then continue on a different computer’s desktop app - all your progress will be synced automatically.
* Vectr WordPress Plugin
For those bloggers using WordPress content management system - Vectr has a plugin for WordPress allowing you to edit graphics straight from your browser window! All your designs will of course sync with your account. When getting started with your blog - Vectr’s plugin would be one of the essentials for image editing.
Each blogger and content marketer should embrace vector graphics design. It is a professional way to approach designing most of your marketing materials which would make you stand out of the crowd.
Vector graphics design is easy and fun too. There are plenty of resources to learn from and intuitive tools available for free which enable you to create anything.
Good luck designing! 😉