Advanced graphic designs of web pages has increased the level of competition in the IT industry. Everyone wants to introduce pleasing graphic design in their web pages, logos and brochures. When you start working on graphic designs you will come across two different types, pixel-based and vector-based graphics. In the following section I will give you the description of the major differences. This description will help you in the selection of graphics for your web site or logo designs. A flourishing graphic design can be developed only by understanding the pros and cons of these two formats so that you can decide which one is good for your work.

Pixel-based Graphics

Pixel-based graphics are commonly known as bitmap graphics or raster images. In order to understand pixel based graphics you have to understand the word pixel and its origin. The word pixel is basically a combination of two words “pix” and “el”. The first word “pix” came from the word picture and the other word “el” came from the word element. The pixel is the smallest element of a picture or the tiny dots of colors (red, green or blue). Bitmap or pixel-based images are made by the combination of these tiny dots on a lattice. The picture on a bitmap graphic is a blend of pixels. The biggest advantage of using pixel based graphics in your website is that all the digital and scanned picture are produced in this format and you don’t need to convert it into any other format.

A bitmap image looks like the ball at the left in the above picture and the square at the right side shows the close up of the bitmap image.

Picture Quality

The quality of the image in pixel-based graphics depends on the mode of compatibility of output device or dpi of the device. If you want to keep the quality of a pixel-based image on a web page, you have to uphold its dpi or dots per inch up to 72 dpi since the dpi of computer monitors is 72 or 96 dots per inch. The dot per inch or dpi is also referred as pixels per inch or ppi. This will also help you in maintaining the quality of the picture when you are changing the file size, the picture will look worse otherwise. Apart from computer monitors, printers operate with a range of 150 to 300 dpi and that is why the pixel-based graphics do not have a good result when they are printed even with a higher resolution. Making files larger does not work either. This means that pixel-based graphics is good for web pages but not for brochures.

The difference in the quality of a bitmap image on printer and on monitor screen is visible in this illustration. The small square box at the front shows how pixels get scattered when they are printed whereas the same picture has a realistic effect when it is produced on-screen.

Scaling of Pixel-based Graphics

Pixel-based graphics have a different behavior in scaling process. Making bitmap image smaller is not a big deal and it has no side effects on the quality of the picture. You can scale down a 400 by 600 pixel image into a smaller size without having a blurred or blotted effect on the picture but in the scaling up of the picture it possess different behavior. In a bitmap image, the properties of the picture include the attributes of each pixel. In making the size smaller, these attributes are shrunk easily but in the scaling up of the picture, the computer is unable to resize it as a larger image. The device does its best and makes the picture bigger with estimated attributes which result in a distorted and splotched image.

This picture demonstrates the difference of bitmap image before and after scaling.

Size

The size of a pixel-based image depends on the properties and attributes of the pixels. Pixel-based graphics have a larger file size than the files of other formats because in pixel-based graphics all the pixels hold their information and have their own separate attributes which on blending, make a complete picture. This process of image development increases its size and makes the file larger.

Vector-based Graphics

Vector-based graphics have a wide scope in line art. Apart from pixel-based graphics, in vector-based graphics images are developed by mathematical functions. Vector-based images are somewhat similar to geometric diagrams and use points and lines. Individual objects have individual attributes and characteristics which is unlike pixel-based images in which each and every pixel has separate attributes and properties associated with them. The editing of vector-based images is also very easy. The main reason of this easiness in editing is that only the properties of the lines and objects has to be edited in contrast to the process of changing attributes of every pixel. The lines, dots and functions used in the development of vector-based graphics are called primitives.

This is a perfect example which shows the actual vector-based image along with its primitives. The picture on the left side shows a vector-based image and the picture on the right side shows primitives of the original vector-based image.

Picture Quality

The image quality in vector-based graphics does not depend on the dpi of the output device. This type of artwork in graphic design is good for logo designs because the resulting image is clear and crisp.  Vector-based graphics do not work well when there is a need for soft-toned graphics in a picture. A picture which requires a lot of tonal changes is difficult to achieve in vector art. If you are interested in adding a vector-based image on your web page then you need to rasterize the image (convert it into a bitmap image). But the vector images that are created in Flash can be used in a web page without converting it. Besides Flash, there are several plug-ins that are available which support vector-based images. In many cases, the browsing software faces trouble in dealing with a vector-based graphics and rasterizes the vector image itself.

