Go Back   iGuides Webmasters and Business Talk > iGuides Tutorials > Designing Tutorials
Register FAQ Rules Members List Calendar Search Today's Posts Mark Forums Read

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)   Report Post  
Old 11-13-2007, 03:25 PM
WorldWide's Avatar
Administrator
 
Join Date: Sep 2007
Location: AllinfoDir.com
Posts: 169
WorldWide is on a distinguished road
iTrader: (1)
Send a message via ICQ to WorldWide Send a message via AIM to WorldWide Send a message via MSN to WorldWide Send a message via Yahoo to WorldWide Send a message via Skype™ to WorldWide
Default How to Design a Logo

A very common task among the many people out there who are starting up projects or companies; well that’s what I’m going to teach you how to do in this very simple tutorial! No special jargons or lingos to confuse you but good ol’ English so that everything’s crystal clear.



First of all, we’ll set up a 512 x 512 canvas (it should be big enough for most logo applications) with a 72 dpi (dots per inch) setting and an 8bit RGB color mode with a transparent background.

With that up, what we should consider next is the theme of the logo. Is the project or company professional/corporate-like, creative or perhaps energetic? This has to be addressed to be able to convey the most appropriate way the project’s/company’s mission can be visualised.

For example, in this tutorial, I want something that conveys something interpersonal (perhaps something related to the services industry) and also expressing creativity. Things that come to mind are people, art, music, the internet, etc. For this tutorial I’ve picked a humanoid-inspired design using curves to convey that.

