• We are looking for you!
    Always wanted to join our Supporting Team? We are looking for enthusiastic moderators!
    Take a look at our recruitement page for more information and how you can apply:
    Apply

[Tutorial] Graphic Basics

Status
Not open for further replies.

DeletedUser3

1. Graphic Formats (the basics)

Lossy vs Lossless
  • Lossy compression is a compression format that cause a loss of quality in a graphic, but makes for smaller files. Use lossy formats for net use.
  • Lossless compression is a compression format that leaves the graphic intact (no quality loss). Use lossless formats for print.

JPG is a lossy compression graphic format, which means it uses approximate matches of repeated strings in order to compress the file, thus causing a loss in quality from the original. However, this sort of compression allows for very small files, which is important for web use. I find an 80% JPG compression to be optimal quality-to-compression ratio, allowing for high quality whilst providing a very small file size.

PNG is a lossless compression, although some programs allow you to impose a lossy compression, which further compresses the file, at a loss as above. There really is no reason to use lossy compression for PNG, and most people do not. Scratch that, there's one reason, which is to have a compressed transparency, but I find the lossy compression on PNGs is just too brutal and, frankly, if you're going to work with a transparency file that is so big, you're doing something wrong.

TIFF (TIF) is a lossless format that usually leaves you with a huge file, not usable on the net, but is great for print. However, for print purposes, I convert everything to PDF (print standard), just to make sure the printers don't override and flip colors. (note: there are different PDF save settings in Photoshop, and just about every other program, so be sure to choose print standard with embedded fonts).

Other formats exist, of course, and while some are old (GIF), others useless (BMP), there are still others useful for different purposes (cross-stitch patterns for embroidery, etc).

GIF is still a valid format if your art has limited colors (256 colors or less). Converting vector graphics to GIF is recommended, again assuming limited colors (most vector graphics have only a handful of colors, unless you used gradients in excess).

Transparency

PNG and GIF both allow for transparency, but PNG is better because of the lossless compression (again, this assumes the original graphic has more than 256 colors).

Print

For print, what matters most is pixel count per square inch. The higher the better, but too much and the printer will crap a brick, your graphic program will slow to a halt, and your newborn will have gone to college. As I mentioned above, PDF is the standard format for print. As the focus of tutorials here is on net use, I will not delve into print settings, particularly because it can get pretty deep.​


2. Work Space

File Size

For all practical purposes, work with 2x to 4x times the size of your intended final product. For example, if you intend on presenting a 600x720 pixel final render, start with a file size of 1200x1440 or even 2400x2880 pixel size. Do note: the larger you make it, the finer the work you can present. But, you also will be dealing with longer rendering times (time it takes the computer to implement any image adjustments, particularly complex filters). So, consider your computer's limitations and try to work within your limitations. *chuckle*

Once you're done with your work, File -> Save, then Layer -> Merge Visible, then Image -> Image Size (in that order). And be sure NOT to save again. Instead, File -> Save As or File -> Save for Web, then File -> Revert. Make that last step a habit before closing Photoshop, or you'll eventually end up making the horrible mistake of saving all your work as a merged image.

Modes

If you click on the menu, Image -> Mode, you'll see a lot of options. For our purposes, I'll leave us with only four to consider:

RGB - This will be what you'll use for ALL your Photoshop work. Without getting technical, RGB stands for Red-Green-Blue, and is what your monitor (and television) displays. For this reason, it's what you want to use when you're developing any art.

CMYK - This is what you'll convert your art to if you want to take it to Print. Again, without getting technical, CMYK stands for Cyan-Magenta-Yellow-Black and is what printers utilize. Unfortunately, CMYK is not what you see on your screen, so what you see is not what you'll get. My recommendation is to do print samples (small scale) to test whether the colors work for you. If not, nudge and nag until you get the proper results. (note: do all your work in RGB, then convert to CMYK when you're done. There are many reasons for this, not the least of which is that you'll find a lot of your filters disabled in CMYK mode).