Vector-based images cannot be for realistic pictures. This is very important to know that the conversion of pixel-based image into a vector-based image is very difficult. It can only be done by using specific software. It is wise to use bitmap images in graphics orfor web design because images produced by scanners and digital devices are bitmap images and the conversion of pixel-based image into a vector image is a difficult task.

This is a perfect example which shows the difference in results of vector-based graphics and pixel-based graphics in a realistic picture.

Scaling of Vector-based Graphics

Vector-based graphics are easily scalable to any size. A vector-based image is made up of lines and mathematical statements which makes it easy to scale images up and down without losing quality. The output device does not need to make any estimations for the appropriate points, the objects changes its size or points through geometrical equations. Vector art has the strongest point that it gives its best results in logo designs and line based graphics and one can easily scale it into any size.

This diagram shows the behavior of a vector image when it is scaled up. It is obvious in this image that the result of a vector-based image is smooth after scaling.

Size

The vector-based images are smaller than bitmap images because the file contains only the information related to objects rather than the information of each pixel. In vector-based graphics, the size depends on the resolution of the picture that has been generated even if the picture is converted to bitmap image, the size remains the same. So, if you want to have a small bitmap image on your website you can use a converted vector-based image. The size of the vector-based image depends on the number of objects and layers included with it.

If you are going to start working on a new website or are deciding on a logo for your business this article should be helpful in choosing the format of graphics for your work or design.

1. Fantasy by: ghostnat

I like how the red clouds and bright colors blend together. Very nice and attractive!

800 x 600

2. Seasons by: chiplegal

This is why I love vector graphics so much! If you want to put creativity on your photos, make them in vector. Cool!

1280 x 960

3. Sloorp For Candy by: giorgos93

This wallpaper makes me want to eat sweets! Pretty and sweet one to use.

1280 x 800

4. Butterfly by: expansiondesign

The lady was perfectly done in vector with the curves and details of the body.

1280 x 1024 | 1680 x 1050

5. Paprika by: softmeanie

Putting different kinds of objects to form the woman’s body. Cool, isn’t?

1920 x 1200

6. Spring by: chiplegal

I really like this one. It’s so clean, a creatively done vector wallpaper.

1024 x 768

7. Gift from Paradise by: MagicalViper

I like how all the elements are combined together to form such a wonderful nature-themed vector wallpaper. The colors are nicely chosen too.

1600 x 1200

8. Rainbow Concepts II by: jugga-lizzle

The combination of shapes are nice. I think it would look better if the colors are brighter than the current ones.

1024 x 768

9. Rainbow Concepts IV by: jugga-lizzle

Comparing this one with the previous wallpaper, I like this one better. The concept is nice and the placing of elements are greatly done.

1024 x 768

10. Rainbow Concepts V by: jugga-lizzle

If you will look at the design, there is not much shapes used. But it still looks nice because of the simplicity plus colors used.

1024 x 768

11. Dibujo Rarro by: spinix

A wonderful example of vector design, putting different geometrical shapes to create a design.

4665 x 3406

12. Reinas del Poker by: vikifloki

Nicely done in details. Clean and beautiful ladies in vectors.

1024 x 768

13. Morning Fantasy Wallpaper by: jugga-lizzle

I like the pink color and the blur effect of the flow. Very peaceful and feminine look design.

1024 x 768

14. ‘Fallin by: jugga-lizzle

The silhouette trees made the design look romantic, while the shapes in bright colors made it look very childlike.

1280 x 1024

15. Skyline by: webby85

One thing that I like with some designs is the story behind each. This is like a love battle between good and evil.

1600 x 1200

16. My Favourite Mistake by: mariux

The lady in vector looks so lovely. It looks nice and fancy.

1280 x 1024

17. Wallpaper by: illustrator

