Photoshop Tip - How Remove unwanted object or text with Content Aware Fill

Learn one way to easily content such as text from an image using the content aware fill.

Photoshop Tip - How correct color Temperature (White Balance) with levels

Learn one way to easily correct the color temperature of an image using the black point eye dropper in a levels adjustment layer giving you more realistic and dynamic colors.

PPI vs DPI

In a nutshell, PPI (pixels per inch) and DPI (dots per inch) are two ways to measure resolution and are very similar in how they operate. Before saying anything more it's worth mentioning that many people unknowingly refer to PPI as DPI so there’s plenty of room for confusion.

First lest talk about DPI. This is the number of printer ink dots in an inch and more is better. It's totally independent of an images number of pixels or ppi and is totally controlled by the printer. Some printers can print at a higher DPI which in theory will make the individual dots less visible and the overall print look smoother. If you remember the old dot matrix printers they had a much lower DPI then most modern ink jet printers and if you looked close, you could see space in-between the dots of ink.

In general, designers are more concerned with PPI. Before I talk about that however, it’s worth mentioning a few things about pixels.

·         The pixel is the smallest unit that comprises an image. There is no such thing as a fraction of a pixel (fun designer trivia).

·         PPI controls how large or small the pixels are displayed. Say we have an image that is 1000 pixels across by 1000 pixels down. You can zoom in and change each pixel's color individually but how large or small it appears when printed is determined by the pixels per inch. If you set the PPI to 10 pixels per inch, then your image will print much larger (100 inches across and down) then if you set the ppi to 100 which would make the image print smaller (10 inches across and down). The obvious effect of having larger pixels is that the larger they are, the move visible they will be to the viewer and the blockier (more pixilated) the image will appear.

What this means is you want enough pixels per inch so that the viewer cannot identify them individually and you will get a nice smooth image. Typically when working on something for print, designers will work at 300 ppi. Anything higher then this is mostly just making your file larger and at 300 ppi, even thin lines will render smoothly which is particularly important if your image contains text. Most of the time for standard printers you would have in a home or office setting, 150 ppi will be plenty to make images without text appear smooth to the human eye.

Screen resolution is even less. You will often hear that screen images are made or saved at 72 ppi. This is a bit of a myth as the screen doesn’t really care about the image’s ppi setting. Where the 72 ppi thing came from has more to do with how fonts display relative to their point size when working in Photoshop but we’ll save discussion on that for another time.:-)

How an image appears on your screen is dependent on three things. First, each operating system such as Microsof Windows, has a ppi setting (often 96 ppi). Sometimes this can be changed though it rarely is and as you would expect, a higher ppi will make the graphics/interface appear/render smaller. This is only part of the equation though as I'm sure you are aware that each monitor can be a different size and have a different setting for number of pixels it displays across and down. If one monitor is a 21inch and another is a 15in and they bother have a screen display of 1200x800 pixels, then images will look larger on the 21 inch display. Finally most software programs that you would view an image in will typically let you view it at various magnifications. So how an image looks on the screen is very hard to predict.

What you need to know if you are making graphics for the screen such when doing website design, is that the ppi you set in Photoshop means nothing. All that matters is the number of pixels across and down on the image. So you would figure out what size most people will be viewing the image at and try to make your image a set number of pixels that does not exceed that and also won't look too small on it either. Understand that you can change the ppi to 1 million and that won't affect the size of the image in a web browser at all (provided you don't have the box checked to resample/scale the image’s pixels in Photoshop).

In summary, it might be helpful to think of ppi and dpi by comparing it to tv’s and the content we play on them. Think about it this way. An old tv show (low res/ppi) viewed on a high def tv (high res/dpi) will still look crappy. On the flip side a high def show (high ppi) will only look as good as the tv it's on. So when printing an image, you still want to be able to print it at 300 ppi ideall. Really good printers (high dpi) will use all those pixels while lower res printers (low dpi) might not. So in a nutshell, if your working on something that will be printed, it’s best to start out working at 300 ppi and not bother worrying about the printers dpi. And if you are working on something for the web, don’t even bother worrying about either.

Photoshop Tip - Change Color of object in a photo using Hue Adjustment Layer

Learn a quick and simple way to change the color of an object in Photoshop using a Hue/Saturation Adjustment Layer.  This method allows for easy edits later including changing the objects color to something completely different with two clicks. As a bonus I also explain how masks work

Photoshop Tip - How to add a border to a photo

Learn one quick and simple way to add a border framing an image in Photoshop.  This method allows for easy edits later. As a bonus I'll show you how to make your subject pop by making the border appear to go behind it.

PNG formats: 32-bit, 24-bit or 8-bit

I recently found myself scratching my head trying to figure out the different PNG formats found in Photoshop and Fireworks. Photoshop has two options: PNG-24 and PNG-8. Fireworks on the other hand appears to have these plus an additional option called PNG 32. So are Fireworks 32-bit PNG files higher quality then Photoshop? Actually they are not.

The Photoshop PNG-24 and the Fireworks PNG 32 are pretty much the same thing only labeled differently. It's confusing especially since both programs are Adobe products so you would think they would use the same naming conventions. In any case, the difference is in how they refer to the alpha channel which gives the file trancparency. The 8 extra bits in Fireworks PNG 32 fies represent the alpha channel so these files is really 24bit color with an 8bit alpha channel. This is why when you select PNG 24 in Fireworks there is no option to use trancparency. Photoshop on the other hand uses the PNG-24 label to refer to both transparent and non-tranparent PNGs and instead of calling the two different names, just has a checkbox to turn the alpha channel on or off. So in the end it's the same thing just two different ways of presenting it.

Where Fireworks has the upper hand is actually on the smaller PNG files refered to as PNG 8. Unlike Photoshop, Fireworks offers two types of tranceparency for PNG 8: Index Transparency and Alpha Transparency. Think of Index Transparency like the old tranparent Gif files that had the rough edges while the Alpha Transparency is more like what you would see in a higher quality PNG file. The real difference is that Alpha Trancparency supports semi tranparent objects and colors while Index Tranceparency shows pixels as either fully transparent or fully opaque. Unfortunately Photoshop does not offer this option so for 8-bit PNGs making Fireworks the obvious choise in this area.

One thing to note however is that not all graphics will look good compressed to 8-bit. In particular you want to be careful of large detailed photos and gradients (especially tranparent ones) which require more color information to display nicely. For icons and graphics with few colors, using 8-bit PNGs can greatly reduce the size of your web graphics so use it where you can but don't just compress all of your graphics and assume they will look perfect when rendered in the browser.

Flash Quick Tip - IE displaying different flash file then Firefox?

Are you trying to troubleshoot why you are seeing a different swf flash file in one browser vs another? This problem was brought to my attention the other day at work. A client was seeing an incorrect and different flash banner then we were seeing. No one had realized they were using IE (Internet Explorer) while we typically use Firefox or Chrome. Once I realized this difference, I new just where to look. The code that goes in the HTML and loads the flash includes and object tag which IE uses to load the flash swf file as well as an embed tag which other browsers such as Chrome, Firefox or Safari use to load the file. Both of these tags have a line containing the path to the swf file. Obviously you want these parameters to match and if they don't, you will see different things when viewed in different browsers. Look in the html for some code similar to the following and be sure both flash file names match. To make it easy you can even search for swf as that will be extention on the flash files and will take you right to the file name parameters.