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.

One of the most important and also misunderstood of all CSS topics is positioning. Using CSS, you can declare 3 different kinds of position. These are:

• Static
• Relative
• Absolute

Static

Static positioning is the default position of an element on the page. If you did not declare any other kind of position then it would be static. An element with a static position will be part of the normal flow of the document, meaning that it will come after any preceding elements and other static elements will flow around it.

Static elements can not be moved using commands such as left:20px because this would mean the normal flow of the document would be altered. Static elements can be moved using margin command however.

Relative

This is the most misunderstood of the 3 positioning commands. Relative positioning is moving an element in relation to its default position. The element can be moved using left, right, top and bottom commands and you could make elements overlap each other if you wished. One thing to remember is that the space which the element occupied before it was moved will still behave as if the element was still there. This is because when you move an element using relative positioning, the actual document flow is only altered by appearance, it is not physically changed.

Absolute

Absolute positioning is something that is sometimes overused by those new to CSS. Many people are amazed by its ability to place elements anywhere on the screen but it is easy to get in trouble by using it incorrectly.

An absolutely positioned element is one that is taken out of the flow of the document and positioned at precise co-ordinates on the page. Top, left, right and bottom commands are used to specify the co-ordinates (eg left:20px;).

Absolutely positioned elements are positioned relative to the top left of the viewport unless they are contained within another element that has a position: relative, or position; absolute. In this case the element will appear in the specified position within its parent element.

I’m glad to report that Real Design Network’s traffic has increased significantly recently, partly due to the new tutorials section. I will be posting more tutorials in the near future on a range of topics including web site promotion and CSS. Hopefully, these new tutorials will help others and also draw more people to the site so that they can learn more about web standards and find some top quality web designers.

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.

Google have launched a new program called co-op which incorporates human feedback into its search results. Although the system is still very new and not very useful at the moment, it is something you should start looking into if you aim to gain good results on Google.

Google co-op works by allowing human editors to assign a label to a url which allows users to find very specific and targeted results. The system also allows users to subscribe to certain content. This shows Google that the content from a particular site is trusted, so it is more likely for that site to perform well in search results.

This is a very interesting topic and for more information you can visit http://www.profitchoice.com/articles/coop.php