Producing an effective, fresh and working design is a very challenging task. A task which can bring joy and pain. However many designers seem to limit their skills to the aesthetic domain. Producing a website has two major stages: website design and website development.
Once a website designer has finishing producing their amazing PSD file they may be dumbfounded on what to do next. The following series of posts will guide a designer on how to convert their PSD file into a working XHTML/CSS website. We will assume no knowledge about XHTML and CSS so each line of code will be explained.
Slicing a PSD
Step One: Deciding on a Div Structure
Building a website layout involves creating rectangular areas which hold content. Each of these rectangles can be given attributes such as length, width, color and many more. The first step of slicing a website is trying to visualize how you would break apart your PSD/website design into rectangular areas.
Consider the following website:
Have a look at the website and consider how you would break up this website into rectangular areas…
When considering how to break up a website into rectangular areas you should consider the different elements on the website. Elements are basically any item on your website. These elements could include a navigation, a block of text, an image or any other distinct item on the website. It is logical to have major elements sitting in their own rectangular area which is made particularly for that element.
When slicing in this element based way it is best to take a top-down approach. Basically we first create rectangles which separate the major pieces of the website. Here is how I would define the major rectangles for the above website:
The different colors in the image represent the different rectangular areas which I have defined. I would like to stress that there is usually many many ways to successfully define your rectangular areas. There is technically no right or wrong answer to how you define your rectangular areas. However defining logical rectangular areas will help you out a great deal when it comes to coding the XHTML / CSS.
Step Two: Incorporating your Div structure into your PSD
Now that you know how you want to define your rectangular areas we can now define these areas in your PSD file.
- Open your PSD file in Adobe Photoshop
- Enable rulers by clicking on View -> Rulers. The shortcut is ctrl+r(PC) or apple+r(Mac).
Enabling rulers displays a ruler above your canvas and a ruler to the left of your canvas. Rulers enable to you to create guidelines which help you with defining areas. - Use the rulers to create the guidelines needed to define your rectangular areas.
To create guidelines left click on one of the rulers (above your canvas or to the left of your canvas) and drag onto your canvas. This creates a baby blue guideline in the position you released your mouse. The great thing about these guidelines is that objects will ’snap’ to the guidelines, allowing you to easily align things.Take a look at the following YouTube video for more information about rulers:
http://au.youtube.com/watch?v=ROT8_2KvgnQ
- Now that you have your guidelines in place we can now use the slice tool to define your areas.
Select the Slice Tool from the tool bar. It is the 6th item on the tool bar and is beneath the crop tool. - Simpy using the Slice Tool to create your rectangular areas. Notice how the slice tool will snap to the guidelines that we just created.
Your PSD file should now be over-layed with these slices.The following image shows how it should look:
- One of the main reasons why we create these slices in Photoshop is so that we can see the dimensions (height and width) of each slice. This helps us create our divs (rectangular areas in CSS)
To see the dimensions of any of these slices use the Slice Select Tool. To choose the Slice Select Tool left click and hold on the Slice Tool in the tool-bar. This bring up a menu with two items: Slice Tool and Slice Select Tool. Choose the Slice Select Tool. - With the slice select tool activated you can now simply double click on any of your defined slices. Doing this will bring up a menu which tells you information about your slice. Theinformation we are interested in is height and width.
The next post in this series will take the reader through creating these rectangular areas in XHTML / CSS. We will use these rectangular ares as containers which will house our elements
Popularity: 5% [?]