So I bet you all wondered like I did how do they create those neat icons on their web site and have it displayed in the bookmarks? Well here a few short steps on how to make one.

First you need to create a image that is 16×16 pixels because this is the size for the icons for the bookmark and browsers. Once you have Create that icon (that one is mine) save it out as a .gif or a png with transparency if you need it.

Next we will go to our favorite web page http://tools.dynamicdrive.com/favicon/ where they are super nice and have given us a tool to create our favicon! Yes that right we don’t have to install any software just upload and download.

Once you have created your FavIcon for your website upload it somewhere on your website.  Please make sure you know where you saved it cause you will need to link back to that file.  I put mine in the same wordpress theme folder that I am currently using.

The next step is to open up your page and go to the HEAD section and add the link.

<link rel=”shortcut icon” href=”/favicon.ico”>

If your using wordpress and uploaded the icon to the theme folder you are using please use the code below. Just copy and paste the code in the HEAD section of that theme.

<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico”>

Once you’ve added the code save your page and your done.

Now before you all start opening up Photoshop stop right there! Never EVER design any logo in Photoshop or any raster program it just won’t be feasible.  This is because anytime you to resize the logo the pixels in the images start to break and everything turns grainy (yes most of you will say duh… but I still constantly run in to designers telling me “I used PS when I created the logo”).  You have to use a Vector program like Adobe Illustrator to design the logo.  This will allow your logo to scale any size you want it just won’t matter.  You can design the logo 2×2 and then stretch it out to the size of a bus and it will still look perfect.

When I first start off with my logo I would type out the company name and go through a series of typefaces.  I usually stay with clean simple type like a Sans Serif font because anything too fancy will look dated over time.  I usually start off by typing the words with Arial font and make 20 versions with different font faces and pick the ones I like.

Once I picked my fonts it’s time to design the first draft of the logo.  My rule of thumb here is to design it black and white.  If your logo doesn’t work in black and white it just doesn’t work.  I usually go through 10 to 20 radically different designs during this process.  This includes combinations of modifying fonts, adding shape, or simple lines.  From there I pick the top 6 – 8 that I like and show it to the client.

Here are some samples of the logo I did.  These are just rough ideas from here I will let the client pick 2 – 3 and develop another series variation based on each design.  I usually come up with 6 – 8 variations per logo.

It can be very challenging trying to pick the right color template for a web site.  Especially if you’re dealing with colors you don’t typically use.   But don’t threat! Kuler is too the rescue! Kuler is a product created by Adobe.  It lets users generate their own color combination by choosing the following options:

• Analogous
• Monochromatic
• Triad
• Complementary
• Compound
• Shades
• Custom

After the user has generated their color theme the user can save it to a place called “Mykuler”. Users can also save color themes as Adobe Swatch Exchange files (.ASE) where users can import and use in Adobe Creative Suite.  The online application is very easy to use so definitely give Kuler a try.

Here are some color blindness definitions found on the web:

• Protanopia means difficulties to distinguish between blue and green colors and also between red and green colors, or no sensitivity to red.
• Deuteranopia is blindness to green.
• Tritanopia is blindness to blue-yellow.

Designers who ignore color blindness can lose or confuse about 10 percent of potential viewers. To avoid this problem Vischeck has a nice tool that will load your website, and display how people with these symptoms will view your site.  From there you can see how clearly your sites is readable and adjust your site.

Picking the right colors for web design can be hard at times. I know I’ve ran in to those days where any color I pick just don’t work with each other. Or I just ran out of inspiration and really didn’t feel like creating another blue or black themed web site. So I go online like most people and start searching the web for great ideas.

As I go through zillions of site with titles like ” Top site for color inspiration” or ” Picking colors the award wining way” I’ve noticed one thing they all use the same colors “blue, white, black” (yes yes black and white is not a color” but I’m sure you get the point). Any hoot enough of my ramblings and time for the meat.

So here my tip on trying to use different colors. Try using the color explore from Behr, Benjamin Moor, or whatever paint matching application you can find online and start picking some colors. What I like about these applications is that they pick some nice accent colors where you can start working with to generate your overall web theme. Another bonus is that the colors that are generated are nice and soft and easy on the eyes.

Well I hope you all give this a try. With some minor tweaks and adjustment you’ve got a great start on your next web site that is not blue.

1. Create black background.

2. Create New Layer and draw white lines to define shape.

3. Give it a Gaussian Blur (just blur it so that it’s nice and soft and you can still kind of see the strokes).

4. Filter\Other\Maximum to give it some shape for the center of the smoke lines

5. Duplicate the smoke Edit\Transform\Warp and Warp it a little to make it look more natural.

6. Apply a Twirl filter Filter\Distort\Twirl.

7. Adjust the opacity and you should have your smoke.

1. Go to File\Scripts\Load Files into Stacks… (This option will add all your image in as one file with separate layers).
2. Add all your images that you want in the animation.
3. Open the Animation Palette from Window\Animation
4. Click on the Flyout Menu on top right corner of the animation window and select Make Frames from Layers
5. Adjust the timing of each frame by selecting the 0 sec. on the frame

To save as animated Gif
Go to File\Save For Web & Devices Choose your Image Settings and Looping Options
Click Save.

To save as a Movie for Flv, IPhone, IPod, Quick Time, MPEG4 and so on
Go to File\Export\Render Video Choose your Settings.
Click Save.