Jan 30

Google Simple, Apple Elegant

Posted on Friday, January 30, 2009 in General Tips, Marketing, Web Design

When designing a website or print work I can’t stress enough to K.I.S.S. (Keep it simple stupid). When somebody comes to your home page it should be clear what you want the visitor to be informed with. A good way of doing this is to give a brief description of each item (max 4-5) making your newest/best item the most prominent, and giving the visitor a CLEAR CALL TO ACTION on how they can reach this information. I’m sure you have heard people say “Where do I click?” or “Where do I go?” take out the guess work, people like things easy. An entrepreneur friend of mine lives by the motto “Google Simple, Apple Elegant” and Apple is a perfect example of the clear call to action. Visit their home page and you will notice there is no confusion on what Apple wants to share with you or how to get to that information.

google-simple-apple-elegant

Revisit your website with a fresh set of eyes and see if your website is overwhelming with content, offering 100 different paths to take or if it’s clear where to go with the important stuff.

When designing for the consumer just remember you can get your design lookin’ darn sexy while keeping the users experience easy by keeping it Google Simple, Apple Elegant.

Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...
Jan 28

Download Nintendo Rock MP3′s

Posted on Wednesday, January 28, 2009 in Music

Awhile back I posted my rock version of Zelda and Castlevania on youtube both got some attention and people were wanting to download the songs. Well here ya go! You can also download some other tunes I was having fun with that I recorded in the same session.

Left click to listen, Right click and go to Save As… to download.

Enjoy the songs! Comment on what you think.

Rate this post:
(10 votes, average: 4.60 out of 5)
Loading ... Loading ...
Jan 27

Make your videos look professional!

Posted on Tuesday, January 27, 2009 in Tutorials, Video

With a few simple steps using Adobe Premiere Pro and Adobe Photoshop you can get your films looking like Hollywood blockbusters. Checkout what we’ll be creating: CLICK HERE TO VIEW THE BEFORE AND AFTER VIDEO!

Profesional Videos

Here are the things added to make it all happen:

  1. Changed the color and contrast to give it a warm, epic feel.
  2. Added grain for a film like look.
  3. Added the hard breathing and footsteps SFX before you actually see the feet running.
  4. Added epic music with the help of VideoCoPilot.net
  5. Create the castles in photoshop then imported them into Premiere Pro with transparent backgrounds.
  6. On the castle scene I added digital motion (scaling, position) to give it less of a static feel, because these scenes were filmed on a tripod.

Comment below if you would like a more in depth tutorial on any aspect of this video!

Rate this post:
(1 votes, average: 5.00 out of 5)
Loading ... Loading ...
Jan 26

10 SEO Tips [that work]

Posted on Monday, January 26, 2009 in General Tips, Marketing, Web Design

Here is a list of SEO methods I find help crack the magical SEO challenge of getting your website higher up in the rankings.

search_engines

Title Tags:

  • Your title should contain important keywords.
  • Use a different title on every page.

Links need titles too:

  • Add a title tag to every <a> tag and give a short description (5 words) what the link is about.
  • Tip: Be honest and don’t just cram random keywords into this section.
  • EX: <a href=“about.html” title=“Come find out more about us”>About Us</a>

Image Alt:

  • Add the Alt attribute to all of your images.
  • EX: <img src=”gnomes.jpg” alt=”A bunch of happy gnomes” />

Be standard:

  • Validate all of your work.
  • Search engines / Spiders like websites that are created properly.
  • Validate your site via w3c – Validate Now

Use common tags:

  • Be sure to use the <H1>, <H2>, <P> and other common tags.

Link around:

  • Make sure you have links coming in to as many pages as possible.

SiteMap:

Submit your site:

  • Submit your site to Google and Yahoo
  • You only need to do it once this is just to be safe.

Local business center:

  • If you type in “restaurants 92106″ into google maps it will give you a listing of local restaurants around the area code 92106.
  • To get your site to do this, add it to Googles Local Business Center Click here to add your site

Helpful tips:

  • Get the word out by adding your URL to any account you have online (facebook, myspace, youtube account…)
  • Help people out on forums (people wit questions) and have your URL in your signature, Don’t spam. Help and they will come.
Rate this post:
(1 votes, average: 4.00 out of 5)
Loading ... Loading ...
Jan 22

Cheap lighting Set-Up For a Low Budget Film

Posted on Thursday, January 22, 2009 in Video

A much needed and easy way to make your films look much more professional is to add lighting. If you don’t have the bucks to dish out for a $1000+ lighting kit, I’ll show you how to make a kit that will definitely do the trick for about only $35!

What lights to use?

work_light
  • Go to your local Home Depot or hardware store and pick up three 500watt work lights (about $10) like these ones. Try to get ones that have a low and high setting. Usually one push to the button on the back will give you 250watts (low) another push will give you 500wattts (high) and a third push turns off your lights.

