This is a really nice technique to make photos look dynamic and interesting. It can be used very well for coloring small, subtle effects like a subjects eyes for example or for more dramatic effects.

Step 1

Open up the picture you want to work on in Photoshop. I used this image from www.sxc.hu:

Step 2

Now you will need to duplicate the background layer. Go to layer > duplicate layer or simply drag the background layer onto the create a new layer icon in the layers palette. Name your duplicated layer ‘mask’.

Step 3

Now we want to desaturate the mask layer to create our black and white image. Go to image > adjustments > desaturate. Now that we have our black and white image, we need to start adding color to the bits we want to show through. Go to layer > layer mask > reveal all. This will put a layer mask on our ‘mask’ layer. Make sure the layer mask is selected (it will have a white border around it). If not, just click on the thumbnail within the mask layer.

Step 4

Select a hard brush and with black as your foreground color, begin painting on the areas that you want color. If you make a mistake, select white as your foreground color and paint over your mistake. Take your time and zoom in to be as accurate as possible.

Eventually you will end up with your fully painted image:

There are quite a few ways to achieve this effect but using layers masks and brushes is the most accurate and effective.

After My Top 5 Photoshop Tips tutorial I decided to write another one based on the same theme but with slightly more advanced features. The first tutorial was aimed at beginners where as this one may teach something new to advanced Photoshop users as well.

Quick Masking. This is a very useful feature for selecting parts of an image and can be more accurate and faster than the lasso tool. Press Q and then select the brush tool. You can now paint over any part of an image you want to select. When you have the selection covered press Q again or use the magic wand tool to make your selection.

Copying effects. After spending a long time creating the perfect effect, why waste time doing it all again on another layer. Simply right click on the layer effects icon on the layer in the layers palette and select ‘copy layer style’. Then, just right click on the layer you want to apply the effect to and select ‘paste layer style’ to crate the exact same effect.

Finding layers fast. Sometimes when you are creating complex images you may have a large stack of layers and find yourself having a hard time finding the layer you want. You can get around this easily and save yourself time and frustration by selecting the move tool and making sure ‘auto select layer’ is ticked in the options bar. now you can just click on a layer in your document to select it in the layers palette.

Re-Applying filters . Sometimes, you may need to apply a filter more than once to achieve the desired effect. Rather than going through the filter drop down menu every time, you can just press ctrl+F to apply the filter you last used with the same settings.

Feathering Selections. When selecting part of an image using the lasso or magic wand, the selection is often too jagged. You can get around this by simply setting the feather value in the options bar to 10.

One of my favorite ways to create nice looking header is to use abstract brushing techniques. I am going to try and get you on the right track with an easy to understand tutorial.

Step 1

Go to www.deviantart.com and do a search for Photoshop brushes. You should get lots of nice looking brushes in the results to choose from. Find a brush you like the look of and download it. Once it is downloaded you will need to make it available to Photoshop. Copy the brush from where you saved it and go to where Photoshop is installed on your computer. Once you find your adobe folder go to photoshop-presets-brushes and paste your brush in this folder. On my computer, the path to install the brush to is C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Brushes.

Step 2

Now open up Photoshop and create a new document with a white background, 700px wide and 100 high. Now look over to the top right of the window and there should be a tab that says brushes (if not you can access it by going to ‘window’ and clicking on ‘brushes’). Click on this tab and a window will drop down. There will also be a small arrow next to the text that says brushes. Click on this arrow and then go to ‘load brushes’. Find the brush you placed in the brushes folder and select it.

Step 3

You now have your brush available and we can start brushing. Press ‘D’ on the keyboard to reset the colors to the default (black and white) and create a new layer in the layers palette. Now the select the brush tool and find your brush set. Select a brush you want to use first and move the brush somewhere over the canvas and do a single click of the mouse. Do this a few more times around the canvas until some kind of pattern is forming.

This is what I have so far. Obviously yours could look vastly different but the principles are the same:

Step 4

Create a new layer and begin brushing with a different brush, this time in white. Remember to do single clicks. After 2 or 3 clicks, create a new layer, select a new brush and select black for the color. Keep repeating this process until you have something you think looks interesting.

Step 5

Now its time to add some color. Create a new layer above your brush layers. Then click on ‘create new fill or adjustment layer’ at the bottom of the layers palette. Then select hue/saturation from the menu. tick the colorize box and move the sliders until you find a color you like. You may be able to stop here or if you like you can add a color balance from the ‘create new fill or adjustment layer’ menu. Once again, experiment with the settings until you find something you like.

This is what my image looks like:

Now you know the steps required to make an abstract header. However, you don’t need to stop here. You can create more layers, use a combination of brush sets, add images etc. It may take a little practice and trial and error but you will be able to come up with some nice looking images using these techniques.

Photoshop is a fantastic program which I have used for all my image editing needs since I started designing web pages quite a few years ago. There are endless shortcuts and tips that you can pick up and I’ve written 5 of my favorites below:

1. Cycling through blending modes. You can easily more through the blending modes by selecting the move tool from the toolbar and pressing Shift and the + key to move forwards or Shift and the - key to move backwards.
2. Selecting a layer. This is my favorite shortcut of all. When you want to select a single layer, simply hold down Ctrl and click on the thumbnail of the layer in the layers palette to select it quickly.
3. Give yourself more space. Sometimes when you are working on a large image you need all the space you can get. Press the tab key and the toolbar and windows disappear so you can concentrate on your image. Press the tab key again to get them back.
4. Hiding Selections. The marching ants selection can sometimes get in your way and make it difficult to see intricate details. you can hide the selection by pressing Ctrl and H.
5. Unlocking the background. This is something I have only discovered recently but it is very simple. Sometimes when you open a file, the background layer is locked so you cannot edit it. This can be very annoying but you can get around it by simply double clicking on the thumbnail in the layers palete and clicking ok when the new layers dialogue box appears.

One of the most important aspects of a web site is the design as the design of a website can give the visitors strong impressions of a company. The graphics used in a site are obviously an important part of the design. However, graphics can be large and even with today’s high speed internet connections, bandwidth remain a concern. Luckily, Photoshop allows you optimize your images to get the smallest possible file size whilst maintaining good quality. So, lets have a look at how this can be done:

Step 1

Start with a picture that you would like to use on a web site. Now go to file - save for web. You will now see your image in the original tab and the file size will be listed below the preview window.

Step 2

Use the tabs to select how many previews you would like to see and use the settings on the right to change the options for a specific preview to see how the image is effected.

Step 3

If you click on the small arrow in the upper right of the image window you will see a preview list which allows you to make important decisions about you image. You can also see the images download rate.

Step 4

On the right hand side of the save for web box you can select a range of different file types such as gif, jpg, and png. If you choose gif or png from this list, you will be able to see a colour palette in the lower right of the screen. You can change the preset setting and the table with either add or subtract colour depending on the format chosen.

Step 5

The colour table also has another tab grouped with it called image size. This useful section shows you the original dimensions of the image as well as the quality settings. Try experimenting with these settings and click apply to see how it effects your image.

Step 6

You can find specific colour information for parts of an image by moving the mouse over an area. The colour information in red, green, blue, alpha and hex is displayed at the bottom of the window. You can also right click the mouse when the cursor is over the image to quickly view the images download rate and modify other properties such as size and color mode.

Step 7

Now you know your way around the save for web dialog box, experiment with saving an image for a web site using the options outlined here. You should be able to significantly decrease the size of your image, allowing them to be downloaded faster and use up less of your bandwidth. I hope you found this tutorial useful.