Tip of the Day - YOUR Work Space

Have you seen Office Space? Man was NOT meant to spend 8 hours a day in a cubicle, indeed.

It is important to like the environment you're in. Is your "office" a drab cubicle that holds no inspiration? Make it your own! Hang up some sweet artwork or put up some lights. Put some bling on your monitor - only if it's your computer though! Put some flava in your space. ;)

Some establishments don't condone free thinking, individuality or creativity. They may not want you bringing in your tie-dyed tapestry from college to make a fort over your cubicle. Bastards.

But you can find things that will get you energized about your work. Take a few minutes between projects and watch those things. Stare at them. Relish in the good things they represent. Then get back to work. I do this a few times a day, especially when I am concepting for a brand. New ideas are everywhere!

If you can't seem to find anything good to surround yourself at work, then you may not like your job. Find one you like and go for it!!!

I have to say, I hate working in an office. A gray cubicle might as well be a jail cell to me. I quit my job so I could work from home. I love it and my work is a pleasure to do.

Here are some pics of myOFFICEspace to get the ideas flowing:

Office 1
Office 2
Office 3
Office 4
Office 5
Office 6

Tip of the Day - Color Correction

There are many factors that go into getting the best color out of your brand. After a while, the colors you use become the brand as well. Let's look at Pepsi or Home Depot. Those brands are recognized by the colors - because they are consistent.

Color also has psychological effects. Most casinos and restaurants are red or have lots of red accents (red makes you want things). Purple is a sign of sensuality, bisexuality, spirituality, creativity, wealth, royalty... All colors have some affect on us.

Now, the first thing to tackle is the calibration of your monitor and making sure your Photoshop color settings are set to match. Adobe recommends using Adobe 1998. Your monitor should have some basic color calibration settings that can be adjusted. If you're on a Mac, (aside from being lucky) you can go into your system preferences and do a custom calibration if the Adobe 1998 isn't doin' it for ya. The closer you can get your monitor to "reality", the less work you will have to do.

The second thing you have to do is learn to go by the numbers. If you are preparing an image that will be printed, you must be able to trust the numbers in your info palette as you mouse over the image. These RGB/CMYK values are infinitely more reliable than looking at your monitor.

The 3rd thing - None of your web pieces will ever look the same on any two monitors. Everyone has their color settings set differently. Some sites will appear very dark on one monitor and be very light, if not washed out, on another. You must go for pleasing color, again going by the RGB mix from Pantone numbers so they can match your printed pieces as closely as possible.

Now... your monitor is calibrated and ready to go. Time to do some color correction for an image going in a print magazine.

Incidentally, I will cover color correction on this type of web-press printing as opposed to printing posters, calendars or business cards. Those type of marketing materials are printed on a specific press and color can be monitored. A single print ad may appear in several different publications, all being printed on different presses.

Get your RGB image in RAW, high resolution format. Must be 300 dpi at the actual size you want to place it at in the ad (or bigger). Open it in Photoshop and open your info palette. As you mouse over the image, look at your info palette and see the CMYK builds change. Those numbers are the amount of each CMYK color needed to make the color of the pixel you are mousing over.

Color correction should always start in RGB. This allows you to preserve color saturation for the web. You can always convert it to CMYK when it's time to print your proof to check your work.

Go to Levels (Apple+L or Command+L). Here is where you want to adjust those colors. Do not use Brightness/Contrast. That degrades your image and you lose color data. Some people prefer to use Curves to color correct. Either way is fine.

If your image has skin tones and they look very red or yellow, then you need to take those colors out a little. When you think you have it how you want it, mouse over those areas that were off and see if the levels of magenta or yellow are still high according to the numbers. While you see that it looks good on your screen, it may still be very red or yellow. Save the image. Duplicate it and convert that to CMYK. Print it out on a good printer or have high-end SWAP proofs made. Then you can see how it will look when printed (pleasing color - it will vary from publication to publication). If tweaks are necessary, go back to your RGB file and re-export a CMYK version and re-print.

The numbers never lie like your monitor does. Watch them and know what you're going to get instead of getting a big fat shitty surprise. :)

Tip of the Day - Naming%20Conventions

Yeah. Spaces happen. Then you get that ugly "%20". Naming conventions for your files are very important. It is best to employ a simple, systematic naming convention for all your daily files. Whether you're keeping track of content, site slices, whatever... There are a few rules of thumb that can avoid issues later on.

1. Spaces. Just forget the spacebar exists on your computer. If you must have space, use an underscore "_". This will avoid issues such as uploading files to a server or directory paths to images on a website. Also avoid non-standard characters like: ' & ;

