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!