Sunday, April 5, 2009

Top 10 Logo Design Tips

Top 10 Logo Design Tips

Over the years, LogoBee has been designing logos and accumulating articles and resources for its clients. Finally, they've released a concise set of logo design tips to help you along with your project, and ensure that you end up with a logo that will perfectly suit your needs. So without further ado, here are LogoBee's top ten tips!

1. Keep it Simple!

These are probably the best words of advice, and it ties into almost all of our upcoming tips. A complicated logo will not only make your logo difficult to reproduce and maintain, but you will also fail to engage your audience. The logo is the ultimate 'elevator' pitch to your potential clients and business partners. You don't have time to recite your entire business plan in an elevator pitch, and the same concept applies to corporate logo design.

Sometimes when a logo design isn't working out right, there will be an inclination to add elements and complexity. Often times, it's better to start over with a new concept or remove distracting elements rather than add them.

Simplicity isn't always an easy thing to achieve, as you don't want your logo to appear too boring or conservative. This is why at the end of the day it's best to leave it to the design professionals!

2. Engage your Audience

The logo design should above everything entertain and engage your audience. Your logo should not be so literal that the message is spelt out for them. They should be given the opportunity to discover the meaning and intention of your logo themselves. If people are able to discover the 'trick' of your logo within a reasonable amount of time, this will help to create a memorable and entertaining experience between you and your audience.

Too much abstraction will on the other hand work against you. If the logo is too obscure, the message that you are attempting to communicate will be lost, and so will your potential client. Remember, today's consumer culture is accustomed to very intense and stimulating media, and therefore you cannot be too demanding on your audience either.

3. Logo Longevity - Think Ahead!

The durability and longevity of a logo is worth considering. Although it's impossible to see into the future, it is useful to picture your company 10-15 years down the road, and think about what kind of products and services it will offer, if any at all! Even the strongest companies update their logo every 15 years or so, but often the changes will be subtle in nature. Very seldom will they take on a radical re-design.

There are many long-standing companies whose logos have stood the test of time. Type-based logos are good for this. The IBM logo is a great example. They offer a variety of products and services on an international level, and also provide research, design and consulting services. They've succeeded in communicating all of this through their logo, but we think they are due for an update very soon!

For small start-up companies, it may not be the end of the earth if you decide to change your logo after even a few years, depending on what transpires with your company. But it's always nice when a logo design is able to stand the test of time.

4. Vector is Better

Although it's tempting to use detailed illustrations and complex 3d effects in a logo, chances are that it will not serve you well. Clean, crisp lines with very limited colors are almost always more effective than an illustration or complex 3d rendering. A well-drawn vector-based logo will provide you with the contrast and balance that is so important in logo design. New capabilities in vector based programs can now give you the illusion of a 3d effect without losing contrast, using tricks such as the canter effect.

5. Adaptability - Be Ready for Change

Your logo should be flexible enough to adapt to every business situation. If a logo is too literal or specific, you may have a hard time using it when catering to different markets.

Generally speaking, the best thing for small business start-ups is to have an icon and logo-type designed at the same time. This will allow you to use the logo as a stand-alone image, or use it along with the type-font name as well. Often times, companies will use only the icon on its products and packaging materials. This is a common practice among software companies and book publishers.

6. Make it Memorable

A great logo design will imbed itself into ones sub-consciousness. This can happen for a variety of reasons, but for a logo to be memorable it needs to use simple lines and be very easy to recall from memory. A good test to ensure that your logo design is memorable is to show it to a friend and ask him/her to retrace it a week later. A good design should use a recognizable shape or element for it to be easily remembered.

7. Relevance - Keep your Products and Services in Mind

A memorable logo is great, but it should also get your customers to start thinking about the products or services that you offer. You should ensure that the logo relates to your business in some shape or form. Yes, the monkey can sell just about anything from cigarettes to cell phones, but there's a limit! Isn't there?


8. Choose your Colors Wisely

