Posts Tagged ‘grunge’

We’ve created our table, our table image an we’ve begun to style it. The next step is to enter our content. Let’s remember the whole reason for doing things this way, we ant to make sure most of the table can be indexed by search engines like Google. At the end of this lesson I’ll let you download the code, related images and PSDs to help your understanding.

1. 1. In part three we began styling our table but we didn’t get around to styling the contents. Let’s do that now.

<style>
#grunge_table {
width:600px;
height:250px;
border:0px;
background:url(grunge_table.png) no-repeat;
color:#a24235;
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
}
</style>

2. 2. Next we need to create and style bullets that will be used to cross-reference services to options or items in our table. We’ll do this by styling the table rows to our liking (td). Take a look at the following snippet from the stylesheet:

td {
padding:0 0 0 20px;
}

3. 3. Now we can insert characters into our cells. I chose to use “x” as my bullet.
4. 4. Wow, not that many steps and we’re already done! Here is another visual to help demonstrate what’s going on.



Now all that was a lot of work for something that could have been completely done in PHotoshop. What’s the big deal? Why do we even want a XHTML table?

Why XHTML?

Here’s my reasoning. Anything in our first column is machine readable text which means that search engines can index it. Having those extra keywords will improve your ranking as well. Second, we can get creative with our “bullets” if we wanted to have fly-out effects with javascript or roll-over effects with ajax hidden within the table we can easily do that by adding a few lines of code. Using an image prevents most of this. Lastly, because our bullets are actual XHTML objects, if we want we can mark them up with contextual keywords and hyperlinks.



This concludes the lesson. Click here to download the files used and see if you can reconstruct what I did. Of course if you’d like to see and example in the wild visit this site.

PART 1 | 2 | 3 | 4

Del.icio.us
Digg This
Stumble
0 Comments

Now that you’ve designed your table it’s time to learn how to make it function as valid XHTML. The easiest way is create a hidden table on top of the image.

1. 1. Create a table with the same number of rows and tables. My image had 8 rows and 9 columns.
2. 2. So we’ve got our table, now we want to style it with CSS. Give it a div id=”". For the sake of this tutorial of ‘grunge-table’.
3. 3. In your stylesheet reference the new id and call the image. Don’t forget to include the width and height of your image like so:

<style>
#grunge_table {
width:600px;
height:250px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

4. 4. Now, your table isn’t exactly going to match the cells of your image just yet. The best way to make it do this is to figure out the measurements of the columns and rows of your table image in photoshop. If you look at the images below, you’ll see what my table looked like before and after i fixed the columns and rows to match the image.

Before:


After:


The Code:

<table id="grunge_table">
  <tr>
    <td width="192" height="72"> </td>
    <td width="44"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="45"> </td>
    <td width="46"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
    <td width="43"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="26"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td height="24"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

5. 5. I used Dreamweaver to give you a visual representation of what’s going on. The green numbers at the bottom of the lower picture show the widths that the columns have been adjusted to. In the lower pic you’ll see that the table now matches the image perfectly.
6. 6. Now that the dimensions are correct, we need to hide the table setting the border to 0px. Here’s what your stylesheet code should look like:

<style>
#grunge_table {
width:600px;
height:250px;
border:0px;
background:url(grunge_table.png) no-repat;
}
</style>
</head>

We’ve got our hidden table, in part four we’ll fill it with data.

PART 1 | 2 | 3 | 4

Grunge Tables with Photoshop and XHTML (Part 2)

We’re learning to make grunge tables. In Part 1 we made a simple table, in this lesson we’ll add some grunge and text to make it look unique, and in the final lesson we’ll mark it up with XHTML.

Make It Grungy

1. 1. Import two of the textures you’ve downloaded from Bittbox.com. I chose a grainy one and one that looked a bit like crumpled paper. Feel free to use one, two or several, the more you use the more grungy things will look.
2. 2. Set the topmost grunge layer to Overlay and set the opacity to 75%.
3. 3. Set the lower grunge layers to Soft Light. This serves to preserve your original colors.
4. 4. Play with the other Opacity levels as you see fit.

Dirty Words

A grunge design deserves matching text. Start by downloading some grunge fonts from dafont.com (1, 2) and installing them on your system. Once you’ve installed your new fonts, relaunch Photoshop so that you have access to them. Once you’ve found the font that works best for your design, start working on adding a title or company logo.

If you do decide to add an existing logo you may want to alter the colors to help it match your design. Set the Layer Blend Option to Overlay. Use the grunge brushes you downloaded in part one to make what was your normal logo look even more grungy.

Because you can’t write diagonal text in HTML, we’re going to add the titles for our columns in Photoshop. Don’t worry everything in the rows will be HTML which will allow it to be indexed by search engines. I chose to use a more traditional font, Helvetica, which will match the styled text I plan on using later in the XHTML markup.

PART 1 | 2 | 3 | 4