[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.

17 thoughts on “[Guest post] Simple tutorial : Creating a Web design or template

Add yours

  1. Thats a cool tutorial. Great job πŸ™‚

    vBulletin is dying – No more prospect in it. I suggest you to start themeing MyBB instead as it seem to have great days infront of it.

    Maybe we could make a MyBB theme project together in holidays if you are interested.

    I am glad to see Mauritian youngsters adventure web development instead of facebook.

    BTW,I am only 1 year elder than you πŸ˜€

    Like

  2. Hi @Sabir, I am myself doing a degree involving specializing in web design and stuffs about the look & feel persona (in the design field) and I must say not only your tut’s great but also so is your design too.

    I personally liked the final design for it has a pretty much cool & professional touch interface-wise.

    Keep up the great work and thumbs up to @yashvin for giving you that chance.

    Hope to see more coming, if not in the months to come, but at least in the years to come.

    Best Wishes,
    A Muljee

    Like

  3. Yeah…nice dummy tutorial for beginners in the world of photoshop…let’s talk of the basic things u forget to include dude…

    /// 1. The rulers which are “necessary” if you want ur drawing to b accurate up to 1 px and proportionate designs…

    /// 2. The slicing thing at the end to cut the various part of the template, also u can render in firework for slicing…

    BTW dear…i used firework when i was in form 2 first in logo designs blogging in wordpress.com..warez downloads.. next i moved to blogger in form 3-4 and to wordpress.org.. my own blog.. graphic designer @ Graphics.Temple… co-web developper @ Nanosun informatics!!!

    am currently in form 5!!! LOL Pro photoshipist dude… u can view my portfolio soon @ graphics.temple

    Hmm…. am in exams…17th nov i’ll b free

    Like

  4. Hehe,
    thanks for comments guys πŸ™‚

    Will try to improve my designs πŸ™‚

    @akki- Thanks πŸ™‚

    @Nayar – Vbulletin will not die that soon dude :)But sinceur requesting MyBB, I think i’m gonna try my hands at it πŸ˜€

    @A Muljee – Thanks πŸ™‚

    @Carrotmadman6 – Use dreamweaver with some knowledge of HTML and CSS πŸ™‚

    @Nirvanknight – Hehe Good dude :D… I hope to see ur works :D… For the rulers i use them but when “screenshoting” i just removed them*LOL* …I also prefer to use the GRIDS to make my designs more proportionate πŸ™‚

    Well In my holidays i will work on making 3 sites of which 1 will be for a Team of WebMasters :)… Hoping to find some guys out here for joining me πŸ™‚ Well will decide about that laterzz πŸ™‚

    Like

  5. This is definitely not the proper way to start web design, in my opinion. You should have probably started with the basic (X)HTML tags and then move on to creating a PSD, and by then ultimately move on to slicing and image optimization. Anyways it’s a good effort from your part; I give it a 4/10.

    @Nirvanknight
    Woah! so much for the smug. Well amigo, you should look up for yourself instead of waving off your smug. Your what-so-called site is a hive of syntax error and an insult to W3C rules and conventions.

    Like

  6. I am quite new at these stuffs !! but just a question .. wouldn’t a website with that template with taking very long loading times ?? Just wondering.. anyone can reply !! :s

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: