Tutorial: Take your minimalist web design from Photoshop to HTML, part 3

March 22, 2012, 9:00 AM PDT

Takeaway: Ryan Boudreaux completes his three-part series on taking a minimalist web design from Photoshop to HTML. Here, he adds the finishing touches to the code for the footer section.

This is third and final segment in the series of our series on converting a minimalist web design in Photoshop to HTML. Here are the first two, if you missed them:

All the files associated with this tutorial are available in the download.

In fact, if you want to go all the way back, check out the original series on creating a minimalist website layout using Photoshop which prompted the PSD to HTML series:

Figure A shows the web design as it stands after the first two parts in building the index.html web document have been completed, as displayed in Chrome 17.0.9.

Figure A

In the final segment, all we have left is adding in the styling and content for the footer section, which is surrounded in the red border above. We will start with creating a CSS3-styled gradient.

First, let's open the PSD file one last time, and in this step we are going to use the footer area gradient layer to help us capture and create the CSS3 styles we are going to utilize for our web document.

Make sure the "Footer' layer is active and the only visible layer, then select the Crop Tool (C).
Now, select a slice of the gradient within the footer, being sure to select the entire top to bottom of the gradient; the width does not really matter, but in my instance, I selected a portion that is about 100px wide.
Press enter to accept the crop; the selection is shown in Figure B:

Figure B

Next, select File, and then Save for Web… and name it footer_ gradient.gif; save it to your working folder. We will use this gradient "snapshot" for our next step. RGB 99, 112, 111: HEX62716f, and RGB 116, 143, 143: HEX 748f8f

One of my favorite online tools is the Ultimate CSS Gradient Generator by ColorZilla, which allows you to create a variety of gradients including horizontals, verticals and radials. We'll use it for the next part.

Once on the Gradient Generator website, I am going to select Import From Image. The button is pointed out with the red arrow as displayed in Figure C.

Figure C

Now, select Choose File and browse to the footer_gradient.gif file; select Open, and then, once the file name appears in the dialog box, select Import, as shown in Figure D below.

Figure D

The CSS gradient styling for background, linear-background, and filter stops will be created as a custom set. Before we accept the generated code, we can now update the color stops to more accurately reflect the effect that closely matches the gradient we created in the PSD. We will first set the first color stop to 60% and the second color stop to 80%. You can also name the custom set and save the unique permalink for future reference. The resulting generated gradient output is displayed below in Figure E, and the style code is included just below the screen capture.

Figure E

I've manually added in the fixed width of 1020px, the margin set to 0 and auto, and the height set to 100px to the top of the foot container styling.

.footcon {

width:1020px;

margin:0 auto;

height:100px;

background: #748f8f; /* Old browsers */

background: -moz-linear-gradient(top,  #748f8f 0%, #748f8f 60%, #728c8b 80%, #677777 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#748f8f), color-stop(60%,#748f8f), color-stop(80%,#728c8b), color-stop(100%,#677777)); /*              Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #748f8f 0%,#748f8f 60%,#728c8b 80%,#677777 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #748f8f 0%,#748f8f 60%,#728c8b 80%,#677777 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #748f8f 0%,#748f8f 60%,#728c8b 80%,#677777 100%); /* IE10+ */

background: linear-gradient(top,  #748f8f 0%,#748f8f 60%,#728c8b 80%,#677777 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#748f8f', endColorstr='#677777',GradientType=0 ); /* IE6-9 */

We will now add these styles to our styles.css file, updating the footer container styles that create the four columns, and we will also remove the red border. Now, let's view the index.html file in Chrome 17.0.9, displayed in Figure F:

Next, we will add in the four columns to the footer : Social Networking, Stay Connected, Participate, Copyright 2012, and Rights and Privacy Disclaimer. First we will create the sections and then add in the respective content.

From our PSD file, we see that all footer paragraph sections have the same font face, size, and styling of Lucinda sans Unicode, 12px, regular, and the color #ffffff. The font styling will follow these guidelines and are displayed below:

.column p {

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

font-size:12px;

font-style:normal;

color:#ffffff;

text-align:left;

Next, we will set the styles for four columns that will fit within the defined footer area with the float left, margin set to 0 0 20px, left padding to 3%, and the width set to 22.5%, with the first column set to clear all and padding left of 0:

.column {

float: left;

margin: 0 0 20px;

padding-left: 3%;

width: 22.5%;

.first {

clear: all;

padding-left: 0;

Next, we will style the anchor text with text decoration set to none, a left margin of 25px, and the color set to #ffffff:

.column a {

text-decoration:none;

color:#ffffff;

margin-left:25px;

The disclaimer section uses identical styling as the footer section with the following styles defined:

.disclaimer  {

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

font-size:12px;

font-style:normal;

color:#ffffff;

margin-left:180px;

.disclaimer a {

text-decoration:none;

color:#ffffff;

margin-left:240px;

The footer section HTML coded into the index.html file:

<br clear="left"/>

<footer class="footcon">

<article class="column first">

<p><a href="#">Contact Us</a><br />

<a href="#">FAQ's</a><br />

<a href="#">Accessibility</a><br />

<a href="#">Partners</a><br />

<a href="#">Portfolio</a>

</p>

</article>

<article class="column">

<p>SOCIAL NETWORKING</p>

<img src="images/Social_Icons.gif" />

</article>

<article class="column">

<p>STAY CONNECTED</p>

<img src="images/Connected_Icons.gif" />

</article>

<article class="column">

<p>PARTICIPATE<br />

We invite you to participate in our online community. Join our Facebook page, see our videos on YouTube,follow us on Twitter....</p>

</article>

</footer>

<section class="disclaimer">

<p>Copyright 2012 <a href="#">Rights and Privacy Disclaimer</a></p>

</section>

Here, the changes for the footer are displayed in Chrome 17.0.9:

Figure G

While the icons under Social Networking and Stay Connected are not anchored to links, it would not take much to split out the icons into individual image files and add linking to each. Or, another option would be to create an image map for each of the two footer images.

This completes the three-part series of converting the PSD file to HTML code. Figure H shows the completed website as displayed in Chrome 17.0.9: