Hi I’m going to share my magic on how I design my layouts. I’m a type of person who really loves cute little things and I make them look more beautiful, on the eyes of many people. I don’t like too much pictures on a website especially on the content area. It really consumes bandwidth, that’s why other bloggers exceeding on their monthly bandwidth. Why? You ask me? Or you should ask yourself, if you don’t want to exceed your monthly bandwidth at least save your other photos from another website like Photobucket, Flickr and many more! Then just add the links, so no more hassle to your Host Provider. LOL.
Okay, let’s get it on! I’m not that selfish not to share how I design.(again?)
So I open Adobe Photoshop CS3, yes I’m so lazy to download the latest and working PS CS5.
Then I CTRL+NEW for new document sized 1000×900. Well it depends on you. 😛
A little advice, design whatever pops out on your mind, especially before you design download any backgrounds, patterns, vector, ornaments. Or whatever the main design you want.
Then set the background. Make the awesome header design! The contents background and width, same with sidebar.
This is so important, download some beautiful fonts so you can use it on your H1, H2, H3!
And for the content part just use the system font, like Georgia, Tahoma, Verdana, Lucida Sans, Arial. Well the basic fonts you see on every website. And make them look bigger! Set the line-height. 😛
For a better font styles like mine, visit this tutorial I made! Cufon Font Tutorial.
As a designer myself, I used to put every part on a Group (talking about Photoshop beside New Layer). And name the Group as content, sidebar, menu, logo. So it’s not that hassle to take a look nor oh-my-god-where-is-this-layer.
Always remember name the layers! Or the best way you can do is, click the Move Icon then press right click on the style you made, then voilaa! You’re on that layer, that’s all. XD
If you’re already satisfied with the design you made. Save the file on .PSD so whenever you feel, you need something to change, you don’t have to make the design all over again. Just name the .PSD file and save it on a local folder. Cause mine I got it deleted. XD
So you feel the design is okay and you’re ready to rumble?! All you have to do is save the images! The header image, background, H1 or H2 background. Put them all together.
What’s next? Of course you’re going to code it manually! Yay! <3 For a better view of the codes, you MUST download Notepad ++! It's very helpful because it has colors, so you don't need to be confused all the time. The HTML CODE!
Always use indent so you’re not be confused when you see the code. And always make a comment on each < / div> so it’s not hassle. Sometimes codes sucks especially when you’re not familiarized with them.
How do I convert them? Well I’ll see to it if I’m gonna make a tutorial on how to Convert HTML to WordPress. 😛
So til my next post! 🙂