Logo Design Project Step by Step Walkthrough

This post was originally published in 2008

The tips and techniques explained may be outdated.
A personal project I'm currently working on with a developer friend is a website called
myNiteLife. As part of the overall design process one of the first jobs of the project was to
develop a logo and brand for the website, follow this step by step documentation of the whole
process of the logo design from conception to completion.

Background information:
The whole idea behind myNiteLife is to provide an online organizer and planner for our local
city of Sheffield's nightlife, where bars, restaurants and clubs amongst other venues are listed
along with user reviews and ratings. Also, the site includes a planner based on a map of the city,
where users can plan a route between venues and send out party arrangements to their friends.
With this information in mind, the brand should relate to the audience of 18-40 and express the
fun, sexy and nocturnal aspects of city nightlife.

As always, the first stage of the process was to scribble down some ideas and drafts. The original
ideas sketched out included the use of spotlights, rounded typefaces, dancing silhouettes, moon
shapes and classy serif typfaces.

I then booted up Adobe Illustrator to test out a range of type treatments, ranging from thin and
modern sans-serif to sexy and classy serifs.

The next stage was to develop various choices of type into draft logo concepts, basing some
ideas on the initial thoughts doodled out in the sketches. Planning ahead to the website I knew
that a fairly dark colour scheme would be used, therefore I developed the logos on a black
background to make sure they looked their best.

Continuous ideas and concepts developed the logo into four possible concepts, these were then
sent to a few friends for their thoughts.

The chosen version was the entirely slab-serif based logo, this was then concentrated on and
tweaked slightly into two new versions. The first tweak was to test out the logo with tighter
kerning making the letters butt into each other and the second was to swap the dot on the letter 'I'
for a crescent moon to represent the night time element.

The tight kerning gave the logo a more modern and attractive appearance but made the letter 'I'
interfere with the capital 'N'. Combining this with the use of the crescent moon was a perfect
solution.
One other issue was the slight interference with the letter 'I' and the letter 't', experiments were
made to knock out part of the letter with a flowing curve following the line of the 't'. This helps
solve the problem and adds a little designerish touch!
The complete logo design was then complete, shown in it's barebones mono state before being
treated to colour and subtle effects.

The Making of the myNiteLife Logo
Now you've seen my personal development thoughts behind the logo, I thought it would be great
to show the techniques used in Adobe Illustrator to create the final logo from scratch.

First off, the wording 'my', 'nite' and 'life' were typed out and set in the chosen font of Clarendon,
making use of both light and black variations.

The tight kerning was quickly applied by choosing the -75 option from within the character
palette.

Additional kerning adjustments were made to individual letters, ensuring that all characters
overlapped slightly. This was done by using the ALT key along with the left and right cursor
keys.

As mentioned previously, this causes unwanted interference with some characters, the solutions
of which were to add the pretty curve along the letter 'I' and swap the dot for a crescent moon.

The line of type was converted to outlines (Type > Create Outlines) to make each letter an
editable shape. These were then ungrouped to enable access to the letters individually.

A temporary circle was used as a tool to measure the gap between the letters 'I' and 't'.

The same tool was used to plot a guide at the same distance from the bottom of the letter 't'.

A third guide was added to the lowest most part of the straight edge of the letter 'I'. Using all
three guides a larger circle was drawn which resulted in an accurate curve that followed parallel
to the outline of the letter 't'.

Using this new circle along with the Subtract from Shape Area option from the Pathfinder tool
enabled the excess section of the letter 'I' to be chopped out.

The resulting shape of the letter 'I' I think gives a slightly more unique characteristic to the logo.

The final fix to the logo was to add the crescent moon shape to relate to the night aspect of the
brand. To edit the letter 'I' the Compound Path was released to separate the shape into two pieces.

The dot was scaled up to give more of a visual impression, then a temporary circle was used to
knock out an area of the shape to give the crescent shape.

The only remaining step was to clean up the logo by combining all the individual letter shapes
into one complete object using the Add to Shape Area from the Pathfinder tool.

With the logo being generated in the mono state it could then be given some sprucing up with
colour and slight visual effects. The colour purple was chosen for the brand to relate to the sexy
and classy image that the myNiteLife site was to portray, and also gives a nice deep colour to
represent the colours associated with dusk.
Love it or hate it? Id be happy to hear your thoughts in the comments.




7
inShare


Join the mailing list to have every new post hand delivered to your email inbox. Every subscriber
gets a FREE bundle of 40+ icons, vectors, brushes & textures!
Enter your


Written by Chris Spooner
Chris Spooner is a designer who loves experimenting with new techniques in Illustrator &
Photoshop and sharing the results as tutorials. Follow Chris' daily design links on Twitter, and be
sure to check out his second blog over at Line25.com.
More posts like this:
Create a Cool Ribbon Style Logo Graphic in Illustrator
How To Create a Cubist Style Logo Design in Illustrator
Create an Aged Vintage Style Logo Design in Illustrator
How To Create a Retro Badge/Emblem Style Logo
Logo Design Process and Walkthrough for BioThemes
How To Create a Colorful Logo Style Icon in Illustrator

Tutorials\
Designing
\Rating:
1
2
3
4
5
Design a Print-Ready Beer Label in Adobe Illustrator
Alan Ballard on Oct 21st 2011 with 98 Comments
Tutorial Details
Program: Illustrator
Difficulty: Intermediate
Completion Time: 1-2 hours
Download Source Files
Source files for this tutorial are available to Premium members.
Get a Premium Membership
View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the
Tuts+ network.
Final Product What You'll Be Creating

A few times a each month we revisit some of our readers favorite posts from throughout
the history of Vectortuts+. This tutorial by Alan Ballard was first published on March 18th
2009.
Alright folks, its time to roll up the sleeves and get down to business with this full-featured
Adobe illustrator CS3 tutorial. This one takes you from setup to production of a really cool beer
label, although this could be useful for any bottled concoction of your choosing.
We get to cover all kinds of useful Tools like Type On A Path, Live Trace, and the Opacity
Mask. My buddy brewed his own beer and I made him labels using this technique, and they were
an instant hit! Im very happy to show you how its done. OK, lets do it!
Want access to the full Vector Source files and downloadable copies of every tutorial, including
this one? Join Vector Plus for just 9$ a month.

Step 1 - Create the Document
Open a new Illustrator document 11 inches by 8.5 inches in CMYK color mode. This probably
isnt your default setting so make sure to change the Units and Color Mode for this one.
Select the Rectangle Tool (M), with no fill and .25pt stroke, then click once on the stage and
enter 4in wide by 3.5in high. Select Ellipse Tool (L), click once on the stage and enter 2.1in by
2.2in. Select both the ellipse and the square, and in the Align palette center the objects
horizontally and vertically.


Step 2 - Make Crop Marks
Select the square, and in the Menu go Filter > Create > Crop Marks. Increase the square size to
4.125in by 3.875in. This square will be the size of our image, which is 1/8in larger than the crop
marks. This ensures no white-space when you or the printers cut these labels out.


Step 3 - Center the Label
Select all, and in the Align palette toggle the artboard and center the label horizontally and
vertically. Select the square and crop marks and in the Menu select Object > Lock > Selection
(Command + 2).


