Websites « Photoshop Lessons and Tutorials

Archive for the ‘Websites’ Category

Colorful Background – Photoshop Lesson

Tuesday, July 20th, 2010

Open a new document size 800x800px. In photoshop.

Now we’re going to add a gradient in the background from black to white. First hit the letter “D” on the keyboard to reset the foreground and background colors to default. Then, select the Gradient Tool (G) and drag from the bottom of the window to the top. You should come up with something like this:

Next we’re going to select Filter > Distort > Wave in the menu bar and use the following settings. You can change these to generate various effects.

Now choose Filter > Distort > Polar Coordinates, and use the default settings. This is what it will look like:

With the layer selected choose Filter > Distort > Twirl and set the angle to about 185 degrees.

Now that we have our swirl base we’re going to add some cool colors. To do this select the little circle at the bottom of the layers palette and select Gradient.

After this select the rectangle to the right of the word “Gradient:” and select the gradient that looks like a rainbow and select ok.

Change the layer style to Multiply.

Here is your background!

Tags: background, Lesson, Photoshop, Tutorial, webite design
Posted in Websites | No Comments »

Making a Seamless Background for a Website

Sunday, June 6th, 2010

In this tutorial, you will learn how to create your own seamless background pattern, by making use of Photoshop’s Offset filter.

STEP 1: Open a new canvas in Photoshop, the canvas can be whatever size you would like, but it must be square. In the example we will be working with a 100x100px canvas.

STEP 2: Delete the background layer from the Layer’s Palette, and add a new layer (so that the background will be transparent).

STEP 3: Create the pattern. In my example I created a very simple pattern by using a hard Black Brush and varying the size and opacity.

TIP: Keep the pattern black & white/transparent so that you can easily color it with layer styles at a later time.

STEP 4: In order to actually use the above image as a pattern, you first need to make it seamless. The first step in doing this it to open of the “Offset” filter from the Filters > Other menu. In the Offset filter menu, change the Horizontal and Vertical offset to exactly 50% of your canvas width/height. In my 100x100px example, each of these would be set to 50. Also set the undefined areas to wrap around, and press OK.

Your image should now look like this:

STEP 5: Clean up the seams. Using the eraser, remove the unfinished parts of your pattern that run into each other at the ‘seams’ of your pattern.

Before After

STEP 6: The last step in creating the pattern, defining the image as a Pattern. From the Edit menu, click on “Define Pattern…”, and give it a name.

STEP 7: Using the pattern. To test your new pattern out, create a new canvass (any size will do), and from the Edit menu, choose “Fill…”, then choose your new pattern from the list of Custom Patterns, and press OK. That’s it! Your new pattern will also be available to be used in layer styles, which will allow you to change the size, color, transparency, etc. of your pattern. This same technique to small seamless patterns out of a large texture images as well.

Tags: design, Lesson, Photoshop, Seamless Background, Tutorial, website background
Posted in Websites | No Comments »

Create a Button for a Website

Thursday, June 3rd, 2010

In this tutorial, we will be using a few of Photoshop’s vector based tools along with layer styles to create a button perfect for use on the web.

STEP 1: Open a new 80x24px Canvas in Photoshop.

STEP 2: Click on the Rounded Rectangle Tool (Hotkey: U). Change the Radius to 6px in the Rounded Rectangle Options Toolbar, and draw a rounded rectangle that stretches from the top left corner to the bottom right corner of the canvas.

STEP 3: Add text above your button by using the Type Tool (Hotkey: T), and center it on the canvas. I used a 14px Bold Arial font type.

STEP 4: Now we are going to use layer styles to style our button, starting with a Gradient Overlay. First, you need set your Foreground and Background colors to the colors that you would like to use in your Gradient. In my example, I am using #004b54 for my foreground color (a dark blue/green), which fades to #0f656f, a lighter shade of the same color.

STEP 5: Next, click on the layer with your Rounded Rectangle Shape (by default it will be named “Shape 1”). Then, click on the Layer Styles dropdown menu (located at the button of the Layers Palette), and select Gradient Overlay.

STEP 6: In the Gradient Overlay dialog box, change the Gradient to a Foreground to Background Gradient.

STEP 7: Still in the Layer Style Window, Click on “Stroke” tab and add a 1 pixel stroke to the inside of the button, using your Foreground Color as the Stroke Color.

STEP 8: Again, in the Layer Style window, click on the “Inner Shadow” tab, which we will be using to add a highlight to the button. Change the Angle to 90 degrees, the Distance to 4 pixels, the Choke to 0 pixels, and the Size to 10px. Press OK to save the Layer Styles and close the Layer Style window.

STEP 9: Now we will add a slight Drop Shadow to our Text to make it stand out a bit more. Click on the layer with your button text, and bring up the Layer Style window once again by clicking on Drop Shadow. Change the Distance to 1 pixel, Spread to 0%, and Size to 1 pixel, and press OK.