Loading ...
Hey what’s up everyone, many people have been asking me for months that if I will ever make a web design tutorial. I always had a thought of teaching people something new but I just never came across to doing things because I’m always busy with other design work and such when I’m on the computer. However, no more worrying about that. For those who was looking forward to a tutorial from me, it’s finally here!
Yes, that’s right as the title says it is my ‘First’ web design tutorial so the description and everything might not be as perfect as the professional tutorial writers. But, I tried my best to give you all the clearest important, after all the effort you put into a work to give out the best example is what counts no? Anyways, enough with my talking go check out the tutorial and give it a try. I will be a lot more appreicated if I see some results from the viewers, please leave your comments too. Bye for now.
Web Design Tutorial #1 | Level: Intermediate
By: Suthan S
© Copyrighted by konvictedARTS
Step 1. Alright here goes nothing, are you ready? I hope you are! Anyways, let’s get down to business. First of all, lets start a new document (Ctrl+shift+N). I used 1024×1200.
Step 2. Let’s go on and fill up the space by a nice beige-ish color. Here’s the color code that I used. #f8f8f0. Now you should have something like this below.
Step 3. Now we’ll be making a horizontal box on top of the layout for a small welcome message. Create a new new layer and go pick up the ‘Rectangular Marquee Tool’ and draw a box on top of the layout. Once your done choose a dark color (color code #2f2f2f) and fill up that box. Look image below for the idea.
Step 3. Once your have something like that, choose your ‘Horizontal Type Tool’(aka the tool you use to type in a text) and put these settings below.
Font: Tahoma | Type: Regular | Size 11 | aa: None
After that on the box that you created on top write down a nice message like “Welcome to my website. Enjoy your stay” etc. View preview below.
Font: Tahoma | Type: Regular | Size 11 | aa: None
After that on the box that you created on top write down a nice message like “Welcome to my website. Enjoy your stay” etc. View preview below.
Step 4. Let’s move on shall we? Now we’re going to go make the banner! Wooh! :) we’ll be using a tool called ‘Rounded Rectangle Tool’ which can be found in the tool box, see image below. And we’ll be using gradient color effects.
Let’s proceed, this is a big step. Before adding the banner under that box you created earlier we’re going to go pick up some nice gradient colors. Go get your gradient tool and click on the box on top where you can change your gradient colors and put these settings.
Alrighty, now we make the banner, but remember there’s still a lot more steps to go before we finish. So yes, go pick up that ‘Rectangular Tool’ that I mentioned earlier and make sure the Radius(should be found in the top when you choose the tool) is set to 5px. Create a new layer, and go ahead and make a nice little box big enough for a banner under the black box image that’s on top. See preview below for the idea. (Don’t forget to Rasterize your banner layer; right click on banner layer > rasterize layer)
Moving on again, before we finish we the banner I’m going to teach you a little trick with the ‘Pen tool’. We’ll be making a nice curvy look on the top corners of the layout to make it look like it’s connected to the black box on top in a fancy way. Before doing that using the ‘Zoom Tool’ zoom in to your top left corner of your green banner that you created. Try maybe like 3 or 4 clicks when zooming. And once you have the corner right in front of yours, go ahead and pick up the ‘Pen tool’. There’s many part of the pen tool but we’ll be using this one.
This tool looks hard to use because many say that but it’s not that hard really. At least for the part we’re going to be using. Create a new layer, ith the pen tool click 3 dots which will make a triangle. Kinda like this below.
Once you have something like that done, in the same box where you chose the ‘Pen tool’ choose the one that’s called ‘Add Anchor Point Tool’, I believe it’s the 3rd one. Once you have that chosen go and click on the left middle on the triangle that you created, here’s an image that will show you where to click. And after you clicked there, drag that point a bit corner side to the triangle, not too much but a bit which will give a curvy look. See image below.
Now now, if your getting in a stage like that we’re on the good track if not you missed something in the past steps so back and try it again, practice makes perfect. :) Alright so as I was saying if you have something like this, go on the layer where you created your pen tool image there’s a nice color chooser which you can see double click on it and fill it with the color which your gradient banner starts with from top so that curvy image blends in. After that rasterize your layer and do the same thing to the other side of the banner or just copy and paste your curvy image to the other side. Now if everything went well you should have something like this below.
If your layout looks similar to what we have done so far, your good. Now go ahead and add the things you want to the banner of the layout. It can be your logo, or your website name. Personally I like to keep things simple so I’ll only add my logo and my website name on the banner. Here’s what I have so far.
Step 5. Danngg, after that long step 4 finally we can move on to the next one. But don’t be too excited yet, we still have a darn long way to go. :P K, so let’s go ahead and make the Quick links tabs shall we? This should go easy since your already used to making boxes. So let’s see if you can catch this in a quick shot.
Step 5.1 Go pick up the ‘Rounded Rectangular Tool’ and make a nice box under the banner to add your quick links such as “Homepage, Forums, etc” to it. Make sure it’s not something super big, keep it up a decent size. And fill it with a nice white and light grey(#f5f5f5) gradient colors. You should have something like this now, do you?
If you have something like that, next part is very easy I tell ya. All you do is add the links that you want on the tab box. You can add things like “Home, Forums, Downloads, Contact” and you can fill the “Home” link into a nice color that you like/something that fits the layout or add a nice little box under it to show that the link is activated (when you have the layout up and running live after coding) See what I did. :)
Step 6. WOW! looks pretty neat so far don’t you think? Lets add some text under the tabs box to make the layout look more “filled up”, catch my drift? ;) See what I did below to try doing the same thing to your layout.
The settings I used for the text are this. The headline was is written in the font ‘Georgia’ it’s a default font. And rest of the text is written in Tahoma. All with the same test settings that I mentioned earlier in a step except for the Georgia text the aa is set to ‘Sharp’. One you have your text area done like that repeat it and make 2 more text areas one next to the other one. See preview below. :)
Step 7. We’re almost done, hang in there, just few more things to do and we’ll be done. Start a new layer and draw a big box down from the 3 text areas that you created all the way down to the layout and fill it with a darker color than the background. See this preview to get an idea of what I’m talking about.
If you have something like that, we’ll be making another box inside that big box with another darker color. Just not make it too dark though. ;) Instead of Rectangular box try another Rounded rectangular with a 5px Radius to make that box. Check out my preview.
If you have something like that then everything is PERFECTO! :) Rest of the thing is pretty much easy. From all the things you have learned so far, it’s really easy making news boxes, ad boxes or anything you really want in the content area. Me, I just made 2 news boxes and added a navigation box and few other things. This is up to you really, it’s your decision. You make what you want to have on your site. See my preview.
Step 8. Okay folks, last step. We’ll be making a simple footer at the bottom of the layout to finish things off. Now making the footer won’t be that hard, most of the time it’s always better if the footer matches the top header we created. So what we’re going to do is, you know how you first created that black box on top of the layout as a top header. Well your going to the same thing now but for the footer and add all of your “copyright” information right down. Easy no? Here’s my final result. :)
Click the image to full view the layout.
Alright, finally!!! It’s done, my first ever wrote tutorial is done. Please leave your kind comments on what you think and if there’s anything that I can do to improve my tutorial writing. Thank you so much for viewing, look forward to more and more tutorials. Also, please subscribe to my news letter. :) Thank you!
Yours Truly,
Suthan S.
nice one.
Hi Suthan.
I allready commented on Encide.net but also wanted to comment here.
I really love this tutorial. It’s So Clean and good. It perfectly explaines the steps to take to create a great website. Most people hire an Expencive designer for websites like this. But with this tutorial people will be able to design them yourself. Because with this they see every step they need to take. Than they only need to hire a coder.
I think this tutorial is posted on the right moment. Because many people are going to design websites in this style. There are also much people who want designs like this(like i said before).
Really great;),
Marcel Doornbos
iCrone
Nice tutorial BB :D
Thank you guys and Thanks Marcel for the nice comment, appreciate it. And glad you all like the design. :) Looking forward to more comments! :D
cheers m8!
Hey man!
Great Tutorial!
This will help a LOT of people, im sure! :-)
Go on with this nice work!
Hey man!
Nice tutorial. Very simple to follow through.
Cheers!
very nice tutorial…very simple to do
ahem, this tutorial sucks, only because I didn’t get to comment first, but anyways Great tutorial, hope you make many more so I can steal your ideas, lol later..
lol @ you swiss, for a second thought you were serious. Thanks though. :D
Very nice, may help in the near future. Thanks
Nice. Good work ! ;)
Suthan this is really something I can use, thanks! Please, if you ever get the time to write more tutorials, then feel free! You’re kinda good at it:-)
lmao , i obviously wont be using this but i like it :)<
might try it one day :)
i lovee you babe
Thanks for the simple tutorial!
Thank you for more kind comments guys, feels good to get some good comments.
And babe, I know that you won’t hehe but one day I might just write one that anyone can do in photoshop. :D And it’s good to see you around my site reading my blogs, jtm. <3
Wikkid bro.. next tutorial..
“CSS with Suthan”..lol
>< KEWL!!! i wish i wish i could make such cool ones as you~ u.u lolz
DUDE, I LOVE YOU.
BECAUSE OF YOU, I’LL START MAKING DESIGNS AGAIN, STARTING WITH THIS ONE. I’M AWARE I’M TYPING IN CAPS.
Nice clear tut.
…although now there’s a helpful guide to ripping off your style
^_^
Nice tutorial but was expecting more on the side of how to cut up and code for wordpess as the link that sent me here read as “Wordpress web design tutorial”
like it - good tutorial indeed!!!!! thanks
This is an immense tutorial.
Useful tut.. Nice design too..
Would be wonderful if you can explain how to integrate this to WP.
http://www.codebounce.com/Photoshop
WOw. Really Nice. I have been trying to find a tutorial that explains how to design the professional “2.5″ look. Are you going to do one for slicing and WP? Just wondering.
Thanks
Thanks for the comments everyone, I appreciate your kind words. For those who wondering if I’ll be making a wordpress coding tutorial, there’s a tiny bit of chance of me saying yes however not anytime soon because I can’t seem to find much time due to school and work. But, look forward to it though, never know maybe in the near future I might as well make a tutorial for wordpress coding. :)
You should, btw here’s my outcome:
http://artisticgenius.deviantart.com/art/AnimationTokyo-com-98236927
Or maybe you could give Andrew this design and he can do a Wordpress Integration tutorial.
Very nice outcome Ram! :) Keep it up. And maybe will haha XD.
Very clearly explained. It’s a nice tutorial. I think I’ll try it! Thanks
Very nice, straightforward tutorial. Clean and professional site.
very nice. thanks…
nice to see your first tutorial. It’s looks likely a simple layout but very nice :)
good luck !
Darn this looks awesome. A nice clean layout and an easy to follow tutorial. I think I got myself a base for my school project site!
Nice nice
I have seen a lot of tutorials, and I have got to say that this one is very informative and is probably better at explaining a lot of details than others. Keep up the tutorials and maybe I’ll be as good as you one day :P Cheers Suthan!
James. (d3structo)
Great tutorial mayne
Darn this looks awesome. A nice clean layout and an easy to follow tutorial. keep going
awesome tutorial! thanks for sharing :)
[...] Wordpress Web Design Learn how to create your own wordpress design [...]
[...] Konvicted Art [...]
[...] Konvicted Art [...]
[...] Konvicted Art Konvicted Art [...]
[...] Konvicted Art [...]
i just wanted to say that I love this site
Bro this is a nice clean design, and a very well worded tutorial. Great job and nice outcome xD
[...] Konvicted Art [...]
[...] Konvicted Art [...]
i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..
Hey , you have a very good blog, its excellent information in its field. You have done a great job, keep doing it for to help, people like Myself.
[...] Konvicted Art [...]
[...] 6. Konvicted Art [...]
Fantastic tutorial!! Made it really easy for me to understand. I was just wondering if you could perhaps do a tutorial on the next step - actually getting it onto the web? Code, etc? I’ve designed my page now but am stuck as to what to do next LOL!
[...] 6. Konvicted Art [...]
[...] 6. Konvicted Art Loading… @import url(”http://www.google.com/uds/css/gsearch.css”); window._uds_vbw_donotrepair = true; @import url(”http://www.google.com/uds/solutions/videobar/gsvideobar.css”); .playerInnerBox_gsvb .player_gsvb { width : 320px; height : 260px; } function LoadVideoBar() { var videoBar; var options = { largeResultSet : !true, horizontal : true, autoExecuteList : { cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM, cycleMode : GSvideoBar.CYCLE_MODE_LINEAR, executeList : [""] } } videoBar = new GSvideoBar(document.getElementById(”videoBar-bar”), GSvideoBar.PLAYER_ROOT_FLOATING, options); } // arrange for this function to be called during body.onload // event processing GSearch.setOnLoadCallback(LoadVideoBar); [...]
[...] 6. Konvicted Art [...]
[...] 6. Konvicted Art [...]
woooooooooooow
it’s just woooooooooooooow
u r fantastic , so easy to do and so professional
thanks alot
Very helpful tutorial. I really enjoyed it. Gave me some inspiration on things I might try in the future as well. Thank you BboyWicked