Tip - Get Inspiration Part II

By -
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. EnderMarch 8, 2011 at 3:15 AM

    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. CristoAugust 8, 2011 at 10:08 AM

    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. Kyle HorstAugust 8, 2011 at 11:54 AM

    @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

By -
Image
Hey, I'm Web Princess aka Beckystar and welcome to my first blog, thank you Kyle for having me! Using social media buttons to share your site or content is easy and expected by your visitors. Social buttons or icons facilitate the sharing of your site, content or blog and are now a linchpin of social media. It’s not enough to simply produce content these days. Your fans (hooray for them!) want a gizmo (I prefer gizmo to gadget) in place to allow them to share what they have read or seen with their family, friends and colleagues on Facebook, Twitter etc. Lucky for us there are some great tools out there. Next I have featured my top 3. 1. AddThis is my favourite. All you have to do is join, and it's free! However it does not work on google sites. All is not lost as good news! The amazing guys at AddThis have provided us with a google sites gadget. Go to your site, hit edit page and place your cursor where you want your social media buttons. Click on insert then more gadgets, in
Read more

RSS Feed for Google Sites!

By -
Image
A Reliable Gadget for Embedding your Feeds I was struggling just weeks ago trying to create a RSS feed that looked decent and accomplished what should be a simple task. This minor update caught me by surprise and I am happy to see it. I was using FeedWind to accomplish a RSS feed through an iframe, that means my html was hosted with a third-party and embedded onto the webpage via Mori79's iframe gadget (search iframe under public gadgets and it is the first one). The Slideshow Option. Not terribly useful, but nice. Anyways, no more iframes, just a customizable, easy to use Google-endorsed gadget. We at Kirksville Web Design have already fully tested out this gadget including the interesting display feature, slideshow. The slideshow only shows the title as a link and a thumbnail. It's not the most useful or aesthetically pleasing, but I'm all for options here. No Transparency Allowed on Hexcode for bg color. Here's the original post below. Enjoy! Better
Read more

New Google Sites Templates for 2023

By -
Image
So, it might have been several years since I've made a new post on this blog, but that doesn't mean that I've stopped working on Google Sites. This month specifically I have poured hours into designing premium Google Sites templates that go above and beyond the standard offering of Free Google Sites templates . I've enjoyed crafting these themes, utilizing all the new tools available to me on the platform.  Here are some quick screenshots, but if you want to explore the full templates, come on over to my website. 
Read more