Tutorial: Make a “torn” 404 page for your website. (part 1: photoshop)

[25 Aug 2011 | By | 4 Comment(s) | 3,067 views ]

The other day I announced that i had a new 404 Page Not Found page for Dabbled. And it’s quite cute if i do say so myself. Just type some gibberish after dabbled.org/ in your address bar and you’ll see it. Or just click this: http://dabbled.org/sjdlfk.

So several people have asked how to do something like this themselves. Obviously you’ll probably want to do something different than I have, using an image or a theme that fits with your site.

So, to show you a slightly different take with this tutorial, I’m going to walk you through doing a 404 page for Foodwhirl.com.  Since foodwhirl is a recipe site, I’ll use a photograph instead of the little robot drawing, and an image more appropriate to food.  A search through Creative Commons licensed (I adore CC licensing!)  images on flickr found me this ‘empty refrigerator‘ image, which I thought would be cute for a Page not Found on a food site.

Part 1 will address how to create the image for use on your webpage.  Part 2 will explain how to make it part of your 404 webpage, even if you’re pretty clueless around code.  It will be written with WordPress websites in mind, but you should be able to take those principles and apply to any website.

Part 1:  Create the Image.

For this step I’m using Photoshop.  You could probably do this with other image software as well*

Get an image to use behind your torn background.

This could be a photograph or a drawing, preferably something funny that relates to your site.  If you have a crochet site, for example, a kitten tangled in yarn could be cute.  (oops, the kitten got into the yarn and now we can’t find your page!).  Maybe you want to have a picture of exposed gears like they are seeing the background machinery that makes your website work.  Use your imagination.

Get your site’s background.

Create a new image in Photoshop, at about 1000×1000 px, at 72 pix per inch, just to have plenty of room to work.

Make a new layer and make that the same color as the background of your site.

(If your site is a solid color, you’ll need that color.  If your site has a texture overlay as the background, get the texture.  Note, if you site is say white, with some blue designs on it, don’t worry about the designs, you’ll just need white.  You’re just looking for the primary color of the background of your site.  Foodwhirl is white, so that’s all I need for that.  For Dabbled I actually used the .jpg that creates the watercolor paper look on the site.  Taking a screenshot of the site background will also work   But minimally, you want to get as close to the site color as you can.)

The Torn Section: Sizing

Next you’re going to want to figure out how big to make your torn section. For Dabbled, my image is about 600×600 at it’s widest points.  You’ll want to take into account how much space you have on your screen, whether you want to overlap the header at all, and whether you want to leave your toolbars visible.  For Foodwhirl, I think I’ll keep the size about the same, or maybe a little smaller.

Estimate the size of your image by dragging guides to approximate the space.

I’m going for about 600×500 here.

  • Paste your image into a separate layer, shown above.
  • Turn your background into a layer if it’s not one already (rightclick to do so) and set it’s opacity to 75%.
  • Move it on top of the photo layer (shown below)
  • Turn off “Snap to Guides” (View|Snap To) and draw an odd shaped space with your lasso tool.

  • Once you have a shape you like (remember, you’ll need room to add text to this, so space accordingly), make sure you are on the solid background layer, and click ‘delete’.
  • Set your layer back to 100%, so you can’t see through it anymore.
  • Now Expand the selection by about 6 px. (on my old PS version that’s Select|Modify|Expand)
  • If you like, you can nudge the select a pixel to the right using the arrow key (makes it a little less uniform).
  • Now,  create a new layer, and fill the shape with any color you want.  Hide that layer (you’ll need it later).
  • Go back to your background layer.

Your Torn Edges

The area you now have selected is the area that will simulate the thickness of the paper where the multiple layers show up when you tear it.

Color-wise, you’ll want to think about what color you would see if you tore paper that is the color of your background.  A red background, for example, would probably look dark pink inside.  A creamy background could get away with white.

For my pure white background, I’m going to set both my foreground and background to a very light offwhite/cream color, and use the Torn Edges filter, as well as the Add Noise filter.

You’ll want to play around with this to get a good effect.  Experiment with different colors and filters depending on your background.

This is really subtle (maybe too much so) but this is what mine looks like zoomed to 280%

zoomed torn edges

Next we add some depth, the quick and dirty way.  Our good friend the dropshadow layer style.

Play around with the settings, but this is what I used for mine. (Click to view larger)

Now we have our photo, we have our background with torn edges, we just need to cut it out.

  • First, merge your background color layer, with the image layer.
  • Remember that layer I told you to create earlier, and just fill the shape with any color?
    Go unhide that layer, and click on the shape with the magic wand tool to select it.
    Now go back to your merged layer, Select Inverse, and delete.
  • (OK, for this example you really don’t have to do it this way, as you could just select the white background, but this is a simple methods and works with all backgrounds, even textured and multicolored.)

All that will be left is your lovely torn out piece!

  • Trim this (Image|Trim) and Save For Web as a PNG.

Look, we made a hole!

Note, I don’t think this is quite as effective as the one on Dabbled, as the watercolor paper leads to a better effect than just the plain white, but it’s still pretty cool.

So, next will be part two where I explain how to make it part of your webpage:  Torn Page Tutorial Part 2: Put a cool graphic on your 404 page (WordPress).
—–

*I’m a photoshop girl myself, but if you don’t have it… there’s a learning curve, but I recommend Gimp for those who like free and powerful image manipulation. 

This entry was posted in Tutorials/Tips, website design. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. 3,067 views

4 Comment(s) »

  • Chica and Jo [] :

    What a clever idea! Love your design!

  • Dot [] (author) :

    Thanks! I’ll have the rest of it up tomorrow, i hope!

  • tonia [] :

    Keep up the great work of providing us with useful information.

  • CT limo [] :

    Quality content is the important to invite the users to visit the web page, that’s what this site is providing.