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.