Cool! I love the concept of putting no face and the wings too. Music makes us fly.

2000 x 1500

18. Mushtopia by: ScaryDeadGirl

If you want your eyes to be refreshed, put this as your desktop wallpaper. Very refreshing.

1600 x 1200

19. Geisha Wallpaper by: Tabbathehutt

Simple but nice lady figure in kimono. It fits well on the design.

1024 x 768

30. Mario and Sonic by: !darkdevil

Wonderful work of vector! Very nice Super Mario in vector, isn’t?

1600 x 1200

31. Super Mario by: bad-blood

Do you remember those times that you play the game of Mario? Very nice game like this one in vector.

1024 x 768

32. Fantasy Island by: celsojunior

I find this one very cute. The rainbows and ray light effect of the heart shape give life to the design.

1280 x 960

33. A Trip To Wonderland by: secroit

Wonderful art and style. The colors used are not too dull yet not too bright. I like the objects used, perfectly combined.

1600 x 1200

34. Niponisation Wallpaper by: vikifloki

Nice and clean. I like the swirls that was put around the lady, very sophisticated.

1280 x 1024

35. Disco by: celsojunior

Very cool! Awesome colors and graphics used.

1600 x 1200

36. isoCologne by: yofikus

What do you imagine on this wallpaper? I imagine a city with lights and trees. Have you noticed the ribbon-like object that represents a river? It’s so cool!

1280 x 960

37. Sasusaka Wp by: RavenxCorpse

Vectors and silhouette are perfect combination, right? And this design is one good example.

1600 x 1200

38. Missin’ Like Candy – Portrait by: incredibledarlz04

Beautiful colors! A wonderful example of vector.

1440 x 900 | 1920 x 1080

39. Vector by: jrbamberg

The objects stand out with the background color and the swirls with a leaf on the tip are wonderfully placed.

3296 x 2542

40. Until She Comes by: $chixor

The lashes are nice and the hair gives the woman a sexy look. And the background color fits so well on the design.

800 x 600

41. The Four Seasons – My style by: onutzaC

The silhouettes are great that they blended well on the background. Awesomely done wallpaper!

1280 x 1024

42. Little Happy Hilly Wallpaper by: acrylicana

Have you notice the wings that was put as mustache? Cutie! The colors are very attractive!

1024 x 768 | 1280 x 1024 | 1366 x 768

43. G6 Monkey by: Y0o

Hah! This one so so cute. Very creative to put together objects to form a monkey.

1280 x 1024

44. Touch You by: ghostnat

Don’t you find designs with stories behind each very creative? I do. I think designing is one way of speaking your emotions.

1024 x 768

45. Beyond The Rainbow by: dreaming-star

The rainbow is like a slide made of candies. The sun rays work well with the background color and the silhouette are very nice.

800 x 600

46. Nature by: celsojunior

The design is so smooth in style, good choice of colors. I wish there can be a place exactly like this one. It’s like paradise.

1280 x 960

47. The Lady Awaits by: ekster

The lady in vector is sexy and chic. If I were just a guy, I would not let this woman wait. Haha! Amazing work indeed!

1280 x 800

48. Like The Wind by: webby85

The clouds and other elements of the design fit well together. The details are well-created.

1600 x 1200

49. Wallpaper by: mixmasterangel

Very nice vectors. The curves and the details are nicely done. I also like the woman holding a gun, very strong in personality.

1600 x 1200

50. Summer Dream by: jlluesma

I love the effects of the light. Also, how the colors and shapes are blended together are awesome.

1600 x 1200

51. Little Yellow Submarine by: sourcow

When I am seeing this, I can imagine lollipops. Very sweet and the submarine looks great.

1280 x 960

52. Love by: koden

Don’t you remember your puppy love when seeing this? I do. LOL. This wallpaper is simple yet cute and romantic.

1600 x 1200

53. Wind by: princel3d

Though the colors are not so bright, it still look good because of the blending effect. Nice work.

1600 x 1200 | 1280 x 960 | 1024 x 768 | 1920 x 1200

54. Vector Vortex by: SpritzTheVik

