Explore the Premium Content

Restoring old photographs

Everyone has an album (or box full) of old and faded photographs. Usually these are in poor condition, either through wear and tear or because they were poorly printed in the fist place.  Often the photos were taken with an old box camera, with a lens of dubious quality. But some of the photos have value as family heirlooms and are well worth preserving and restoring. The question is, can you extract the underlying image from the damaged and faded photograph?  The answer is almost always "yes", sometimes miraculously so.

This article runs you through an exercise in photo restoration, using Photoshop's Levels and Curves tools, plus the Healing Brush and Clone Stamp tools. Using this exercise as a starting point, you'll be ready to hone your skills on the family's precious photos of Auntie Nellie and Uncle Fred, and earn the admiration of all your relatives! (Of course, there could also be commercial opportunities, too!)

Read More

Exploring the power of Photoshop CS2

A new version of Photoshop and ImageReady means another upgrade and a decision of when to purchase or if you should even bother. Depending on your needs, you may find just a few gems in the new Photoshop CS2 or you may consider the dozens of enhancements life savers. I’ve found myself somewhere in the middle, amazed at how many truly useful innovations Adobe has crammed into this version while still maintaining the familiar interface we’ve all come to know.

Because this is a site for web professionals, I will be concentrating on tools that will be useful to the average web designer. First, some interesting decisions on the part of Adobe. While Photoshop and ImageReady continue on as separate entities, their capabilities now overlap more than ever. For instance, Photoshop has had the ability to slice and optimize images for the web using Save for Web, but now they even include the GIF animation palette right in Photoshop. What’s left in ImageReady? You can still slice, optimize and animate in ImageReady and it is the only place to create Image Maps and Rollovers. It also provides some features Photoshop doesn’t match for optimizing, slicing and tweaking the HTML and Javascript that is generated.

Read More

Creating Animated GIFs with Photoshop & ImageReady

Love them or hate them, you just can’t avoid animated GIFs. The often-maligned animated GIF may not be the favorite visual device it once was, but it still serves very legitimate purposes. From banner ads to slide shows to dynamic simulations, animated GIF files are often the best solution on a web page. Flash is excellent at creating animations, but for many reasons Flash is not always a viable option. This leaves animated GIFs as the most effective way to create movement on a web page without resorting to scripting, plug-ins and ‘invalid markup’.

There are a number of tools to create Animated GIFs. From stand-alone tools like ULead GIF Animator, to high-end software like Fireworks and Photoshop, there’s a tool available to fit your needs. Because most web authors have a copy of Photoshop, that’s what we’ll focus on in this tutorial. However, many of this article’s methods will apply to other software as well.

Photoshop has long been the standard for pictures destined for printing. With version 5.5, Adobe started including ImageReady, a separate but similar program, which focused on creating images for the web. ImageReady makes it possible to slice, optimize and animate your Photoshop images. It also gives you the ability to create interactive elements like rollover buttons and image maps. Of course, for our purposes in this article, we’ll focus on creating Animated GIF files in Photoshop and ImageReady.

Read More

Photoshop CS: File Browser, Matching Colour and Life Histograms

There have been quite a few changes from Photoshop 7.0 to Photoshop CS – some really cool new tools, cunningly hidden away. Let’s take a look at some of the more interesting ones and how they can benefit you, the web developer. In this article we’re going to start with the more general changes – some alterations to existing Photoshop systems, some altogether new. The most exciting of the new features is the ability to take one image and match the colours of a second image to it. The most useful of the new features are the live histograms and the new file browser which makes searching and retrieving images much more efficient.

Read More

Facial Retouching with Photoshop

One of the hardest image processing tasks to get right is doing facial retouching that can eradicate blemishes, shadows etc without making the subject look completely unbelievable. In this tutorial, Gavin Cromhout (himself the co-author of a book on facial retouching) establishes a process for manipulating portraits to make them look their best, without making them look artificial. The tool used is Photoshop, but the process is equally applicable to any quality image editor, such as Fireworks MX or JASC Paint Shop Pro. Read More