Step 4 - Create the Oval
Ok now we can start really making graphics. First off, select the ellipse and copy it (dont paste it
quite yet). Fill the oval with dark green (#6B752A). Give the oval an inside light green
(#D3E27E) 3pt stroke. Use the Appearance palette to add an outside dark green (#6B752A)
1.5pt. stroke.


Step 5 - Cut Out the Center
Go ahead and paste in front your copied ellipse (Command + F). Double-click the Scale Tool to
bring up the dialogue, and enter 65% in the Uniform field. Select both ellipses and in the
Pathfinder palette, then apply Subtract From Shape Area an then click Expand.



Step 6 - Create the Brand Name Text
You should still have your original oval in the clipboard, so paste the ellipse in front again
(Command + F). Double-click the scale Tool to bring up the dialogue, and this time enter 71% in
the Uniform field. Select the Type On A Path Tool and choose a font (I used Copperplate bold at
34pt) and set the color to white. The Copperplate font-family is available at MyFonts.com. Click
on the oval and type the brand name of the product.


Adjust tracking (space between the letters), if necessary, by clicking between the letters and
pressing (Command + Shift + Left or Right Bracket keys). >Adjust the baseline, if necessary, by
increasing or decreasing the size of the ellipse that the text is on.

Step 7 - Rotate the Text
View the rulers by pressing (Command + R) or Menu > View > Show Rulers, select the type and
drag a horizontal guide from the top ruler to the center of the circle. If the guide isnt visible,
then go to Menu > View > Show Guides (Command + Semicolon). Use the Selection Tool (V) to
drag the handle of the text to the centered position.


Step 8 - Add a Background to the Oval
Select the Ellipse Tool, click and hold Alt + Shift while dragging outward from the center of
your oval to create a circle that extends past the empty center of the oval. Fill it with orange
(#DF771C) and no stroke. Right-click > Arrange > Send to Back (Command + Alt + Left
Bracket key) to send the orange circle to the back.


Step 9 - Create the Main Banner Strip
Select the rectangle Tool (M) and click once on the stage. Enter 2.2in and 0.3in for width and
height. With the rectangle selected, go to the Gradient palette and choose a horizontal linear
gradient color #533930 on each end and #A6583F in the middle. Give the rectangle a 1pt black
stroke, and check the Round Join option.


Step 10 - Squeeze It!
In the Menu, go to Object > Envelope Distort > Make With Warp and choose Squeeze, check
Horizontal, and Bend only 2%.


Step 11 - Create the Banner Text
Type the name of the product and center it in the rectangle (Ill stick with Copperplate for all the
text).


Step 12 - Create the Banner Tail Part 1
Select the Rectangle Tool (M) and click once on the stage, enter .5in width and .3in height. Give
it a 1pt black stroke, using the Round Join option again. Give this rectangle a linear gradient with
#533930 on the left and #DF771C on the right.


Step 13 - Create the Banner Tail Part 2
With the rectangle selected in the menu go to Object > Path > Add Anchor Points. With the
Direct Selection Tool (A) select the middle point on the right of the rectangle, and drag it
towards the center to create the end of the tail. Hold Shift while dragging to force it to be
straight.


Step 14 - Position and Duplicate the Tail
Place this tail object on the right end of the rectangle, and nudge it down a bit. Send it behind the
rectangle with a right-click > Arrange > Send Backward (Command + Left Bracket key). Copy
the tail object and paste in front (Command + F). Right-click the copied tail object and select
Transform > Reflect. Choose vertical and 90 degrees for the angle. Move the reflected tail object
over to the left side, holding Shift while dragging to force it to be straight.




Step 15 - Create Banner Details
Now, a detail to make the banner more realistic: zoom in close to where the right tail meets the
rectangle. Choose the Pen Tool(P) and draw a shape with four clicks: the bottom right of the
rectangle, the bottom left of the tail, straight up to any position (hold Shift) and back to the
beginning point to close.
Fill the shape with a dark brown (#2D1C17) and 1pt rounded black stroke. Press Command +
Left Bracket key until the shape is behind the rectangle but in front of the tail.



Copy it, paste in front (Command + F), Right-click > Transform > Reflect > choose Vertical 90
degrees. Shift-drag to the same spot on the left end of the banner.


Step 16 - Warp the Banner
Select the entire banner and in the menu go to Object > Envelope Distort > Make With Warp,
choosing Arc and 12% for the Bend.


Step 17 - Position the Banner
Now lets place the banner in the design. Click the brand name text (VECTOR TUTS) so the
center point is visible. Drag a vertical guide from the left ruler to the center point. >Place the
banner in position, using the vertical guide to keep it centered.


Step 18 - Create a Wheat Grain
We could just grab an image of wheat or a stock vector, but would you learn much? Nope! Lets
make stalks of wheat from scratch. Use the Ellipse Tool (L) and create a small thin vertical oval
of any color.
Use the Convert Anchor Point Tool (which is nested in the Pen Tool) and click the top point of
the oval. Use the Selection Tool (V) and press Alt while dragging to create a copy of this tear
drop shape to use as the tip of the wheat in a few steps. Place it aside for now.

Use the Direct Selection(A) Tool and drag the top point up and to the left on our original tear
drop shape. With the Direct Selection Tool, drag the left side curve handle to the right, which
curves the tear drop shape. Now it looks more like a grain of wheat.

Double-click the Rotate Tool (R) and choose an angle of about -20 degrees. You want to get that
tip pointing slightly right of vertical.


Step 19 - Transform the Wheat Grain
From the Menu, select Effect > Distort & Transform > Transform. This is a great feature of
Illustrator. You can use it to create all kinds of interesting patterns and shapes. In this case, we
will repeat the wheat grain to make the rest of the wheat stalk. Check Preview and enter 3 for
copies and -0.15 (about) for more vertical. Click OK when it looks right.


Step 20 - Copy and Position on the Left Side
Copy it, paste in front (Command + F), then right-click > Transform > Reflect, and choose
Vertical 90 degrees. Nudge it left into position. Place your copied tear drop on the tip.

Use the Line Segment Tool(\) and create a white vertical line for the stem, below the grains.

Step 21 - Warp the Wheat
Select all the wheat elements and make them white. From the menu select Object > Envelope
Distort > Make with Warp, and choose Arc for the style, check Vertical, and about a 30% Bend.


Step 22 - Position the Wheat in the Label
Place the wheat in the label, resizing and rotating as necessary, then go to Arrange > Send
Backward (Command + Left Bracket key) to send it behind the banner. Copy and paste in front
(Command + F), right-click and Transform > Reflect, choose Vertical 90 degrees and move the
copy to the right side of the label.


Step 23 - Add Text to the Bottom
Add the word Ale or Root Beer or whatever the type of drink it is. In the Menu, go to Object
> Envelope Distort > Make with Warp and enter an acceptable negative number under the Arch
effect. Position the text in the middle-bottom of the label.


Step 24 - Add Text to the Top
Select and copy the main large text-on-a-path. Paste in front (Command + F). Increase the size so
the circle is just larger than the label oval. Use the Selection Tool (V), and click any corner of the
text-on-a-path and Alt + Shift-drag to expand equally.
Type a catch-phrase or quote to personalize the product. Decrease the font size as necessary and
use the color #6B752A. Use the Selection Tool (V) to adjust the position of the text on the curve,
by dragging the right handle.


Step 25 - Grab a Photo
Get a photo of the Brewmaster, or any person youd like to feature on the label. Its the head and
shoulders were looking for. It is very helpful to have the subject on a white background. Many
thanks to wookiestock at deviantart.com for this photo I have used in this tutorial. Open the
photo in Adobe Photoshop.


Step 26 - Prepare the Photo
In the Photoshop Menu go to Image > Adjustments > Threshold and adjust the slider until theres
a good balance of light and dark in the face. We will need the face area to be contained, as in no
breaks along the perimeter of the head, because we will fill the face in with white later. So for
this image, I darkened his left cheek and right ear so there is a complete outline of his head after
the Threshold is applied.

Use the Elliptical Marquee Tool (M) to create a selection around the head and shoulders. Go to
Select > Inverse (Command + Shift + I) and delete everything but the head and shoulders. Crop
and save the photo.


Step 27 - Live Trace!
Open your new face photo in Illustrator. Select the image and click Live Trace, adjusting the
settings as needed.




Step 28 - Live Paint!
Click Live Paint, then with the Live Paint Bucket Tool (K), fill all the black areas with dark
brown (#533930). Fill all the face portions with white, using the Live Paint Bucket Tool. Clean
up the image as necessary and place it in the middle of the label.


Step 29 - Add Depth to the Face
Now we want the top of the head to pop out from the oval, but the rest to go behind the oval,
making a 3-D effect. Select the face, copy (Command + V), and paste in front (Command + F).
Right click and select ungroup (Command + Shift + G.)

In the Pathfinder palette, choose Add To Shape Area and click Expand to make the face one
solid shape.

Use the Knife Tool to chop off the top of the head, and delete the rest by using the Direct
Selection Tool (A). The Knife Tool is one I hardly ever use, and theres no shortcut for it, so it
may be tricky to find. It is hidden under the Eraser Tool (Shift + E)

Select the face and send it back behind the oval. The chopped-off head part will be in front now.
Wow this thing is really starting to shape up! All we need now is a background and the label is
finished!


Step 30 - Hook Up the Color and Lines
Select the label square and fill with light green (#D3E27E), and remove the stroke. Use the Line
Tool to create two horizontal .25pt black lines; one near the top and one near the bottom. Feel
free to make them longer than the square, as we will crop them later.


Step 31 - Blend the Lines
The Blend Tool makes it easy to repeat evenly these lines across the background. Select them
both and in the Menu go to Object > Blend > Blend Options and choose 50 for Specified Steps
and click OK. Now go to Object > Blend > Make to apply the effect. Send the lines behind the
artwork but keep them in front of the green background.



Step 32 - Fade the Lines in the Center
Another really cool feature in Illustrator is the Opacity Mask. I will use it here to fade out the
lines. Copy the green square and paste it in front of the lines, and give it a radial black and white
gradient, with black in the center.

Select the square and the lines, and in the Transparency palette menu, choose Make Opacity
Mask.

Adjust the gradient to fade the lines out in the center. Your label design is done!

Make sure to click the left square in the Transparency palette when you are finished editing the
opacity mask, because you will not be able to select other elements until you do.


Step 33 - Flatten Transparency
Some printers freak out when they see transparency-related effects, so we will flatten ours to be
safe. Select the opacity mask and choose Object > Flatten Transparency.


Step 34 - Create Outlines
Select all the text in this file (or just select all (Command + A), and in the Menu choose Type >
Create Outlines. This will ensure your typography is preserved. It may be a good idea to save
your file before this step, in case you want to edit the text later.

Step 35 - Arrange Two Labels on the Artboard
Select everything including the crop marks and group it (Command + G). Change the x-position
to 3in. Copy and paste another label in front (Command + F). Move the x-position of the second
label to 8in.
Ungroup the objects until you can select and delete the horizontal crop marks in the middle of
the two labels. Here is your final, printer-friendly, super tasty illustration!

Thanks for following along, and I really hope your labels are a big hit!

Here is the original label I made for Huja Brew.
Dache: Logo Design Process
182

Feb 12, 2009 Tutorials design, design process, Guest Posts

Previously, I have featured David Pache of Dache on WDW, an amazing logo designer
from Switzerland. He is known for designing unique and colorful logos. I'm very glad
to have David to share his design process of the WebMYnd's logo. This case study
(written by David himself) provides full creative brief and progress images from start
to final. Read on to find out how David got inspired by Wassily Kandinsky's art (one of
the most famous 20th-century abstract artists) to create this fantastic logo.
Introduction
Last year, I was approached by a startup who required a logo in order to launch a business in the
US. The WebMYnd team were 3 MIT and Cambridge University graduates who were very
passionate about their product. They had acquired seed funding from ycombinator an outfit
which picks enterprises to back and who have an excellent track record. WebMYnd have a
product which is a plugin for your browser that turns your web browsing into an extension of
your own memory. it allows you to keep a copy of everything you look at on the web, and then
allows you to search actual page images and text when you need to remember something again.
The creative brief
The main aspect of their brief was to create an identity which would communicate the idea of
collecting everything you look at on the web in one place and to inspire the idea of extending
your memory. They wanted to make a tool that people would prefer to use in place of the old
fashioned way of bookmarking and tagging websites. They also wanted the logo, or some
element of it, as a button to indicate when the plugin was in use therefore colour was of great
importance.
Getting started
Initially, I took the brief at face value and brainstormed some ideas. I wanted to create a concept
using the initial from WebMYnd and the first concept which was produced as as follows. The
simple lines created an abstract reference to a brain (an idea which the client had experimented
with but did not like the appearance of a brain. This design captures the essence of a brain but at
the same time forming a W.

This concept was discontinued however as the W was not clear enough and it did not have the
presence that the client was looking to achieve. I therefore focused on colour and did some
research for inspiration.
I am a great fan of the works of Wassily Kandinsky, a Russian artist, printmaker and theorist.
One of the most famous 20th century, Kandinsky has been credited with painting the first
modern abstract works. Below is one of these works from which I took inspiration as to the
colour palette which may suit the WebMYnd logo. The use of colour is broad yet it is not
offensive on the eye and stands out enough to intrigue the audience. This is what I wanted to
achieve so all I needed now was the correct design to show these colours.

Drafting and development
I consulted the client and the idea of creating a monogram using the W and the M was
decided on to take the project forward. Below are my initial sketches.

The first of these above gave the best line to work with however I did not like the linear aspect as
I would be unable to use enough variation of colour within a single lined image. Below are my
developments of the first idea into a two dimensional concept and intersecting these shapes with
differing elements to allow me to fill with colour.

After some re-drafting of one of the concepts, i decided on a wholly symmetrical design where
the W mirrored the M therefore I transferred the design to the Dot Grid Book below. As the
design had four elements which were identical in design, I was able to just concentrate on one
element which could be copied and rotated at a later stage using the computer software.


Colours
Once the four elements were plotted and finalised, I looked at possible colours. Below are some
combinations which I experimented with.

I finally decided on the colour scheme below using quite vibrant colours to create a presence but
trying not to use garish tones which would offend the eye of the audience.

Final colour placement and concept presentation
I tried many combinations. When dealing wit the use of colour in this quantity, it is a case of
trying until you find the right solution. Below is the finished design which was selected by the
client.

Delivery and feedback
The client initially loved the concept and used it for a number of months however after some
further discussion between themselves, they decided to choose a different design to move
forward with however they still retain the rights to the design, should they wish to implement it
in the future.
I would like to thank the creators of WebMYnd and wish them every success for the future. It
was a pleasure to work on this project and this design is one of the more popular with clients
when they see my portfolio. Of course, I welcome any comments regarding this specific article
or my design process in general. Thanks and enjoy!
Credits
Final Product What You'll Be Creating

This entry is part 22 of 22 in the Vector Text Effects Session - Show All
Previous
With oil prices the way they are today, everybody is thinking Green. I have done many projects
recently that require a Green style applied to the design. In the following Illustrator tutorial, Ill
teach you how to create a Green type treatment. It works great for logos and other design
elements.

1. Create Your Text
Step 1
Create a New document that is 8.5 x 11 inches. Choose a typeface for the type treatment (I used
"Helvetica Bold") and type out what you want. Next, Outline the text by going to Type >
Create Outlines.

Step 2
With the text selected, create a Linear Gradient from the Gradient panel. Change the color of
the first swatch on the Gradient Slider (left swatch) to a light green (I used these CMYK values:
C=40, M=0, Y=100, K=0). Change the second swatch on the Gradient Slider to a darker green
(C=60 M=16 Y=100 K=0). Use the Gradient Tool (G) to adjust the gradient by clicking at the
top of the type and dragging to the bottom of the type so the dark part is at the bottom.


2. Create a Leaf
Step 1
Now were going to create some leaves. Start by drawing a leaf shape with the Pen Tool (P).
Again, with the Pen Tool (P), draw a line that starts at the tip of leaf and ends in the middle of
the bottom part of the leaf. After selecting the line and the leaf shape, press the Divide button in
the Pathfinder panel, located on the bottom left side of the panel. Ungroup (Command + Shift
+ G) the objects so you have two separate shapes.

Step 2
Select both shapes and create the same colored Linear Gradient as the text. Next, select one
shape and use the Gradient Tool (G) to click and drag at a 45 degree angle across the leaf half
shape. Do this again for the other half of the leaf.

Step 3
With the Pen Tool (P) draw a highlight shape on the top leaf half. Change the highlight shape to
a Radial Gradient. Change the left swatch to white and the right swatch to your green color
(C=40 M=0 Y=100 K=0).

Step 4
With the Pen Tool (P), create a stem shape and send it behind the leaf shapes. Create a Linear
Gradient, make the gradient the same colors as the leaf shapes, and adjust the gradient so the
darker green is at the top of the stem.


3. Create a Waterdrop
Next come the water droplets. Create an oblong ellipse with the Ellipse Tool (L). Then create a
Linear Gradient using the same colors as the leaf and text. Adjust the gradient so the dark side
is on the bottom left.
Create another ellipse on top of the previous ellipse and create a Radial Gradient with the same
swatches as the highlight gradient. Adjust this gradient so the light part of the gradient is coming
from the bottom left.
Create two more smaller ellipses with Linear Gradients matching the highlight gradient. Once
you are done, group all the ellipses, scale and place them on the leaf shapes. You can easily copy
the droplet by holding down Alt and dragging a copy.


4. Create a Cute Ladybug
Step 1
The next couple of steps deal with creating the ladybug. Create an ellipse and fill it with a
Linear Gradient. Make the first swatch in the gradient a red (C=0 M=100 Y=100 K=0) and the
second an even darker red (C=0 M=100 Y=100 K=35). Adjust the gradient so the red color is at
the bottom of the ellipse.
Copy (Command + C) the ellipse and Paste it in Front (Command + F). Draw another bigger
ellipse that overlaps the center of the original ellipse. After selecting one of the original ellipses
and the overlapping circle, press the Intersect Shape Areas button in the Pathfinder panel.
Make the intersected shape a Linear Gradient with the first swatch white and the second swatch
red. Adjust the gradient so the white is at the top of the shape.

Step 2
Draw five more ellipses over the ladybug body shape and group them together. Copy
(Command + C) the original body ellipse shape and Paste it in Front (Command + F). With
the copied body shape and the five ellipse selected, intersect the shapes.
Change the dots to a Linear Gradient with the first swatch a really dark red and the second
swatch a black red. Adjust the gradient so the lightest red is at the bottom of the combined
shapes. Next, Copy (Command + C) the top highlighted shape of the body and Paste it in
Front (Command + F).
Copy (Command + C) the dots and Paste it in Front (Command + F). Select the copied
highlight and one of the dots copy and Intersect them. Create a Linear Gradient with the first
swatch at 60% black and the second at 90% black. Adjust the gradient so the lighter black is at
the top of the shape.

Step 3
Create another ellipse for the ladybugs head. Create a gradient the same as the top dots gradient
and send the head behind the body shape. Draw an antenna shape with the Pen Tool (P) and
place it behind the head. Copy (Command + C) the antenna and Paste it in Front (Command
+ F). Reflect the antenna by pressing the Flip Horizontal option from the pop-up menu of the
Transform panel.


5. Position Your Elements
Step 1
Draw an ellipse roughly the size of the completed ladybug. Create a Radial Gradient so the
inside swatch is black and the outside is white. Set the ellipse to Multiply from the
Transparency panel and send it behind the ladybug to the bottom left, creating a drop shadow.
After grouping the ladybug and drop shadow, place it on the leaf. Then scale and rotate the lady
bug as needed.

Step 2
After selecting the leaf and all the elements on it, place them over your text. I placed mine over
the first letter of the word.

Step 3
Copy (Command + C) the leaf and elements, except the lady bug, and Paste (Command + V).
Flip the leaf horizontally and scale down the leaf. When scaling you dont have to constrain the
proportions, this helps the leaf look different from the other. Repeat this step a couple of times
around the text.


6. Add Detailing to Refine the Design
Step 1
For the other leaves we are going to create an Art Brush. You can draw these elements with the
Pen Tool (P), but youll find it more consistent and easier to use a brush.
Draw an oblong ellipse. Then with the Direct Selection Tool (A), select the right anchor point in
the ellipse. When you select an anchor point the Control panel will default to the Anchor Point
Options. Convert the anchor point to a corner (the first button to the right on the Control
panel). Do this again for the left anchor point. Next, squish the ellipse down from the top to half
its original size.

Step 1
Drag the oval into the Brushes panel and choose New Art Brush. In the Art Brush options
change Colorization to Tints. This lets you change the color of the brush without creating a new
brush. You dont need to change the colors of the brush strokes for this tutorial, but it is good
practice.

Step 2
With your new brush, make a swirl shape for a leaf blade. You might need to change the stroke
of the brush if it looks to small or too big. When you get a stroke you like, go to Object >
Expand. You will also want to clean up the unfilled stroke. An easy way to do this is to go
Object > Path > Clean Up. Also, make sure all the check boxes are checked and press OK.

Step 3
Select the expanded brush shape and create a Linear Gradient with the same swatches as the
original text gradient.

Step 4
Repeat the steps for creating the leaf blade around your text. Try to vary the shape and size of the
blades.

Step 5
Next were going to add some more water droplets around the text. Simply Copy (Command +
C) the droplets on the leaf you already made and Paste (Command + V) them around the text.
Also, be sure to vary their size and shape.

Step 6
Now it is time to work on the dirt at the bottom of the text. Double-click on the Pencil Tool (N)
in the Tools panel to bring up the Pencil Tool Options. Change the Fidelity to 5 to get really
smooth lines.
Use you Pencil Tool (N) to draw a small circular shape. Press Alt before you let go to close the
shape. Next, create a Radial Gradient with the interior swatch a brown color (C=35 M=60
Y=80 K=25) and the exterior swatch a dark brown color (C=50 M=70 Y=80 K=70) . Place the
spot on the first letter of your word. Scale the dot down smaller than one of the droplets.

Step 7
Repeat this till you have a pile of dirt spots on you first letter.

Step 8
Copy (Command + C) and Paste the dirt pile until you have covered the very bottom of all the
letters.

Step 9
Draw a Radial Gradient ellipse like you did for the ladybug drop shadow. Squish the ellipse to
about half the size. Send the ellipse behind all the artwork and set it to Multiply.

Step 10
Repeat this drop shadow under all the letters.

Step 11
For the background create a rectangle with the Rectangle Tool (M) that is the size of you
document. Give it a Radial Gradient, make the interior swatch white and the second swatch a
light green (C=13 M=0 Y=38 K=0).


Congratulations, Youre Now Done!
Now you have a nice green type treatment!


Enjoyed this Post?

Subscribe via RSS |
Get E-mail Updates |
Follow us on Twitter
Mac OS X
January 14th, 2008 by ART-D Posted in Adobe Photoshop, Designing


Learn in this tutorial how to design an awesome wallpaper with Mac OS X logo.
Final Image Preview

Begin by representing a new file (File>New) that would have 1024768 px and 72 dpi. Select
next the Paint Bucket Tool (G) to paint the layer in black color.

Next well try to picture an apples silhouette with the Pen Tool (P). Its contour should be of
black color. Next press Alt button and select the Ellipse Tool (U) to cut out a part of the fruit, as
it is demonstrated below: The shape may be corrected with the Convert Point Tool.

Try to represent above the apples silhouette a layer reserved for the figures, marking out the
zone previously as it shown next picture.



Keep pressed Alt button and make a mouses click between the texts layer and the apples one
(on the layers panel). The texts layer will be applied in the apples limits.


Mark out the earlier made layer, containing the apples silhouette and make a click on Add a
Mask option on the lowest part of the layers panel. Select after that the Brush Tool (B) to erase
the apples right side as it is demonstrated next picture:

Create new layer and select the Pen Tool (P) to represent a silhouette of the leaf above the apple
that is of black color too. The corrections on its shape may be done with the Convert Point
Tool.

Make a copy of the earlier made texts layer and place it above the layer with the leaf (on the
layers panel). Apply also the same operation we did earlier with the apples silhouette. It means
we have to press once again the Alt button and make a click between the layers.

Getting better result is possible when combining all the previous layers, except black
background, in a group (press Ctrl button to mark out the necessary layers and keep pressed the
left mouses button when taking the marked layers on Create a new group option). Apply the
next shown parameters for the new group: Opacity 38%

Create a new file (File>New) with 55 px and 72 dpi. Select now the Pencil Tool (B) to
represent the pattern, colored with #C3561E

Save the next option: Edit>Define Pattern
Create new layer now and continue by choosing the next option to apply the pattern: Edit>Fill

Make a mouses click on Add a Mask option on the lowest part of the layers panel and select
the Brush Tool (B) with blurred edges and black color. Erase everything around, except the zone
containing the apple and the leaf.

Apply for this layer the next parameters: Fill 40%


Create a new file (File>New) again with 3131 px and 72 dpi and choose next the Pencil Tool
(B) of the same size and color, used earlier to represent another pattern.

Save again: Edit>Define Pattern
Create new layer and press on the next option: Edit>Fill for the pattern to be applied:

Make a click on the same layer on Add a Mask option as we did earlier. Select after that the
Brush Tool (B) with blurred edges and black color. Erase everything, except the apples zone
and the leaf.

Apply the next parameters for the layer: Fill 80%


Try to make the same operation now the way we did when representing the apples silhouette.
Apply the same instruments and the same methods.

Apply the next layers parameters (by making a click on the layer on the layers panel).
Blending Options>Inner Glow


Blending Options>Bevel and Emboss

Blending Options>Gradient Overlay


Gradients parameters:

Make a copy of the last
layer and select Free Transform option to make the copy smaller as we may see on the next
picture:

The layers parameters: Blending Options>Bevel and Emboss

Blending Options>Gradient Overlay

Gradients parameters:

Blending Options>Stroke


Step 1
Open Illustrator and create a new document. The size is not important right now. After that get
the Polygon Tool and create a triangle.

Step 2
With the Pen Tool (P) create a point in the middle of the base of the triangle. After that with the
Direct Selection Tool (A) select the point and move it up like the image below.

Step 3
Duplicate the triangle twice. After that rotate one of the copies (1). Select 2 of the triangles, the
original and the one you rotated and go to Window>Pathfinder. Select the Minus Front option
over the Shape Mode, it's the second. You will have to delete some parts to leave just the ones
inside of the original triangle.

Step 4
With the Rectangle Tool (M) create a rectangle like from the bottom left to the center of the
base (1). After that with the Pen Tool (P) delete and move to create half of the base of the
symbol (2).
Repeat the same process to create the other half of the base. Use the image below for reference.

Step 5
Repeat again the previous step to create the right side.

Step 6
It's time to make some adjustments, with the Direct Selection Tool (A) move the points to make
the symbol a little bit bolder. Use the image below for reference.

Step 7
Now it's time to add some colors. I used 4 basic colors, pink, yellow, green and cyan (1), the
order is very important. After that go to Window>Transparency. Select the all objects and
change the Transparency mode to Multiply. By doing that there will be 3 new colors, red, dark
green and purple.

Step 8
Create a new document, I used A4 for the size. Then with the Rectangle Tool (M) create a
rectangle to fill the whole page. Change the color of the rectangle to (#383434).

Step 9
Copy the symbol from the other document and paste it in the new one with the dark background.
As I was using Multiply for the Transparency Mode, the symbol won't be shown. So, change
the Transparency mode back to Normal and change the color of the symbol to white.

Step 10
Now just paste again the color symbolo and align it to be over the white version. That way the
colors will be visible.

Conclusion
Now let's finish the poster adding the logotype "Abduzeedo" with the slogan "abducted by
design".
The idea of this little walkthrough was to show you the creative process behind the new symbol
we will be using on Abduzeedo now in 2010. We are still working on some new features, so you
will start to see this symbol more and more.
Also we will have this poster printed in case you want to support the blog, as well as t-shirts.

Light Effect version
With the icon done I created another version of the poster adding some old school light effects.
But this is for the next tutorial.

About the author
Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for
inspiration. Also you will find very useful tutorials for the most used applications out there, with
a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other
softwares conteplated like Pixelmator, Fireworks, and web design tutorials.
Versus Inspired Photoshop Logo Tutorial
Posted by John Ward on Mar 20, 2007 in Logo Tutorials, Photoshop Tutorials | 55 comments

This Adobe Photoshop tutorial will show you how to create a rounded logo, inspired by the
Versus cable network. We will use gradients and layer style to create this logo in Photoshop.
This tutorial is great for all Photoshop users from beginners to intermediates.
This is what you will get when you are finished:

Start off with a new 500500 pixel document with a background color of black

Now select red(#ff0000) as your foreground color. Create a new layer, then using the Elliptical
Marquee, tool draw a perfect circle by holding the shift key while drawing.

Now press alt+backspace to fill the area with red.

Now apply the following layer style to this layer.
Bevel:

Contour:

Gradient Overlay:


Then apply the style and your image should look like this:

Now create a new layer and draw another perfect circle inside the other circle and fill it with
black (#000000)

Now we will create another new layer, and draw another smaller circle inside our black circle
and fill it with red (#ff0000). Your image should look similar to the one below.

Now using the Elliptical Marquee tool again, create a smaller circle inside the red (do not create
a new layer this time) one and press the delete button to remove the inner part of the circle.

Now you can deselect. We need to use the Elliptical Marquee tool again and select the lower
right corner area of the circle and delete it.

Now create a smaller circle where we just deleted one, and fill it with red. You will want to use
the arrow keys to position the dot before you deselect it.

Now we will add our text. Create a new layer and select the Text Tool. Click on the Layer and
type the first letter, I will use a T. The font I am using is 235pt Add City Boy, you can download
it here. Position your letter so part of it is overlapping with the edge of the circle.

Now create another layer and add the other letter for your text the same way you did before.

Now we will merge the two text layers with the circle layer. Select all three layers by press ctrl
and clicking them, then press ctrl + e to merge the layers. Here is a before and after.

Now select your newly merged layer and apply the following Layer Styles by right clicking the
layer and select blending options.


Apply the style and your images should like the one below.

Now create a new layer. CTRL + Click on the layer with the black circle to make a selection like
it on the new layer.

Now reset your colors so that black is the background and white is the foreground. Select the
gradient tool, select Foreground to transparent as your color.

Fill circle with the gradient by clicking outside the circle and dragging inward (like the arrow in
the picture below).

Now deselect the circle and draw a new larger one offset like below.

Now delete the selection and our results should look like this:

Now you can leave the logo like that if you want, but I decided to add a little bit more to it. First
Select all of the layers (except the background) in the layers panel by CTRL + Clicking them.
Then on the menu in Photoshop go to Edit > Transform > Perspective .

Now move the points so they look like this:

Then apply the style and you are finished! I hope you liked this tutorial, feel free to leave
suggestions for my future tutorials.

Adobe Photoshop
I will be using Adobe Photoshop CS2 to design this logo. Many swear by illustrator, but I believe for the
purposes of making a tutorial, it'd be best to use photoshop as it will cater to a wider audience. More
people have used photoshop than Illustrator. Besides, I've created 95% of all my logos in Photoshop, so
take what you will.
Let's Start : The Project
A buddy of mine runs a gaming website, bluelaguna.net, and he has wanted a new logo for some time, so
I agreed to do it for this tutorial. So let's take a look at the current logo:

(Note: The image above isn't a logo, it's an entire header. The actual name bluelaguna.net along with the
slogan is the actual logo. I thought it would be a good idea to show the entire header though to see how it
reacts with the overall design.)
One of the most important things this logo lacks is readability. When a user visits a web site, or visits any
medium in which a logo is displayed, the first thing that hits them should be the logo. And for some
reason or another, the first place us humans look is the upper left hand corner of a site. The current logo
is placed in the middle of the header and the small font and the dark blue in "BLUE" is hard to read.
There's also nothing exciting with this logo. For a logo to be effective, it has to "brand" an image, it needs
to stick in your head. All this logo is is times new roman on caps lock.
Now that we've gone over why their current logo is not suitable, let's begin with the actual tutorial.

Gathering Information
It's important to always know the specifics of what you or the client is looking for before you start.
Generally for most projects, I only need to ask the client 5 questions:
1. Name of the service/product: BlueLaguna.Net
2. Any slogans to use?: "Your #1 Source for RPG Media"
3. Any specific color schemes in mind?: Match the current design

4. What are you trying to convey through the
logo?:
Serious game-related site.
5. Any other specifics:
You don't have to use the current header design. Get
crackin'
Pretty straight forward, now we know what we have to work with.

1. Setting up your Document in Photoshop
Once you have photoshop open, go to File -> New. Then specify the name of the logo, and a
width of 600 and a height of 500.
Then click "OK" (Refer to the screenshot below).


After you click "OK" Your setup should look like this:

(I'm on a 1600x1200 resolution.) For the menus on the left, I have the layers view, and the Characters in
view.)
2. Experiment with Font Selections
As a starting point, I always experiment with a font that I think will work well with the logo. You have to
develop an eye for what font will or will not work, with the specifics of the project in mind. Since for
bluelaguna we're trying to focus on a serious yet gamer'ish feel, a serious font selection might be the best
bet. Having yourself an arsenal of fonts is very important. I have several thousand myself.
Select the Text Tool on the left menu: (As shown on the image to the right)
Adjust the settings on the Text Properties at the top to match these settings:

In the character window to the right, set AV to -60 as shown below: (This simply shortens
the space between each separate character, I like starting out with this setting, I don't know
why :)

Type "BLUE LAGUNA" in the document space (First, be sure that the background is white,
you can use the fill tool for this. And I've decided to go with all caps to start out with, since all
caps is generally deemed more serious).



With the type tool selected, and layer 1 selected, select the font list menu (where it says
Arial):


You can do this next section in either three ways.
- Hit the "Down" arrow to change the font view of "BLUE LAGUNA".
- Hit the Down Arrow of the Font List to see the list of available fonts with a tiny preview of the
font.
- Download a font viewing program.

I personally just use the first method, although I sometimes use a font viewing program. Our
goal here is to find fonts that might work with the logo.
Once you come across a font that looks like it could work, you should Duplicate the layer in
the Layers Window to the right, and then hide the previous layer (The layer you right clicked
and selected "Duplicate" from. This way, you've saved that font selection (the hidden layer),
and you have a new layer to find more fonts from):



3. Good and Bad Font Selections
Since our goal with this particular logo is to be serious, we need serious looking fonts. It simply takes time
to develop an eye for what is serious and what isn't.
Here are a few examples of bad font
selections for this project:
The first logo (the top), has a very laid back, fun /
unprofessional tone to it.
The second logo is simply "goofy" looking, and
it's generally always bad to select a logo that has
an inherent shadow.
The third logo is way too "ragged" with its frills all
over the place, definitely a no go.
Calligraphy logos are generally outdated,
especially ones with weird "drops" coming from
them.
The last logo you can hardly even read.
Remember, a logo should be easily readable.


Here are a few examples of good font
selections for this project:
All of these logos with the exception of 4 and 6
are pretty much similar.
#1, 2, 3 & 5 are all very simplistic and serious in
appearance.
Logo 4 still appears "serious" even though it is
significantly different from the rest. I chose this
just in case I want to experiment with piecing
together fonts for the word "Blue" and "Laguna".
Logo 6 is a very bold / italicized logo that says
nothing but serious.

4. Finalizing a Font Selection
Once you have some possible font selections, each in their own layer, you further analyze them and see
which works. With logos that have more than one word, most of the time it is good to separate the
appearance of the words from each other. Since this particular project has two words, "Blue" and
"Laguna", we're going to want to separate them by possibly choosing two different fonts. You can also
separate words from each other by keeping the same font, but changing the color. So I'm going to
experiment with the 6 good font selections above.
This is what I've come up with:
Although I didn't use one of the 6 fonts I selected initially for the word "blue", I simply used an unboldened version
of "LAGUNA", which keeps a consistent feel but also allows for separation of the two words.




5. Adding in a symbol
Sometimes logos work well with only the use of fonts, but most times adding in a relevant symbol of some
sort will really make a logo stand out. When I say "symbol", I mean any part of the logo which isn't actual
text. So let's start with the first font selection from above:

Now here is where having an eye for design and experience is a really big help. We need to begin
contemplating ideas of what exactly we can add to this logo to make it awesome. So, the first thing I do is
just sit there and stare at the font selection and think of what exactly the product/service/site is all about.
Well, BlueLaguna.Net is about gaming, more specifically speaking, it's a site that offers RPG media (Role
Playing Game) media. Therefore, we have two things to work with: RPG and Media. What exactly can we
associate with both RPG and Media? Well, we don't necessarily have to convey both RPG and Media
through the logo (if you try to get too complex, the logo will become cluttered). We can choose one or the
other if we want. I think it'd be most logical to focus on the whole RPG aspect, as you can find media all
over the place and it isn't an entirely unique concept.
So let's do some research on Role Playing Games. We need to figure out a symbol which can really
represent RPG. The current BlueLaguna.Net features a 3d female, perhaps that has something to do with
RPG? Well, let me do a search on images.google.com for "RPG". The results turn back a few different
female characters, Hmm! The first few results, keeping in mind the 3d female character on the current
header of bluelaguna.net, seem to suggest that depicting a female in the logo might be the best bet. It
also seems that weaponry / mystical environments are associated with RPG as well.
Now that I know what I can associate with RPG, I can come up with some possible ideas for a symbol. I
think maybe featuring a face of one of these RPG'ish females with maybe a hint of mysticism.
The Pen Tool is your Friend
The most important tool when it comes to logo design is the pen tool. If there is one tool to thoroughly
understand, it should be the pen tool. The pen tool allows you to create any shape(s) you want, and
maintain vector format (which is very important if you ever want to size your logo up n' down (for
professional print or whatever.)
It's always good to draw your logo by hand without copying over a picture (vector tracing), but if you aren't
very talented and don't have much experience, it might be your only option. So for the sake of making the
biggest impact on this tutorial, I will teach you all an awesome technique for creating great looking
symbols for you logos.
Finding a suitable picture
If you're going to trace, I always suggest using a site like istockphoto.com to find the image and pay for it.
This way you won't be using copyrighted images to trace over. Or taking your own picture to trace over.
Unfortunately though, istockphoto has nothing with RPG or "anime". So I just went on images.google.com
and found a picture which I think is suitable, here it is:
When I came across this picture, I got the idea that I can vector
trace over her face and hair to create what I want, and then
integrate it along with the font selection in some unique way.

So once you've found the picture you want to trace (if not the same
one), save it to your hard drive, open it up in photoshop, CTRL-A,
CTRL-C to select it and copy it, and go back to your main logo
document and CTRL-V.
Now you've imported this picture into your logo document. Once
you've imported it, with her layer selected, you can cut off the
bottom half of her body. (Select the first tool in the upper left corner
of the tools menu, Rectangular Marquee Tool), select the bottom
half of her body and hit the delete key. Your screen should look
something like this by now (You can hide the text layers behind it).


Vector Tracing
Now select the magnifying glass in the tools menu and select around the girl, it will look like this zoomed
up to about 400%:


Now select the pen tool in the tools menu:


Make sure that the foreground color (the black square at the bottom of the pic to the upper right ---^) is
the same dark blue color of the text we specified.
In the layers window to the right, select the little round circular > icon on the upper right corner of the
window, and click on "Create New Layer" in the window that comes up. Hit "OK" and then in the layers
window, with the new layer selected, change the Opacity to 0%. We do this because once we start tracing
over the image, we don't want the dark blue color hiding the picture of the girl below.
And with the pen tool selected, click a point somewhere on the outline of the hair (at the top), and then
click to make another point somewhere on the hairline where the line will begin to form. You can hold
down and "direction" the angle of the line to create a certain type of curve. It takes awhile to get the hang
of, but it's very easy once you get the hang of it. After plotting points of an entire section of hair, yours
should look similar to this: (Note: I've lightened the opacity of the girl to illustrate what your lines should
look like so far)



(opacity 100%)
It's not perfect, but for now it's a good start.
Now I'm simply going to continue creating more shapes, like the facial features. After 15-20 minutes or so
of creating the different facial features and the face itself, here is what I have come up with:
As you can see, I specified a different color for the face (light blue).
And by now I have around 15 different layers. There's a separate layer
for the top portion of each eye, the bottom portion of each eye, the
middle, and the small glare. There's also a layer for the face
background, and the ear.
So let us continue and add some shading...


After about 20 more minutes of shading, this is what I've come up with:
There are a total of 3 different layers for the hair. It's somewhat of a
tedious process to do hair shading simply because there's a lot of
strands of hair! But you have to just condense them and get the
general idea of the shading and it will work out well.
Then I did some light shading work on the face and the neck.
Now I consider the actual draft of the symbol complete. Let's make our
initial text layer visible and see what we can do to integrate the symbol
with the text.

First, you will want to select the very last to the very first vector layer that you created (you'll have a
couple dozen or more), hold down the shift so you can select them all. Then in the layers window click the
little circular round button and select "New Group From Layers". This will put all of the layers of the girl,
into one easily manageable layer group. This way, you can move around the one group and it will keep all
of their positions together so it won't break up her face.

Now this actually doesn't look too bad, in and of itself. But the proportion of the anime head is too big, in
relation to BLUELAGUNA. So we will want to scale down the head. Let's try moving it over to the left, and
adding the slogan + the ".net" text. This is what it looks like:

Now it looks pretty damn good eh? The only other thing I did, was with the pen tool, I added a white
shape over the "B" in "BLUE" so that the face doesn't collide with the B.
Unfortunately I messed up and didn't design this over the dark blue'ish background that the
bluelaguna.net has. So I'm going to change the colors of the logo to fit a background of an appropriate
header for the site.

As you can see, simply changing colors around can really change the look and feel of a logo. I'd consider
this logo a winner.

6. Conclusion
I can pretty much guarantee you that if you're a first time user of the pen tool or photoshop for that matter,
it won't turn out so pretty like mine did. It takes some time and patience to really get the hang of it. It's all
about getting a little creative and working at it for awhile.
Drawing the Volkswagen Logo
By Dr Diablo | Photoshop CS3 | Beginner
This tutorial is going to show you how to draw the legendary Volkswagen emblem logo by using
Layer Styles, Radial Gradients, and the Polygonal Lasso selection tool in order to do the tracing
part. The image below show our end result.

Our tutorial is divided into two brief stages:
1. Creating the circular orb surface
2. Drawing the VW emblem
Creating the Orb Surface
First off, start by going through File>New and creating a new 250x250 document in Photoshop
with the following attributes:

Before we start drawing, access the Tool Panel on the left side of your workspace and go down
all the way to the bottom to change the Foreground Color to #82B2E0 and the Background
Color to #012B62. Those are the primary colors of our logo.

We will draw the basic circular shape of the logo now, so grab the Elliptical Marquee Tool from
the Tool Panel, and then while holding down the Shift key, draw a selection of a circle on your
canvas as shown below.

Now press Ctrl+Backspace to fill the selection with your pre-set Background Color.

Access the Tool Panel again and select the Gradient Tool this time. Make sure you select the
Foreground to Transparent gradient type.

Create a gradient fill across your selection as shown in the screenshot below to complete creating
the logo's surface.

The circular orb surface of our logo is now done, we will draw the actual emblem in the next
stage of the tutorial.
Drawing the Emblem
Before we start off, press D to reset your Foreground and Background colors to their default
white and black values and then press X to invert the colors' position. In this section we are going
to basically draw the shape of the VW emblem and then give the layer we drew it on a Drop
Shadow, an Inner Shadow and a Gradient Overlay style. Start off by creating a new layer by
going through Layer>New>Layer. Using the Elliptical Marquee Tool, draw a round selection
inside the orb as shown below

Go through Edit>Stroke and apply a 10 px wide inside stroke.

Once you press OK, you should get a result similar to this.

We have to do some tracing skill practice now, use the Polygonal Marquee Tool to draw straight
lines that represent the base structure of the VW logo, which obviously is a V with a W under it.
Grab the Polygonal Marquee Tool and start drawing straight lines as shown in the screenshot
below. You can use the sample image that you have seen in the beginning of the tutorial as a
reference. Note that you can go over the white stroke we created because we are going to fill this
selection with white as well later on.

Once your happy with your selection, go to Edit>Fill and use White.

We are done with the drawing part, it's now time to give the emblem some style and a 3D-like
effect. Access your Layers Panel, then right click on the layer that contains the emblem and
choose Blending Options. Apply the following options for the Drop Shadow, Inner Shadow,
Gradient Overlay.


As for the Gradient Overlay, make sure you edit the Gradient Fill Type by clicking its thumbnail
next to the word Gradient in the screenshot below, and apply the options seen in the Gradient
Editor screenshot.


Once you apply all these effects you should get something similar to the image below.

Your Volkswagen logo is finally complete, you can optionally add some gloss with Overlay or
Soft Light layer styles to make it blend in with the logo more the same way it looks below.

This concludes our tutorial, you can check my source PSD here. I advise you to experiment with
this logo by applying your own touch of style to it, and make sure you show off your work in the
Graphics Showcase forum. I hope that you've learnt something new from my tutorial, feel free to
email me on diablo@republicofcode.com if you have any comments or questions or alternatively
post in the Oman3D Forum to get instant feedback
Tutorial Details
Program: Adobe Illustrator CS4
Difficulty: Intermediate
Estimated Completion Time: 1 hour
View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the
Tuts+ network.
Final Product What You'll Be Creating

Download Source Files
This entry is part 15 of 16 in the Logo and Identity Design Session - Show All
PreviousNext
Colorful and vibrant logos are extremely trendy recently. In this Quick Tip we will take a look at
how you can easily create an appealing colored sphere which will make a great foundation for a
successful logo. Lets get started!

Step 1
Start by opening Illustrator and creating a 1000px by 1000px file. Set the resolution to 300dpi
and color mode to RGB.


Step 2
Turn on Smart Guides (Control + U) they will be very helpful throughout the whole process. If
they start getting in your way, simply disable them by pressing Control + U again.
Select the Ellipse Tool (L) and click in the middle of the artboard. You will be prompted to input
dimensions of your ellipse. Go ahead and make it a 450px by 450px perfect circle. Also, feel free
to create a new layer underneath, place two guides there and center them using the Align Palette.
They will prove very useful later. Your image (very simple, so far) should look like this:


Step 3
Create a new layer on top of the stack and add eight more ellipses. Use the Transform Palette. to
place them in their desired position and give them proper dimensions. Refer to the image below.


Step 4
Lets create an illusion of slight perspective now. Select all ellipses save for the most top one and
open the Transform Each dialog box (Alt + Control + Shift + D). Change the vertical scaling to
103% and hit OK. Seven of your ellipses should get slightly taller.


Step 5
Make sure you are using the Selection Tool (V). Shift-Click on the second ellipse from the top to
deselect it. Now only six of your ellipses are selected so go ahead and press Control + D to
repeat last transformation this will make the ellipses another 3% taller.
Repeat this operation successively Shift-Clicking next ellipses and pressing Control + D. You
will notice that the shape on the bottom extends the border of the big circle. Correct this by
moving the lowest ellipse couple of pixels up noboby will notice that little cheat ;)
This is the gentle result you should be looking for:


Step 6
Select all contents of the "circles" layer (you can do that by Alt-Clicking the layer) and open the
Transform Each dialog box again. This time input 115% for vertical scaling and press the Copy
button. You will get 8 additional ellipses, each 15% taller than their originals.



Step 7
Thats a mess but dont worry we will attend to it right now. Get the Selection Tool (V) and
marquee over the two top ellipses. Bring up the Pathfinder palette and click the Divide button.
Repeat this procedure for the remaining pairs of ellipses.
Visually, nothing should change but your shapes should be now nicely chopped into pieces.


Step 8
Now grab the Direct Selection Tool (A) and focus your attention on the most top set of ellipses.
Alt-Click the sickle-like shape and hit Delete of Backspace to do away with it. You should be
left with something that will later resemble an angled disc.
Repeat this step for the remaining groups of ellipses until you get something which resembles the
image below:


Step 9
Ok, we have the basis of the artwork, now lets add some colors. You can use those I propose
here but feel free to pick your own.
Well start with the little pieces giving the illusion of perspective. Select them successively with
your Direct Selection Tool, change their stroke color to none and the fill to the following values:
#FF2C85
#F42DF7
#662DEF
#2F49E7
#31A0DE
#31DEC5
#33CE4A
#7BC636
This is the effect you should be looking for:


Step 10
The edges have some definition, now lets get to coloring the interiors of our rings.
Create eight gradients and apply them to the ellipses. All gradients are made of our eight base
colors ranging from 100% opaque to fully translucent color. Use the Gradient Tool (G) to squish
and reposition the gradients. Image below shows the desired outcome:



Step 11
This is starting to look like something but still could be better. Using the Direct Selection Tool
(A) select the most top ellipse, go to Effect menu and choose Stylize > Inner Glow. Set the mode
to Screen, opacity to 50%, blur to 10px and pick a nice light color matching the gradient. Of
course I encourage you to go ahead and experiment here.
Repeat this step for the remaining ellipses to achieve this subtle effect:



Step 12
Create a new layer and position it under the "circle layer". Place a 1000px by 1000px rectangle,
fill it with a subtle grey radial gradient and lock the layer. At this point certain parts of the sphere
may appear to dark or too light feel free to adjust that to you liking. Generally, this is what it
could look like:


Step 13
Direct your attention to the Layers palette Grab the "circle" layer and drag it onto the top of the
stack. Select the big ellipse, copy it and Past it in Front (Control + F) three times. Fill the one on
the bottom with a gradient ranging from 100% white to translucent white and change its stroke to
none. Adjust the position of the gradient with the Gradient Tool. Reduce opacity of the ellipse to
60%.
Select the next ellipse and apply a similar gradient to it, this time positioning it away from the
center of the sphere to give an impression of glow. Reduce its opacity to 30%.
Fill the third ellipse with a pink gradient similarly to the previous one but here change its blend
mode to Color and set its opacity to 60%. Fill the last ellipse with the lime gradient, change its
blend mode to Color and set its opacity to 60%. Use the images below for reference:





Step 14
Create a new layer, call it "highlights" and place it on top of the stack. Using your Pen Tool (P)
draw couple curvy shapes. Fill them with a subtle white gradient to give your sphere a glossy
surface. Reduce their opacity (I used 40% for a stronger and 10% for a lighter highlight) and
position them around the sphere. Done and done!


Conclusion
Your colorful sphere is ready. Now you can include the name of your brand, drop a shadow, add
reflections and whatnot. You can even overhaul the whole shape and apply this technique to
many other figures hexahedrons, bottles, cylinders and so on!

How To Create a Colorful Logo Style Icon in Illustrator


Follow this step by step to create a vibrant and colourful logo style icon graphic. This style of
abstract three dimensional shape has become a popular trend in the world of logo design. Today
well look at how to build the graphic in Illustrator using a range of tools and techniques.

Usually Id always recommend for a logo to be developed in relation to the company or brand it
is representing, but today were just going to look at the technical part of building this generic
icon. This graphic features many of the trends in logo design seen today The three dimensional
appearance, gradients and variances in tone.

Open up Illustrator and create a new document. Grab the circle tool and begin laying out the
basic shapes of the icon. Place a small circle inside a large circle, then add smaller circles
between the outlines of the two.

Zoom in and press CMD+Y to switch to outline view. This will help you accurately align the
shapes so the paths match exactly without any overlap.

Use the Scissors tool to clip each path where the two lines meet, then select the unwanted
portions of the shapes and delete them.

Zoom in and select the two open points from each paths, right click and select Join. Repeat this
for each of the clipped lines to form one continuous path outline. Make a copy of this shape as
well need it later.

Draw another circle over the shape so the outline cuts across and neatly flows back into its
outline.

Use the Scissors tool to cut points where the two lines intersect and delete out the excess, leaving
just a line flowing along the inside of the graphic.

Continue adding lines inside the graphic using circles of various sizes, then cut and delete out the
excess with the Scissors tool.

Select the Pen tool and click on the open point of the line to continue the path. Roughly draw a
route around the graphic until you reach the other end and click on the remaining open point to
close the path. Select this shape along with the overall graphic shape and click the Divide option
from the Pathfinder window.

Right click and select Ungroup, then delete out the shape with the rough outline. Give the newly
created segment a colour fill to identify it.

Continue this process with the remaining segments, creating smooth shapes from the intersecting
lines. Add random colour fills to each piece.

Use the Gradient tool to switch the ugly tones for vibrant colours. Select colours in their colour
wheel order (or rainbow order!), so the first piece flows from red to orange, the second from
yellow to green and so on.

Switch the gradient style to Radial and adjust the flow so the colours run nicely along the
direction of the shape.

The graphic is looking pretty cool so far, but we can enhance it with some clever shading. Draw
a circle to intersect the first shape.

Select this circle along with the first segment and press the Intersect option from the Pathfinder
palette.

Repeat this process for the other segments, then give these shapes a black fill with the settings of
Multiply at 10% opacity.

Hopefully you saved that original outline we created as well now need it to overlap our logo
graphic. Carefully position the shape so it fits perfectly over our colour version.

Give the shape a white fill and set it to Multiply, then go to Effect > Stylize > Inner Glow. Alter
the settings to Multiply, Black, 20% opacity and 5mm blur.

The addition of various gradients, shading elements and the inner glow effect really enhances the
graphic, giving it depth and a three dimensional appearance.
If you enjoyed this post, please consider giving it a tweet or a thumbs up using the social buttons
below to share it with your friends. It really helps out!