Get your work lights looking better!

  • Make sure to take the cover (black bars) off the light.
  • To kick you lighting up a notch put wax paper over your light to diffuse it and give it a softer /warmer look.
  • You can also go to the 99cent store (or any store that sells folders) and buy see-thru colored school binders/folders, cut them up and place them over the light to set the mood in blue, red or any color you can find. This acts as a filter.

How do I use this kit?

  • This kit works great for Three point lighting [web info on 3 point lighting] [youtube tutorial]. Simple terms: in three point lighting you aim one light on the actors left side (Key light, 500watts) another light on the actors right side (Fill light, 250watt) and another light on the back of their head (Back light, 500wats).
  • Set the lights on a chair, table, anything that will get the light off the ground and to the height you need.

Other Tips.

  • Pick up two more work lights and use them to light your backgrounds. This works great with the colored filters (see-thru folders). CSI is notorious for this (notice the blue lighting in the background on the image below).

CSI Lighting

Play around with your set-up and see what works best for you. Hope this simple tip helps you out in your quest to express and entertain!

Rate this post:
(4 votes, average: 5.00 out of 5)
Loading ... Loading ...
Jan 21

How Google Analytics Tracks: Avg. Time on Site

Posted on Wednesday, January 21, 2009 in General Tips

If you’re confused why the average time for a specific visitor is 00:00:00 or is flat out lower than you’d expect don’t dump your adwords campaign just yet.

google-analytics

Google analytics needs at least two points (A and B) to track time. So if a visitor comes to your home page (point A) and looks at information for 1min and then click through to your about page (point B) on that click analytics records current Avg. Time on Site and will read as 1min. Now on your about page the visitor spends and additional 2mins and exits (google needs another page to record time) their Avg. Time on Site will still only read as 1min even though they spent 3min total on your page (1min home page, 2min about page). This is because Analytics did not have an ending reference point to calculate the time.

Basically analytics tracks Avg. Time on Site from page to page (when it calls the tracking code) so the last page the visitor views will not be included in their Avg. Time on Site. With that said if a visitor comes to your home page (point A) and exits no matter how long they were on that page their Avg. Time on Site will read as 00:00:00.

Hope this helps!

Rate this post:
>>Be the first to rate!
Loading ... Loading ...
Jan 20

Quick Real Estate Photography Enhancement with Photoshop!

Posted on Tuesday, January 20, 2009 in Photography, Tutorials

We will learn how to take the dark gloomy non attractive interior photo and turn it into a light and bright inviting home with a few simple steps in photoshop. Below is the before (left) and after (right).

Before After

Open up your image in photoshop and Let’s get learning!

1. Let’s make the dark areas lighter and the super bright areas a little darker.

  • Goto Image > Adjustments > Shadow/Highlight…

-Shadows: Takes all of the dark areas and makes them lighter.
-Highlights: Takes all the light (blown out) areas and makes them darker.

Play with the sliders until your photo is looking like you would like it (Don’t over do it). Generally Shadows +30ish and Highlights +5-10. Then click OK.

2. Let photoshop do some work with auto adjustments:

  • Goto Image > Adjustments > Auto Levels
  • Goto Image > Adjustments > Auto Contrast
  • Goto Image > Adjustments > Auto  Color

3. Let’s brighten up the picture.

  • Goto Image > Adjustments > Brightness/Contrast…

Generally raise the brightness +30 and to give the image some dynamics slightly up the contrast +10. Again play with these numbers to best fit your photo. Press OK.

4. Let’s make the colors really POP!

  • Goto Image > Adjusments > Hue/Saturation…

The only slider you need to worry about is the saturation (middle) one. Raise the levels to best fit your photo, generally +20-30. Click OK.

5. Let’s sharpen this puppy up!

  • Goto Filter > Sharpen > Sharpen Edges

This will make the image a little more crisp without overdoing it!

Vuala, now you have a more inviting light and bright photograph!

Rate this post:
(5 votes, average: 4.20 out of 5)
Loading ... Loading ...
Jan 19

Getting those little marks above letters [Acute Accent Marks]

Posted on Monday, January 19, 2009 in General Tips

So what letters are we talkin’ about?

Á á É é Í í Ó ó Ú ú Ý ý (ex: resumé)

How do we make these letters?

For MAC users just hold down the Opt key and type the letter! So simple.

Windows users have it a bit more difficult. To get these letters Hold down the ALT key and then type in the follow codes on the keypad (numbers on the right of the keyboard) to create the accent mark.

