A lot of time can be spent in Photoshop clicking between menu items and palette buttons. Learning a few Photoshop CS4 shortcuts can really help you to work more efficiently. Here are some of the most common Photoshop keyboard shortcuts that I use.

To see all the Photoshop CS4 keyboard shortcuts open Photoshop and click on Edit > Keyboard Shortcuts > Summarize

You can see a list of all the default Photoshop CS4 shortcuts here. There is also a downloadable Photoshop CS4 Shortcut Cheat Sheet here.

In my next post I will show you how you can customize Photoshop CS4 shortcuts.

Here is a video tutorial from YouTube that shows you how to use Photoshop CS4 to easily make a shiny button to use in your website design projects.

In this tutorial I am going to show you how to make a simple reflected text header which you can use in your web design.

Create a new document with a white background. In this example my header is 960px x 200px (you can make it any size that suits your project.)

Double click the background layer to unlock it.

Next apply a gradient effect to this background layer. Click Layer > Layer Style to add a Gradient Overlay blending option to your background layer. Click on the gradient box to edit the color of the gradient (As below)

You can either choose one of the gradients you already have or make your own. To change a color, double-click on its color stop and the color picker will open, allowing you to select a new color. The color I will use for the stop on the left is #a49c6c. The color I will use on the right stop is #4c482c.

Now add your title text. Click on the Text tool. Choose your font and type your title. (I have used the font Trebuchet MS, Bold, 60pt, Color #FFFFFF (white)). The text at this point needs to be somewhere towards the top of the canvas.

Click on the type layer to highlight it.

Now right click on the highlighted layer and click Duplicate Layer.

Click Layer > Layer Properties and rename the original text layer to “reflection”

Make sure you have selected the “reflection” layer and then hit CTRL+T (this selects the transform tool)
Click Edit > Transform > Flip Vertical. Now use your arrow key to move your reflected text like shown below:

Rasterise the “reflection” layer by right clicking on it and selecting “Rasterize Type”
Now select the Rectangular Marquee Tool by hitting “M” or clicking on the tool in the toolbar. Select a feather of 10px.

Now use the marquee tool to make a selection on the “reflection” layer like the one below:

Now hit your backspace key, then CTRL+D to deselect the marquee tool
Make sure the “reflection” layer is still selected and change the opacity of the layer to 40%

Make sure your reflection layer is still selected then hit CTRL+T . Click Edit > Transform > Skew and drag the bottom left and right corners so your header looks like this:

Select the Title type layer and then click Layer > Layer Style > Drop Shadow and add a drop shadow to your title using the settings below:
Blend mode: Multiply
Opacity: 75%
Angle: 120%
Distance: 3px
Spread: 0%
Size: 5px

Make sure that the Title type layer is still selected and then click Layer > Layer Style > Gradient Overlay and add a gradient to your title. Click on the gradient box to edit the color of the gradient The color I will use for the stop on the left is #585757. For the stop on the left use #FFFFFF. Click on the top right stop and change its opacity to 0% as shown below

Click OK then make sure your gradient settings are the same as below before closing:
Blend Mode: Multiply
Opacity: 100%
Style: Linear
Angle :90
Scale 100%

Hold down your Shift Key to select both the reflections layer and your title (text) layer and use your arrow key to move the text down so your finished header looks like this:

If you don’t have Photoshop CS4 you can try Creative Suite 4 Free!

It’s now very easy to change the background gradient colour if you want to change the look.  Here are a few examples below:

For this blue gradient, edit the gradient overlay on the background layer and use #87d1e0 for the left stop and #237c9a for the right stop.

For this pink gradient, edit the gradient overlay on the background layer and use #ff5db3 for the left stop and #ef007c for the right stop.

In this tutorial I am going to show you how to make content boxes with rounded corners which you can use in your web design. In the example below I made a series of content boxes which were made in to clickable links to pages on the client’s site.

You will need to create each content box as a separate Photoshop file.

Create a new document with a white background and 190 x 130 pixels dimensions

Create a new layer, then hide your background layer. Select the Rounded Rectangle Tool and then set the radius to 10px and check anti-alias. Under options choose “Fixed Size” with 180×130 px dimensions

Now draw a white rounded rectangle in the new layer you created. Now you need to center the rectangle on the layer. To do this you need to click on the move tool:

You will need to Select All (CTRL+A) then Click on align vertical centers then align horizontal centers (see below if you are not sure how to do this).

This will make sure that you rectangle is sitting exactly in the center of your layer. Now deselect by hitting CTRL+D. Now you need to create the border around your rounded rectangle using a layer style. Click Layer > Layer Style and add a Stroke blending option to your rounded rectangle layer as below. Change the size to 1px and choose your color (I have used grey # 999999).

Unhide your background layer and your rectangle should look like this:

Now you need to use a picture that has a transparent background like this butterfly I used.

You will need to create a new layer (name it accordingly eg butterfly) and copy and paste your image in to the new layer. Now position your image where you want it to go on the layer.

Now you can add your heading text. Choose your font and type your heading. (I have used the font Segoe Print, Bold, 12pt, Color #003366)

Now type your main text using a smaller font. You will need to hit enter to go to each new line. I have used Trebuchet Ms, Regular, 11pt, Color #333333)

Now add your text to “Click Here” or “Read More” if it is appropriate for your content box. ( I have used Trebuchet Ms, Bold, 11pt, Color # 003366). Your content box should now look similar to this:

Now we will add a couple of drop shadow effects and you will be finished. Click on your Heading layer to select it, then click Layer > Layer Style and add a Drop Shadow to your text using the settings below:

Blend mode: Multiply
Opacity: 75%
Angle: 23%
Distance: 3px
Spread: 0%
Size: 5px

Now select your image layer and add the same drop shadow effect to the image (in this example it is the butterfly). Your clickable content box is now complete.

You can now go ahead and create the rest of your boxes.