Grayscale - Hey, like is says, it's Grayscale. I do all my work in RGB and then convert to grayscale if it's going to be a grayscale print. In the past, that's not what you would have done, but both Photoshop and printers are pretty cool nowadays and they handle the subtleties of grays far better than in the past. Still, if you know your work is going to be grayscale, it's a good idea to switch back and forth, for visual sampling (verifying your subtleties in color don't end up being blurred montages in grayscale).

Indexed Color - Okay, I'm going to be honest. I never use this mode. It's old-school crap that was really friggin' important when the Net consisted of 2400 baud modems. It's used primarily for GIFs, sometimes for TIFF, and just edges out a little extra file space, making files a tad bit smaller. As it indexes colors in a palette, it is limited in color (256 or less). Only GIF and TIFF can utilize index coloring extensively, but seriously --- old school.

Contents

Make it easy, just choose Transparent.​


3. Layers

Choose Window -> Layers. A check mark indicates the item is showing. Do the same for Channels and Paths.

There are a few important things to understand about Layers:

a. Use plenty of layers. In fact, when in doubt, use another layer. Layers are what differentiate Photoshop from a lot of other drawing/photo-editing programs. It allows you to setup, just as it says, layers of photos/art. Once you get competent in the use of layers, you can perform various tricks to simulate 3D, shadows, shades, and other high-end effects. The thing to understand about layers, is that they are on top of, or below, other layers, based on where you place them on the board.

layer1.jpg


b. Name your layers. By default, Photoshop names layers as, "layer1," "layer2," etc. Obviously, when you're trying to find a particular layer, trying to remember which layer# is which is just about impossible. So be smart, give each layer a name. Make it a habit. (To name a layer, just click on the default name, then type in a new name).

c. Stay organized with Sets. Version 7 and up uses what are called Sets, which are essentially folders where you can put similar layers together. Sets follow the same rules as layers, meaning they can be placed above or below other sets. They also can be adjusted (everything in a set, adjusted together), as will be discussed below. If you've never gotten carried away with layers, no big deal. But, to really take advantage of Photoshop, you must follow my #1 recommendation. And when you do, those layers are going to be just too much. Use Sets, they'll seriously keep your work organized and help you maintain a modicum of sanity.

layer2.jpg



d. fills, adjustment layers, vector masks, layer styles, channels and paths

Okay, there's a buttload to cover on all these, so I'll make it simple. Each allows you to edit and tweak your layers/sets in very different ways. I will cover how to use some of these with the various tutorials. For now, let's just expose you to them:

  • Fills and adjustment layers allow you to make changes to your layers without changing the original layer (tbh, I don't use fills and adjustment layers all that much, as I'm able to do the same dang thing with just copying a layer and tweaking that copied layer separately from the original. However, I will cover it and explain the benefits of using these).
  • Vector masks. Tbh, I don't use vector masks all that much. I find myself just cutting/pasting left and right in order to do whatever it is I want to do. It's got it's uses, just like fills and adjustment layers. But what you can do with vector masks, you can do the ol' fashioned way of cutting a piece of a layer and creating a new layer, then working that separately. Some guys are really into using vector masks. I'm not, so I won't be covering these in my tutorials (I might give one or two examples, just to expose you guys to how you can use it).
  • Layer styles are just plain fun shortcuts. They allow you to do a lot of things that I used to have to do the ol' fashioned way, like 2d shadows, beveling, embossing, etc. This will be your #1 tool to get text to pop-out and impress your neighbors.
  • Channels and Paths let you do a helluva lot of fun things. I use Channels & Paths mostly to make very fine work of selecting parts of a pic, so I can edit/delete a part separate from the rest. But don't even consider that to be the end-all of Channels & Paths. More on this during the tutorials.

layer3.jpg
layer4.jpg
layer5.jpg


4. Tools

Choose Window -> Tools. A check mark indicates the item is showing. Also do the same for Windows -> Options.

Oh Geez, the tools. This has been covered extensively by others, so I'll direct you here ---> http://www.hcgs.net/abweb/tutorial002.html

Click on the options there to read about the various tools within the Toolbox.​
 
Status
Not open for further replies.
Top