Portable Network Graphics

Posted on Sep 22, 2010 by Neil to General

Now that ie 6 is fading from use its time to use .png images more.
Why? Becasue Png is clearly the best format to use for images when building websites.

Out of all the file formats available pngs match color better,  have the smoothest color gradation and support multiple kinds of transparency. In fact they are so versatile, anything you can imagine graphically is possible using png. Its only shortcoming is that in certain older browsers (ie6) there were some display issues which required complex workarounds. Luckily most agencys have opted to no longer support IE6 which has made both designers and developers happy.

All file formats have their advantages and disadvatanges. lets recap some of the pros and cons of each.

Gif
The OG web file format. back in the day it was all gifs. Some of the corniest animations in the history of webdesign were done using animated gif, a technology that may have been a precursor to modern day motion graphics.
Pros: supports limited transparency, Animated gif allows you to run a looping or non looping sequence of imgs.
Cons: in order to save file space gif reinterprits color gradients using a fine mesh of small dots (dithering) which creates a wider range of colors with a reduced palette to approximate in-between colors. the results are often questionable especially with color photographs.

Jpeg
The most common format for digital images and probably the most reliable choice. Superior quality which can be be reduced by the user in exchange for file size – its versatility is unmatched however it has one serious shortcoming; No support for transparency. the term JPEG is Short for Joint Experts Photographic Group who created the format back in the 80s.
Pros: JPegs when saved with minor compression look almost perfect and the size of the image is greatly reduced.
Cons: No Transparency.

PSD
Photoshop documents are amazing. Full support for layers, text, transparency, effects and are basically the backbone of the digital imaging world. Created by Adobe, Photoshop is the defacto standard for image manipulation and high end color photography.
Pros: The quality of color and pixel clarity is perfect using photoshop. You wont find a tool that is more accurate.
Cons: Unfortunately .psds cant be used as image files online – they are more of a source file from which you export to any number of file formats including png, gif, jpeg, bmp, eps, etc.

PNG
Portable Network Graphics file format was created as the free, open-source successor to the GIF. PNG files have it all. layers, text, transparency, effects, and you can even use the source file as images online. This allows others to pull down intact layered originals to make changes, If working in a collaborative environment this speeds up the process and insures you have access to the latest version from anywhere. The source files can be heavy so if bandwith is an issue you can export a flattened png with transparency intact.
Pros: Too many to list.
Cons: Compression options arent quite as flexible as jpeg.

bottom line you can use many types of formats and settings to accomplish your project but when it comes down to quality and performance png is the best option.

Tags: fireworks, gif, jpeg, jpg, photoshop, png, psd

5 fundamentals of color correction

Posted on Mar 10, 2010 by Neil to General

When it comes to advertising and design, your works impact is directly linked to the quality of your images. Digital photography has brought professional level imagery to the masses. However, mega-pixels don’t necessarily equate to quality. If your levels are off, it wont matter how high res your file is. To insure your photos look their best it’s important to take a few simple steps to unlock their potential.

First off open your image using Photoshop or a similar image editing application.

1.Curves
Take a look at the image – does its general color appear to be in balance? If so you can move onto the next step otherwise the first step is to balance your color. Easiest way to do this is to use auto curves. Under Image>Adjustments>Curves> Find Auto curves. This easy tool automatically balances out your image – most of the time. In some cases the tool produces unexpected results which are obvious. in this case simply chose undo. If the image still needs color adjustment the next option is to manually adjust the color using curves. digital photos shot with pocket cameras tend to be heavy towards the red channel – esp ones shot at night. Under the curves menu select the red channel and go the center of the curved line tool and drag the curve slightly upwards – doing this will reduce the amount of intensity for the red channel which will reduce the redness in your image.

Tip: In any image find a neutral grey area. You can easily identify problems by sampling color from grey areas. Any neutral grey should have an even value – ie: Red 150, Green 150, Blue 150…..if you see Red 200, Green 150, Blue 150 – simply pull back your red channel untill its balanced. Doing so unlocks detail and turns a bad image into a usable one.