Select the Ellipse Tool (Shortcut key: U) and drag out a circle while holding the Shift key for a perfect sphere. In the Layers window (Shortcut key: F7), double click the Layer thumbnail (the square on the left) and choose a colour that you like – I chose a blue color (#3BCCF0).



Next, we’ll simply rasterize the layer by right click on the layer and select the Rasterize Layer command. This ‘cements’ the shape and color we want for the ellipse.

Select the Eyedropper tool (Shortcut key: I) and sample your chosen color on the circle. You’ll notice that the foreground color has been set to the sampled color; this will be convenient when we create more shapes later on which will use the sampled color by default.



Next, we’ll want to continue the curvy theme and stick with the Ellipse tool for a bit more.
Drag out a bigger circle this time, approximately 4 times the size of the original circle. You’ll notice that the new circle already uses the color you chose earlier on.



With that draw, rasterize the new circle the same way you did with the smaller circle. The next part will get a little tricky in order to get the desired shape.
Select the Elliptical Marquee tool (Shortcut key: M) and drag out a rough oval so that about ¾ of the circle sits within the selection area of the elliptical marquee (you might want to increase the size of your window size of your canvas). Feel free to reposition the selection so that it’s somewhere in the middle (horizontal-wise) of the circle.



Once that’s done, hit the Delete key and you should get a shape roughly resembling uplifted arms. Deselect the selection marquee by locating it in the menu bar – Select > Deselect or simply using the shortcut keys Ctrl + D.



Next, select the Move Tool (Shortcut key: V) and activate the Free Transform tool (Shortcut key: Ctrl + T) located in the menu bar, Edit > Free Transform. A rectangle with squares around should appear; now right-click within the rectangle and you should be presented with several transform choices. We’ll be using the Skew transform for this.



In the parameters, set a vertical scale of 150% and a vertical skew of 10 degrees with rest of the parameters left at 0. Confirm the transformation by hitting Enter.






You should get something resembling an arm lifted higher than the other.

Next, make a duplicate of the ‘arms’ layer either by locating the Duplicate layer command in the menu bar, Layer > Duplicate Layer ..., or simply by dragging the ‘arms’ layer over the icon resembling a curled paper in the Layers window.



With the Move tool still selected, use the Free Transform tool and right click on the duplicated layer. Select the Flip Vertical command and you should get an inverted set of ‘arms’. Move the shape by click on it and dragging it down so that it roughly resembles ‘legs’ (You might want to hold the Shift key while moving the shape to lock the movement in a single axis for greater precision).





With the ‘legs’ layer and Move tool selected, activate the Free Transform tool and set the parameters to a horizontal scale of 75%, vertical scale of 120% and the rest of the parameters left at 0. Confirm the transformation once that’s all set and feel free to reposition the legs to get a proportionate overall look.

If everything went well, you should get something resembling a humanoid figure.



At this point, you might want to position this ‘character’ in the middle so that there’s a balance in empty space in the canvas. To select multiple layers, while holding the Ctrl key, select the non-highlighted layers.
Now, with the Move tool selected, drag your ‘character’ upwards so that it’s positioned somewhere in the middle. Again, you might want to hold the Shift key for precision purposes.



If you’re happy with the shape of the logo, you’re all set to merge the layers! To do that, simply right click on any layer (while the wanted layers are highlighted) and select the Merge Layers command ... Voila! You should have a single layer in your layer window now.

Here comes the fun part: the ‘special effects’ to spruce up the flat image. Assuming your logo is following the Web 2.0 style, this part would prove both useful and relevant for other web elements that you’ll want to create.



We’ll start off with a typical glass shine. Firstly, create a new layer (Shortcut key: Shift + Ctrl + N) by locating the new Layer command in the menu bar, Layer > New > Layer. A new layer should appear in the Layers window. Now, using the Elliptical Marquee tool, drag a rough circle on the upper region of the ‘character’.

Once that’s done, fill the selection with a white color using the Paint Bucket tool (Shortcut key: G) or the fill with background (Shortcut key: Ctrl + Backspace), assuming the background color is white.
An extra tip: the Alt + Backspace does the fill with foreground command.



Deselect the marquee; you should now have a white circle (it doesn’t need to be perfect). The next part may get a little tricky, so pay attention to the steps.



With the white circle layer highlighted, while holding the Ctrl key, and click on the ‘character’s’ Layer thumbnail (it’s the little preview square beside the layer’s title). If done correctly, you should get a marquee outline around your character on the canvas.

Next, inverse the marquee selection (Shortcut key: Shift + Ctrl + I) by locating the inverse selection command in the menu bar, Select > Inverse, and hit the Delete key. If everything went well, you should get something like this:




Next, right click on the ‘white’ layer and select the Blending options command. This should bring up a new window presenting you with various ways to modify the layer. Check and select the Gradient overlay section. Set the parameters as such:
Gradient (by clicking on the drop-down arrow): Foreground to Transparent
Style: Linear
Angle: 120 degrees
Scale: 100%



Within the canvas (with the Blending options window still open), you may drag around the gradient to achieve the desired look. You should get something resembling a smooth sheen over the ‘character’.



To refine the Web 2.0 look further, open the Blending options window for the character layer.
Check both the Inner Glow and Stroke sections. Select the Inner Glow section and adjust the choke and size parameters to your preference. The color should be a lighter shade of your character’s color. For mine, I’m using a light blue (#BEFFFE) and a size of 10 px.



Next, select the Stroke section. Reduce the size to 1 px and Inside position. I chose a gray color to minimize the contrast yet adding a subtle border to the character.



With those blending options adjusted to your desired looks, your logo is as good as complete!



Should you want to add text (Shortcut key: T), you can get creative by positioning them at interesting spots on your logo. Here are a few ways:





So that concludes this tutorial on logo creation! Many of the methods mentioned in this tutorial can be applied to different situations, so get creative, create your very own shapes and all the best!

Source: iGuides.org Webmasters Talk
__________________
AllinfoDir Web Directory - Elegant Directory - Get-Index Web Resource - Shopping Directory

" iGuides Webmasters and Business Talk - Enhancing Online Business Leadership"

Last edited by iGuides : 11-13-2007 at 04:10 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Sponsored Links
  #2 (permalink)   Report Post  
Old 11-13-2007, 03:59 PM
bbrian017's Avatar
Skilled Member
 
Join Date: Oct 2007
Posts: 158
bbrian017 is on a distinguished road
iTrader: (0)
Default

World wide this is an amazing tutorial and you obviously put a lot of time and effort into this. Tonight after work I will try to make an image and I'll show you how it turns out. I am also yawooping this post great work!!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)   Report Post  
Old 11-13-2007, 04:04 PM
aditya's Avatar
Newbie
 
Join Date: Oct 2007
Location: India
Posts: 28
aditya is on a distinguished road
iTrader: (0)
Default

When it comes to designing, i am a idiot.

But still i think i need to increase my PS skills at least for some day to day work (webmasters know how much PS matters).

I will practice the above tutorial.

BTW, any other PS tutorials/books you recommend ?????
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #4 (permalink)   Report Post  
Old 11-13-2007, 04:07 PM
Newbie
 
Join Date: Oct 2007
Posts: 35
maldives is on a distinguished road
iTrader: (0)
Default

This is seriously great! Thanks a lot.
__________________
Leading Directory - Get listed today!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #5 (permalink)   Report Post  
Old 11-13-2007, 06:54 PM
Newbie
 
Join Date: Sep 2007
Posts: 20
stormy is on a distinguished road
iTrader: (0)
Default

very nice post admin. it's a very good tutorial. thanks for this.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #6 (permalink)   Report Post  
Old 11-13-2007, 09:29 PM
linkingpro's Avatar
Elite
 
Join Date: Oct 2007
Location: Lost.....
Posts: 563
linkingpro is on a distinguished road
iTrader: (5)
Default

Thanks WorldWide.Great post.You deserve a rep
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #7 (permalink)   Report Post  
Old 11-14-2007, 05:35 AM
deluxdon's Avatar
King of the Jungle
 
Join Date: Oct 2007
Location: www.travelwitheaseblog.com
Posts: 1,355
deluxdon will become famous soon enough
iTrader: (4)
Default

Great tutorial worldwide

It really helps other members. Keep up good works.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #8 (permalink)   Report Post  
Old 11-14-2007, 10:27 AM
AbhishekDaaga's Avatar
Moderator
 
Join Date: Oct 2007
Location: INDIA
Posts: 184
AbhishekDaaga is on a distinguished road
iTrader: (0)
Send a message via AIM to AbhishekDaaga Send a message via MSN to AbhishekDaaga Send a message via Yahoo to AbhishekDaaga Send a message via Skype™ to AbhishekDaaga
Default

Excellent tutorials... Very clearly u have written... even a NoOb can understand it Keep the work like this only bro
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #9 (permalink)   Report Post  
Old 11-17-2007, 05:32 PM
iGuides's Avatar
Administrator
 
Join Date: Sep 2007
Posts: 1,137
iGuides is on a distinguished road
iTrader: (6)
Default

Thanks everyone for such a nice response, and It's really an excellent tutorial. I hope even a newbie can design a better logo now after reading this tutorial.
__________________
"Enhance Online Business with iGuides Webmasters and Business Talk"
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #10 (permalink)   Report Post  
Old 11-24-2007, 12:50 PM
Skilled Member
 
Join Date: Oct 2007
Posts: 161
deadsoul is on a distinguished road
iTrader: (0)
Default

Well done man. Great tutorial and step by step guide for logo making.
This thread is starter's heaven.
__________________
Small Web Blog|| ADSPOTLIVE HOME
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Sponsored Links
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 01:29 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.1.0

Ad Management by RedTyger