Hold down ALT and type the code for the accent you want:

  • 0193 (Á)
  • 0201 (É)
  • 0205 (Í)
  • 0211 (Ó)
  • 0218 (Ú)
  • 0221 (Ý)
  • 0209 (Ñ)
  • 0225 (á)
  • 0233 (é)
  • 0237 (í)
  • 0243 (ó)
  • 0250 (ú)
  • 0253 (ý)
  • 0214 (ñ)
  • 0153 (™)
  • 0169 (©)
  • 0174 (®)
  • 26 (→)
  • 27 (←)
  • 1 (☺)
  • 3 (♥)
  • 7 (•)
  • 9 (○)

Hope this helps out!

Rate this post:
(17 votes, average: 4.24 out of 5)
Loading ... Loading ...
Jan 16

Simple CSS Rollover with A Single Image [Tutorial]

Posted on Friday, January 16, 2009 in Tutorials, Web Design

This will be our final result using only one image. (you can download exercise files at bottom)


“Rollover me!” -says Mr.Elephant
(you can use any image you would like, not just a super cool elephant and zebra…)

How to do this? LET’S GO!

In simple terms: We are displaying only the left side of the image hiding the right half, then on rollover we are moving the image half way over to display the right side.

1. Create an image twice as wide as the size you’ll need. The left side of the image will be the non rolled over image and the right half will be the rollover part of the image.

Below is the original image.
rollover_image(260width x 108height)

2. Below is the HTML code used, make sure it has a class so our CSS code knows where to look. This will act as our CSS placeholder for the rollover image.

<a class=”imageRollover” href=”#”> </a>

3. Now for the CSS that will do the magic. Let’s get the image to look like we want when nothing is rolled over:

a.imageRollover {
background: url(“rollover_image.jpg”) no-repeat; (This is the image to be used 260×108)
display: block; (this will display the entire image)
width: 130px; (display 130px wide, half the size of our image)
height: 108px; (display 108px high)
text-decoration: none; (This takes off the default styles used on links)
}

That will display the left half of our image. Now, we want to move our image 130px (half our image width) to the left to reveal the right side when rolled over.

a:hover.imageRollover {
background-position: -130px 0;
}

This moves our image 130 pixel to the left on :hover (note: background-position: Xposition Yposition)

That’s all there is to a single image rollover in CSS. ENJOY!

>>DOWNLOAD THE EXERCISE FILES HERE

Rate this post:
(2 votes, average: 5.00 out of 5)
Loading ... Loading ...
Jan 15

HOLLYWOOD MOVIE STRUCTURE

Posted on Thursday, January 15, 2009 in Video

This formula has been applied to short 5min movies and more often than not 2hr Hollywood blockbusters new and old. If you have seen a movie that has a galactic ending battle sequence (showdown) between the good guy and bad guy or where the main character faces a huge set back and all hope is lost toward the end of the movie or the stakes always seem to get higher…Well that’s almost every movie out there, below is a break down of how this classic formula is structured.

Final Showdown Godzilla

THE SETUP (0-10%)

  • Capture the audience (Hook)
  • Show the everyday life of the hero (main character)
  • Establish your hero’s identification (sympathetic, likable, funny…)

TURNING POINT 1 (10%)

  • Present an opportunity that creates a visible desire (does not necessarily define story’s concept)

NEW SITUATION (10-25%)

  • Reacts to a new situation presented
  • Hero gets acclimated and Formulates a plan for the new situation

CHANGE OF PLANS (25%)

  • Transform original desire to an easily visible goal with a defined end point (rescue the dame in distress)
  • Hero is extremely motivated

PROGRESS (25-50%)

  • Hero takes action to achieve goal
  • Things seem to be going as planned (everything is going their way)

POINT OF NO RETURN (50%)

  • Hero had an opportunity to turn back to their life before this goal, but now is fully committed to goal

COMPLICATIONS AND HIGHER STAKES (50-75%)

  • Achieving the goal becomes far more difficult and now has more to lose

THE MAJOR SETBACK (75%)

  • With goal insight (nearly there) a new obstacle presents itself making it seem all is lost (impossible)

THE FINAL PUSH (75-99%)

  • Beaten and battered the hero dives in head first to give everything he/she has left
  • The pace is accelerated and everything is working against the hero (counting down bomb)

THE CLIMAX (99%)

  • Hero faces the biggest obstacle/bad guy
  • Hero determines own fate
  • Goal is resolved (hero has reached goal)

Chuck Norris Bruce Lee Final Showdown

THE AFTERMATH (99-100%)

  • Now that the hero has achieved their goal what is he/she going to do with this new life

When writing a script keep in mind to stay true to your story and add elements on top of the main story line, not the other way around. Many student films I’ve seen were funny or moving but there was no point to what was going on. If you have clear goals and take the main character on a journey physically or emotionally you will end up with a great movie! Again, have fun, stick true to who you are, and don’t be afraid to work outside the box (outside comfort level).

Rate this post:
(3 votes, average: 5.00 out of 5)
Loading ... Loading ...