Pages Navigation: Graphics

Continuing from where I left of in the last post about Pages Navigation organization... Now that I know what I want the labels, or pages, to be, I also had a very defined way I want them to appear and look.

I wanted them to look like file tabs, like in filling cabinets, but also be a bit whimsical and not the simple file tab shape we're used to. After some doodling on a piece of paper (I'm not very good at hand drawing things, or being creative with drawing), I managed to draw up some pretty cute looking tabs, don't you think?!


I scanned the piece of paper and opened it up in photoshop. I wanted to try to extract the shape somehow, but that didn't work out too great. I tried selecting the shape (ctrl + click on the layer and it selects the black part) and then painting the selection black, but again that didn't work very well.

So in the end I ended free hand, or free mouse drawing over the shape I had scanned. I was also able to correct when it wasn't quite as smooth as I wanted. I also tried a few thickness and settled on the medium one. It was more pixelated than I wished it was, but once it's the size you see on the blog, then it really doesn't show that much. This makes me want to try making vectors instead, then I wouldn't really have pixels. But I don't want to learn that right now, so this will have to do.

Then I wrote in my tabs, with the font Pea Ashlee Renee I made the font as big as I could while keeping it uniform for all of the labels.

Finally every label got treated to a bit of color by duplicating and coloring the tab doodle, and tilting it a bit so the black tab also shows underneath. I tried just having the colored tab but I dunno, I find with the black one in the back it gives off a better doodle vibe, which is what I really wanted.



The only thing I'm not entirely happy about is that because I freehanded the tab outline, it's a little pixelated and not as smooth as a vector art would be. I'm looking into doing the doodle with Adobe Illustrator, which should help make the outline more fluid and hopefully less pixelated.

Anywho, the real magic of these tabs is in the coding and behavior of these graphics on the webpage. Normally, they appear a little transparent, so that they don't command too much attention, but are still visible. But when you hover over them, or click on them, they become fully opaque (no transparency) and move up just a bit. It was super easy to do, too, just change the positioning and transparency on hover! Go ahead, try hovering over them or holding down your finger on them. I'm pretty proud of myself!



One part of the header down, 4 to go!