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.

I have recently come across an excellent resource for anyone looking for ways of increasing traffic to their site. The article from seomoz.org lists 10 ways to boost your traffic and gives useful examples of sites that have used their suggestions well. You can view the article at www.seomoz.org/blogdetail.php?ID=1220.

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.

This tutorial is going to give an overview of blending modes in photoshop. Blending modes give you ability to drastically change the way layers interact with each other. Most designers cycle through blending modes using trial and error to determine the correct one to use, but it helps to know a little about what each blending mode does:

Normal

As you can tell from the name, this is the standard state of the layer and there is no interaction between the current layer and the layer behind it.

Dissolve

This mode removes a random selection of pixels from the current layer which results in a jagged or fuzzy effect.

Darken

The darken mode compares the pixels of the current layer and the layer behind it and displays the darker pixels which usually results in a darker image.

Multiply

This is one of the most useful modes. It works by multiplying the colour of the lower layer with the colour on the top layer, resulting in a darker image.

Colour burn

This mode darkens the lower layer of the image giving you a dark effect.

Linear burn

This mode darkens the base layer to create an effect which blends in well with the top layer. This is one of the most complex of the blend modes.

Lighten

This does the opposite to the darken mode, displaying the lighter pixels.

Screen

This mode does the same calculations as the multiply but uses the inverse values to display the final image. This mode normally leaves you with a lighter image.

Colour dodge

This mode lightens the base layer compared to the top layer and leaves you with a lighter image.

Linear dodge

This is another complex blending mode. It makes the base layer lighter to make it fit in with the current layer more naturally.

Overlay

This is also a very popular and useful blending mode. It mixes the colours of the base layer and top layer but maintains the highlights of the layers.

Soft light

This mode determines whether the colours of the base layer are closer to black or white and either lightens or darkens the colours accordingly.

Hard light

This is very similar to the soft light mode but produces more dramatic results.

Vivid light

This mode either burns or dodges the colours in the image depending on which colours are present.

Linear light

Similar to vivid light but uses brightness to alter the colours in the image as opposed to the contrast used by vivid light.

Pin light

This mode creates varied results and works by replacing colours in an image depending on the lightness or darkness of the colours in the current layer.

Difference

The colours in the base layer and the current layer are compared and the difference mode subtracts one from the other based on which one is brighter.

Exclusion

This gives similar results to the difference mode but is usually more subtle.

Hue, saturation, colour and luminosity

These modes are all quite similar and work by mixing the hue, saturation and brightness from the base layer and the current layer.

So there you have it, a basic run down of how blending modes work. I hope you found it interesting and useful.

I am just about to begin work on a new tutorials section for the site. I will be writing about the techniques I find most useful when creating web pages. I will hopefully be able to persuade other designers to post their favorite techniques as well, so we will have a useful, varied and unique list of tutorials for our visitors. I will be starting off the tutorials section with an overview of blending modes so check back over the next couple of days.