Creating a website is sometimes the most difficult and sometimes the most easy task. Creating a website is not a big deal. A website for small business can be created in something less than hour and i am not referring to heavy and expensive WYSIWYG editors, they are really a mess, i advice you never to use them as they provide minimum power and control over content, and also makes the website heavy.
Things you need:-
- Notepad++
- Adobe Photoshop
- Basic Knowledge Of Photoshop
- Good Knowledge Of HTML, CSS
Think The Design!!
 |
| MY DIARY |
First 15 minutes can be used to think about the design. The design depends on what kind of website you are creating, the complexity required. Today no one wants to look at same old header content footer structure. I call these websites as genetic websites, evolving from same structure for many years. The design should be unique and a unique design is a design that's inspired by something odd, a website design inspired by a website is never a good design. So when you are looking for an inspiration for your website design, don't be inspired by a website, it's better to be inspired by something odd, natural from your surroundings. Just go for a walk outside and look if you can get some design. I had a diary by my side, i opened it and the way months and days were written gave me the idea of designing a website. Here is little Low Quality Picture ( i could not find my Digi-cam near by, so clicked it with my mobile phone :P). This "think the design" process may take any amount of time depending on your creativity and demand of the website. For me it took just five minutes.
00:15 - 01:15
Create The Design
Once you have got inspiration you have to create the website design according to the type of website you want to create. Here i am going to give you three examples of website designs. You can use photoshop to create the design, don't worry we will change it into html later on. But for now just concentrate upon Design Part.
- Open new Photoshop file with 965 X 1190 pixel size.
- Keep your inspiration in front of your eyes and choose which part shall act as navigation, which shall act as content, header, logo etc and create a rough layout this way.
 |
| Diary Design Layout |
- After creating the layout create the design in photoshop keeping this layout as a guide for your final design. If you are new to photoshop and don't know how to create a layout in photoshop here are the good amount of tutorials for you. http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/. Or you can use my psds if you want.
- The time spent on this phase depends upon what kind of site you are making for example:- the game arena layout took me 3hours but book store website took just 25 minutes for me and here are both the designs
Click on the images to see them in full size. I will upload the psd's for you soon.
- The next thing is getting images for your website, for this
- Remove the background
- Crop the image
- Save as png/gif
- Through history tool go back to original layout and then work for next image
- The images that you will need in Shakespeare book store website are
- Shakespeare book store logo
- Search icon
- Image of each navigation button
- The images that you will need depends on your design of website, Leave the content part and rest of the thing is images that you will need, get every image for your website in a separate folder.
Code the design.
Keep your created design layout in front of you and create a html layout in notepad++ or other editor. For this web design the layout shall be
<html>
<head> <title> wo2 web design </title> </head>
<body>
<div id = "wrapper">
<div id = "header">
<div id = "headlogo"> </div>
<div id = "searchbar"> </div>
</div>
<div id = "content">
<div id ="material"> </div>
<div id = "navigation"> </div>
</div>
<div id = "footer"> </div>
</div>
</body>
</html>
And the css for the basic format shall be
#wrapper
{
width:965px;
margin:auto;
}
#header
{
width:100%;
height:132px;
}
#headlogo
{
width:565px;
float:left;
}
#searchbar
{
margin-top: 70px;
width:400px;
float:right;
}
#content
{
width:100%;
}
#material
{
margin-top:150px;
width:700px;
float:left;
}
#navigation
{
width:74px;
float:right;
}
#navigation a img
{
margin-top:10px;
margin-right:0px;
}
#navigation a img #imgid:hover
{
add the hover image
}
- The content depends upon type of the website you are creating and the html layout depends upon the source of your inspiration, i was inspired from a diary so got this layout. Your layout shall depend on your inspiration and so will be the time taken to code it. It took me half an hour to code the Shakespeare book store's one page.
- If you don't know the way to convert psd to html, then here;s a fine tutorial http://dzineblog.com/2009/04/tutorials-psd-to-html.html
This is not the best tutorial i have seen but it surely is a best way of making website i have ever seen, good luck inder , being a beginner in blogs this is great work, my best wishes with you
ReplyDeleteGreat tutorial dude! keep it up friend
ReplyDelete