Designing a logo for a website can seem difficult to some and perhaps the choices of software and available options they contain intimidate beginners to give it a try. But logo design doesn't have to be complicated and, in fact, a good logo can be designed in as fast as 15 minutes. For a quick logo design requires only a few properties:
- Font Family & Style: Whether you use an existing font or look for custom ones online.
- Color Combinations: Which colors to implement and color effects, such as gradients.
- Simple Font Effects/Filters: This can be effects such as beveling or drop-shadows.
- Graphics, Thumbnails or Icons: This is optional, and does require a bit more experience if a custom made one is required.
If you look at the branding of some commonly known websites, such as ebay.com or yelp.com, you may notice that their logos have even less than the above features we will attempt, and don't require high-end photo editing tools to create.
Adobe Master Suite
The Adobe CS6 Software Suite has a row of great software that have the tools necessary to create a logo, but for beginners some software have to many unnecessary features. This excludes software such as Adobe Photoshop, which has too many tools and is not really emphasizing font based designs that we see in today's websites. A better choice would be Adobe Illustrator, which is similar to Photoshop but emphasizes more vector based graphic designing. Although you could use Illustrator to design, for the purpose of simplicity and this tutorial, we will use Adobe Flash, which will have all the tools we need to create a simple, yet effective logo design, without too many of the extras.
The newest version of the Adobe Suite at the time of this write-up, is CS6, which you can acquire a free trial for at the Adobe Creative Suite Page.
Working With Adobe Flash CS6
Open A New Flash Document
When opening Flash, you should see the following screen. We choose "Create New" -> "ActionScript 3.0", which is the most up-to-date starting template.
Set Your Tools
Upon installing Flash, this screen may look different, but this is the setup I recommend. For this tutorial, make sure that the Properties and Tools panels are visible, otherwise you can open these within the Window menu.Designing your Website Logo
Choose the Text Tool
Choose the Text Tool (left of image) in the tools menu. When choosing it, you will see new settings appear in the properties menu (on the right of the image). Here you will choose the font style and size settings to start the logo text off with.
Place Your Logo Text
Write out your logo text and start experimenting with the font-style and size. For the example I chose a bolded Gill Sans MT with -2 letter spacing.
Changing Colors of Text in a Text Element
Once your text is places, you can select individual letters or words within your text element, to modify color, font size and style individually.
Finalizing Main Logo Font Properties
After finalizing the main text and font properties of your logo, we can start adding effects. The color I chose for "Design" is #FAEBD7.
Adding Text Effects
To start adding effects, we need to switch back to the regular select tool and then click on the logo text for the object element properties to be visible again.Adding Text Filters/Effects
Text / Object Filer Options
On the properties panel, scroll down until you find the filters tab (usually the last) and open open if it isn't. Click the small white page on the bottom left as displayed on the image and choose bevel.
Adjusting Filter Effect Settings
The bevel will appear on the text as well as the settings for the bevel. Let's reduce the bevel's blur and distance to 1, to achieve a cleaner effect.
Text Glow Filter
Let's add another effect to our text logo, by clicking the page once more and choosing glow. Note that the order in which the filters are chosen can also change it's overall design (for example text shadow above or below a blur or glow.
Exporting your Logo
Exporting Flash as Image File Type
After experimenting with your logo design, you can export it as any image file-type. You may want to adjust your stage size, by clicking on any empty space of the stage and choosing the width and height via the properties tab, in order to export the exact image size you want. The text property usually adds to much padding, causing the exported image size to be inaccurate.
More Advanced Flash Image Design Effects
The above tutorial can often satisfy the regular web design clients, but if one requires more effects, or simply wants to try other design possibilities, can use some of the below features. This includes the moving of letters independent of the text object, image handling and Flash's Masking feature.
Breaking Apart / Separating Text
To make more changes to a texts design in Flash, one can choose the option to "Break Apart". This works with all object types, and can be done multiple times on the same objects, depending on how often they are nested. In this care, a text element that contains a word, will first be broken down in letters, and if "Broken Apart" again, will become a vector graphic object.
Importing Images into Flash
For this example, we want to import an image, to use as the logos fill, instead of a regular color (also known as masking).
Layer Order
After importing a graphic image, it will usually be the top most element, but or masking we will require it to be a layer bellow the elements we want to mask.
Distribute to Layers
The easiest way to quickly place elements on individual layers, is with Right-Click->Distribute to Layers.
Making Text into Vector
In Flash CS6, in order to mask an object, the masking object has to have the following properties assure it works properly:- Only one object should exist in a layer that you want to mask, and the layer to be masked should be below that layer. Multiple objects in a masked layer often displays incorrectly.
- The object must be in vector format or contain one.
In this case, if you have not yet broken the text apart until it becomes a vector, you should do so now.
Grouping Objects
Now that the text is no longer text, but instead a vector, it's less easy to handle. Overlapping vectors cause them to cut each other and if they have the same color, they simply merge. Therefore, it is suggested that you put 'Unbreak' the vector, which you can do by "Grouping the Vectors into one element, or converting the objects you want to mask into a Graphic or Movie Clip Symbols. Symbols are an important component for Flash, yet we will not be covering more of Symbol Objects in this tutorial.
Masking the Logo
Notice how after the vectors have been grouped or converted into a symbol, you can safely handle the object.In this example, we grouped both words into their own objects, because we intend to only mask one of them.
Next, the "Design" object has been distributed to its own layer, and made sure its layer is right above the background.
Finally, we right click that layer, and click Mask.