Photoshopping Seamless Tiles

In this tutorial we’re going to take a look at creating a pattern for a web background. Tiling on the web is a way of creating quite a rich and textured feel for your site.Often when cutting up a site you'll need to create an area that will repeat itself in a pattern, as a background or as decorative bars - but there’s nothing worse than an image that doesn't seam together properly. Let’s take a look at how to create a seamless pattern for use on any web page that looks great, joins well, saves bandwidth and loading time, and automatically adjusts to the size of the user's display screen. Read More

Advanced Photoshop Layering

We hear a lot about layers and how they're so cool in Photoshop. This article will take you through all the different food groups; from fill layers right through to complex uses of adjustment layers. Sometimes you discover things in Photoshop that you never thought of using before - this article will plant a few of those seeds. It's a great way of learning how to make your pictures and photos look as good as possible - they're not only used for arty stuff - while always preserving the original image intact so you can return to it any time you want. Read More

Cleaning Up Images with the Clone Stamp Tool

Getting rid of simple blemishes in Photoshop isn't that hard - the odd blot of colour and you're done. But Photoshop has a very powerful a tool for removing spots and blemishes from photographs - called the clone stamp tool. This is an easy tool to use badly, but produces amazing results when used well. In today's tutorial, Gavin covers exactly how it works so that we can use it effectively, and gives tips from the professionals on using layers, setting the brush opacity and using the posterize tool to expose the gradiants that you're cloning.

Read More

Optimising your computer for Photoshop

Great: So you've gotten that 200 Meg file open and you're blazing away with the Liquify tool. No fear. Photoshop grinds to a halt. It's never a pretty sight when this happens. The screen doesn't redraw properly; your mp3 starts to sound like fire-crackers at Chinese New Year and your operating system starts displaying snide remarks about your system resources.

Photoshop is a pretty intense program which often makes pretty high demands on your system resources, and patience. Ever have that sneaking feeling that if only you could figure out the correct configuration of hardware for your computer the dang thing would just run so much better? In this tutorial we're going to get to grips with the hardware required to run Photoshop and how to set up Photoshop in order to ensure it runs at maximum efficiency.

Read More

Quick Fixes in Photo retouching

So the client has told you that they need to upload an image of the head honcho to the website - shock horror, he's so ugly that people think he's me. Now what? There are many scenarios that we might find ourselves in where photo retouching is useful or advisable. Usually however this takes hours. In this tutorial, we use a relatively quick method of photo retouching to get the best results in the shortest amount of time.

How are we going to do that? We're going to use blending modes. Blending modes are great, blending modes are fun; much of the power of Photoshop lies in being able to use them. But which modes are useful for what and how? Let' s take a closer look at them.

Read More

Photoshop Colour Management

Take a stroll into the local TV sales department store and have a look at a row of identical TVs. Usually you'll find that the picture they're displaying (even when tuned to the same channel) looks slightly different. Each seems to have its own colour cast. So which one is displaying the correct image? We have this same quandary on the web.

No two computer monitors are identical. Well they might look that way on the outside, but switch them on and you'll see that they simply don't display colour the same way. Why is this? Well each monitor is manufactured slightly differently. This poses a bit of a problem: If Joe Bloggs's monitor has a slightly bluish tinge and yours doesn't, then when you design an image for the web, whatever you do will look slightly blue on his monitor. Tough for Joe? Well not necessarily. Photoshop has a built in system for overcoming this problem, it's called Colour Management. In this article we're going to work out how to use Colour Management to ensure that the images that we use are displayed the same way on everyone's screen.

Read More

Saving time with Photoshop masks

Clients can be irritating. Especially when they change their minds about things. In this article we'll learn to work around this. What we're aiming for here is saving time. We're going to look at techniques to minimize redoing design work, by taking a close look at masks and how they can work for you. We'll also go through the production cycle of a design, and how to develop it so that any image that has been used can quickly be replaced by another - without having to redo all the effects you've used on it.

Read More