PSD to HTML Assignment

Web Design 2

PSD to HTML Assignment

Photoshop is used to create web site layouts in real web design agencies. The PSD document is then sliced up and converted into HTML.

For examples of Photoshop web layouts, see Deviant Arts .

For this assignment, we will create a Photoshop layout for a band. We will then use Dreamweaver to code the CSS and HTML.

Go to the “students/Strelecki/Web II folder and copy the band_website folder to your web 2 folder. This folder contains the psd file, starter css file, and 8 images that you will need.
In Dreamweaver, create a new html file called “band_website.html”. Link this to the “band.css” file that is saved in your folder.
In Photoshop, open the “band_website.psd” file from your folder.
You’ll need to change the image size (image > image size) to 1600px wide so the background will be wide enough to save as a full-width background.
Turn off all of the groups except for back, which contains all of the layers with the background files. Also turn off the content area layer:

To save the background image, choose file, save for web & devices.

· Experiment in here and find the best settings for the image, while trying to keep the file size as low as possible.

· Save the image as “background.jpg”

· Change the image size back to the original (1200px wide)

To add the background to your design, use the body element’s CSS background attribute. The style declaration below tells the background not to repeat, to be at the top and in the center at all times, and when the picture runs out, use the tan color #d5d4c2.

body {background: url(“background.jpg”) no-repeat top center #d5d4c2;}

7. Add the wrapper div in HTML:

· <div id="wrapper"</div>

· Remember that the closing wrapper div goes to the bottom of the page (just above the </body> tag)

8. To center the wrapper add the following to the css:

· #wrapper {width:960px;margin:0 auto;}

Logo – turn all of the layers back on in the psd file.

Use the rectangular marquee tool to select the logo – be sure to set the width to 325px and the height to 110px.

Choose edit, copy merged
Choose file, new, the cntl-v to paste.
Choose file, save for web & devices, and save as “logo.jpg”

10. Add the logo in with an h1 tag, which tells search engines that this is an important element on our page. Then add an a tag inside of it that will link back to the homepage.

· <div id="logo"<h1<a href="band_website.html">Six Revisions</a</h1</div>

11. Using a negative text-indent which will hide the text from sighted viewers, but will still be visible to search engines and screen-reading technologies.

Add the image in as a background in the stylesheet. We’ll also need it to float it left because the navigation will be floating to the right. Here’s what the CSS looks like:

· #logo h1 {float:left; display:block; padding:21px 0 0 23px; text-indent:-2000px; margin: 0;}

· #logo h1 a {width:325px; height:110px;display:block;background:url(“logo.jpg”) no-repeat;}

12. Navigation

· Turn off all of the layers except for the “hover” layer.

· Use the crop tool to crop the white rectangle.

· Save it out as a PNG-24 (this will preserve the transparency).

· Name this file “hover.png”

· Use the history panel to back up and add the cropped content back.

13. For the navigation html, add an unordered list:

<div id="navigation">

<ul>

<li<a href="#">News</a</li>

<li<a href="#">Songs</a</li>

<li<a href="#">Photos</a</li>

<li<a href="#">Videos</a</li>

<li<a href="#">Tours & Events</a</li>

</ul>

</div>

Add the css for the navigation:

#navigation { float: right; display: block; text-transform: uppercase; font-weight: bold; font-size: 1.1em;}

#navigation a { color: #706752; text-decoration: none;}

#navigation ul { list-style: none; margin: 0; padding: 0; float: right; display: block;}

#navigation li { float: left; display: block; padding: 64px 0 33px 0;}

#navigation li a { padding: 64px 14px 33px 14px;}

#navigation li a:hover { background: url(“hover.png”) repeat-x;}

15. Content area. Back in Photoshop, turn off these groups: home, footer, and header (leave back on). Use the crop tool and set to 960 pixels wide by 710 pixels height. Crop the content area. Then save the image as “contentarea.jpg”. Remember to back up in the history panel to get your file back.

16. Add a div called #contentarea to the html page and then style it in the css.

</div>

· #contentarea {background: url(“contentarea.jpg”) no-repeat top center;width:908px; min-height: 684px; height: auto;_height: 684px; margin:18px 0 0 0; padding: 26px 26px 0 26px;}

17. Add the html for the “flash section.” This goes between the “contentarea” divs!!

18. And the CSS is basic dimensions and margin definitions:

#flash {width: 908px;height: 411px;margin: 0 0 35px 0;}

The margin on bottom accounts for the space between the #flash div and the 3 columns that will be below.

Creating the columns

19. Add the HTML for the columns. The br tag clears the float for the footer that will be below these columns. Again, be sure to place this code after the “flash” area but still inside the “contentarea” section.

20. Add some simple CSS gets the columns all set up and in place:

#column1 { float: left;display: block;width: 233px; margin: 0 68px 0 0;}

#column2 { float: left; display: block; width: 335px; margin: 0;}

#column3 { float: right; display: block; width: 207px; margin: 0;}

21. Add the following content to column 1 : This goes between the div tags that you already inserted in step 19!!

<h3>Latest Videos</h3>

<p<img src="video.jpg" alt="video" /<br />

<a href="#">Another video to watch here</a<br />

<a href="#">And yet another video here</a</p>

22. Add the following content to column 2: This goes between the div tags that you already inserted in step 19!!

<h3>Six Revisions blog</h3>

<p<a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a<br />

Nunc eu mi risus, nec luctus justo.[...]</p>

<p<a href="#">Bibendum est eu gravida cras dui sem</a<br />

Venenatis a egestas id, consectetur faucibus nibh.[...]</p>

<p<a href="#">Aliquam arcu nisi, sagittis at feugiat quis</a<br />

Accumsan ut metus. Mauris rhoncus[...]</p>

23. Add the following content to column 3: This goes between the div tags that you already inserted in step 19!!.

<h3>Connect with us</h3>

<ul>

<li<a href="#"<img src="facebook.png" alt="facebook" /</a</li>

<li<a href="#"<img src="myspace.png" alt="myspace" /</a</li>

</ul>

<ul>

<li<a href="#"<img src="twitter.png" alt="twitter" /</a</li>

<li<a href="#"<img src="linkedin.png" alt="linked in" /</a</li>

</ul>

<ul>

<li<a href="#"<img src="flickr.png" alt="flickr" /</a</li>

<li<a href="#"<img src="rss.png" alt="rss" /</a</li>

</ul>

24. Add some CSS to control the unordered list properly:

#column3 ul {list-style: none;}

#column3 li {float: left;display: block;padding: 0 27px 10px 0;}

25. Add the HTML code for the footer. Place this outside of the “contentarea”, but still within the “wrapper.”

copy; 2009 Six Revisions Band | <a href="#">contact us</a>

</div>

26. Add the CSS code for the footer.

#footer { width: 960px; border-top: 6px solid #c4c2af; padding: 10px 0 30px 0; text-align: center; margin: 30px 0 0 0; font-size: .9em;}

Finished!!