Tutorial | Color Modes - Vector and raster

nuckingfutz (25)in #color • 7 years ago (edited)

COLOR MODES
Even though there are more than two colors modes, in this tutorial we'll focus only on RGB and CMYK.

RGB – RED GREEN BLUE
RGB is the color mode used mainly in digital design – when designing for a web. Since monitors(PC screens, TV screens, etc.) use that color mode, everything you design for a web should be in this color mode.
CMYK – CYAN MAGENTA YELLOW KEY(BLACK)
CMYK is the color mode used in print. Whether we're talking about the offset, flexography or some other printing technique, these are the four main inks used. Combining them we can get other colors. For example, by combining yellow and cyan we'll get green.

WHEN TO USE WHICH?

Whenever you're working on something that will be used on the web, for example, when you're working on a thread layout, use RBG color mode. CMYK should be used only when working on something that goes to print. RGB, when used in print, will be converted to CMYK, and basically, the colors you've picked will look different once they're converted and printed. Red will still be red, but it will be a different shade of it, a shade that might not go with the other colors, or just a bad looking shade in general.

RASTER AND VECTOR
There are two main types of graphics – two main types of image files. Raster is the type that's mainly used on the Hack Forums, and style that we're all familiar with. On the other hand, vector graphics are not as common and are quite hard to find on here.

RASTER
When it comes to graphics. Photoshop is hand down the most used program. Since Photoshop is raster-based software, it's no wonder why raster dominates the Hack Forums.But what is raster? Raster(raster graphics) images are created out of pixels. Since our monitor display uses pixel to display images, this type of graphics is perfect for the digital use.The main issue when it comes to raster is that raster graphics are not scalable. Whether you want to make it smaller or bigger, changing the original size(dimensions) will result in some serious quality drop, also known as pixelization.With the presence of pixelization, you'll see the pixels, rather than smooth transitions between them, which will lead to LQ work – blurry.
VECTOR
Vector graphics are not that common on the Hack Forums, however, it's important to differ these two types. So first of all, what is vector? Vector graphics are made out of geometrical shapes and paths which are defined by mathematical statements. Luckily for us, vector programs such as Illustrator does that part for us, so we don't have to code anything – but, in case you're wondering, the language used to define vector graphics is PostScript. For example, when creating a circle, this is the command you'd use,100 100 30 0 360 arc fill100 100 are x-axis and y-axis, 30 is the radius of the circle, 0 is the starting angle while 360 is the ending angle, arc is a command used to create a circle, and fill is a command used to fill the shape with a certain color, in this case, with default black. Luckily, vector software such as Illustrator does that part for us, so all we have to do is pick a tool, create a path or a shape, and we're ready to go.Because of this, vector graphics are scalable which makes them perfect for the print.

WHEN TO USE WHICH?

Since raster is not scalable, it should be used only when you're working on something that won't have to be resized(or for websites which allow only raster graphics – Hack Forums, YouTube, Twitch, Twitter, Facebook, etc.). So for example, if you're working on a logo, a raster is not the way to go, UNLESS that logo will be used for only one thing, in certain dimensions, and won't have to be scaled. (If you're starting a forum and need logo for it, raster will do, as it's cheaper, easier to do, and to be fair, you won't need much more than at the start... however, in the long run, vector would be a better option, since once you have vector done, that's it, you can use it anywhere for anything).Because it's scalable and made out of shapes, a vector is perfect for the print graphics. Quality of print will be great since there won't be any pixels, and the print itself will look smooth. That goes for both text and illustrations.Besides print, a vector can also be great for the web, if you're able to upload a vector file, such as SVG. For example, if you are working on a forum(website), and you're able to upload an SVG file for the logo, I'd suggest you use that over PNG.https://kawaii.io/ - is a great example of that. No matter how much zoom in, or out, the logo will remain the same. There won't be any quality-drop, nor pixelization.

* If you start a forum, website, merch, or anything else that might need resizing in the future, rather than paying someone to vectorize your logo, buy vector right away and save some cash. ESPECIALLY if you're working on the merch. Printing a raster graphics is a big no-no.

* If you're purchasing web graphics, such as YouTube and Twitter banners, panel graphics for your stream, thread layouts, signatures, avatars, etc., don't waste money on a vector.

* You may only use raster graphics on Hack Forums, so if you plan on using it only here, there's no need to pay extra for a vector.
If you're not sure whether you should get a raster or vector, feel free to post down below or to send me a PM.

* Vector + CMYK

CMYK, as said above, is the color mode used in print, so this combination should be used when working on a print graphics. For example, when working on a t-shirt design.

* Vector + RGB

As I said, vector graphics can and in my opinion should be used if the website allows you to upload vector files. For example, when working on a responsive design, you should go with vector icons, logo, and every other element that will have to be resized(to fit different screens). For this, you'll want to go with RGB color mode. Since we're talking about digital graphics, even though it's a vector, it should be in RGB color mode.

* Raster + CMYK

Only when you're testing something. For example, if you wanna see how would some raster design look in print(on a t-shirt for example). In that case, you'll change color mode from RGB to CYMK, but again, ONLY to test it out, see what shades you'll be using and whatnot. Again, when it comes to print, you should never go with a raster graphics(unless you're printing a photograph with high DPI).

* Raster + RGB