I've been given a .png to code as a project but im getting quite messed up. Just wondering how you guys would go about it. Heres a screenshot: Thanks
Not unless you can get the original PSD (or file it was made in, i'm assuming PS, could have been a number of other programs) to take off the watermark and split it up into sections to code.
Who ever gav u this project might have meant that you hav to make a template LIKE THAT and not edit that
Wow, I've never seen such a simple question completely misunderstood by people. I think he's just asking how to take a psd and write code to make a site using it. Of course, this is doing the design process completely back-assward, starting with a photograph... but it's easy enough to deal with. First, take ALL the text content and mark up in HTML WHAT the various elements are, not how they are going to appear. I'd drop that markup into one of my standard two column templates thus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> <title> </title> </head><body> <div id="containter"> <h1> Generic Business <b></b> </h1> <ul id="topMenu"> <li><a href="#">Services</a></li> <ll><a href="#">Contact Us</a></li> <li><a href="#">About Us</a></li> </ul> <div id="sideBar"> <div class="contact"> 0800 234 5678<br /> <span>info@genericbusiness.com</span> </div> <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Our Services</a></li> <li><a href="#">Case Studies</a></li> </ul> <!-- #sideBar --></div> <div id="content"> <h2 class="home"> Welcome to<br /> <span>GenericBusiness.com</span> </h2> <h3>Looking for a way to do stuff</h3> <p> Our stuff could be the right solution for you. We can provide... blah blah blah </p> <h3>Lorem ipsum dolor sit amet</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <!-- #content --></div> <div id="footer"> © Generic Business 2008 | Address 1, Address 2, City POSTCODE | 0800 234 5678 | www.genericbusiness.com | info@genericbusiness.com <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): Everything else goes into the CSS. Set the width and centering on #container, use the empty bold tag in the h1 as a image replacement for the header text - I'd probably put that whole top image background with the parts that hang-down into the content in there. Then you apply a negative margin to the bottom to make the #topmenu ride up into place. I'd set #sideBar to float:left then put a left margin on #content equal to the width of #sideBar. Use the .home class on the h2 to apply that content image as a background, pushing the text around as need be with that span being to push that second line of text inward. Clear the floats in #footer, apply that border as a background flush top on #footer, and you're done. Most of it comes down to as others said 'slicing' the image into the componants needed to build the page - though I'd be asking for a .PSD not a .png so I could have the different 'layers' to do my own compositing.
Actually, you can. =/ Just use fireworks if the layout was made from several layers and not flattened.
Wrong. PNG's do have layers, when made in Adobe Fireworks. It, in fact, works like PSDs in Photoshop; you can edit layers, groups, etc. Just maybe not as advanced.
Huh, must be a non-standard format. Does it break trying to load them into other programs, or does it instantly flatten? Not that I'd use layers in a paint program to design a site - as I said starting in a paint program is doing design back-assward... even if it is the preferred method for many 'designers'.
I think this guys problem is about how to place those jigsaw-pieces at the left top corner of the page! Well, you can have a CSS layer with higher Z-index (image should be transperant) and position it absolutely.