Using Helpers and Blocks to easily add design to your site

By Eric Berry
April 8, 2009

I bought the program Coda by Panic software. It is a pretty cool app, even though it is not my preferred editor. One thing that I love about Panic software is they make beautiful interfaces.

In this tutorial, I'm going to show you how to create a 'sheet' similar to those found in Coda. Here's a screenshot of what I mean:

Picture 1.png

Step 1. Generate the design in Photoshop

So let's create the mockup in photoshop. First, let's create a new image canvas. The size will be 400x400.

Picture 2.png

Picture 3.png

Fill in the background with any color. I chose #6e6e6e. Then, using the Rectangle Tool, create a white box in the middle of the canvas.

Picture 4.png

Now, using the layer style tool, add a drop shadow to the box you just created.

Picture 5.png

Step 2. Cut up your design into usable pieces

Ok.. now we have what we want. Let's cut it up. What we are going to end up with is 7 images, all 24-bit png format. We want to capture the top-left, top-right, left, right, bottom-left, bottom-right and bottom shadows. I used the guidelines to create the parts I will cut out.

Picture 6.png

So after we know our guidelines, let's create the 7 images. But first, we have to flatten the shadow. To do this, add a new layer on top of the box layer, then select both layers using shift-click, then select 'merge layers' from the layers dropdown menu (Command E).

Picture 7.png

Now cut out the 7 sections as shown below and create images from them. Export them using the PNG-24 preset. You can download the 7 images I created in PSD layers and seperate images here.

Step 3. Create the HTML mockup of the 'sheet'

Now that we have all the images we need, let's create an HTML mockup of the 'sheet' view that we want.

You'll notice I am using a 'spacer.gif' image in a few of the td's. This is used b/c some browsers will not render the style of the td unless there are contents inside of it. spacer.gif is a 1x1 pixel transparent gif.

Step 4. Create a Rails View Helper to allow us to pass a block to the contents

I am going to assume that you have a rails app already in place. Let's place the helper in the app/helpers/application_helper.rb file.

Notice that I embedded the CSS code inline with the HTML. This is one of the few times where that is a good idea. By doing this, we are not dependent on having a CSS file and linking it in the HTML.

I also am accepting *args as a parameter. This allows me to set the width of the table by simply passing in a number to the helper from my view.

Make sure you put your images in the public/images folder, or wherever you would like to keep them. If you put them elsewhere, make sure you update your helper accordingly.

So let's give it a try. In any view of your application, create a new block with some contents.

Notice that I am passing in 500, which forces a 500 width to the table.

And here is the result:

Picture 8.png

This is a powerful way to use helpers in order to create quick, sexy content on your websites. One thing you may notice is that the bottom shadow appears chopped on the ends. To fix this, all you would need to do is bring in the guidelines to overlap the white box a bit prior to chopping it up. This, however, would force you to use a white background instead of being able to change it.


You might also be interested in:

News Topics

Recommended for You

Got a Question?