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:
PhotoshopTrend: Web 2.0 Photoshop tutorials
A categorized directory of hundreds of photoshop tutorials.
Web 2.0 Tutorials
Glossy web 2.0 button
Learn how to make a nice Web 2.0 style Glossy Button
using Layer Styles, also how to make a rollover
Cool Web 2.0 Badge
Make a good looking Web 2.0 style Badge, in a easy way
using the Polygon Tool and some Layer Styles
Photoshop Tutorial: How to Make a Web 2.0-Style Logo
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, I’d be glad to answer them here.
Happy logo making!
Video and other tutorials:
http://www.photoshoptrend.com/
Tutorial: How to Make a Web 2.0-Style Logo
Linear Mode
