Make an Instructables Header




About: I like to make things for the internets. I also sell a pretty cool calendar at You'll like it.

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.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Make the Logo

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.

Step 2: Painting

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.

Step 3: Attach Supports

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

Step 4: Place Logo in Scenes

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.

Step 5: Out Damn Spot!

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!

Step 6: Scaling It Out

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.

Step 7: Clean Up the Colors and Cut It Down

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.

Step 8: Other Headers

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!

Be the First to Share


    • Made with Math Contest

      Made with Math Contest
    • Multi-Discipline Contest

      Multi-Discipline Contest
    • Robotics Contest

      Robotics Contest

    14 Discussions


    8 years ago on Introduction

    what do people without laser cutters (me) supposed to do when a 'ible calls for one?


    9 years ago on Introduction

     "And the new feature on Instructables, coming next spring to Pro Users. Content aware fill. 

    Normally, writing a full instructable would take hours. But with Content aware fill, you can achieve professional results fast. Lets take this as an example. You have started an instructable. "101 uses for paracord", Press the auto-fill button, and content aware fill completes the rest of the instructable based on the title you entered. You can even see it has generated relevant images and attached them to the instructable."

    Personally, I think the "full sized" photos rather than the thinner final images. 

    3 replies

    Reply 9 years ago on Introduction

    wasagi: a peasant with your head on fire!
                            TROGDOR !!


    9 years ago on Introduction

     Now if it can be incorporated with lasers......


    9 years ago on Introduction

     I saw a video of the new content aware features. Can not wait to have a go, its that kind of tool that makes my job so much easier. Alot of work I do in photoshop involves removing things.

    Perhaps it would be a good idea to add a video screencast of the new tool? Its hard to see what is that different to the CS4 cloning tools otherwise!

    Also, super bonus points for creativity, too many people would have just sat infront of photoshop and done this, its great that the entire thing is mostly photography and real, and photoshop is just a tool at the end.

    1 reply
    fungus amungusgmjhowe

    Reply 9 years ago on Introduction

    It is awesome. It's all stuff that I could've done before, but now it's way faster. My wife also dug it because she had some work that involved extending images out and the content-aware fill gave her a huge head start.

    I might be able to do a screencast. Don't know if I'll be able to get it done this week, though. I'm off for the next couple days for a trip down to LA.