Vector Image Workshop – Understanding Graphic Formats

In this workshop I learnt about different graphic formats and how to use and create them in Adobe Illustrator.

Some basic information about the different graphic formats are:

Bitmapped Image – obtained from scanner or painted, video, can also be a photograph. AKA Raster Graphics.

  • Image is stored as an array of pixels
  • Good for representing natural objects
  • Can require large amounts of storage
  • Cannot be resized well

Vector Image – are drawn and created from scratch.

  • Image stored as mathematical object with paths and shapes, so much smaller file size than Bitmap
  • Can be stored efficiently
  • Resolution Independant
  • Doesn’t produce natural looking objects

vector vs bitmap example

So in a little more detail I am going to look at creating vector graphics in Illustrator. Because Illustrator doesn’t work in pixels like bitmap images, everything that you produce in it is resolution independent.

difference-of-pixel-and-vector-image-in-a-real-picture

Vector images are built using a number of predefined shapes, they are used because they can be represented compactly and rendered quickly:

  • Lines
  • Polyline
  • Curve
  • Eclipse
  • Rectangle
  • Polygon

Also the pen tool is available for freehand drawing to create curves. It was created in 1962 by the French engineer Pierre Bézier. His curves were widely publicised.  Bézier curves are used to model smooth curves that can be scaled indefinitely. “Paths,” as they are commonly referred to in image manipulation programs, are combinations of linked Bézier curves. Paths are not bound by the limits of rasterised images and are intuitive to modify. Bézier curves are also used in animation as a tool to control motion. Bézier curves are also used in the time domain, particularly in animation and interface design, e.g., a Bézier curve can be used to specify the velocity over time of an object such as an icon moving from A to B, rather than simply moving at a fixed number of pixels per step. Here is a example of a Bezier curve

bezier curve

So creating vector images in Illustrator means that the possibilities are endless, like when drawing on paper. The images that can be created is infinite. As well as creating pictures or drawings from scratch, Illustrator is used a lot in web and interface design. So backgrounds can be created using vector images, also whole interfaces , mascots & logos.

Vector design in logos

A logo design is of great importance to any business. Often seen as the first impression of a company, its logo must be tailored to communicate specific values and ideals in an instant. However, logos not only have the look good, they should also be thoughtfully designed and capable of taking on a variety of uses. This could include being scaled to a range of sizes, being reproduced in flat color and being printable on paper stock.

castleprintrbone leafblack sparrowaramovapangurfire fishgreener

These example shows logos designed using vector images, it is a simple way to illustrate something, a flower, a animal, a shape, something made up from imagination, anything without using a photograph. And I don’t even need to label them as they are self explanatory, and that is what makes a great logo design. It speaks for itself.

bigomaha vector design logo

big omaha site vector image design

So these examples show the logo that has been used for this website’s company. The top image is the logo on its own, it uses 3 simple colours and white, the brightest colour that makes the text really stand out from the bland yellows and browns used in the cow and background. The image below is their whole website. The cow is the main feature, and its really quite a simple website, there is no hero image or much of a background except the plain cream that makes it easy to read the text. So instead of the traditional hero image and background elements they have used the logo  as a header to bring their branding including logo, text and colour into the design. I feel that this works well as a very simple website. The cow and the green behind him show a basic landscape/horizon, so this main strip of colour is showing what the company is about through the branding.

Vector design in headers

go glamping

This header comes from the website Go Glamping, like the one above it also features a landscape, personally I think this header is beautiful, probably because I love the idea of glamping (glamourous camping) and so their header is really selling the idea to me! See their full website here.

monster vector design

Here is a header design using vector image, although this one differs from most, the header does not include a logo, but instead holds the navigation bar, it is a clean and quite simple design, and the image goes beyond the header area and into the background, this works really well for the particular design as the blue monsters mouth appears to be eating the link into another area of the website.

n.design studio

This is the header design of Nick La, a web designer and illustrator, so that explains why it is a large, detailed and throughly thought out design. He does a lot of this style I noticed when looking through his website, using the Koi carp fish and oriental design around it. In the top right hand corner is ‘freebies’, he offers WordPress themes and desktop wall papers for free, all designed by him. He also has a large amount of Adobe Illustrator tutorials for the intermediate user, great for me to use at a later date! See his fabulous website for yourself here.

Vector Design in backgrounds

lowdi

This website for Lowdi, which I think us some kind of musical box that plays music from phone or ipod wirelessly. The vector design is used in a simple way to divide up the layout of the site, the colours guiding your eye around the page. It uses three colours, plus black and white. I think that this design is great, I think for a website that doesn’t have much on it, ie information or images, it needs to have a striking design and layout to keep your eye occupied and moving around.

with love

This website has a much simpler design as the background, it just has a blend of colours to form a blue sky at the top with some clouds. The simpler background has been used to not draw attention away from the photographs  that are being displayed. Personally it is my worst of the three background as I can’t really see anything original or artistic about it and also I can’t see how the background has any relevance to the images. Also I can’t really work out what the website is actually selling or supposed to be informing to me, the viewer.

HTML5 LAB

So this website has used a large vector image for the whole site. Its called HTML4 Lab and from the illustration I can see that they have something to do with building websites as jpg, png and psd’s are going in one tube and coming out another tube as CSS3, HTML5, and JS’s. So it does coding, but didn’t seem to have any links to anything. I thought I’d add this image to show a lovely Vector design rather than a website design’s layout.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s