2. Levels
Next how does the images brightness look? Is it to dark? Using Image>Adjustments>Levels> you can easily adjust either the highlight regions , mid-tones or shadow areas by sliding the levels adjusters from side to side. enable the preview check box so you can see how the changes will affect your image. Use levels sparingly – its a powerful tool that can dramatically improve an image but if taken too far will compromise its quality.

3. Brightness/ Contrast
We’ve just covered brightness using levels. However there is also a tool called brightness / contrast. This may sound misleading, but I wouldnt use the brightness tool to adjust brightness – use the levels instead. Its way more precise. The contrast slider on the other hand is critical. Using this key tool add between 3-8 points of contrast to make your image pop. Adding contrast almost always makes your image look better – just don’t add to much or you will lose detail in the highlight and shadow areas.

4. Sharpness
Sharpness enhances the crispness of an image. it can take an image that may be very slightly out of focus appear crisp. However it can not make an image that is completely out of focus appear in focus. When used correctly sharpness greatly enhances the quality of an image. Additionally, when you take a large image that has a perfect amount of sharpness and reduce it down for web use – it always will require an additional UnsharpMask adjustment to look its best. Like any image adjustments its key to use the right amount – always preview your adjustment to insure you haven’t used too much. the best tool to use to adjust sharpness is UnsharpMask mask located here: Filter>Sharpen>UnsharpMask

5. Saturation
This step is not always necessary but it can come in handy if you have an image that needs to “pop” off the page. You can crank up its color saturation by using Image>Adjustments>Hue/Saturation. Dont use the hue slider on top – this tool is unpredictable and should be avoided unless your going for very dramatic effects. However the saturation tool is a great way to add a bit of color to what may be a lackluster image. What it does is increase the intensity of whatever colors are already in the image. Again the key here is moderation so use it wisely, or your image will appear enhanced. I recommend bumping it up by 5-10 points. This will make the image come to life without looking fake.

There you go. These 5 simple steps can unlock the quality of what may have otherwise been an unusable image.

Tags: curves, fireworks, mega-pixels, photoshop, saturation

Fireworks Vs. Photoshop

Posted on Apr 13, 2007 by Damien to Web Design

Recently I’ve been giving Fireworks a run even though I’ve been using Photoshop for nearly 10 years and much to Neil’s credit, I’m starting to like it. Both applications have their strengths and both have their weaknesses. Though I’m excited to be learning and using a different application there are certain items that I’ll most certainly revert back to Photoshop to complete. For now it’s just another tool in my ever-growing graphic arsenal. Here are some of the strengths and weakness I’ve come across so far:

Fireworks: Strengths
1. It’s fast and optimizing graphics for web is extremely streamlined
2. Item manipulation as far as layout, graphic placement and overall use of the app for complex UI is very easy and intuitive, reminiscent of Illustrator or Flash.
3. Effect and tools are very similar to Photoshop so a lot of key commands are similar
4. It’s made for web graphics, gifs, jpgs, pngs and handles all very well

Fireworks Weaknesses (that I’ve encountered):
1. CMYK image conversion is awful – changes blues and greens like no other
2. Large files and multiple frame layouts slow the app down to a crawl
3. Limited filters, layer styles and effects
4. No sub category support in the layers menu
5. Awkward paint and draw tools even though they are similar to flash, they fall short in comparison to Photoshop
6. Masking effects are difficult to control or edit without full release of the mask and location
7. No “browse” images feature

I’m still a loyal Photoshop designer but Fireworks is slowly but surely winning me over with it’s shear speed and overall performance. The memory leak is very similar to Photoshop’s but not quite as severe. Photoshop will probably still remain my primary image manipulation app but when it comes to UI (user interface design) I’ll be moving to Fireworks.

Adobe’s new Creative Suite 3 is coming out soon and even though Fireworks was a solid Macromedia app I was surprised to see them keep it on the roster and not replace it with Image Ready. The future of Fireworks looks pretty bright, it looks like the app is here to stay.

Tags: fireworks, photoshop