This tutorial is focused on the process of creating a logo for a web design client. It will cover developing a logo from concept to completion and working with the client throughout this process. This tutorial series covers both the technical processes and business issues related to designing this fly logo.
In this second part of this two part series we will review the steps taken to create a colorful modern logo design in motion. Jump in and learn the design processes and Illustrator techniques involved.
Further Discussion with the Client: WebFly Solutions
In Part 1 of this two part series we reviewed the initial logo design presented to the client Webfly Solutions. The feedback received from the client about the first design was really clear. We decided to go back to one of the early ideas we discussed of having the fly zooming across an orange orb. The client wanted the fly to look a little less lifelike and a little more happy.
In this tutorial which is Part 2 of the series we’ll look at the process of designing the final logo for this client. The good thing about the second design of this logo is that I’ve already done research, sketching, and a fly design. So, its like I can see flies buzzing around in my head. This makes it easy to create the final logo design.
Sketch
Sometimes I do a lot of sketching. But in this case there was already a lot of prep work done. Also there had been a lot of conversations with the client. This made it so that I had a good idea of what I was going to make for the final logo design. So, I wasn’t concerned about drawing a tight sketch. I just wanted to capture the idea of what I was going to make. Get something down on paper so I didn’t loose my mental image. You can see the sketch to the right.
There were also a couple design issues I wanted to work out on paper. With the sketch I was mostly working out where the fly would be positioned and the movement and shape of the motion trail.
I decided that it wasn’t necessary to import the sketch into Illustrator. I had all the positioning worked out and I’d just create it all in Illustrator. Let’s get to it.
Creating the Orange Sunny Orb
In Step 1 below I drew the orb shape, grabbed the Mesh Tool (U), and added some Mesh Lines. Next I added some yellow, orange and red on the Mesh Patch and Mesh Point areas. Using the Mesh Tool is an advanced subject that I’ll cover thoroughly in another tutorial in the near future. Then I rotated (R) the orb and added a shadow under it. The shadow has a Light Gray to Mid Range Gray Linear Gradient.
In Step 2 I created a circle a little smaller than the orb itself. I gave the circle a red to white linear gradient and set the Angle to 90 Degrees. Then in the Transparency Palette I set the Opacity to 30 percent.
In Step 3 I created a moon shape. Gave it a Linear Gradient that goes from Red to White and has an Angle of 135 Degrees. Then I set it to Multiply in the Transparency Palette. The results of our orb are on the far right. Also, note that the fly will be covering up part of the orb on the lower right.
Design the Fly
In Step 1 of below we create the flies body parts, which are shown as gray. Then we copy these shapes, enlarge them a bit, and overlay them over our body parts. This is shown as black outlines. The outlined shapes will be used to cut out our shadows from the body.
In Step 2 we select one body part and its overlaid shape and go to the Pathfinder Palette and hit Divide. Erase the excess shape outside the body part. And your left with a main body part and a shape at the bottom we’ll use for the shadow. Repeat this process with each body part.
In Step 3 we overlay our shapes. The head should be on the top layer, then the middle body, and in back is the tail. We’ll move on to adding the wings, adding details, and colorizing the fly next.
In Step 1 Below we create our fly’s wings with the Pen Tool. Then we give it a Linear Gradient from Dark Gray to Light Gray to White. The Angle is set up so that on each wing the dark gray falls on the left side. This adds some depth to the wings. Then we open up the Transparency Palette. The left wing is set at an Opacity of 90 percent and the right at 75 percent. This will show up more when we place our fly over our Orb shortly.
Next we add Green Linear Gradients to our body parts and shadows. The Gradients go from Bright Green to Midrange Green to Dark Green. You’ll have to play with the gradients Angle until you get a look like below. The body part and shadows have the same colors. But the shadow has most of the gradient made up of the Dark Green.
In Step 2 we create a Dark Green Ellipse for the eyes. Then give it a highlight by placing a white shape in the top right hand corner and setting its Transparency to 60 percent. We also draw a mouth for our fly and give it a Midrange Green Color.
In Step 3 we place our fly over our Orange Sunny Orb background. By placing it on the right it leaves us some room to add a motion trail behind the fly on the left.
Add a Motion Trail
In Step 1 on the left below you can see the shape of our motion trail that needs to be created. In Step 2 below you can see how this shape is placed behind our fly, but lines up with our orb on the left. In Step 3 we give our motion trail a White to Red Linear Gradient. And we give it a Transparency of 70 percent. All that’s left for our fly logo design is to situate it with our text.
Inserting Our Text
I used the same text that was created for our last logo design. I gave the “Web Fly” letters a complementary gradient color and kept the “Solutions” a plain black. Our final logo design is below.
Present the Final Design to the Client
After some further discussion with the client I found that he really wanted the logo to be blue. So, I created a blue version for the final logo presentation as well. As with all logos I make, I created a flat color version and a one color version for print as well.
I sent the image above as well as the images below for review to the client. As you can see the blue doesn’t look bad, but the green one just looks a little bit better. So, I was happy to see the client use the green one.
The client being a web designer certainly has familiarity with graphic tools. You can see on the Webfly Solutions website that the client made some edits to the logo before putting it up live. The text got changed, the smile was removed from the fly, and the colors were toned down a bit.
Conclusion
In this two part series on Creating a Fly Logo Design we covered some technical processes of creating the logo in Illustrator. We also reviewed the design process of creating this logo from research, sketching, to design implementation. Another important part of this process is the conversations, recommendations, and negotiations that occur throughout the process with the client. Ultimately, this logo is being created for a company and its essential to be able to partner with your clients throughout the process.
I’d love to hear any stories about your logo designs in the comments and of course any questions you have I’ll help you out with. Thanks.
written by admin