When a space occurs, you get the "%20" and the path can't be followed, leaving you with broken links or bad FTP uploads that disappear.

2. File names and their length. I have seen some image files on websites that have over 75 characters in the file names. WTF!? Seriously folks... Try to keep the file names as short and to-the-point as possible. When slicing up a site, I execute a very page-specific naming convention that potentially allows all the images to reside in the root images directory if they had to. Every sliced file name becomes a mini-directory about that slice.

For example, a slice for the homepage might be called this: h_hdr_logo.jpg. The "h_" means it's on the homepage. The "hdr_" means it's in the header of the page. The "logo" indicates where/what the slice is specifically within the header of the homepage. Another example - A File on the "Videos" page might look like this: "v_join_bt_ro.jpg". The "v_" for Video page, "join_" for what the graphic says, "bt_" indicates it has a functionality (button) and the "ro_" indicates that it is a rollover image.

3. File extensions. Please, God, tell a friend - File extensions are very important. They should always be included in the name of your file. It can mean your ass if the recipient can't open it and you just missed the deadline for a print magazine or a web bannner ad.

If you ever receive a file that doesn't have an extension, usually if you add the correct one, you can open it. By using a little common sense, one can usually figure out what format the file is. Here is a list of common file types that you may encounter throughout your virtual day:

.jpg (image file)
.gif (image file - possibly animated)
.doc (Microsoft Word)
.xls (Microsoft Excel)
.ppt (Microsoft PowerPoint)
.eps (Encapsulated Post Script - This could be native from Photoshop or Illustrator, among others)
.psd (Photoshop Document - Uncompressed and sometimes layered files of artwork)
.ai (Adobe Illustrator - vector artwork)
.swf (Flash)

Tip of the Day - RGB, CMYK - When and where

RGB will give you all colors. The best saturation in your colors comes from this mode. All web images are RGB (jpg or png) or indexed color (gif).

Because of the crossover back & forth from web to print, we have to deal with RGB (web) files and CMYK (print) files. If you try to put up a .jpg on the web that is CMYK, it won't show up. It must be converted to RGB. CMYK images are used for print. If an RGB image slips past your print production, it can look awful and be a huge waste of printing dollars.

When I do any artwork, it all starts out in RGB. Images for color correction, vector logos, print ads, you name it. With proper use of the brand's Pantone colors where applicable, I know that when I convert it to CMYK for print, it will experience a smaller amount of color change.

Once the artwork is finished and approved, the file is duplicated and print production is ran. This includes converting said print piece to CMYK and having a color proof printed to check color. Be sure to have a way to revert back to RGB if color tweaks are necessary (color correction is best done in RGB), but you have to print the proof in CMYK because that's how printers are set up. Once your color is perfect, then move on to the rest of the print production with the CMYK file.

Why start out in RGB? Well, a couple reasons. One, is the crossover from web to print. When you convert an RGB file to CMYK, you loose color. RGB can make all colors. CMYK is limited to having 4 colors that have to make up thousands or millions of colors. So there is a compromise in the color to achieve an over all sense of all the desired colors. Two, RGB will always be more saturated, thus you want to preserve that. If you only have CMYK files of your artwork, you are missing out on the possible color you could have. CMYK files will be dulled and muted when compared to the vibrant colors that RGB can provide. This is where Pantone colors are best. Because of the change in color when converted to CMYK, Pantone allows you to see the colors as Spot colors (RGB) and how they will look once converted to 4C process (CMYK). Always pick colors with the least amount of variation for the best results.

Tip of the Day - Resolution for print and web

You can't use your logo from the web to have printing done. Forget about it. Not even Chuck Norris can fix this issue.

You need to have the right resolution for print and web for best results.

Bitmapped images are made up of pixels, the smallest unit a computer can display data. When digitizing an image, you will need to select the desired amount of pixels per inch (PPI) or dots per inch (DPI), depending on what you want to do with the image.

Incidentally, PPI (web) and DPI (print) are interchangeable terms, meaning essentially the same thing.

Web = 72 DPI

Print = 300 DPI*

*You can go down to 250 DPI in some cases until the naked eye will see degradation in the image.

Large format printing is usually done between 100-150 DPI (posters, banners, tradeshow booths, billboards). Most large format printing is not meant for someone to be standing up close to it. Up close, the images will not look as sharp and you will see the dot from the print. But from a distance, the image will look fine. This is where vector art can come in real handy. Vector can go large format and always be crisp and produce fairly light files in comparision to bitmapped files. Unfortunately, most brands must have bitmapped images that must be integrated into print layouts.

