This tutorial will give a general rule of thumb as to where to position certain elements on a website in terms of user friendly web design and even for SEO purposes.

The Logo
The logo on the site should preferably be positioned in the top left corner of the site and try to keep the logo relatively small and compact, ideally no larger than 280px wide.

Navigation
This is ideal at the top of the page, either just below the logo or to the right of the logo. Sub navigation can then be positioned on the left sidebar next to the content.

Contact Details
Main contact information, like call to actions, such as telephone numbers and email addresses should be placed in the top right hand side of the page and minor contact details should be in the footer.

Page Content
The actual page content, would then appear in the center of the page on a three column site and in the center right on a two column site. For Blogs, the sidebar is preferably on the right and content on the left.

Accreditations / Awards / Company Details
This type of information should be placed in the footer of your site as the information is important to keep placed throughout the site for easy reference but is not key to the sites function.

Adding an effective shadow can really enhance any design to add realism and depth. This tutorial will show how to create an attractive effect in Photoshop that can be used on any isolated image, as shown here on a van.

First, open a new file in Photoshop and drag you image in. If your image is not yet isolated then use the Polygonal Lasso Tool to select around your image and remove the background.

Once you have your image isolated create a new layer and place this below your image layer. Using the Polygonal Lasso Tool again create a shape  that resembles the bottom of the image where the shadow would land and fill with solid black like that show below:

Press CTRL + D to deselect the shape and go to Filter > Blur > Gaussian Blur and depending on the size of your image enter the apprpriate radius to make a subtle blur to the shape, this image used a 2 pixel radius. Now you can adjust the Opacity of the layer to suit, you can leave this as 100% if that looks best or if, for instance, it is sitting on a dark background.

Now the basis of you shadow is done. If you have parts of your image that sit on the ground more than the rest (for instance the van has wheels) then repeat this process on each individual section using a smaller radius on the Gaussian Blur.

For whole images like the button shown below,  for instance, where the whole image is resting on the ground you can cheat and select the Elliptical Marquee Tool to create a flat oval shape around the base of the image instead of using the Polygonal Lasso Tool. You can then Press CTRL + T to amend the length, shape or height of the shadow and because it is blurred you wont notice much pixelation.

This tutorial will show you how to blend images into one another, to make an attractive collage like that shown below:

Firstly drag your images into photoshop and create a new document at the size you want your banner of blended images to be. Now drag both of your images into this new document.

Try to place the image that has the most redundant padding on as the top image in the layers and any with the least at the bottom (as we will need that extra padding to erase and make a nicer blend). For instance, I placed this image at the top as it had so much redundant imagery to the right that wasn’t going to be needed:

Once your images are in place select the Eraser Tool at 100% Opacity and select a large brush that spans the full height of the image at 0% Hardness. Now with the first upper image selected, hold down Shift and drag vertical down the side of the image, repeat the process until you get the desired blend effect. Now simply repeat this process for any other images.

If you do not want to erase from the image itself, you can also use a mask layer. Click on the top layer you want to blend and then click on the Add Vector Mask option (at the bottom of the layers window). Now do the same as you would do with the erase tool but use the Brush Tool on colour black instead. This will produce the same desired effect but will preserve the image.

This tutorial will show you 5 quick tips that are useful to bear in mind when you start designing a website:

1. Knowing Your Target Audience
Probably the most important factor to bear in mind is knowing the type of audience your site is looking to reach. Is it business to business or business to public, is it aimed at a younger or older customer base, for men or women etc etc. Determining these factors can help to know how to approach the design and layout. For instance you wouldn’t want heavy animation or bright colours on a corporate website but you might on a childs televsion site.

2. Knowing Your Competitors
Its always a good idea to check out any competitors websites. This will not only assist in any inspirational problems but also give a good basis for what potential customers will be choosing between. Have a look at sites that work well and sites that don’t and try to include some of the good features, obviously without copying.

3. Alignment & Positioning
Any good designer will know that alignment is key to the foundation of an attractive design, you could have the most attractive banners, images and fonts used but if they’re not layed out correctly then they will look a mess. So ensure there are correct padded gaps between elements, logos should be placed top left and line page elements up as best as possible.

4. Use of Colour
Try to keep to 2/3 colours on a webpage and use your key colours as sparingly as possible. This way the colour can be used to highlight certain key elements, like a call to action button. Generally you should base the use of colour around the logo and use complimentary colours throughout, also try to avoid using dark backgrounds for large amount of text unless used appropriately.

