Cutting up the layout to be in web friendly pieces can be one of the more difficult parts of the project. The reason this can be so difficult is because designs can be complex and may not fit very well into the squares and rectangles of an HTML layout. After my prototype is created in Photoshop I go back to pencil and paper to see how my design may be broken up into squares and rectangles.
This process can take a a large chunk of time. I ran through a tutorial posted by Carlos Aleman that that has some great pointers and tricks on how to make this process as stream lined as possible. Your Photoshop layout will most likely consist of many layers which don’t always want to cut apart very nicely. Carlos’ process has you duplicate your layout into a new file that you then “flatten” so all of the layers become one. This single layer layout is now easily cut apart into your smaller pieces. Carlos suggests that you use the marquee tool to select the various elements of your design and create new files for each part (Cmd+C -> Cmd+N -> Enter -> Cmd+V -> Cmd+Alt+Shift+S). This worked for most of the pieces in my design, but there were some pieces with which I had some difficulty getting the right dimensions. To work around these finicky pieces I did use the crop tool, saved the for web, and then undid the crop to continue on to the next piece.
Even though my layout is relatively simple I still ended up with 20 different PNG files for the header navigation and the edge shadows, as seen in the above image. Since I want interactivity for each image that will act as a link I had to cut out each “button”. I also had to create the moused-over version of the button. For this site I am using a teal gradient for the button and an orange gradient for when the button is moused-over. The other pieces are the logo, button spacer, edge shadows, and edge ribbon folds.
One very important note: in order for your various pieces to fit next to each other they will have to be the same height to ensure straight lines across the pieces. After much trial and error I got all of the pieces cut out and ready for fitting into the HTML.
This step gets us out of Photoshop and into our HTML editor. I use Dreamweaver simply because I have it as part of Adobe’s Creative Suite and it colors and formats my code quite nicely. It also has extensive libraries to help you out if you can’t quite remember what the syntax is for a specific attribute. However, I stay away from Dreamweaver’s design view. Trying to move things around there, from my experience, is a sure-fire way to turn your code from a work of standards-art into a nightmare.
As far as the design work goes the difficult part is past. Assuming your pieces were cut out accurately they should easily fit into your layout. Now is the time to decide which layout method you can use. For my purposes I decided to use a table layout. Div tags can only be used to be two things next to each other, when it gets to be more than two things it doesn’t work. Some other methods I could have used would be an HTML list with heavy CSS modification or span tags. For a quick and easy solution I decided to use a table. I have used tables in the past, I know exactly how to manipulate them to attain my desired output, and tables have been a part of HTML for a long time so they are widely supported across browsers.
Some key tags and attributes are:
<table></table> – Creates the table. Some elements you’ll want to use are border, cellspacing and cellpadding. I have all three of these set to 0 to make sure my image are flush against each other.
<tr></tr> – This is the row tag. Use this to create the horizontal rows. One element that I am using on this tag is the valign (vertical alignment) attribute set to “top”. My ribbon fold images are taller than the buttons. Setting the vertical alignment to the top ensures that they all sit flush along the top of the row.
<td></td> – This is the column tag. The column tag must exist inside a row tag. You can have multiple columns per row. A key attribute here is the colspan attribute. By default the columns will line up with the column from the top row. In order for one column to span many columns you must use the colspan attribute and set it equal to however many columns it needs to span. This can take some playing around with.
After the table is set up start adding images using the <img /> tag. Just set the src attribute equal to the image location. In my case I put all of my layout images in a folder entitled “graphic”. Repeat this process until all your images are in place. Throughout this process you will want to save your document and open it in a web browser. After you make changes just save and hit reload in the web browser to view the changes.
Now that the dummy webpage looks like the Photoshop design it is time for the fun part: interactivity!
This concludes the second part of Concept 2 Fruition. To see where I am in this process you may view the interactive navigation here: http://dtedwards.com/v4
The next, and most likely final, post in this series will go through the steps of PHP template implementation. I won’t go through the process of installing Drupal to your web server as that would warrant a post all on it’s own. I will, however, explain how to find the correct files that need to be edited in the labyrinth of PHP files that come with a CMS.
Thanks for reading!
– Dylan E.