I like to get my images as big as possible. Just when you think you won't need it any bigger than "X", you will need to stick it on a tradeshow booth and enlarge it 350%. When developing a brand, the logo is always vector to accomodate this and any images used are secured at the largest possible size to spread across other mediums later. This will save a whole lot of time and money by not having to go back and re-do artwork at a larger size or use different images that are big enough that may not have been your first choice.

Tip of the Day - Unsharp Mask

Sometimes all we have is a bad image to work with. That's the reality, unfortunately.

Whether you have to enlarge an image above 100% of it's actual size or if you are trying to fix a blurred image, unsharp mask in Photoshop is a life saver.

.jpg compression is another issue that can rob you of your clarity. Over-compressed images look bad and sometimes are all we have to work with.

When I am trying to fix an image, I will run my unsharp mask after a good color correcting. My primary setting is:

Amount: 400%
Radius: .2 pixels
Threshold: 0 levels

Sometimes, I will go up to a .3 on the radius, but only if the image has been very degraded and needs a little extra sharpening. Sometimes it can further damage the image, so be careful.

With this recipe, I can create images that are always crisp. Even when you reduce the size of an image, it blurs the pixels slightly.

Reduce a large image to 300 wide. You will see the best results by using an image of a person. Unsharp Mask sharpens edges, not the whole image. Now run an unsharp mask on it and toggle back and forth with your undo keys. You will see how it sharpens up the eyes, teeth and hair very nicely.

You can set up this filter to run in a batch with your Photoshop actions. Have it run the unsharp mask after you reduce the size of said image. Your images will look awesome. :)

Tip of the Day - Quick keys

Take a look at your drop down menus at the top of your desktop. Click on one and notice the characters to the right of the options. Those are your quick keys. By typing that configuration, you will get the same action to the left.

When you are rockin' out in Photoshop, there isn't time to keep going up to the edit menu, selecting copy, then going to where it will be pasted, going back up to the edit menu, selecting paste. F that.

Select your text or object, hit Command+C, or for Mac users, hit Apple+C. Select area to be pasted, hit Command+V, or for Mac users, hit Apple+V. Voila. Done.

I have had lots of folks say they never knew what those little characters were in the drop down menus. That is suprising, but true. Try them out and see how much quicker you can work.

Most quick keys are the same from software to software, but can differ.

Tip of the Day - .JPG or .GIF

Image compression is a huge deal for adult websites. Tours on paysites can be very graphics-heavy.

There are ways you can save your slices to crunch them way down in file size and preserve the integrity of the image.

You should save an image as a .jpg if it has a photo in it or a complex background. Basically, anything that isn't a solid color should get saved as a .jpg.

If you are using Photoshop's Save for web, select 2-UP so you can see the original on the left and the one you're editing on the right. Make sure the right image is selected and choose .jpg from the drop down menu on the right. I usually set my compression to 65. If your page isn't graphics-heavy, you can go higher. Some images will show degradation at 65, so you may want to bump it up a little.

If your image is solid color, like my logo for instance, save it as a .gif. Solid color has no gradients or halftones, hence less colors. Think of it as a cartoon or coloring book. You have lines and shapes filled with solid color.

Go back to Save for web and get your 2-UP. Choose .gif in the drop down on right. My logo is 2 colors. I can go pretty low on the compression. I will usually bump it up to 8 or 16 colors to keep the text from looking choppy. Determine about how many colors you have in your slice and set the .gif compression to match. 256 is the highest you can go, unfortunately (which is why slices with photos in them don't make good .gifs)

The file sizes will be much smaller when you save it in the right format. While you're tweaking your compression levels, look under the image and it will show you the file size at the current settings. Sometimes, I'll have a slice and can't decide if it would be better as a .gif or .jpg. I'll select one, then the other and see which one is smaller. That's the one you want. The file size will be bigger if you make the format render something it's not meant to.

Every site I do is hand cut and hand compressed. I take all of the slices in the beginning that are different. Figure out the format and compression and use that setting for each slice like it, carefully watching each one. Sometimes you need to give special attention to certain cuts to get the best result.

Tip of the Day - Live Area, margins and bleeds, oh my!

During the printing of your piece, the paper can shift and your art will land in a slightly different place in relation to where it will be trimmed. To avoid this from being noticed on the final piece, always be sure to leave the room for this shifting in your layout.

Trim - The size that your work will be cut to.

Margin - The area around the outer edge of the piece to allow for printer shifting.

Live area - The area in the center, minus the margins where important info should remain, not going into the margin.

Bleed - The amount of artwork that needs to "bleed" off the edge, over the trim to account for printer shifting. Usually .125" - .375", depending on pub.

When you have specs for any print piece, you should always have the above 3 sets of measurements, 4 if you have a bleed. MANY pubs do not supply live area. I usually have to call them and ask what they want it at. Sometimes they don't care, sometimes they don't know what I'm talking about. Amazing. When in doubt, I like to give it a nice 3/8" (.375") margin on a print ad that is around 8.5" x 11". If it is for an oversized pub, like XBIZ, I'll go up to 1/2" (.5").

