vector

Hey there and let me explain.

Here are few watercolor clipart elements. Can you tell which one is real watercolor, hand painted digital watercolor, which is traced watercolor turned vector and which is vector with applied watercolor style (done in either Adobe Photoshop or Illustrator)?

The Parrot

So the parrot was hand painted on paper and then scanned and cleaned. After that it was traced in Adobe Illustrator and this is the result. It looks like watercolor. From distance only. If you zoom enough, you’ll see thousands of patch pieces that build it. Each such patch piece has a number of points that mark the curve of the shape and also has fill. At the end the file is heavy and one can super easy see it was traced. The traced clipart I’ve seen so far is worse than the raster original. It would come in a vector file like eps, ai or svg. We don’t sell traced clipart in our shop. If you want you can easily trace it by yourself 🙂 The real parrot is from our Forever collection and is a raster image.

The Frame shape

This sweet summery frame shape is actually a very simple vector shape with a fill. In the program (PS or AI) there is an option to apply a style to your objects. A style consists of various properties like stroke thickness, transparency, effects and so on. A watercolor style usually means that the object gets a look of watercolor. The style is often made of real scanned paper with watercolor paint on it and is a great way to treat text. As you see, it works on shapes too 🙂

To me this frame looks like cut out of watercolor painted paper and is a nice clipart element with good quality. This frame, even though originally a vector element is finally turned to either jpg or png. Not getting into too much detail on this. If you’re curious, let me know and I’ll do a post about it. Here you can see more similar frames.

The Rose

The rose, my beauty, is real watercolor painted on paper. It is then scanned and cleaned to be used as an element. Rich and deep color with distinctive edges of the petals. It is a lovely element and honestly, I don’t think I can make it like this in any other technique. Of course the rose would come as either jpg or png element. Actually it does, with a bunch of other roses and a cute kitten in the Purfect Ginger kit.

The Mermaid

Last on the list is the mermaid. Hand painted created in purely digital environment. From the pencil sketch to the last scale on her tale – digital. It was painted on a Cintiq tablet and I could’ve painted 5 more with real paint for the same time. Nice to play with though. The mermaid is painted on layers, so it can come as layered PSD (why would you need that?!) jpg or png. This sweets fish-gal is from Under The Sea turquoise set.

At the end of the day

what this means to you as a watercolor clipart user? it means you can use all of them if they’re to your liking. It’s a good idea to know the details of what you purchase so you know what to expect. There is slight difference between the last 3, but an eye not trained would not tell there is. I would personally stay away from mixing digital and real watercolor clipart.

Here’s a tip

Most illustrators design their clipart collections with a color scheme in mind and the elements are designed to work together. If you stick to a single collection or same artist, most likely your final design will have a consistent feel.

Wanna know about the difference between raster and vector images?

We see both raster and vector images everywhere around us, on packaging, on tv, in magazines. But what is the difference between them? Here we go 🙂

Raster images are a bunch of color dots and vectors are a bunch of dots (aka nodes or Bezier points ) that form a line. Simple enough, right? Let me go deeper.

Raster Images

When you go out shooting the autumn leaves or take a photo of the birthday boy, your digital camera makes a raster image file. This file contains various data like when and at what setting you made that shot, but most important – it has the info about each pixel and it’s position in the image.

The pixel is the smallest building element of any digital image. Like a tiny brick in a wall. The pixels color and lightness vary and they are positioned on a rectangle net. Here’s an example of image so enlarged that you can see the pixels and their positioning on the net.

Back to the images. When you shoot a picture, the camera saves it at a certain pixel size.

For example my phone camera shoots at 12 megapixels, which in this case is 3968 x 2976 pixels. Each pixel of these 11 808 768 has different color and lightness and they build the final picture I see. Like a puzzle.

Digital devices like a smartphone, laptop display, TV display or even digital photo frame, have the ability to reproduce digital images through light emission. Print devices like laser and inkjet printers can reproduce those same images on paper or other tangible surface by replacing pixels with ink dots. Here comes the question about the size.

All raster images are not created equal. Check the resolution.

The raster image resolution will give you a vital info – whether an image is intended for printing or for display. Printing requires higher resolution than display. Images for display are usually 72 ppi or 96 ppi (PPI stands for Pixels Per Inch), but again it depends on what exactly the purpose of the image is.

An industry standard is that raster images for print should be at least 300 DPI (DPI = dots per inch). For the sake of simplicity I’ll say that each dot represents a pixel.

If I want to know how large my phone camera image can print, I’ll have to do some simple math. Divide each pixel dimension to 300 (our print dots per inch) and in my case I get 13.22 x 9.92 inches. So this is what is called the physical size of an image at 300dpi.

If my inkjet printer is of superior quality or I want to use laser, I could print at 450dpi or even higher. Then the math will be 3968 : 450 = 8.81 inches for the long side and 2976 : 450 = 6.61 inches for the short side of my image. See how higher print resolution shrinks the physical dimensions of my photo?

What if you want to print your photo at exactly 4×3 inches at 300dpi? This is resizing and I’ll show you how you do it next time.

What if I want to print this otherwise big photo on a paper with size of 20×15 inches? A 27 megapixels photo would be required to get a good print, but my photo is only 12 megapixels. The result will be visibly jagged edges in contrasting areas and visible pixels overall. It is also called pixelation.

Some degree of pixelation is well accepted for prints that are intended to be observed from a distance.

Pixelation is also used sometimes absolutely intentionally in visual arts and design.

Vector images

Now that I find hard to explain! Bear with me.

Vector images are figures or shapes created from lines and curves. A line has at least two points (nodes) – beginning and end. Each end point has a handle that can be moved and bends the curve in the wanted direction. If a curve has 3 or more points, the inner points have two handles – left and right. Depending on the point kind the handles can move symmetrically, independently, but in one direction, or separately in different directions.

I’m not going into how to work with the Pen tool now, as this is a topic for a book or a few hours of video, but hope you get the idea of what vector is and how it is built.

Now the sweet part about using vectors and why graphic designers love them is that no matter how much a shape is enlarged, it will keep the number of it’s points and will not pixelate. You can enlarge a vector shape, then shrink it back and then enlarge it again (683 times) and it will still keep it’s quality, because it is a mathematical equation represented visually.

The downside of vectors for me is they’re never look alive as much as a watercolor image (that would be raster).

Of course good quality raster images can be traced (turned into vector), but this makes an almost pixelated version of the raster and usually doesn’t help a lot. But again, it depends on why one would need to trace an image.

File Formats

File formats are like surnames to your files 🙂 Raster and vector files are saved in different file formats and created / opened / edited by different programs. I promise another post or two to look at this under magnifying glass.

Raster files are usually created/opened/edited in photo editing programs like Adobe Photoshop, Photoshop Elements, Gimp (free program), Krita (free program), Pixlr (free program) and sooo much more. There may be tens of thousands of photo editing programs and each specializes in something more niche like editing for photography or digital painting etc.

Common file formats for raster images are tiff, jpg, png, psd. Some of these formats can be native to a certain program and be opened /edited only by it and some are popular and other programs open them too even though they’re native not to them. Such popular format is PSD, which is native to Photoshop, but can be opened by many other programs. A not so popular native format is the REB format which is native to Rebelle – a program specialised in digital painting.

When you purchase raster graphics on the web, they are usually distributed in a few very popular file formats – PSD, PNG, JPG and TIFF. PSD is used for layered files, when there is a need to preserve the layers separate to allow for changes. For example a poster design offered as layered PSD file would allow for color changes or text changes, so the customer can modify it to her/his needs.

A PNG or JPG format (flat files as they have 1 layer in them) would not allow for text change, even though some color changes can be achieved through various tools. Usually flat files are smaller in size than layered files. Both PNG and JPG are widely used for web where the size of the file is important factor.

TIFF files are great for keeping all color information in tact and are used by professionals in the print industry (but not only) because they’re lossless. They can be edited numerous times and saved and will not loose any quality, unlike the JPG files. JPGs loose a bit with each save.

Last about the raster formats – some of them can hold a vector layers. Like the PSD files, which can hold paths, vector shape layers and layer masks and vector smart objects (later on this). Same goes the other way around – some vector files can hold raster content (AI, CDR).

Now to vector file formats – most popular AI (native to Adobe Illustrator), CDR (native to CorelDraw), SVG, DXF (native to AutoCad), PLT and many more.

Same as for raster, the vector file formats are programmed to hold vector information mainly. They are created, edited and opened by special programs for vector editing like Adobe Illusrator, Corel Draw, Inkscape (free program), Autocad and many more.

Vector files are used both in print and for web. The SVG files are often replacing the PNG in design for web and in app design, as they provide sharp graphics no mater of the device screen size of the end user.

AI and CDR are also capable of saving layers (like the PSD) and those layers can hold raster.

PLT files are used mostly for cutting machines like cutting plotters in the advertising and pattern cutting in the garment industry.

DXF files are most popular where blueprints are made – machinery design, architecture etc.

I don’t want to get too much into detail. This post purpose is to scratch the surface and give you really basic knowledge of the difference between the raster and vector. When you go next time shopping for graphics you will know what are you purchasing and what to expect.

Hope this info will be helpful and shed some light for those who need it 🙂 Let me know if there’s something I missed to mention or you want to hear about.

Cheers!

Watercolor Clipart is Raster, Unless It’s Not Watercolor