Thursday, January 6, 2011

Tip - Get Inspiration Part II

So, I thought I'd make another mock up, since that seems to be my fancy for the month.  This one was a bit more difficult.  Take a look below or click to visit beanstalkapp.com.



Notice the centered horizontal navigation - that's not doable with Google Sites, only left orientation.  There's a nice color scheme here.  A three column followed by a four column format towards the bottom with little icons.  The image hugging the bottom of the brown header is a nice effect.  Let's see how I did below.


Here's what I did to make it:
  • Background and Title are together one graphic, uploaded to background wrapper, aligned top-center.  Made with GIMP of a desaturated pattern and inverted pattern over brown and toggled for opacity.  The text is the Lobster font with light gradient from top to bottom of text and a focused drop-shadow.
  • Navigation is a unique html color hex code set in content text color and link color.
  • Subtitle text is yellow image of text over alpha-layer (transparent).
  • Three column complex page layout.
  • Content footer is the image cropped out to exact pixel height to be flush with end of brown background, it's a .png file with no saved background color and use of opacity toggle on layers.
  • Content footer is manual spaced out with inserted icon images with deleted divide html.
I had a lot of fun with this one too.  Let me know if you want me to try another website.  Just no crazy flash websites plz =)

Related Posts Plugin for WordPress, Blogger...