Computers and Photoshop: Backgrounds in web design: Going from PSD to code

By Ryan Boudreaux

In my previous post entitled “Backgrounds in Web Design: Creating a theme.” I illustrated the process of creating a layout using Photoshop to build backgrounds with various elements including buttons, images, textures, layers, text, colors, and placement. In this segment I will demonstrate taking the PSD file and converting it for display in HTML using CSS style coding.

All files referenced in this post are available in the download, “Website design from PSD to Code.”
The companion gallery, “Creating a website from Photoshop to CSS code,” contains the full-size images.

First, let’s open up the PSD file in the download, shown in Figure A. (You will have to download the file and unzip to access all of the files.)

Figure A

In Photoshop we will make several slices of the main content background section starting with separating the header section from the body, and then the footer section. The body background will be a separate division and we will eventually create divisions with <div> tags in the coding to piece it all back together.

Remember, you want to organize your layout in such a way that you can put them into defined divisions in rows, columns, blocks, or tiles so that they can be rendered in coding. The text and images in the PSD layout are added on top of the background layers and can be placed easily with styling code. It is the background elements that will need to be sliced, and before making the slices, I will copy the Body Background layer wood grain and save it as a separate gif file named WoodGrainBg.gif. All the images and slices are included in the download.

Making slices

First, turn off all the other layers in the PSD file with the exception of the Content Background layer, all the Button X layers, and the Text layers that name all the buttons. Keep them visible and active as shown in the Layers dialog box in Figure B.

Figure B

Then select the Slice Tool as shown in Figure C.

Figure C

Then, using the Slice Tool, draw a box shape over the header area, then another box for the main body content area, and then one more for the footer area, as shown in Figure D.

Figure D

Now, select the Slice Select Tool as shown in Figure E.

Figure E

When you double-click over the first slice for the header, a dialog box opens as shown in Figure F.

Figure F

Add the name for the slice, in this case Header. Once the three slices are named, save the file by going to the menu path File | Save For Web | Save, or (Alt+Shift_Ctrl_S). All the slices will be saved as separate images as shown in Figure G.

Figure G

Since the food images overlap somewhat with the header and body backgrounds, we need to make that slice separate. Next ,we will hide those active layers and make the food image collage at the top left of the header and body sections visible, therefore creating a fourth slice for that section, as shown in Figure H.

Figure H

Then we will name and save the slice as we did in the steps for the first three above. I named this slice Food Images. We now have four slices that will be used to build our main sections of the header, body, and footer portions of the layout.

Building the code

For the code we will insert some divisions for the header, body and footer sections along with two columns inside the main section. To do this, we will create a set of division <div> tags along with several elements in an HTML document and then add some CSS to lay down the styling and placement.

The initial HTML is shown here in Snippet 1 and the file can be found in the download as InitialPage.html:

Snippet 1

<div id=main>

<div class=container>

<div id=header>

<p>Header Stuff Goes in Here</p>

</div>

<div id=main_content>

<div id=left_sidebar>

<p>Left Column </p>

</div>

<div id=right_column>

<p>Right Column</p>

</div>

</div>

<div id=footer class=container>

<p>Footer Stuff Goes in Here </p>

</div>

</div>

</div>

The initial CSS is shown in Snippet 2 and is available in the download as the file style.css:

Snippet 2

/*CSS Styles */

body {

background-color:#EBEBEB;

}

#header {

border:1px solid red;

}

#footer {

border:1px solid red;

}

.container {

width:1000px;

margin:0 auto;

border:1px solid red;

}

#right_column {

margin-top:10px;

float:right;

top:0;

right:0;

width:475px;

min-height:600px;

overflow:auto;

padding-left:5px;

padding-right:20px;

}

#left_sidebar {

margin-top:10px;

float:left;

top:0;

left:0;

width:475px;

min-height:600px;

overflow:auto;

padding-left:20px;

padding-right:5px;

}

Starting out, I want to display the foundation of the layout with simple divisions separating the header, main content, and footer from the body. Everything is contained within the <div id=main> starting with the <div class=container> which is set to 1000px width, and this includes the three primary content areas <div id=header>, <div id=main_content>, and <div id=footer>. As you can see in the CSS, the body background layer is set to a light gray. I’ve added a 1px red border just for sake of visualizing the elements as displayed in Figure I:

Figure I

Adding the background image slices

Now that we have the basic layout shapes with the primary elements in place, it is time to add some style with the images we sliced in our previous steps, adding in the body background image, the header, main content body, and footer image slices. Now I am going to add in more styling code and remove the red border within the CSS, as shown below in Snippet 3.

Snippet 3

A few notes on the CSS coding update:

