This is the second part of the Concept 2 Fruition post I made at the end of December. We left off at the prototyping phase. This second part of the series will follow through the “cutting” of the prototype design, fitting it into an HTML/CSS layout, and conclude with a dash of interactivity using some simple JavaScript. Rather than trying to implement this into the Drupal PHP template right away I decided to make sure it fits together in a non-CMS (Content Management System) webpage. When it comes time to working with the CMS I’ll be able to open the PHP template files and copy and paste what I have put together in this dummy page.

Cutting

One layout design turns into many smaller graphic files.

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.

Fitting

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.

Plenty of trial and error.

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.

Looks like it did in Photoshop!

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!

Interactivity

The interactivity phase goes to the next level, from design HTML to coding simple JavaScript using the DOM (Document Object Model). If you can wrap your head around how JavaScript works with the DOM it becomes very simple to create some great-looking interactivity.

The first step is to add a name attribute to each of the images you would like to have as interactive. These names have to be unique for each image. The desired effect here is for the visitor to mouse-over the button and have it change from a teal background to an orange background. This takes a static design element and transforms it into something the viewer will interpret as a button. The DOM’s job  is to find the img element indicated by the JavaScript and swap out the current src attribute with the new one. The JavaScript code is entered as onmouseover and onmouseout attributes to the column tag and looks like this: <td onmouseover=”web.src=’graphic/btnWebMO.png’;” onmouseout=”web.src=’graphic/btnWeb.png’;”> “Web” is the name of the image that will act as the link to my website portfolio. This JavaScript snippet says “When this table cell is moused-over set the attribute ‘src’ of the element named ‘web’ to btnWebMO.png” then if the user doesn’t click on that link and instead moves on the mouse pointer to another area of the screen the onmouseout code runs and does this – “When the mouse pointer leaves this table cell set the attribute ‘src’ of the element named ‘web’ to btnWeb.png”. Not so complicated when translated from code to English, is it?

Mouse-over effect turns image into button.

Rinse and repeat the above process until all areas where interaction is desired are interactive. Once I have the code written one time I just copy and paste it into the other cells and change the element name and the graphics it points to. This way of doing it is quick and easy. If you were to have more than just a few links or points of interaction you may want to create a separate JavaScript file and create a single method that could be used repeatedly. The benefit to having a separate JavaScript file and using short method/function names is to keep your HTML document less cluttered for ease of editing. When I begin to implement this layout into the Drupal CMS I will most likely create a separate JavaScript file to hold these methods and just have the onmouse events call them rather than having all the code written out in my HTML/PHP document.

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.

This will be the first part of a two(or more)-part series. As I’m redesigning my website I am trying to create a more visually appealing website using Adobe Photoshop. This first entry will start at the beginning, which for most things is a good place to start. In my experience the beginning of the creative process is the outside world: inspiration, muse, whatever it is. After that is the sketch, the prototype, and finally

Inspiration

My inspiration typically comes from other websites that I might happen upon as I stumble through the web. While I meander, I take note of trends as they come and go. Recently one trend that has caught my eye is the use of an almost ribbon-like background for site navigations, as referenced in a previous post. This simple effect gives depth and a trendy feel to a website. There have always been little flourishes like this in print, but now with the help of my good friend Photoshop and some HTML, CSS, and JavaScript we can take these static designs and transorm them into something interactive and funcitonal.

Another part of this design that I would like to emulate is a static top navigation where the body content of the page scrolls up into/underneath the navigation. This makes it so if you have a long page of content the visitor can still see and use the navigation regardless of how far down they scroll. This part could be tricky, but I’m always up for a challenge.

<tangent>On the topic of trends, another thing I have noticed lately is that more and more sites are ditching the idea of keeping pages short, rather than long. Many sites I’m seeing recently seem like they just have one long page of content and more of them are going to a blog-style format. This could be because it is coming easier to create and manage blogs and blogs are starting to look more like websites than blogs.</tangent>

Adobe Kuler Project

One final important part of the inspiration-gathering step is to think of a color scheme. It seems like a trivial aspect, but if you don’t have some colors in mind before you start trying to put your design together you are not going to get very far. This is one of the first questions I ask a client when we’re talking layout and design.

The website that I go to almost immediately before starting to put a design together: The Adobe Kuler Project is dedicated to color schemes. You can build your own or view and use what others have created. One of the great things about this site is that you can see and play with the various color values. You can punch in a CMYK or RGB value and get a HEX code for that color. Take the time to play around on this site.

Concept Sketch

Concept

Once you’ve gathered all the inspiration you can handle you will want to figure out how the various pieces fit together. This is still in dreaming mode. Some sacrifices may have to be made later on, but not quite yet. The good news is that if you’ve seen it done on a web page somewhere else it at least means it can be done. After that it just becomes a matter of how much time it will take to accomplish. I always start with pencil and paper. Pencil, not pen and start light. There will be a lot of erasing going on and I think graphite plants grow faster than trees… So it’s all good.

<tangent>I’ve tried to use various apps on my iPad to sketch things out and I just can’t get the precision I need. I recently saw a pen/stylus that supposedly works on the iPad. If I get one, I’ll be sure to let you know about it. My iPad may have to be the subject of an entry all on its own…</tangent>

After roughly sketching your concept, it’s prototype time.

Design Prototype in Photoshop

Prototype

This part of the process takes some amount of expertise with Adobe Photoshop. It is well worth familiarizing yourself with Photoshop, or Gimp if you prefer a more open source option. Once you’re comfortable with the tools it becomes much easier to recreate graphics that you see online or even from your imagination. The other nice thing is that there is a vast network of photoshop designers who take the time to create online tutorials. Google is your friend in this process. Simply figure out how to articulate what effect you’re looking for and add “photoshop tutorial” at the end. It can take time to figure out exactly how to phrase what you’re looking for, but it it well worth it.

After you beat photoshop into submission and get your design created it is time to duplicate and flatten (Image -> Duplicate). You won’t really need all those layers for your web implementation. Here is a great tutorial by Carlos Aleman that runs through the steps of Photoshop design to HTML.

After my pieces are designed I go back to pencil and paper. Now it’s time to figure out how to cut the design apart to make it easily fit into an HTML layout. This is where some concessions may need to be made after asking yourself and answer a few questions. Do you want to use divs or tables? Or some combination of both? What size will the various pieces be and how will they fit together? Where will your static design be vs where the dynamic content will be? For my website the only part that I really want to be a static design is the header which contains the navigation. The rest of the site will be dynamic content managed in the Drupal backend. I would like to use <div> tags as much as possible and avoid a <table> layout since this is where the standards are moving, but I may have to use a table for my navigation links.

Next time: Laying out the HTML, CSS, and JavaScript in DreamWeaver before trying to weasel it into my PHP Drupal Template and more!

To be continued…

The main reason for the update is to incorporate Drupal as a Content Management System(CMS). This will make updating my website much easier. It will also show potential clients or employers my ability to use a CMS and modify Drupal templates.

The updated version is currently in the Photoshop phase. It has been a while since I last used Photoshop to create a template and pieced it together. My most recent sites have been pure CSS. It will be the first time using Drupal and Photoshop together.

I’ve been seeing a ribbon effect used more and more for site navigations. They look great and they’re trending so I figured I would jump on the bandwagon.

The attached photo is a sneak peak!

Dtedwards.com V4 Sneak Peak