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

Grunge Tables with Photoshop and XHTML (Part 1)

If you offer web design or graphic design services at some point you’re going to need a price chart or service list so that potential clients can see what you’re all about. In this multi-part tutorial I’ll show you how to make one in Photoshop and then mark it up for XHTML. Then I’ll let you download the files to double check your work. You should download some grunge brushes and textures before hand, I used textures from Bittbox.com and these brushes from photoshopbrushes.com.

create grunge table

Before we continue, I want you to know that there are many other ways to achieve this effect. You could create the design in Photoshop then slice it for XHTML. You could create a table in Photoshop then just code an image-map for it. Of course, you could also do this using only tables and CSS. Since this section of the blog is about Photoshop, you’re going to learn how to do it using everyone’s favorite graphic design program.

One more thing, it will help you 100% if you sketch out what you need prior to making the grid. You can do this freehand or in a spreadsheet program like Excel. This is to simply help you organize your thoughts and layout your items in the best way possible.

Without further interruptions, let’s start part one of our lesson.

Setting The Table

  1. 1. Create a new document roughly the size of the table you want.
  2. 2. Select “New Fill or Adjustment Layer” and then “Solid Color”. Pick the color of your choice.
  3. 3. Select View >> Rulers and then View >> Show >> Smart Guides.
  4. 4. Drag the mouse from the top ruler to the areas in the document where you want the horizontal bars of your table. I suggest placing them apart in multiples of 5 or 10 so the math is easy. Space them apart so that every line alternates in color. (ex. Black Red Black Red)
  5. black red

  6. 5. Create your bars using the rectangle tool. Use black as the color.
  7. 6. Group your horizontal bars in a folder and name them. Mine was called “Horizontal“.
  8. 7. Set the “Blend Layer” of this folder to “Soft Light” and the Opacity to “45%”
  9. 8. You now have a darker shade of the color you chose for your horizontal bars that alternates with the original color.
  10. 9. Now let’s repeat steps 3 through 5 for our vertical bars. Space them a part equidistant and uniformly.
  11. 10. Select one of the vertical bars and change their “Fill” to 0%. In “Layer Style” select “Stroke” and set it to 1px (Outside). Do this for all of the vertical bars. Set the Blend Mode to “Overlay”.
  12. 11. Create a new layer and select the line tool. While holding Shift and Option drag from the top corner of a vertical bar outward diagonally. this creates the vertical lines you see at the top of my design. Once you do this, duplicate each line then group them all and set the group Blend Layer to “Overlay” and an Opacity of “46%”.
  13. 12. Looks like we’ve got the beginnings of a fancy looking table already!

In Part Two we’re going to grungify our table.

PART 1 | 2 | 3 | 4

2010-05-25T21:53:21+00:00 May 23rd, 2008|HTML, Photoshop|1 Comment

About the Author:

One Comment

  1. […] A wrote a tutorial a while back about how to make XHTML tables that could be marked up with PHP, Javascript or Ajax. If only I had […]

Leave A Comment