Move to the head of the website

When I started illustrating the header for the new website, I knew I wanted something whimsical, and something that would tie directly to the name of the website, which is a reference to a song by The Gothic Archies called “Shipwrecked”. It was the first dance song at our wedding reception.

I started out the same way I start out any graphic design project, by sketching a few things out. Sketches are always the best way to start. If you don’t, then there are a lot of ideas you’re just letting slip away. Get it down on paper!

As a bonus, you can see my scribblings about USB plug pinouts. I had to repair my Wacom tablet recently.

I get the sketches into Photoshop using my cameraphone. I don’t really scan sketches into photoshop. Snapping a quick shot with my iPhone and dropping it into dropbox is much easier and faster, plus I can get sketches into the computer when I’m away from the computer and the ideas are still fresh.

The first idea I had was to make the banner all handwritten. While I liked the idea, it lacked something. This needed to have more color and texture since it was going to sit at the top of the site for a while

I got the idea to make it look like cut paper right before going to bed that night. I think I was headed out of the studio, and I saw a piece of paper on the floor. I copy-pasted the lineart from photoshop into Illustrator and started to draw out the shapes.

After drawing out all the shapes, I wanted to have some sense of depth to the piece, just to give it that cut paper finishing touch. Drop shadows are the devil, so instead of using a mechanical process to put those in, I copy-pasted the shapes into Photoshop. At the always useful http://cgtextures.com/, I found some paper textures that I dropped into a new layer and set the transfer mode to multiply. Then, I made a mask over the paper texture layer and filled it with black. After magic wand selecting the background “behind” whatever piece I wanted to shade, I took a large soft brush, set the opacity to around 25%, and started to paint the mask with white. This worked wonderfully, and gave the shadows an organic quality that just setting a drop shadow would have lacked.

That’s basically it! Just shade underneath each shape until that sense of depth is realized. The finished result is at the top of the site!

Submit a comment

5 Comments

Submit a Comment

We would love to hear your thoughts. Feel free to submit a comment and join the conversation!