First I want to talk about the long herringbone pattern that essentially looks like a long arrow. I made this graphic from scratch in photoshop. Yes, from scratch.
I started with a small square image, hand traced, or mouse trace, an imperfect square around the perimeter. This would be literally the building block for the bigger graphic. My first intention was to have it be the background image, but after I finished I found it way too busy for that.
Anyway, from the block outlines I made a variety of colored blocks using my color scheme. Then I proceeded to literally build one outline block at a time the herringbone pattern, minus the color, for the graphic. It started with 1 block, then 2, then 4, then 8, 16, 32, 64, etc etc exponentially until I had an entire row, which then became 2 rows then 4, 8, 16, 32 until I had a page full.
Then I added the colored blocks one at a time and dispersed them it would look even.
After I had a small patch, I just merged all the colors onto one layer that I could then repeat for the whole pattern. I no longer have the whole image colored, but you can imagine what it would look like: busy. Just way too much for a background.
But then while coding for the header elements, I felt I needed some sort of line graphic and thought of just one row of this pattern that would form an arrow.
The black outline made it look very heavy, but remove it and keep just the color and it's perfect!
I added it right below the page tabs to sort of anchor them and give them support. It also had the benefit of directing the eye towards the logo. But I thought it was a little unbalanced, so I added an other one above the main nagivation. I inverted the orientation of the arrow, as I found this balanced out the whole thing better.
Then, to make it fit more with the logo, I wanted them to overlap and the arrows to go slightly behind it. So I set the position of the logo to relative, and the z-index to 2 (you need position relative for the z-index to work, I learned this the hard way). High z-index means more on top. Then I set the position relative of the arrows to left -5%, but that meant the arrows were no longer aligned with the right side of the header container. I remedied this by increasing the size of the image. Both arrows are under their own span, and I had to put the css for the image of that span for it to work (ex: .arrow img{ width:105%; }. I increased the size by the same percentage that I moved the arrow to the left.
The very last part was the tagline. I went back and forth between 2 sayings. 1) Learning the Art of Homemaking and 2) Experiments in Homemaking and handcrafting. For now I'm going with the 2nd as an ode to my science/research background. But it could change.
The font is Halo Handletter, and the tagline is an image. That way it will be responsive. I cropped the image as tight as possible around the words, and positioned it where I wanted using padding. I had to set all but the right padding so that all the elements in the header would be where I wanted them to be.
And just like that, the header was DONE! For now...
No comments:
Post a Comment