This article marks the second installment in our tutorial series. The preceding section focused on crafting a mockup for a sleek and minimalist blog design. To maximize your learning, it is essential to complete the first part before proceeding with this guide.This tutorial is the second of a two-part series.In this segment (Part 2), we will delve into the process of converting a PSD design into an HTML/CSS web template, following the design created in the initial part.
Part 1:Designing an Elegant and Simple Blog Web Layout with Photoshop
Part 2:PSD to HTML Conversion: Crafting an Elegant and Minimalist CSS3 Web Layout
Click the preview below to view a live demonstration. Due to the use of CSS3, the display may vary slightly across different browsers.
View DemoThe initial step involves organizing the files and folders. Create a new folder on your computer and label it appropriately.This folder will serve as our project directory.Within the main folder, establish two additional folders and name them accordingly.Launch your preferred HTML/CSS editor (such as Dreamweaver or Notepad++) to create an HTML document. Name it as desired and save it within the main folder.Generate a stylesheet document and name it suitably.Save this file within the main folder.The following code snippet should be placed within the HTML document. It represents standard HTML markup: <!DOCTYPE HTML> <html> <head> <title>Letterpress</title> <meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1″> <link href=”https://www.webfx.com/blog/web-design/psdhtml-conversion-elegant-and-simple-css3-web-layout/style.css” type=”text/css” rel=”stylesheet”> </head> <body> </body> </html> Open Photoshop and access the PSD file we created in the first part of this series.Ensure that only the following layers are visible in Photoshop:
Datebg and shadow
Headerdivider
Navbarbg
Logo
Sidebar
Sidebar divider
Background
Widgetbg
Footerbg
Image
imagebg
Use the Rectangular Marquee Tool (M) to select the bookmark indicating the active page.
Copy the selection by navigating to Edit > Copy Merged (Ctrl/Cmd + Shift + C).
Create a new Photoshop document (Ctrl/Cmd + N); the canvas size will automatically adjust to the dimensions of the item copied to your clipboard (the bookmark in this case).
Paste the copied selection into the new Photoshop document by pressing Ctrl/Cmd + V (the shortcut for Edit > Paste).Go to File > Save for Web and save the new document as a JPG within the designated folder.
I typically start by coding the HTML (with classes and IDs) before writing the CSS for styling. This approach allows me to maintain a streamlined workflow without the need for constant back-and-forth switching. We will begin by writing the code for each section of our design and then proceed with styling.ContainerConstruct a div with the ID of “container”. This div will act as a wrapper for all elements except the footer.This is done to facilitate centering the layout later on.Create a div for the logo and insert the site’s logo image within it. You can slice the logo from the PSD mockup using the previously discussed method, or use your own logo (recommended). <!– CONTAINER –> <div id=”container”> <!– LOGO –> <div id=”logo”> <img src=”https://www.webfx.com/blog/web-design/psdhtml-conversion-elegant-and-simple-css3-web-layout/images/logo.jpg” width=”348″ height=”60″ title=”logo” /> </div> 
Navigation BarNext, we will create the navigation bar. Utilize an unordered list and add each navigation link as a list item.Assign the ID of “firstlink” to the first list item; this will enable you to add a background image to the current link (the bookmark sliced from the PSD) and include a divider. <!– NAVIGATION BAR –> <div id=”navigationbar”> <ul> <li id=”firstlink”><a href=”https://www.webfx.com#”>Home</a></li> <li><a href=”https://www.webfx.com#”>About</a></li> <li><a href=”https://www.webfx.com#”>Archives</a></li> <li><a href=”https://www.webfx.com#”>Contact</a></li> </ul> </div> <div id=”dividerheader”></div> 
SidebarCreate another div and assign it the ID of “sidecolumn”.Insert a form with an input element.Set the default value of the input element to “Search”, the size attribute should be set to 29 (for 29 characters), and include a JavaScript event listener that calls the function “clearText” when the user focuses or leaves the input element.Note: It is highly recommended to write JavaScript in an unobtrusive manner. As we will not be covering JavaScript in this tutorial, I have included the functionality inline. Please use unobtrusive JavaScript.onFocus=”clearText(this)” onBlur=”clearText(this);This function will handle the hiding and showing of the “Search” text within the search input. <script type=”text/javascript”> function clearText(field) { if (field.defaultValue == field.value) field.value = ”; else if (field.value == ”) field.value = field.defaultValue; } </script> Below is the HTML markup for the sidebar and the search form. <!– SIDEBAR –> <div id=”sidecolumn”> <!– SEARCH –> <form> <input type=”text” id=”searchform” value=”Search” size=”29″ onFocus=”clearText(this)” onBlur=”clearText(this)”> </form> <div id=”dividersidebar”></div> 
Recent Posts and Latest CommentsCreate two divs; assign one the ID of “recentposts” and the other, “latestcomments”.Insert a divider between them.Enter some sample content into “recentposts” and ensure you include a heading and paragraph elements. Use HTML character codes for the right-pointing double angle quotes (») which is ». You can find a comprehensive list of HTML character codes here.I used » tags for each comment/post name, and will style them later. <!– RECENT POSTS –> <div id=”recentposts”> <h1>Recent Posts</h1> <ul> <li><a href=”https://www.webfx.com#”>» Lorem Ipsum post</li> <li><a href=”https://www.webfx.com#”>» Another post</a></li> <li><a href=”https://www.webfx.com#”>» I’m just writing things</a></li> </ul> </div> <div id=”dividersidebar”></div> <!– LATEST COMMENTS –> <div id=”latestcomments”> <h1>Latest Comments</h1> <ul> <li><a href=”https://www.webfx.com#”>» “Blah Blah Blah…”</a></li> <li><a href=”https://www.webfx.com#”>» “Blah Blah Blah…”</a></li> <li><a href=”https://www.webfx.com#”>» “Blah Blah Blah…”</a></li> </ul> </div> 
Sidebar Web BannersMost blogs feature advertising sections today; why not ours?Within the “sidecolumn” div, add another div to contain our web banners.The first two web banners should have the IDs “adrightfirst” (for the right one) and “adleftfirst” (for the left one). Since we have space for only two ads per row, include a line break for each row. <!– ADVERTISING –> <div id=”adrightfirst”></div> <div id=”adleftfirst”></div> <br /> <div class=”adright”></div> <div class=”adleft”></div> <br /> <div class=”adright”></div> <div class=”adleft”></div> <br /> <div class=”adright”></div> <div class=”adleft”></div> </div>
