Vectors in Photoshop – Why using vectors for web design is usefull

Many designers new to Photoshop probably won't have got round to using the vector tools yet as they are not really a core part of the Photoshop offering. However, for designers working in teams, or working on designs that regularly need editing and updating, then it's worth learning how to use vectors.

If you’re working in web design then it’s certainly useful to learn the ropes as many of the shapes we draw are rectangular, and using vectors can save a lot of time.

Suggesting that you use the vector shape tool may seem somewhat counter-intuituve in a raster graphics package such as Photoshop, and indeed when I initially saw the option to use vector shapes I scoffed at the idea, but over time I’ve come to love it.

As a website designer at the Newcastle based Kino Creative, I have found it makes a lot of sense to use vector shapes when drawing the sort of simple right-angled shapes that we regularly use in our web designs; sidebar boxes, div backgrounds, header areas etc etc. Granted this may not be an option for someone using photoshop for more organic designs, but for many of us working in digital web design it’s bread and butter.

So why use vector shapes?

There are three important reasons why you should consider using vectors in your designs. Essentially we’re talking speed of editing here, but vectors also allow for fine tuning of masks and the like that becomes difficult when working purely with raster graphics:

  1. Vectors are easy to amend – If you are working professionally you’ll know that fast turn around is important, and often this becomes difficult when you’re dealing with mutliple and significant client amendments. Having shapes drawn in vector enables you to easily tweak the vector elements within your designs, and this can save hours of time.
  2. Scaleability – This one’s pretty obvious, and the main strength of vector graphics in general, but being able to infinitely scale up specific elements in a page is usseful.
  3. Masking – If you’re not using vectors to mask images then you should start doing so immediately. The reasons for this again come down to flexibility when amending a design. I now always use vectors to mask images instead of cropping the image itself, as this leaves me with the option to resize the mask (and thus the image underneath) without having to reimport anything.


The only downside I can think of is that when you zoom in over 100% the edges of the vector shapes can blur if not drawn accurately to begin with.

Why this happens I don’t know – perhaps someone can shed some light on this? That said if you are careful when drawing and editing vector shapes in Photoshop then they will not produce this blurred edge, but it does require that you’re aware of the problem from the start.

I’d be interested to know what other people’s expereinces are with vectors in Photoshop too, so feel free to leave a comment if there’sd anything you want to add.