Colors can play a very important role in logo design as they can illicit different feelings and emotions from us. Interpretations of color may vary depending on age, gender, and cultural demographics, so your choices of color should be carefully considered depending on your target market. Also, colors tend to follow trends, just like in fashion. So a new, vibrant company may want to follow the current trends, whereas a bank may want to stay with a more conservative color set that will work well for them over a long period of time.

Try to keep your selection of colors down to two or three. Too many colors will increase your cost of production and make it more difficult to reproduce.

One interesting idea that we've seen used is to change the color of the logo on things like business cards and stationery depending on the market segmentations of the clientele.

9. Keep it Unique

This should be straightforward. You want to be sure that your company is easily identified among your industry and competitors. Be sure to carefully research your industry and target market before embarking on a logo design. You need to know and understand the common styles of your industry, but you also need to make sure that you don't infringe on anyone else's trademarked logo.

10. Versatility Pays Dividends

One of the most important attributes of a good logo design is versatility. You want to portray a consistent image across all of your marketing materials, including signs, letterhead, business cards, products lines, and web sites. Often times, a complicated logo design will work fine on a website or billboard, but when you shrink it down to fit on a pen or coffee cup, the illustration or lettering will become illegible. Your logo should also work well in black and white.

You may often find that start-up companies and even well-established law firms will not consistently brand their logo across all their marketing materials. For example, they may have their logo on the front door of their office, but will end up using something different (or nothing at all!) on their website. In order to build brand recognition you need to market your logo and image as consistently as possible. Be sure that when you're having your logo designed that you receive all the file formats necessary for use in your various marketing channels.

Friday, April 3, 2009

James Bond Intro Gun Barrel (A Photoshop Tutorial)

I am very sure that most of you (if not all) are very familiar with James Bond films. This tutorial will guide you through the basic steps in creating the gun barrel thing that you see in the introduction of James Bond films. Take note, I said “basic”. I’ll leave it all up to you to add effects to this to make it more realistic-looking if it’s that you desire.

I was right with what I said in my “Camera iris diaphragm tutorial” that it can be modified to create this kind of effect. (smile)

Have fun!

Step 1

Create a new 72 dpi-document sized 1024 pixels wide by 768 pixels tall


Step 2

Put a vertical guide at 512 pixels and a horizontal guide at 384 pixels. To do this, go to the “View” menu and click on “New guide” (you have to do this twice, one for the vertical guide and one for the horizontal guide). This should create guides that intersect at the exact center of your canvas.




Step 3

Make sure you’ve got “Snap To Guides” turned on. If you haven’t, go to the “View” menu, then “Snap To” and click on “Guides”.


(Note: A check mark beside “Guides” indicates that you already have “Snap To Guides” turned on.)

Step 4

Create a perfectly circular selection with a diameter of 220 pixels and position it at the exact center of your canvas. The easiest way to do this is to select the “Elliptical Marquee Tool” from the tool bar, then on the tool options (on the top of the screen) set the “Style” to “Fixed Size” and enter “220 px” for both the height and the width.


