A Web Designer’s Little Secret.

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 about the style.css?
Always remember when you define or call a certain name.

Always remember that! 😛

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! 🙂

Related Posts

No Comments

  • Reply Twinkled Girl May 1, 2012 at 1:30 am

    I always start from scratch XD I’ve been wanting to try how to design from a psd as well. I’ll definitely try on the next one I’ll work on ^u^ thanks for the tip!

  • Reply Aisha Kristine Chong May 1, 2012 at 8:56 am

    HAHA 🙂

    Ako naman, depende sa blog entry. I like posting pictures and thumbnails because it looks good. HAHA 🙂 For a fact is a SEO kind of thing din kahit papano. Lalo na when people google search and see an image of it – it will lead to your website so it helps. HAHA 🙂

    Yun nga, bandwidth. So better be sure kakayanin ng webhost mo before doing it. :)) 

  • Reply Jerminix May 1, 2012 at 12:17 pm

    It really depends upon the user, though I used templates and just modified some CSS/Code to save time. I rather do minimalist design though.. great tips 🙂

  • Reply Grysh Co May 1, 2012 at 3:00 pm

    Haha Nice tips. 🙂 I actually do the same thing you do 🙂 

  • Reply Lhyzie Bongon May 1, 2012 at 4:23 pm

    Buti ka pa papalit palit lang ng design/theme for you blog.   I really love all your theme <3

  • Reply Dia ♥ May 1, 2012 at 5:10 pm

    before, I store all my images to my host. pero ngayon sa photobucket ko na sila nilalagay. Kasi I’m lazy to back up my files at madaming beses na nangyari sakin na nawala lahat ng images ko because of hosting problems. 😛 

    I design din muna sa photoshop. pero I don’t know what’s that notepad++. hihi. aral aral pa muna. 🙂

  • Reply Kai Darul May 1, 2012 at 5:54 pm

    true that. pero i love photos. i think, blogpost without a photo is boring (unless it’s informational). hehehe. gamit ko imgur.com for my photos. 😀

  • Reply Wander Shugah May 2, 2012 at 9:53 am

    yay to this tut babe! 😀 i love putting images haha on my blog. kahit papano. nakakaya pa nmn ng host ko. hahaha

  • Reply Yesha May 3, 2012 at 11:24 am

    Good job 🙂 
    Newbies will find this very usefulKeep ’em comin’ sweetie <3

  • Reply gracepets May 5, 2012 at 5:36 pm

    Wow, I really admire you for having the skills in web designing. I wish I could have time to do that as well. Super thank you for designing my layout deann! 🙂 <3

  • Reply Mary jane Tauyan Fitzsimmons March 20, 2013 at 2:03 pm

    omg!! I atteded an Edu fair the other day and most of them were like web designing graphics and multi media. 2 of the schools were so convincing that I was thinking of enrolling a certificate for a start!. This post refresh my mind so much! I hope You can make more blogposts about this. I would love to read them! STay Fab! =)

  • Leave a Reply