Category: Web Design

Vector VS Raster Graphics

2 Different Types Of Graphics.

If you ever tried to create some web graphics, posters or logos, then you’ve probably came across terms like “vector” or “bitmap” (also known as “raster”). These are the two basic types for creating any kind of graphics. Even if you didn’t know it at the time, it is certain that you worked with at least one of those types.

Photoshop, for example, is the most common raster-based program in the market, so every time you use Photoshop, you work with bitmaps and pixels. In a similar field, Illustrator and Corel Draw are the most common vector-based programs, where you have to work with points and paths.

This article is based in the usage of these two graphic types as it certainly makes a difference how and when you use them.

Terms.

Knowing your work tools will “pay you back” eventually, at least this is what I think. This is why it is important to take a closer look into those two types.

Raster Images or bitmaps are created by a number of pixels placed next to each other in a grid. A pixel is a single colored dot. Many pixels combined, create the image that you see (as the picture above).

Vector Images can be created by the usage of mathematical definitions exclusively. Every shape is ultimately a series of points connected by lines and represented by pure mathematical types. (All you have to know in order to draw a simple square, for example, is that it consists of four points that are connected and placed in a specific position.)

Advantages & Disadvantages.

Raster Images

(+) The main advantage of raster images is based on the way a raster image is created. This vast number of pixels can create “continuous tone” images such as photographs. The amount of detail a bitmap image can have, depends on the resolution of the image (how many pixels/dots exists in an inch).

The standard resolution for printing is 300 dots per inch (300 dpi), when 72 dots per inch is the resolution for displaying an image in a computer monitor (72 dpi).

(-) One of the main disadvantages of bitmaps images is that, the more you enlarge it, the more the image loses its quality and pixels become visible. This is known as “Pixelation”.

(-) Another disadvantage of raster images is that the bigger the resolution of an image is, the bigger the size of this image becomes.
Bitmap images are used widely in the web and it is also a common methodology for developers to optimize the images they use by compressing them. This is done, mainly in order to prevent a webpage from exceeding an “appropriate” size (at this time an average of 500 Kb is probably fine).

Vector Images

(+) Scalable Vector Images, as the name suggests, give you the ability to enlarge or shrink them at any size, without any loss of quality,

(+) they create small file sizes but…

(-) vector graphics, cannot reproduce continuous tone images the way bitmaps can.

Way of Use and Common Formats.

As we already mentioned, raster graphics are mainly used in photography and in the web. Some known raster formats are: BMP, GIF, JPEG, JPG, PNG, PICT (Macintosh), PCX, TIFF.

Vector Graphics are mostly used for designing logos or any combination of shapes that can be used for business cards, posters or any kind of graphics that eventually will be “sent” to a printer.
Some known vector formats are: EPS, AI, SVG, SWF, PDF, DFX, CDR, or DWG.

Generally, it is a good practice, to design any kind of logo as vector and then converting it into a raster format. The most common reason for doing this, is the ability to rescale the image and re-print it at once, without any loss of quility.

It is worth to be mentioned that, each type of graphics can be converted to the other and vice-versa. Converting a vector image to raster is by far an easier process and with no particular problems in it.

Adobe Illustrator can do both. You can save your file as png, jpeg or any other format in order to “rasterize” your shape or you can “vectorize” your bitmap image by “outlining” it.

Conclusion

There is no right or wrong type for graphics. Either one has its advantages and disadvantages. You just have to know when and what to use. There will be times when you may need to combine both of those types at the same file!

If you learn how to use them right, I’m sure you are going to benefit even more by them.

December 9, 2014

The Easy Way to Web Design

Simple principles to guide you through ‘harmless’ web design.

The basic, the first and the last rule is:

Keep it Simple!

1.Make clear to your visitors what it’s all about, what’s this web site’s purpose.

Create a ‘simple’, layout with clearly defined areas for your Site’s pages and make sure that there is, for example, a short description near your company’s logo or at the start of your home page that describes the reason of this site’s existence so anyone can understand it. If people can’t understand almost immediately why they are there don’t expect them to stay long or visit your site again.

2.Remove all visual “obstacles”.

Remove anything of little importance that can distract your visitor’s attention, such as tons of banners and ads across the page, along with a couple of image rotators that you added because you thought it was fun. That is a reason, you know, that almost always makes people feel frustrating because of not knowing where to start. Instead try to make clear what a user can ‘click on’ – more specifically try to make all links and buttons of your page obvious to the user.

3.Don’t hesitate to use something that worked in the past.

Your main purpose is to make your website functional and easy-to-use and there are always a couple of known ways to make things happen. These are called ‘standards’ or conventions, things that are already tested and we know they work.

Now, a lot of people may have a great new idea of how a thing could be done differently, and that’s OK, BUT be carefull, because this new ‘bright’ idea of yours may be the end of an initially good project. Before you try to use it, saw your idea to a number of people and check their reactions. After that, base your decision on the people’s reactions, but don’t try to create something new just because you think you have to.A lot of people think that because they are hired to make a website they must bring evolution to the way of websites ‘work’ but they end up destroying the whole project.

Krug Steve, in his book “Don’t Make Me Think – A Common Sense Approach To Web Usability” has a great saying for the use of conventions:

“Sometimes time spent reinventing the wheel results in a revolutionary new rolling device. But sometimes it just amounts to time spent reinventing the wheel.. Innovate when you know you have a better idea (and everyone you show it to says “Wow!”), but take advantage of conventions when you don’t.”

June 7, 2014