I’ve set the body overflow y and x to auto and given the margin and padding a setting of 0 each, this is to set the align the page in all browser versions.
The main background image WoodGrainGb.gif is set to repeat with auto overflow y and x. so that in any screen resolution or browser window the wood grain background will cover the entire viewing area.
The #main. container element is set to an overflow of hidden; this is to allow the food collage image div element to layer above the other div elements.
The #main_content body.gif background image is set to repeat vertically and centered with a margin of 0px, and auto.

Testing the new look and feel in both IE and Firefox browsers, the modified CSS has updated the rendering of the page as shown within Firefox in Figure J:

Figure J

Adding the remaining images

The food collage background image FoodImages.gif and the soup image Soup.gif will be contained within their own divisions named #headImage, and #footImage respectively. And because these images will be aligned above and overlap several other divs they will be assigned a z-index number of 2, and all the other div elements will be assigned z-index of 1. The higher number z-index assigned to an element will render it above all the lower-assigned numbers, so that any element assigned a higher numbered z-index will always be above the lower numbered elements. This allows us to layer several div elements that may overlap within the document.

The CSS for the <div id=headImage> and the <div id=footImage> is shown in Snippet 4.

Snippet 4

#headImage {

background-image:url(images/FoodImages.gif);

background-repeat:no-repeat;

width:495px;

height:460px;

position: absolute;

z-index: 2;

float:left;

margin-left:-250px;

margin-top:45px;

}

#footImage {

background-image:url(images/Soup.gif);

background-repeat:no-repeat;

width:475px;

height:185px;

position: absolute;

z-index: 2;

float:right;

margin-top:90px;

Note in both the #headImage and #footImage CSS that the z-index: 2 are set, the positions are absolute, and width and height are also defined. The margin settings shift the images in placement within the container, and these can be adjusted depending on desired placement.

The full CSS updates are shown in Snippet 5 and found in the download file as ImagesAddedStyle.css.

Snippet 5

body {

background-color:#EBEBEB;

overflow-y: auto;

overflow-x: auto;

margin: 0;

padding: 0;

}

#main {

background: url(images/WoodGrainBg.gif);

background-repeat:repeat;

overflow-y: auto;

overflow-x: auto;

z-index: 1;

}

#main .container {

overflow:visible;

}

#main_content {

background: url(images/Body.gif) top center repeat-y;

margin:0px auto;

float:right;

width: 1000px;

color: #403116;

font-size: 1.2em;

overflow:hidden;

z-index: 1;

}

#contentText {

margin: 0 20 10 200;

padding-left:170px;

padding-right:30px;

}

#header {

background:url(images/Header.gif);

background-repeat:no-repeat;

background-position:center;

overflow:auto;

padding-bottom:240px;

color:#030303;

z-index: 1;

font-size: 1.2em;

}

#footer {

background-image:url(images/Footer.gif);

background-repeat:no-repeat;

background-position:center;

margin: 0 auto;

color:#030303;

padding-bottom:160px;

padding-left:35px;

z-index: 1;

overflow:auto;

font-size: 1.2em;

max-height:300px;

}

#footer .leftContainer {

width: 450px;

float:left;

text-align:left;

position:relative;

padding-right:20px;

}

#footer .rightContainer {

width: 475px;

float:right;

text-align:left;

position:relative;

padding-right:10px;

}

.container {

width:1000px;

margin:0 auto;

position:relative;

}

#right_column {

margin-top:10px;

float:right;

top:0;

right:0;

width:475px;

min-height:600px;

overflow:auto;

padding-left:5px;

padding-right:20px;

}

#left_sidebar {

margin-top:10px;

float:left;

top:0;

left:0;

width:475px;

min-height:600px;

overflow:auto;

padding-left:20px;

padding-right:5px;

}

/* Images CSS styles */

#headImage h1, #headImage small {

margin:0px;

display:block;

text-indent:-9999px;

}

#headImage {

background-image:url(images/FoodImages.gif);

background-repeat:no-repeat;

width:495px;

height:460px;

position: absolute;

z-index: 2;

float:left;

margin-left:-250px;

margin-top:45px;

}

#footImage {

background-image:url(images/Soup.gif);

background-repeat:no-repeat;

width:475px;

height:185px;

position: absolute;

z-index: 2;

float:right;

margin-top:90px;

}

Note the following:

z-index 1 setting has been added to the #main, #main_content, #header, and #footer style elements.
#footer .leftContainer, and #footer .rightContainer styling has been added so that the footer image and text can be aligned and separated within the footer.
#headImage h1, #headImage small allows an <h1> and a <small> text within the header image, with the text-indent set to -9999px. This helps with SEO keywords without having to render the text on screen

I have added several paragraphs <p> of Lorem ipsum filler text within the main content, left sidebar, right sidebar, and left footer divs to help with visualizing the full layout with text and images. You can view the layout with images rendered in Firefox as shown in Figure K and the HTML is found in the download file ImagesAddedPage.html.

Figure K

Search This Blog

Saturday, March 12, 2011

Backgrounds in web design: Going from PSD to code

No comments:

Post a Comment