This is the first of a series of Adobe Photoshop tutorials I’m going to offer on how to create a logo in “Web 2.0” style.
What do I mean by Web 2.0-Style Logo? If you follow Web 2.0 closely, you’ll see similarities in the way logos are designed: Simple, glossed, gradient, bright-colored and often came with a slight reflection and a beta sign just like this:
Pretty ain’t it? Here’s a quick 6-minute video tutorial I prepared:
Some notes:
1. In Adobe Photoshop CS, I started with a new 800×600, 72 pixel/inch document with white background.
2. The font I used for the ALLEBA text is Trebuchet MS, 80 point and hexadecimal color 3399CC. You may use similar fonts such as Arial, Tahoma or Helvetica. I used the same color to replace black for the gradient effect. I set the opacity of the reflection to 50% and that of the white gloss to 30%.
3. For the starburst (where BETA is written), you need to open Character Map (Windows only) via Start > Programs > Accessories > System Tools > Character Map. Switch to the Wingdings font where you can find the starburst that I used for this tutorial. Copy the starburst then return to Photoshop. Pick the text tool, click on the workspace and paste. You will initially see the “®” character. Highlight “®” then choose the Wingdings font from the toolbar. Set the size to 60 pt and hex color FFCC00. The two colors I used for the gradient are FFCC00 and FFFF66 at a 135 degree angle. I set the drop shadow to 30% opacity.
4. I created this tutorial for those who are already familiar with the common tools and functions of Adobe Photoshop CS. This is my first attempt in creating a video tutorial that took me 2 hours to come up with a decent version! If you have any questions or are looking for additional Photoshop training, I’d be glad to answer them here.
Update: Here’s the link to a higher resolution video of this tutorial.
Happy logo making!
Nice tutorial for a web 2.0 logo. Photoshop is really a great tool to create amazing web 2.0 logos….
RJ lancecorner.com – tutorial blog
I created my first Web 2.0 logo following your tutorial and it was a breeze.
I am mentioning your blog and video in my blog so that more people can know about this.
Thank you so much.
Thank you so much for making the effort to create a most useful video tutorial. I am trying to discover the best settings for publication to YouTube so that I can create a series of tutorials myself. Can you tell me which video capture application you used and your settings please. Thank you again for your work.
Ray
England
Thansk a lot…….
it is exactly what I was searching for. Awesome tut. thanks for sharing.
Thanks for Such a nice tutorial. I will use this one for my web portfolio website. You gave a very nice shadow effect.
Superb Tutorial
Thanks for sharing your knowledge. This is a great resource for those who want to design Web 2.0 web applications.
…..you have done a good job sharing knowledge about web 2.0.i really appreciate it…..
Hi all,
Could you pls help me in coming up with a logo for my catery. The idea I have is to have it with a persian cat in the background and then either around or ? have the catery name which is The Big 5. I know it’s asking a lot but can u come up with some ideas please!
Thanks so much
Superb Tutorial mate..
Loved it really..
This tutorial is good, however most logos are done in a vector program. Photoshop will import smart objects, but exporting is always raster. Have you considered trying this in Illustrator or Flash?
umh, gud day…can u pls. help me to make a logo for our feasibility study..?? our hotel name is Ai shy hotel.. the word “Ai” came from the Chinese word love!!
Thank a lot..
Not bad. Next time, save yourself some time and copy layer style then paste the layer style on to the other layer.
Better yet, just do one type layer, then do your layer styles. Duplicate that layer, reflect. Done
Not that bad i think, it makes sense to me actually… but it would be nicer if you do more screen capture than just writing… but all in all nice post…
good job
great tutorial.
Nice tutorial! Hopefully it will help me at work!
Slumberg (aka Turtles Slumberg)
nice tut…thanks for the tutorial buddy.
Really inspirational galleries gave me a few ideas for web 2.0-Style Logo and tutorials 🙂 job well done
thank you for sharing!
it’s my first time to try this and it looks pretty nifty. thanks for the easy to follow tutorial. 🙂 linked this entry in my blog. 😀
I was actually looking for a good tutorial for a web 2.0 logo. And your video tutorial is great. Thanks for sharing it.
Great Post. It would be a great help for the beginners. Thanks for the post 🙂
Nice tutorial!
Thanks a lot.
Good tutorial for a web 2.0 logo.
Thanks for teaching.Nice work.
Tank U!
강좌 잘~ë³´ê³ ê°€ìš” ^_^
대성하세요 !