5. Keep Things Simple
Above all else just try to keep things as simple and clean as possible. Even when creating a bright, animation fueled website for a childs TV programme, you still need to keep the elements on the page simple and not have things constantly flashing or distracting the user. Simplicity is key, keep things clean and let white space be your friend. That way it gives you the oppurtunity to make key elements more interesting and colourful.

This tutorial will show you 5 quick tips to think about when you start designing a logo for a company.

1. Use of the Logo
An important aspect to bear in mind is how the logo is going to be used (i.e. on the web only, on social media sites, for print, etc.). This can play a big role and can effect the look of the logo. For instance a nice gradiented icon might look amazing on the top your website but will it print ok on all your letterheads.

Also if you are wanting to submit your logo to social media sites like Twitter and Facebook then you need to bear in mind that they only accept square images that can be as tiny as 16px x 16px so a  long textual logo would never work here.

2. Use of Fonts
Selecting the right font is paramount to the look and design of the logo and can really be the single point that conveys what kind of company this is. For instance, Serif Fonts like Times New Roman or Monotype can portray a more olden or quaint feel (useful for schools or restaurants for instance). Where as Serif Fonts like Century Gothic or VAG Rounded can show a more business like, corporate feel.

3. Use of Colour
Deciding on your colour scheme will define the colour scheme for the entire company so choose wisely. Ideally you want to stick to just 1 or 2 colours to keep a simple look with a strong, bold colour – pastel colours don’t usual work well. You can even think about using the colour to make the design and break up or highlight part of the logo text with a different colour.

4. Browse Other Logos
A great way of getting inspiration is to have a look at other logos – the good ones and the bad ones, to get an idea of what works and what doesnt. Logos should be simple, descriptive, memorable and customisable – so always think about this when looking through other examples.

5. Keep it Simple, Keep it Simple, Keep it Simple!
The most memorable logos are also the most simple. Just look at Google, Coca Cola and McDonalds, the logos themselves would take only 5 minutes to recreate but its coming up with the simple concept that takes the time. Try to avoid over doing things with too many shadows, gradients or reflections, strip eveything back and you can’t go far wrong.

This tutorial will show how to create a simple, attractive form effect in photoshop to appear as though the fields are indented like that shown below.

Open a new file in Photoshop and add a nice background of your choice, in the example I have used #595959. Now create a white box like that shown using either the ‘Rectangular Tool’ or the ‘Rectangular Marquee Tool’ and fill in solid white.

Duplicate this box and put below like shown in the image, then duplicate again and put below for the button layer. Double click on this third box, select gradient overlay and click on the gradient colour. Now select a nice colour for your button and blend into a lighter version of that colour, the example uses #e27822 into #e88f47 like shown in the box below:

Now we just need to create the background of the boxes to make the indent. Create a new layer below all the previous layers and CTRL + click on the first box layer to select its outline. Now go to Select > Modify > Expand, enter 2 pixels and hit OK. Fill the selection with any solid colour as we are now adding a gradient.

Press CTRL + D to deselect and then double click the new layer, select gradient overlay as before and click on the gradient. Now leaving the bars where they are, double click the left colour and colour pick the main background of your image then drag the colour accross to a slightly lighter version of the background, my example uses #7c7c7c. Press OK and do the same for the right side colour but make slightly darker, my example uses: #3e3e3e.

Now like before simply copy theses background graidents twice so that sit under each of the boxes and button like in the example. Simply add your text for the fileds and the button and you are done.

This tutorial will show how to create a quick, attractive, glossy navigation bar for your website, like that shown below:

Open Photoshop, create a rectangular shape for your navbar and fill with a colour of your choice (the example uses #40a367). Now double click the layer and select Gradient Overlay and add a gradient of a slightly darker shade of your colour up to a slightly lighter shade and click OK (the example uses, #36935b to #49b473).

Now create a new layer and draw another rectangular shape that covers the top half of the navbar and fill with white. Reduce the Opacity of this layer down to around 12% and you should have somthing like that shown below:

Next, create a new layer and draw a 1 pixel white horizontal line accross the top of the navbar and ensure the line is 1 pixel below the top of the bar.

Now the basis of the bar is complete you can create the seperation lines. Simply create a new layer and draw a 1 pixel vertical line that is a few shades darker then the darkest part of the navbar (i.e. the bottom of the navbar). Now do the same again but draw a line that is a few shades lighter than the top of the navbar.

Place the lines next to each other with the lighter one to the right and combine the layers. Now simply copy the seperator lines to the desired number of tabs and add your white text and your done.

I use this trick all the time to quickly flatten a layer in photoshop that may have an effect or style added to it.

This is very handy when you need to, for instance, add a double stroke to a layer or add noise or an additional effect to a layer that already has a style on it.

Simply right click on the layer that your want to flatten and click on ‘Convert to Smart Object’. This will flatten the layer together but will also make the layer un-editable to certain conditions. So now right click on your layer again and click on ‘Rasterize Layer’ and thats it.

So for instance, if you wanted a double stroke on a layer, you would double click the layer and add your first stroke, flatten your layer as above and then redo step one to add your second stroke.

There are various ways to cut out an image that is sitting on a background and each are useful in their own way. This tutorial will show just three simple ways to do so and the appropirate time to use them.

First is the Magic Wand Tool. This is probably the quickest and simplist option all round but can have its draw backs. This option is useful on an image that is contained on a single solid colour, for instance an isolated object like a car on a white background.

Drag the image into Photoshop and double click on the locked background layer and then press OK to make the background layer into a normal layer. Now select the Magic Wand Tool and adjust the Tolerance of the tool depending on how dark the rest of the image is and how tight you want the cut to go, I tend to keep the Tolerance around 10. Now click on the area of colour you want to delete, select the ‘Add to Selection’ option to select more areas or keep clicking on the same area to force the selection another 10 tolerance, once ready hit delete and your done.

The next option is for images that have a built up background – which is usally the most common. For instance a photo of someone in scenery. This is best done using the Polygonal Lasso Tool, zoom into the image and you will need to just select around the area of the image – being as precise as possible. This is the longest but most accurate option available – it should only take 5 minutes though and once done, right click and choose ‘select inverse’ then hit delete, zoom out and you should see a perfect looking cut out image.

The final option is to use the Colour Range selection. If you have an image where you need to remove all sections of a single colour quickly then this is the best solution. A logo is the perfect example of this – as they are often sitting on a white background and there are gaps throughout (normally on the text) so using the magic wand tool for instance would take too long.

Go to Select > Colour Range, click on the area of colour you want removed (e.g. the white) and hit OK. Make sure that none of the image itself has been selected, if it has then use the Polygonal Lasso Tool on the ‘Subtract from Selection’ option to deselect any areas. Once ready, hit delete and you now have a transparent background – like that shown below:

Before

After

This tutorial will show how to create simple umbrella as shown below:

Open Illustrator and create a new document, then select the Elipse tool and with holding shift draw a perfect circle. Now select the Direct Selection Tool and click on the bottom center point of the circle then hit delete to create a semi-circle (this is your umbrella frame). Now lock that layer and create a new layer above. Select the Pen Tool and your are going the have to create the first two sections of the umbrella.

Firstly, click on the top center of the circle, then click and hold on the bottom left of the circle, now drag the mouse until the curve matches that of the circle then let go, click again onto the end point you just made to reset the curve. Now while holding shift, click and hold  horizontal about a third into the semi-circle and drag the mouse to make and nice curve for the bottom of the umbrella. Once done, let go and click again on the point to reset. then simply join this shape to the starting point at the top middle of the circle (dont worry about this curve as it will be hidden by the next shape). Your shape should hopefully look something like this:

Once your first shape is made, copy the shape and flip horizontally then move to the right side of the umbrella, now you just need to create the middle section. Lock this layer and create a new one above then similar to before use the Pen Tool and starting at the top, just left of the center create your point and create curves similar to the example by joining up to the points on the previous shapes. This could get a little tricky so you may need to practise with the Pen Tool first, and you can always use the Direct Selection Tool to click on a point and edit the curve if any look a little off.

Once the umbrella shape has been created, unlock the layers and delete the semi-circle, now add the same gradient to each shape, depending on the colour you want for your umbrella, simply create a gradient with a lighter to slightly darker colour balance, in my example to lighter red is #af0e0e and the darker is #771313. Then adjust the gradient angles on each using the Gradient Tool to suit, I used an angle of 160 for the first shape, 2 for the middle and 22 for the right one.

Now your umbrella is created, simply select the Rectangle Tool and draw a narrow grey stick for the pole, then draw another small, black one for the handle top. To make the handle itself, select the Elipse Tool and makesure only the stroke option is selected, in black, with no fill. Then match the size of the stroke to the width of the handle. Now select the Direct Selection Tool and click on the top center of the circle and hit delete, then join this to the bottom of your handle top and use Pathfinder to join the handle and pole together.

Place the handle under the umbrella and put in the bottom center, now simply create the umbrella top using the Elipse Tool to create a small narrow oval and place under the umbrella with just the top showing just like in the example and you are done.