My sidebar navigation directs viewers to the main content areas of my site. Below I have described how I created this effect.
1. I tore off a strip of paper from my sketchbook, considering the size and shape of the "buttons" I wanted for my side navigation.
2. I scanned in the torn piece of paper and refined the image in Photoshop to create a JPEG file suitable for the web.
3. I chose a font from dafont.com that reminded me of an old letterpress or news bulletin typeface.
3. I downloaded this image of a horned frog from the TCU Image Library and resized it to fit on my tabs.
4. I found this free watercolor background from Sad Monkey Design and altered its coloration in Photoshop. Sad Monkey offers a variety of backgrounds to complement any design scheme. They are free to use with no obligation; just consider crediting the designer somewhere on your webpage. (I really wanted to make my own watercolor background, but we're quickly running out of time and I don't have transportation on campus to pick up adequate supplies. If you have the time and supplies, you can also create your own watercolor background in about 10 minutes--just mix the colors you want, get some watercolor or sketchpad paper and splatter away!)
5. I added the watercolor background to my CSS style sheet, inserted the tab images, and linked to the appropriate page for each.
My only question about the whole background-in-sidebar thing: when I try to create a line break in my text, a blank white line appears between the lines of content. Does anyone know how I can prevent this from happening?
The whole process of creating the sidebar took about an hour to perfect the torn paper images, insert the text and horned frog logo, and adjust the watercolor background to fit my design. It was a bit frustrating at times but I believe it's well worth the time to add personal touches that will distinguish your site and capture the viewer's attention. How are you incorporating texture into your site design? How have you referenced your content and reform idea in your site's imagery?




