[Guest post] Simple tutorial : Creating a Web design or template

Hello and welcome to my Adobe Photoshop tutorial, today we are going to create a WebDesign or template or whatever you call. I don’t think this tutorial and creation will be too difficult for you because I’ve put everything in easy to follow steps and tried to explain the best I could.If you have basic knowledge about Photoshop you should be able to easily keep up and let me guide you through this tutorial!

However, before I will post this tutorial I will just tell you something. I have been playing with photoshop for less than 8 months and I have had a real grasp of it. So if you have difficulties starting, I highly suggest following tutorials which can be found on the net. I will give you some sources at the end of this article and of course, the link to my portfolio!

Let’s get our hands dirty!

Many Webmaster these days, are using custom forums script, DDL scripts, wordpress, joomla or any other custom CMS scripts.

Since this is going to be a basic tutorial, I will simply create a basic image hosting page today and if I have time, I will post a vbulletin tutorial before my exams 🙂

Tools

You will need:

1. Adobe Photoshop (CS3 or furthur but I personally prefer CS3 because its really easy to use)
2. Internet Access (You should have one if you are reading this =P )
3. Well, some real basic of the tools in photoshop. Don’t worry even if you don’t have basic skills, you will learn today 🙂

Step 1:

Let’s start by creating a layer of 1000 x 1100 and set background as black

Step 2:

Now, we are going to design the navbar. Go you make a new group by going To:
Layer > New > Group > You rename Group 1 to “Navbar” and you click Ok.

After making the group, choose the Rounded Rectangle Tool with a radius of 10 Px

Now make a new layer and draw a Rounded Rectangle with your tool:

Call that layer “NAVBAR_BG”

Now We are going to put the effects on the navbar. So Right click on NAVBAR_BG and select Blending Options.

Now You need to apply the Following Effects (1-4 shown below):
1. Drop Shadow
2. Outer Glow
3. Inner GLow
4. Bevel and emboss
5. Gradient Overlay (default Black and White)
6. Stroke Colour: #000000.

Don’t worry just follow the following pictures to get the same effects as mine 🙂

After following all the above steps, you should have something looking like that:

Next, you take you Line Tool and draw borders to separate texts you write with your Text Tool. Simple 🙂

Now Let me show you a little Photoshop trick. This can be very useful in web design especially when designing templates:
I will change the colour of the navbar without doing much work 😛

So you click on NAVBAR_BG.
Next, you click Layer > New Adjustment Layer > Hue/Saturation

Press Ok. A new little window Will appear and you must Check Colourize.
Now You play with the slides till you get a colour which you like:

Great. Now that you get the colour you like just click OK and see your navbar.

That’s it ladies and gentlemen, you completed your navbar design. =P

In this design I preferred to make my navbar of dark colour to make it match the colour of the whole design

Note: please Group all your navbar files.
Otherwise your PSD design ( Photoshop Design) will be untidy and you will find yourself lost 😛

Step 3:

I know you may have got a hard time on step 2 but don;t worry I’m trying my best to make it easy for the “beginnest” of photoshop xD.

Let’s move on to the Description Panel. I highly suggest you follow this step well because I am going to use the same effects and design for doing other parts.

Go You make a new group Called “Description”

Using Your Rounded Rectangle tool at 5PX, draw a box 🙂

Oh Don’t worry, its super ugly this box but now we will add these effects and Make it look good 😛

Ok right click on the shape layer you just made and select blending options 🙂
Apply the following Effects:

Good, now take your Text tool and type whatever you want.

Lorem ipsum is the dummy text so i copied and pasted this, but you can type whatever you want eh! 😛

Step 4:

Cool,now that you know how to make the description box, you can make the login box.
So grab your tools and create a smaller box for the login box and apply the same effects as previous step. Then grab your text tool and write what you see in the picture and use again the Rounded rectangle Tool to make the Text Boxes 🙂

Simple.

Below is my result:

That’s it let’s now proceed to step 5.

Step 5:

Now,we are going to make another group called “Upload Box”.

Again like step 3, We are going to make a box for the Upload box. So grab your tools again and Do it 🙂

You will notice the buttons in the design, to be honest i myself downloaded these buttons on the net and I wonder where lol xD. Don’t worry guys, just make the upload box, you will have a surprise at the end of this article 🙂

Step 6:

Nearly finished, lol.

Now create a new group called ” Recently added pics” and Same box as you did for steps 3-5 but size different of course.

Hehehe,now go on google images and find some pics. Copy and paste then to your photoshop design and resize them using CTRL+T or Edit > Free Transform

Now we make the pics align with the box and I will add two little buttons to make it look like a scrolling design.

Step 7:

This is an optional step. I did it just to make it to make my design more beautiful xD

Well, This will involve skills on using the Pen Tool and draw the bars.

So it’s up to you and your imagination.

I made mine look like the following:

Looking nice ?

Step 8:

Whoa, Finally… Add some text on the design and create The Logo. A site without a logo is not really a site imho.

So I decided to make a simple logo for this with my text tool and some effects.

The Final Preview:

The last words…

Well, the tutorial is over guys and girls. I really hope you liked it and I hope you didn’t get bored lol. I know it is really a long tutorial but I tried my best to make it Noob-Friendly lol.

I would like to Thank Yashvin to give me a chance to post an article on webdesign here because I rarely see any mauritian doing web design although many exist.

Now, if you have read carefully, you may have seen that I mentioned of a surprise in Step 5. The surprise i’m gonna give you is the Fully layered design of this tutorial 😀  You just open it with photoshop and you can see how i did all the things. You will get all the buttons included also. 🙂

Click here to download the FULL PSD file.

Thanks for reading the tutorial.
If you like it, just ask for more tutorials. I will post more during the holidays lol.

Note: The PSD i gave you is for personal use and not for resale or whatever. You can use it to learn not to resell it. This is a free stuff i gave so keep it free.

Finally, I would like to say that if you are interested in web design, web coding, I will open my site soon for webmasters. So webmasters can join me in 1 month’s time hehe.. Meanwhile, you can have a look at my portfolio here :http://sabtech.foliohd.com/

Thanks again,
C ya laterz,
Sabir.