loading
Picture of 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.

 
Remove these adsRemove these ads by Signing Up

Step 1: Make the logo

Picture of Make the logo
sign_making_2.jpg
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

Picture of Painting
sign_making_4.jpg
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

Picture of 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

Picture of Place logo in scenes
IMG_8041_process2.jpg
IMG_8041_process2.jpg
IMG_8041_process2.jpg
IMG_8041_process2.jpg
IMG_8041_process2.jpg
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!

Picture of Out damn spot!
IMG_8041_process3.jpg
IMG_8041_process4.jpg
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

Picture of scaling it out
kitchenshot_8041_process6.jpg
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

Picture of 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!

Pfarmkid3 years ago
what do people without laser cutters (me) supposed to do when a 'ible calls for one?
solo.card5 years ago
 "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. 
Ahahahahahahahahaha
They are headers for the "home" page.  Go, see.
 I noticed, but I still prefer the originals!
It just hit me: is the logo just slightly blue or is it me?
It is.
Probably just the light.
Wasagi5 years ago
 You could make a really cool pin out of this!!!
luvit Wasagi5 years ago
wasagi: a peasant with your head on fire!
                        TROGDOR !!

trogdor.png
He comes in the night!!!!!!
Wasagi5 years ago
 Now if it can be incorporated with lasers......
gmjhowe5 years ago
 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.
fungus amungus (author)  gmjhowe5 years ago
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.