Good choice of colors and well-done curves.

1024 x 768

55. Fueled with Smartness by: imrik

The curves and colors used on this design struck me the most. Very beautiful.

1920 x 1200

56. Shot by: Andycap

Very emotional design. I like the effect of the soul and lady in silhouette. The clouds and vectors are beautifully combined.

1600 x 1200

57. Panda Remix by: MagicalViper

I find this one unique for seldom vector designers use two colors only. The pandas combined with different shapes are very cute.

1600 x 1200

58. Heaven and Hell by: Joker84

A vision of what is heaven and hell. I like the silhouette used and the blending of background colors.

1600 x 1200

59. My Freedom Begins Here by: celsojunior

Nice silhouette and choice of colors. Simple, bright yet nice.

1280 x 960

60. Retro Profile by: jugga-lizzle

The colors are nice and the creator did a great work by just using one shape and having a creative output.

1400 x 1050

I hope that you enjoyed browsing these beautiful vector wallpapers as I have enjoyed them. Personally, I appreciate and I love viewing vector designs. I find them really nice and creative! You won’t get tired looking at them, right?

What about you? How well do you like vector designs? You can share your thoughts with us!

I categorized everything in 4 categories so you could easier and faster find everything you need:

1. Vector Icons and Reusable Graphics
2. Illustrations And Random Vectors
3. Templates And Starting Resources For Web Designers
4. Misc Vectors

1. Vector Icons and Reusable Graphics

Find here a lot of cool, maximum quality icons –  in vectors you can scale each graphic as big as you want –  it’s all in lines!

iMac Vector Icon

Bright! – a free vector icon set

Milky, a free vector icon set

Glass Lab Bottle Vector

Money Vista Icons

165 Vector Icons

85 Vector Icons

64 Vector Arrow Icons

User Vector Icons

Glossy Arrows Vector

Fat Pencils Vector

Golden Lock Vector

Transport Vector Icons

Vector Dessert

Vector Network Icons

90 FREE VECTOR ICONS

Medical Vector Pack

Vector Shop

VECTOR JUNK FOOD

CITRUS VECTORS

VECTOR WEATHER ICONS

Kitchen Icons

Food & Cooking Vector Graphics

2 Awesome Twitter Icons

Cute Tweeters Icon Set

Feed Me Animals

3D Isometric Icons

Kameo Icon Set

9 Vector Globes

2. Illustrations And Random Vectors

Here you’ll find a little bit different vectors which are really beautiful and can be used in projects to add some unique spice to it! Just some handy resources!

Paint Cans Vector

Paint Brush Vector

Binocular

Orange Juice

Pure Sound Vector

Handshake Vector

High Speed Blender

Bettle Desktop

Cassette

Gnome CD Recorder

VIDEO CAMERA

VECTOR WORLD GLOBES

RSS Orb Girl

Little Blue Bird

3. Templates And Starting Resources For Web Designers

For web designers this section will be especially handy –  some great buttons, keyboards, reusable templates!

Apple keyboard

Business Presentation

Modern Retro Background Vector

Glassy Buttons Vector

77 Vector Buttons

40 Vector Icons for Apple Products

Tech Map

Skyscrapers

Free Vector Coffee Cup

Colorful floral backrounds

School MEGA pack

Aqua buttons

Apple Hardware Vectors

Vector Ornaments Frames

Pens, pencils and markers

Notes and paperclips

Vector bags & boxes

Things that fly

4. Misc Vectors

Here I just put everything I couldn’t list in another categories! Vector beauties –  whole randomness, but worth reading through and bookmarking for later reference as ultimate vector resource for you!

4 beautiful & detailed birds

Free vector fishes

10 fruit fridge magnets

Vintage Aircraft Flight

Sports Vector Pack

Lemon Vector

Six different keys

lilac wine

Free Kids Beach Animals

BF.109

VECTOR BEACH BACKGROUND

FREE VECTOR CAR DOWNLOADS (Part one)

FREE VECTOR CAR DOWNLOADS (Part two)

Montero 2002

Vector Watch

