Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
Logo design tutorial
When a company starts, the image is often one of the things that can impulse the acknowledgment of the business existence around their area of influence. A company’s image primary consists of the logo, the stationery, presentation cards, mail templates and even digital signatures. Once the company starts to gain reconnaissance, other elements are developed, such as the website, social networks and others. On this tutorial we will be focusing our attention on one of the main elements of any company’s image, the logo. Using Adobe Photoshop we are going to show you how to design a logo that works both in communication and aesthetic levels.
1. Define the fittest image for your company
It’s not the same to plan a logo idea for a fast food company than a heavy machinery factory, you need to determine your company’s identity in order to create an image that plays along with the whole idea of your business. Usually food companies employ color closer to the plates that they serve, industrial factories were defined until a few years ago for using monochromatic palettes, but now with all the environment problematic that have been showing up, they opted for using more earth-friendly colors.
Color are also strong communicators, a blue logo for example will evocate water, relax, sky or serenity, while a black logo for example will communicate seriousness, some relation with machinery works, petroleum and elegance.
Once you have defined the color that will identify your company (maximum 3 colors), you need to decide the best way to express what your business does through a simple shape, it’s not necessary to create a complex logo to be good. For example, if you’re selling fishes your logo should be a fish or something that evocates it.
2. Create the canvas
OK, for start, we are going to create our working area, so go to File>New and create a canvas following the next parameters: 2362 px X 2362 px, 72 dpi and RGB color mode.
3. Defining the background
We can leave our background with the default color, which usually is white, but I think that we can make it look a little better. You will notice that the background layer is locked, easy, simply double click over the “background” word and change it for a name of your choice.
See that the layer is locked.
And now it’s not locked. Once we have unlocked the layer, we can work with it, let’s add a gradient overlay effect, make sure to enter the same values that the picture we display next.
Now we have a subtle background that looks better than the default.
4. Tracing our first lines
OK, for start, let’s create the initial shape of our logo. Select the pen tool and trace a figure like this.
Proceed by filling the shape, simply select the layer where the shape lies and then click on the adjustment layer icon and select solid color.
And now a gradient overlay to give a nice touch to the object.
Pay attention to all the parameters we are implementing to the effect, we are going to generate a 4 color gradient.
Take care of every detail, from the angle to the blending mode.
If you follow this steps carefully, you will come out with something like this.
After learning how to make the first shape, the rest will be easier, start by making a figure with the pen tool.
Then fill it with the solid color process we already know, because we will be using after this the gradient overlay, it doesn’t matter the solid color you choose.
Until this part, it will always be the same, the changes will happen after this step, in this case we are going to start with a gradient overlay.
Proceed by adding a Bevel and Emboss effect.
Be careful with every parameter to achieve the same results that you are seeing on the screen.
Now to make it more beautiful, reduce the opacity to 80 % and the fill to 0 %.
The opacity bar affects the entire element, including the effects, while the fill bar affects only the fillings, in this case, the initial black that we applied.
Next another shape, but this one will not have effects, instead, let’s change its blending mode to overlay and the opacity to 80 %. Remember that from now on, all the figures will be initially black.
One of the great things about tutorials it’s that you don’t need to do everything right away, you can stop when you get tired and continue later.
Now to the next shape, grab your pen tool and trace it.
You now what’s next, fill the path with black.
Now the effects, first gradient overlay.
God is freezing here, I’m going for a cup of hot chocolate.
Much better, now I can continue.
The next effect is Bevel and Emboss.
Finally a new effect, inner shadow.
Draw a simple shape using the pen tool, then reduce its opacity to 6 % and change the blending mode to overlay, remember that initially all the shapes must be black.
So far it’s looking great, let’s make more objects to make the logo nicer. The next shape is a small figure at the base of the logo, no effects.
Now use a solid color to fill it.
And finally just adjust to overlay the blending mode and 90 % opacity, do not switch the fill bar.
OK, use the pen tool and trace the next figure.
Fill it with solid color, black as the rest.
Now the effects, let’s start with gradient overlay.
Next is Bevel and Emboss, be careful to follow the exact parameters.
Finally, inner shadow.
OK, we are getting closer, so don’t give up, let’s trace the next shape.
Proceed with the black filling, you know what to do.
Then comes the effects, the first one is going to be gradient overlay.
And now the bevel and emboss effect.
Make sure to reduce the fill to 0 % and leave the opacity at 100 %.
OK, one more figure, we are getting closer to the end.
And now the solid color fill.
No effects needed for this object, just adjust the blending mode to overlay and the opacity to 50 %.
And the final shape, just like the others, start drawing it with the pen tool.
Now, fill with a solid color, you know it’s black.
And the gradient overlay effect comes next.
Maybe an inner glow will work, let’s give it a try.
It looks great, we are done with the hard part, now we just need to add some texts and shadows.
The shadows are easy, the first one is just a horizontal line fill it with a black solid color.
Reduce the fill to 0 % and an inner glow effect.
And now a drop shadow effect to complete this object.
The next shadow can be done by copying some of the original objects, but let’s do it with the pen tool.
Now fill it with solid color.
And finally, adjust the blending mode to multiply and the opacity to 20 %.
We can use copies to create this shadow also, but let’s make it from zero.
There’s no need to show you the path, just fill it with black and the adjust the blending mode to multiply and the opacity to 20 %.
This part it’s done, now a color shadow to suggest a translucent surface. Simply select all the layers that compound the icon and copy paste them, then select all the duplicate layers and flatten all.
Now rotate the object 180 degrees (Ctrl + T and rotate manually or edit>transform>flip vertical) or so it looks like a reflection, then select the elliptical marquee tool, adjust the feather to around 30 px and select from the middle to the bottom of the object, then hit Supr and you will get a nice blurred sensation.
That’s it, you got the entire graphic element, we only need to add some text and we are finish.
Select the horizontal text and click over the canvas, then draw your company’s name. To change the color of the letters, select the ones you want to change and then select the color.
And we have finished!!!. I hope this exercise have assisted you on how to generate the logo for your company using Photoshop, in any case, every brand is unique and only after a long study, you can define the identity, we hope you find this tutorial useful, see you next time.
Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock
July 26th
Thanks for the tutorial, it will help me a lot on improving my company’s image.
July 28th
Hi JARD, we are glad you enjoyed this article, coming soon more great posts…
July 28th
Un tutorial bastante bueno que nos abre la mente y nos ayuda para darle mas estilo a nuestros diseños!! :)
Gracias por la informacion.
July 28th
Hola Dere3k, gracias por el comentario, pronto nuevos articulos originales.
July 30th
What if we need to print it?
July 30th
Hi Rahul, thanks for your comment, actually if you’re looking forward to print your company’s logo there are two main things to take into account, the first one is the color mode, if you’re working for screen (digital devices), you always must work in RGB color mode, nevertheless, if you want to print your designs, it’s necessary to switch it to CMYK color mode. Also it’s important to mention that for digital work the suggested DPI is 72, while in printing medias, it should be above 150, preferably 300 DPI.
August 4th
Hi Kyeeu, I like you enjoy our posts, coming soon more great tips and reviews…
September 17th
It is a waste of education to exploit Photoshop for the use of creating a logo. Anyone who has been to art school knows great logo design begins with VECTOR ARTWORK.
To use a Raster environment is to short change both yourself and your client. For example see
http://www.vanderbyldesign.com for great logo design.
September 17th
Hi Curtis, thanks for leaving your comment. As you may know, there are many costumers that prefer to get their logos in a bitmap format instead of vectorial, and there are even many clients that do not know what vectorial is and all they want is a JPEG or PDF file to deliver to their printer. I understand your point but we think that the technique is not as important as the idea, and that’s why on this tutorial we’re not just focusing on the graphic part of the process but on providing a few tips regarding how to develop a good logo that works on different environments.
November 21st
Hello!! Thank you for sharing your knowldege with us, it’s definitely creative and inspiring when it comes for us to create one. I have a question!! When you use typography for a logo there are a bunch of legal issues no one has been able to explain to me u.u Is it enough to buy the font, or do I have to buy a special expressed permission from the font owner? In any case, am I allowed to modify the type? Like enlarge the serifs or crazy things? Or do I have to have permission for THAT.
Any tip you can give me in depth would be extremely appreciated.
Like the type you used here. If you were to sell this logo to a company, you need to have the permission from the font creator (or owner), right?
Thank you!! I hope you respond
November 22nd
Hi Eya, thanks for leaving us your comment. When you use a specific typeface in a logo, you need to remember that they’re intellectual property and are subject to copyright and trademark laws, you will usually need to contact the font’s author to get permission for using the typeface in your designs, including making modifications to the design. You can visit fontwise.com to get more information regarding typeface legal terms and more…
November 27th
This is an awesome site. I like the posts you guys have, great content. I have a site for graphic designers also if you interested, check out http://www.bigvectors.com for a bunch of free vector art downloads, not trying to spam, just thought you guys would like my site.
February 17th
We are LogoProDesign as a Creative Logo Designer, We checked your artwork collections. Those are amazed us. Thanks for that type of good work collections. We regularly checked your website for good artwork example.
ThanksDavid Thomas
February 17th
Thanks for your comment David, it truly encourage us to keep posting top quality articles, tutorials and resources…
March 2nd
Good tutorial but not sure about the logo itself. How would this work in black & white? Why not use illustrator (scalability) for this?? Maybe it was just not the point of this tutorial but just my thoughts on it.
March 2nd
Thanks for your comment, what you’re saying is absolutely right, Illustrator guarantees a much better scalability property than Photoshop but we decided to show the way to do it with this program on this case so people can find different ways to create awesome logo designs…
August 25th
Awesome!
September 22nd
Very informative and well written post! As a logo designer with almost 2 years of experience in designing logos, I can safely say that immense concentration, attention to detail and a creative are required in this field. There are no shortcuts.
September 27th
Wow ! Amazing ! Could you share the psd files please ? Only for personnal use of course, absolutely no sharing !
Thanks !
October 19th
great tutorial, its really helpful in teaching a glassy effect for shapes that arent squares or circles.
I enjoyed the indepth icon design tutorial from iconshock that went through all aspects of design…you guys should do the same kind of write up for logo design!
October 21st
Awesome Andy, it’s great this tutorial’s been helpful to you!
December 7th
http://www.webdesignshock.com is very informative site
December 12th
Best Regards!
March 19th
Great tutorial. When making a logo you also have to think about how you are going to use it. If you are a company that will put his logo on a shirt keep in mind that the more intricate the design the harder it gets to be printed or embroided.
May 13th
The biggest problem with this tutorial is not only the horrible squiggly lined arrows that any real designer would vomit at seeing, is probably that the first step of creating a logo begins on a sketch pad not in photoshop, and not just anyone can create a nice logo.
Your tutorial fails in that it should be the steps of developing a logo idea and not drawing one up in photoshop because without the proper idea background of it, well it’s going to look like crap.
Rule #1 of logos: It should not be generic, it should not work for any other company name besides your own.
May 14th
Hi Susan, in this tutorial we work the most on the actual illustration of the logo. Take it easy!
Logo design tutorial http://su.pr/2x36qL #design #useful
RT @webdesignshock: Logo design tutorial http://su.pr/2x36qL #design #useful
RT @webdesignshock: Logo design tutorial http://su.pr/2x36qL #design #useful
Logo design tutorial http://t.co/p1F065Vd #design #useful
RT @webdesignshock: Logo design tutorial http://t.co/p1F065Vd #design #useful