Posts Tagged ‘Add new tag

Create a new photoshop image by going to FILE > NEW or by pressing Ctrl+N on your keyboard. For this tutorial, use this setting:

Width: 900 pixels
Height: 1500 pixels
Resolution: 72 pixels/inch
Mode: RGB Color
Contents: White

Open your image or wallpaper that you want to use as a header for your layout. We’ll be using this Beck wallpaper as an example.

Select the Paint Bucket Tool in the Tools Panel.

Fill the layer with black.

Now go to your wallpaper window and press Ctrl+A on your keyboard then drag it to your filled layer by using the Move Tool.

You can adjust the size and position if you want but its better if you keep it on top because it’s our image header just like this.

Now type the useful links for our navigation bar. For this tutorial, we’ll just use Home, Profile, Messages, and Logout. Select the Horizontal Type Tool on the Tools Panel and set your preferred font, size, and color.

This is my font settings, don’t follow this exactly, you can choose your own.

Font Family: Arial
Font Style: Regular
Font Size: 30 pt
Font Color: White

Then make sure that Layer 1 (wallpaper) is selected on the Layers Panel located at the lower right corner of the photoshop window and start typing the links.

Here’s my outcome. Remember that you can always place the texts anywhere by using the Move Tool while the layer is selected.

Now let’s type the other links for our sub-menu. Again, we’ll just type the most useful links.
Ex. Send a message, add as a friend, add comment, view my friends, and view my photos. To start, select the Background layer in Layers Panel, and start typing those links anywhere you want. Here’s what I’ve done.

We will now create boxes where we can place the contents of About Me, Comments, Media Box, Friends and Chat Box (optional).

First, click the Background layer in the Layers Panel and select the Rectangle Tool. I’m sure you already know how to select layers right? =)

Then click and hold the left mouse button as you determine the size of your box. Here’s my outcome.

I’ll teach you how to use the Blending Options so that we can give our box a different look.

Right click the Shape 1 Layer and choose Blending Options.

Then you’ll see this menu. Here you can adjust various options for our box. Set the Opacity to 30% and Fill Opacity to 50%.

Then let’s use the Outer Glow option and follow this settings.

You should get this.

We will use this box for our About Me contents so use the Horizontal Type Tool and type About Me then place it anywhere within the box. I placed mine here.

We are almost done for the designing part! We just need a few more boxes for our Friends, Comments, Media Box and Chat Box (optional). Now, let’s create our Chat Box, since so many profiles have their own chat box, I decided to have it in this tutorial. Now I’ll teach you how to duplicate layers so that you don’t need to do all the things we’ve done from Step 12 to 17.

Right click the Shape 1 Layer in the Layers Panel and select Duplicate Layer and press OK.

Select the Move Tool in the Tools Panel and move the new layer anywhere and resize it the way you want. And again, type the name for this box. Here’s mine.