Let us know if we have missed some thing awesome and we will be happy to update the article.:)

This list just features 22 resource sites and several very well written articles with premade pattern collections, it was very interesting for me to write this article, I am hoping it will be interesting reading and useful resource for bookmarking.

DinPattern ( ~120 patterns)

SquidFingers ( 158 patterns)

Pattern8

DreamsTime

Did you know there are huge collection of free patterns as well?

Alice Grafixx (609 patterns)

Pattern4U Kollermedia (174 patterns)

Kaliber 10000 (k10k)

Noqta Dromoscopia (33 patterns)

TileMachine ( 130668 patterns)

Really huge collection, a lot of old patterns, but in the bunch I found many useful ones too, there are also pattern maker.

EveryDayIcons ( ~100 patterns)

Ava7Patterns (~ 1000 patterns)

Many creative patterns, also mouse over evil ladybug, kill the fly for extra fun – beautiful website.

Citrus Moon Patterns

Site hasn’t been updated for a while, but still many beautiful patterns can be found there.

DeviantArt Photoshop Patterns

Deviantart is everything related to art, of course there are big collections of patterns!

HoverWebDesign

Design and all those advertisements aren’t quite welcoming, but still a lot of patterns there.

PaternCooler

Another great pattern collections:

200+ Beautiful Seamless Patterns Perfect for Web Design

1000+ Background Patterns You can Use for Free

Nice picks from DeviantArt, big collection.

250+ Free Seamless Vector Patterns Ideal for Print and Web Design

100+ Free Seamless Vector Patterns Ideal for Web Design and Print Work

400+ High Quality Patterns

Beautiful picks from Deviantart.

The Ultimate Collection Of Free Photoshop Patterns

And of course how could I miss the ultimate collection with Photoshop patterns from SmashingMagazine.

Huge Collection of High Quality Patterns

Nice and very fresh collection from VectorDiary.

And little add, Ronald from Naldzgraphics also compiled nice pattern list which I feel is suitable for including in this article.

Here You go -

500+ Truly Useful Resources of Free High Quality Patterns

There are a lot of different ways, how to create logotype – it can be unique icon tied with company name or the field company is working, it can be stylized text – 3D text, outlines – actually there are unlimited opportunities how to fulfil this task. I just wanted to show You one more easy and effective way, how to create nice logotype in few easy steps. I love this way, because I am not so great in sketching, so here is my opportunity to do job effectively and maybe Your’s too!

To convert bitmap image to vector we will use Adobe Illustrator with great built-in feature.

There are different options from which You can choose, at first You can convert any image to vector – to get lower file size and cool, unique effect in few seconds. I’ll show You an example:

I thought that the same technique can be used to convert any bitmap image to simple few color vector image and then simplify to get unique icon and use it as logotype. So I’ll show You my way to do that job:

Step 1

Choose an image with an graphic element,  You want to use as logotype and cut if off to get rid off background.

Open Photoshop to do the job. Use one of the lasso tools, I will not show all the process how to do all cutting process. However I will give You few tips – I usually use Polygonal Lasso Tool and do everything in big zoom to make the process easier. And if You have few-colored background like this You can use Magic Wand tool to do the job quickly.

Change color settings to choose which colors You will use, but that’s not so important actually because we will change colors in Illustrator anyway.

Save the image in *.psd format.

Step 2

Open Adobe Illustrator, create new document and click File–>Place..–>Choose the image You want to convert to vector.

I chose here Live trace–> Photo Low Fidelity and this is my result. You can choose there from a lot of settings, in logotype actually You use just few colors, so You should limit them. So that’s why I switched from 16 to 5 colors. I think that result is pretty amazing!

Step 3

Click to expand – to convert tracing object into paths:

Use Pen tool and Direct selection tool to simplify paths, so this is my result:

The more time You put in here, the greater result You get and that obvious – I just wanted to share with this technique, so I hope You got the point.

Also there is nice online resource, which converts bitmap images to vector images with a few simple clicks:

Your opinion about this technique would be appreciated! Maybe You have Your own unique ways how to create logotypes,  You can share with?