//, Photoshop/Grunge Tables with Photoshop and XHTML (Part 2)

Grunge Tables with Photoshop and XHTML (Part 2)

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.

grunge tables

PART 1 | 2 | 3 | 4

2010-05-25T21:53:08+00:00 May 24th, 2008|HTML, Photoshop|0 Comments

About the Author:

Leave A Comment