Float Layouts #1
Tools: Adobe Photoshop
Description: How to cut up Float layouts in Photoshop, includes a template for tutorial use only.
You have finally reached a level of web-designing power that you can finally begin to code your own layouts, but where should you start? Iframes? People say those are super easy… DIV layouts? What the heck? PHP? Is that a disease?! Float layouts? Hey, that sounds like the easiest out of the…bunch, why not start there?
So you've decided to start learning how to code a Float layout and I will be your trusty mentor to guide you through this :) If and whenever you don't understand something or would like to personally ask me a question, feel free to comment me or send me an email. I hope that this tutorial will help!
What are Float layouts? They are layouts that use basic HTML and CSS to function, they adjust to your screen and they’re extremely easy to code. Starting with your idea, you need to first make it come to life in Photoshop.
If you don't have a layout ready to cut and use, you can use mine, but ONLY for this tutorial got it?
This is the .jpg file for the layout that you will use to follow along with, please don't remove the credit :)
cutting
*Make sure you have created a new folder for your layout and coding. Save everything in that folder, it's much better to put in a little more effort when organizing then not know where something is.
Open up the .jpg file in Photoshop (File > Open) and select the Slice Tool 
We're going to cut the layout into pieces so that it will make it easier for us to use on our website. Make a slice for the header and footer. Like below.
Once you are done that, click File > Save for Web and make sure that your settings are the same as mine.
Lastly, save the background for the layout (name it bg.jpg) onto your computer and we can finally begin coding our layout.
Read Part 2 of Float Layouts; Coding.
Tags: Coding, css, float, html, layouts
Print This Post
This entry was posted on Sunday, June 8th, 2008 at 1:33 PM and is filed under Coding, Photoshop. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
July 27th, 2008 at 7:45 PM
How do I cut the layout into pieces using the pen tool? or do I use the slicing tool? I never used the slice tool before but quite a beginner with pen tool.. , and by the way, how do I like display the contents of the other navigation links ( example :: HOME >> ABOUT THE SITE >> CREDITS ) on the same box? Is there another way to do that without using iframe?
PLEASE REPLY ASAP .. I REALLY NEED TO CODE THIS LAYOUT FOR MY WEBSITE .. thanks in advanced XP
December 31st, 2008 at 7:03 PM
[...] Preparing a Float Layout in Photoshop [read] [...]
August 2nd, 2009 at 9:12 PM
[...] Float and Photoshop Possibly related posts: (automatically generated)Replacing floats with the inline-block and table CSS PropertiesThe Float Layouts…Tweaking my blog design and stuff [...]