Make an Instructables Header

The Instructables header has always been pretty straightforward, but we thought it would be fun to play around with some images up top that relate to making things.

To make it a little more interesting, we didn't want to add any elements to the photo later in Photoshop. We could tweak the images a bit and remove stuff, but nothing could be added. This meant that the logo had to be really in there.

Thanks to Adobe for letting us test an advance copy of Photoshop CS5 to get this effect quickly and easily.

We love laser-cutting stuff and this logo was no exception. The logo here is cut from 1/8" white acrylic on our Epilog laser cutter.

The letters were lightly cut so that the protective layer on top was cut through without digging very deeply into the acrylic. This makes it so that you can remove just the letters and the rest of the space is still covered.

With the protective layer acting s a stencil it's easy to spraypaint the logo onto the acrylic. I masked off the sides with some masking tape and use a couple coats of black spraypaint.

After that it's easy to remove the protective layer. The only trick is to get the little islands inside a few of the layers. Just get the tip of the blade of an X-acto knife in there and it comes from off.

The supports for the logo are just a couple of pins attached to the back with small pieces of gorilla tape.

In this scene we used a cutting board, the logo, and a knife. Very simple.

This scene was unique in that the pins would not stick into the cutting board since it's very hard. A third leg made of some more gorilla tape and a safety pin was attached to the back. Fortunately, this also made it work out so that the logo was facing the camera.

The lime is there to provide emotional support for the knife.

The coolest tool here is the improved Spot Removal Brush. A couple brush strokes and POOF! the pins are history. This wouldn't have been too bad of a task before, but now it's just amazingly easy.

Seriously, removing the two pins took all of 10 seconds. It's like magic. Sweet, sweet algorithmic magic.

And to get rid of the logo on the knife? Just another use of the Spot Removal Brush in a few more seconds. Awesome!

After making the image and dropping it in to the new design it became apparent that the knife was too close to the logo. It was dominating the menu items and I wanted it to be a little more subtle so I needed to move them apart.

For this I used content-aware scaling. By default this scales the picture and keeps the areas with more details intact as the more similar background gets squished or stretched. This wouldn't work since the logo has white areas that got stretched like taffy. Here's how to keep the logo and knife just how we want 'em.

1. Make a selection that includes the elements that you don't want to be altered
2. Save the selection with some fancy name, like "stuff"
3. Select Edit > Content-Aware Scale
4. In the Protect pulldown, select "stuff"
5. Stretch the image

Presto change-o, there's now plenty of room for the menu items to appear.

After the pins are quickly removed, the rest of the work is just playing with the levels for a bit and then there's just a bit of prep work to send to the coders so it can be used as a new header. This simply involves turning the logo itself into a new layer so it can be a button on the site.

And with that we have a new header that did not add anything later and involves the logo in different scenes. It fits in with our own DIY ethos and with the help of Photoshop CS5 we could go faster from idea to image.

This process was also used on the 4 other headers for the week. Here you can see before and after shots of the different themes.

Thank you for reading!