Then (with the “Elliptical Marquee Tool” still the active tool, left click on anywhere on your canvas to produce the selection.

With the “Elliptical Marquee Tool” still active, hover your mouse pointer over the selection (inside the selection) and click on (and hold) and drag the selection until its center “snaps” to the intersection of the two guides you have created earlier.


Step 5

Create a new layer, name it “hole” and (with the “hole” layer the active layer) fill the selection with any color (in this case I used green). It doesn’t matter what color you use as we will be modifying this later. For now, this will serve as our guide. Deselect the selection after you have filled it by pressing “Ctrl+D”.



Step 6

With the “hole” layer still the active layer, drag a vertical guide and let it snap to the right edge of the circle you’ve just created. To do this, hover your mouse pointer over the vertical ruler at the left side of your canvas and click (and hold) on it and drag your mouse pointer to the right. If you don’t see any rulers, just press “Ctrl+R” to make them appear.


Save your work as “bond.psd”.

Step 7

We will forget about what we’ve just done so far and we will work on something on a new canvas. But, do not close your work as we will go back to that later.

Now, create a new 72 dpi-document sized 1000 pixels wide by 1000 pixels tall


Step 8

With the “Ellipse Tool” selected, set it to “Fill pixels” (a) and “Fixed Size” (b) and enter “900 px” for both the height and width.

Also, set your foreground color to “black” (c).


Step 9

Create a new layer (you need not name this anymore since we will just use it to produce something which we will eventually move to the other canvas) and click and HOLD down your left mouse button on anywhere on your (new) canvas.

While still holding your left mouse button down, drag/move the circle’s outline until you can see a complete circle on your canvas.


RELEASE THE MOUSE BUTTON ONLY WHEN YOU SEE A COMPLETE CIRCLE ON YOUR CANVAS. (Note: We NEED to produce a perfect circle for this. If some part of your circle falls off to any of the edges of your canvas, your circle will not be rendered completely.) You should now have something like this:


Step 10

With the layer on which you created the black circle still the active layer, Drag a horizontal guide and let it snap to the horizontal center of the black circle you’ve just created.


With the guide in place, use the “Rectangular Marquee Tool” to create a rectangular selection that covers the entire upper half of the black circle and press “delete”. This will leave you with only half of a circle.



Step 11

Press “Ctrl+A” to select the entire canvas and press “Ctrl+C” to copy the half-circle.

Now, go over to your other canvas (the one that you saved as “bond.psd”) and click on the “Background” layer to activate it.

With the “background” layer activated, press “Ctrl+V” to paste in the black circle, this will paste your black circle on a new layer (named “Layer 1”). Rename that layer’s name to “wall” (to do this, simply double click on the layer’s name and type in “walls” and press enter). You should now have something like this:


Step 12

With the “wall” layer the active layer, click on the “Move tool” and drag the black half-circle (you have pasted in) until its right-most edge aligns with (snaps to) the right edge of the green circle. Also, make sure that the top edge of the half-circle snaps to the horizontal guide.

This is what you should get:


Step 13

Duplicate the “wall” layer by dragging the layer to the “Create a New Layer” button in the layers palette. This will create a new layer called “wall copy”.


With the “wall copy” layer the active layer, press “Ctrl+T”. Move the “pivot point” to the intersection of the first two guides you’ve created at the start of the tutorial. (Note: you will need to zoom in really close to be accurate with this… just press “Ctrl and +” for zooming in. Do not use the Magnifying tool as this will get you out of the free transform mode.)



While still in “Free Transform” mode, on the “transformation options” enter “42” for the rotation. Apply the change by clicking on the “check” on the upper portion of the screen.


Step 14

“Ctrl + click” on the thumbnail of the “wall copy” layer in the layers palette (to load its selection) and click on the original “wall” layer to activate it.

With the “wall” layer now the active layer, press the delete key. By this time, you may delete the “wall copy” layer as we will not need it anymore. You should now have something like this:


Step 15

Duplicate the “wall” layer once again and press “Ctrl+T”. With the “wall copy” layer active, as what you have done earlier, move the “pivot point” again to the intersection of the first two guides, enter “45” for the rotation this time, and apply the change.


You should now have something like this:


Step 16

Now, duplicate the “wall copy” layer. With the new layer (“wall copy 2”) active, go to “Edit”, then “Transform”, then select “Again” (or simply press “Shift + Ctrl + T”).


Do this 6 times over, making sure that active layer is the latest copy of the layer before applying “transform Again”.

When you’re done, you should have something like this:


Step 17

Merge all the “walls” layer into one single layer. To do this, select the topmost “wall” layer (in this case, the “wall copy 7” layer”) and press “Ctrl + E” seven times. (Either that or, if you’re using Photoshop CS, highlight all the “wall” layers by holding down the “Ctrl” key and clicking on all the “wall” layers one by one and when they have all been selected, press “Ctrl + E” once.) Whatever you do, just make sure that you merge together ONLY the wall layers.

Your layers palette should look like this:


Step 18

Now, “Ctrl + click” on the thumbnail of the merged “wall” layer in the layers palette to load its selection.

With the selection loaded, press “Shift + Ctrl + I” to invert the selection.

Step 19

Create a new layer on top of the “wall” layer and name it grooves.


With the “grooves” layer the active layer, fill the loaded selection with grey. Any shade of grey will do as all the colors that we’ve added so far are temporary, we will modify all the colors shortly. As a matter of fact you can use any color for this at this point.

After filling the selection with color, press “Ctrl + D” to deselect. By this time you should have something like this:


Step 20

Double click on the thumbnail of the “wall” layer to invoke the “Layer Style” window.

In the “Layer Style” window, click on “Gradient Overlay” and set the gradient’s “Style” as “Radial”.


Now, click on the “gradient preview” bar (labeled “Gradient”) and apply the following colors in the “Gradient Editor” window:

#dfdfdf @ 0% location
#4e4e4e @ 35% location
# 000000 @ 100% location


Click on “Ok” to exit the “Gradient Editor” window, and click on “ok” again in the “Layer Style” window to close it.

Step 21

Right click on the “wall” layer and click on “Copy layer style”


Then right click on the “grooves” layer and click on “Paste layer style”

Step 22

Double click on the thumbnail of the “wall” layer again and (in the “Layer Style” window) click on “Bevel and Emboss” and apply the settings as shown below:


Step 23

Double click on the thumbnail of the “hole” layer and (in the “Layer Style” window) click on “Color Overlay” and choose a white color.


Click on Ok to close the “Layer Style” window and voila! We’re done!


With some more playing around you can add some fancy chrome-like finish to the walls (like adding some shiny parts and really dark parts to it) and add an image to the “hole”.

Windows Media Player 11 Inspired Menu

I am going to show you a quick way to make a cool windows media player 11 inspired menu for the web. This menu is inspired from the top part of the menu that media player uses.

Final menu

First start off with an 800X70px canvas. Just use white as the background.

In a New layer make a rounded rectangle with a 8px radius across the entire canvas leaving a few pixels of space above and below it.

Next just use your rectangle marquee tool to cut off the bottom rounded part of the menu so it is squared at the bottom.

Now hit ctrl+r on a windows keyboard to get your rulers out and then click in the top part of your ruler and drag down to get a center line on your shape.

When you drag it toward the middle of you shape it should automatically center itself.

Now cut the top portion of the menu off and paste it back in and position back in place.

You should have 2 layers now

On the top part of the bar add a linear gradient overlay through your blending options using these colors

Now I am going to add a glow to the bottom of the menu. So start a new layer and get the color #5ca5be which is a mid blue color.

Use your rectangle tool and make a small rectangle at the bottom like this

Now add a gaussian blur to it at 4.1 pixels.

Cut any of the glow that goes into the white area.

Create another new layer and make a small rounded rectangle about 5px roundness.

Make sure to extend it past the menu like in the screenshot so you can cut the bottom of it off to have it squared.

Don’t cut it off yet, add these blending options to it first.

Stroke

Gradient Overlay

Inner Glow

I want there to me more of a glow on the bottom of it so I am going to get my elliptical shape tool and using a bright blue color (#3dcefd) make an oval like this in a new layer:

Add a gaussian blur of about 7px to it and cut off the parts that go outside of the layer.

Here is my result so far

Now I want to add a small white rounded rectangle to make it look like the grayish layer of the top bar shows through.

So make a rounded rectangle in a new layer

Now cutoff from the bottom up so it matches up with the top part of the main bar

Set its opacity to about 27%.

Start another new layer and use your pen tool or line tool to make a black line more than halfway down

Duplicate those layers 4 more times and move them down the bar and space them out evenly

Now add a little arrow under the black line we made earlier

Also go ahead and add your titles to each block.

That should be about it. I hope you learned something you may not have known previously, thanks for reading!

Final menu