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 =)

Comments

  1. Excelent posts and, as you said, very inspirational. You are showing that Google Sites its way more versatile than what most people imagine. Keep them coming!

    ReplyDelete
  2. any chance you could help me figure out the opacity toggle you mention? where or how can I do this? thanks a lot

    ReplyDelete
  3. @Cristo

    In GIMP, you will see on the Layers toolbox the capability to handle opacity for each layer. Normally this is set to 100% for no transparency. However, you can toggle this sliding bar to make it more or less see-through.

    Make sure the image is either a .png or .gif as those handle transparency.

    ReplyDelete

Post a Comment

Popular posts from this blog

Tip - Using Social Media Buttons

RSS Feed for Google Sites!

Google Sites Tutorial - Background and Favicon Design