Photoshop Tutorials - Creating a Round Button

Posted on 13 May 2008 at 2:26pm

Photoshop tutorials - Creating a Round Button

1) Create a new layer (bottom right of the layers panel)

2) Draw out a circle wit the marquee tool holding shift to get it perfectly round

3) Fill the circle with any colour you like ( I have chosen black as it shows up well)

4) Click on the small F at the bottom of the layer panel to add a filter

5) Click on the word drop shadow then make it a little softer and lower the opacity to make it a bit more natural.

6) Click on the word gradient overlay to introduce your colours, set the gradient colours by double clicking the gradient colour bar then you can double click each colour and change it. I would recommend selecting one colour and adding a dark version at one end of the gradient and a darker version of the same colour at the other end.

7) Click on the word bevel and emboss then set the shadow colour at the bottom to a mid grey. Increase the softness and play around with the depth until you get a result similar to the example or anything you like the look of.

8) Ok the filters and you are almost there.

9) Create a new layer and produce a smaller circle filled with white.

10) Press Ctrl D to remove the selection on the screen (the marching ants).

11) Select the move tool and move the white circle over the centre of you original circle.

12) While on the white circle layer select overlay from the drop down menu at the top of the layer panel. You may want to lower the opacity to a look that you like.

13) Now go to the filter drop down at the top of the screen and select blur more, you may want to add this effect a few times until you get a nice soft blend between the two layers.

14) That’s it you have created a sexy button ready for use.

If you want to change the colour or the pattern of your button simply double click on the effects wording in the layers panel and change just the gradient colours to produce as many different colours and looks as you like without having to make a new button every time.

Note: To duplicate the layers drag the layer from the layers panel onto the small new layer icon at the bottom, this will produce a clone of itself that you can then move and change to make second different coloured button very quickly.

Photoshop Tutorials - Copyright images for web use

Posted on 7 Mar 2008 at 3:04pm

A lot of web designers and businesses will be at one time or another concerned about putting images onto a site because of people stealing or copying them.

To stop this you can put the words copyright at the bottom of your site pages and no one will touch them! Not entirely true, it is so easy to remove or copy any image from the internet and no law or copyright wording will stop them.

The best way to ensure a higher level of protection is to overlay a copyright symbol or your logo over any images you wish to protect.

How to produce an overlay

1) Prepare your image to the size and resolution you need for the site.

2) Click on the new layer icon at the base of the layer panel.

3) Select the new layer in the layer panel if it is not already active.

4) At this point you have a few options: either written text in white or a logo in white or produce a copyright symbol again in white.

5) To produce some text simply select the text tool click once on the work space and enter anything you like (in white).

6) To include your logo, open up the logo document and drag the logo thumbnail from the layers panel across into the image document.

7) To include a copyright symbol go to the shape tool hold down the left mouse button to then select custom shape tool. From the custom shape tool properties inspector at the top of the screen select the copyright symbol in the drop down menu. Ensure you have white as your foreground colour and draw out your symbol on your new layer, hold shift to keep the proportions correct.

8) Now you have either text logo or copyright symbol over your image you will need to make it less obvious.

9) Lower the opacity slider at the top of the layers panel to make your item transparent. Another option is to select colour burn or soft light from the blending option drop down menu next to the opacity.

10) Finally save your document for web.

11) If you wish to use this on lots of images, just save the file as a .psd file as this will preserve the layers. You can now open this anytime you produce more images for you site and simple drag the copyright layer from you original document onto your current document.

Photoshop Tutorials - Effective Black & White images

Posted on 22 Feb 2008 at 10:27am

Most people will simply take a photo and hit Desaturate to turn it black and white, job done then save it out.

Don't do it, if you do not have a high contrast image in the first place your photograph will look flat and dull.

Here is a way to gain control over the images blacks and whites giving you the ability to make a much more effective, punchier outcome.

Step One:

Get the image you wish to work on and before you do any thing save it under a new file name. Always saving an image under a new name will ensure you do not save a black and white version over your full colour image.

Step Two:

Go to > Image > Adjustments > Channel Mixer now you can see the three colour channels that make up you full colour image.

Step Three:

Tick the Monochrome check box on the bottom left of the Channel Mixer panel.

Step Four:

We can now use the Red and Green sliders to create our much better B&W outcome. The trick is to ensure you are always at 100% by mixing the two sliders. Example 30% Red 70% Green or 52% Red 48% Green.

Warning – Do not move or include the Blue channel as blue light is very low in any image and will cause huge amounts of graininess in you final outcome.

Step Five:

You should be able to create subtle grey scale images or if you push the 100% to 105% or more you will get higher contrast images. Using mostly the red channel should also give you a higher contrast more visually stimulating image.

Hit Ok to apply and then save your perfect black & white picture.

Have a play and see what difference it makes.

If you want to know more about Photoshop why not take a look the Axis centres introduction to Photoshop course