A good printer can get up to 1/16 of an inch from the trim for things like business cards, maximizing your live area. For magazines, there must be a much wider margin - .25" - .75" from the trim - depending on the publication. Some publications will have different margins for the top and bottom (.75") and left and right (.5").

So, here is the formula: If you have an ad for a pub that is 8.5" x 11" at the trim and their margin is .375", all four sides with a .125" bleed, your live area goes down to 7.75" x 10.25".

In this live area is where you want to keep all of your text and important elements. The background (or anything that isn't important and can be cut off) can extend out to the trim, into the bleed if your ad has one.

Leaving a decent sized margin has other benefits. It will keep your text from falling into the gutter. That is the center where the pub is bound together. If possible, try to guarantee left or right placement in the pub. That will allow you to know which side is going into the gutter.

This is especially important when you are doing a spread and your text jumps the gutter. Make sure you leave the margin space. It will look odd when you print it out, but if you put them together and pinch them in the middle to simulate binding, you will see the text come together.

If you do have a bleed on your print piece, make sure to account for it when designing.

I'll get off my soap box now... :P

Tip of the Day - .PDFs and Vector

If you have ever lost vector art, listen up.

If you loose your native files (Illustrator, InDesign, Quark) and only have a .pdf of the work, you can put that .pdf back into Illustrator and anything that was vector in it's native form will go back to such.

If the type was still in tact and not converted to paths, it will require some clean up, but all vector objects will be perfect (or as they were in the final file to the printer - some illustrator treatments require flattening or rasterizing, which you should have an editable version of these graphics to go back to).

As so many printers are now requiring single-page .pdfs for output, these are invariably saved as final files to the printer. Printers may have them on file and you may still have these files on your local drive should your server crash.

I have seen this happen. Massive amounts of data lost. Tears. Heartache. Despair. If you have those .pdfs, you will at least get back your precious vector art. :)

Tip of the Day - Vector Graphics and your logo

One of my FAVORITE topics. :)

Vector graphics are created with math as opposed to pixels like a bitmapped image. Pixels are heavy. Vector is very light. AND it's infinitely resizeable. Your graphics will always be crisp at any size.

With that said, your logo should always be created in a vector-based program (Illustrator, Freehand, Korel) - NOT Photoshop. When a logo is created in Photoshop, designers can forget that this brand will need to cross over other mediums in addition to the lo-res webpage they're creating it on. If they are mindful to use the vector shapes within Photoshop, that will help. But then you get into filters and such. There are things you can do in Photoshop that can't be done in Illustrator (yet).

When a logo is created with these types of filters and treatments, the logo has trouble going to a larger size and has to be re-done to accomodate.

In addition to this issue, you run into a busy logo. Simple graphics and easily read type are crucial.

Consumers must have the same positive experience each time they come in contact with your logo, they must also have the same image of the logo reinforced each time they see it. In fact, in today's sea of technological advertising, a person must see an image, such as a logo, at least seven times before it registers. If, during those seven times the image appears differently, the preceding viewings are canceled out; and the individual must see the image an additional seven times for it to register.

Stay true to your brand and it will stay true to you!

Tip of the Day - Pantone colors and your brand

Have you ever had a logo created and then tried to have it printed, only to find out that it looks like crap? Well, dry those eyes. There is help. :)

Any time you have a logo created, it should be created in vector-based format (we'll get into vector-based objects and their value tomorrow... stay tuned). The relevance here, when dealing with color is... Creating your logo in vector will allow it to go from print to web flawlessly. Photoshop doesn't maintain true Pantone values and can skew your color slightly. Even being just a few numbers off can create a bad color situation.

Pantone colors are a set of colors that can go from spot (RGB) to 4C process (CMYK) without as much variation between the conversion from RGB to CMYK than if you just went into your color pallette and started mixing colors willy nilly. When you break down a color to 4C process, you loose saturation. You only have 4 colors that need to make up thousands or millions of colors, so there will be variation in your color when the conversion takes place. Pantone colors reduce the amount of variation.

They have swatch books that you can flip through to pick your colors and see how they will look once they are converted to CMYK. You can pick your brand colors with knowledge before the logo is created and be able to sleep at night. :)