Using Photoshop Styles to create awesome web2.0 effects in no time

November 15, 2009 · 8 comments

by Lars


What is a Photoshop Style? A Style in Photoshop or Layer Style, is a range of layer settings and options. So when you choose to add to a shape, could be some text, for example a drop shadow, a gradient and some stroke, you have effectively created a new Style. If you create a really good style that you may want to reuse or share photoshop supports that quite well. This article shows you the basics of using styles for creating great looking web 2.0 designs and provides essential resources for further studies. Also because styles can be saved in ASL file format you will be able to find preset styles as downloads in the Internet. In this article you will find some really good web2.0 related style resources and tutorials that you should take a closer look at. This article use the famous twitter logo as a case for a simple and quick tutorial. Lets get started and you will be creating your own web 2.0 logos very soon.



Create your own Style – twitter logo as example

Trying to recreate the famous twitter logo is just for fun and to show how styles work on Photoshop. The twitter logo is simple and serves as a good starting point. There seams to be endless discussions on the Internet about what font was used in the twitter logo. Some claim that it is a hand retouched version of Chikens by David Buck. It is a commercial font that I’m not going to use for this post but I found Pico that is similar overall but have significant differences in the “e”. Download Pico install it and fire up Photoshop.

1) Create new file and make the background black.

2) Write twitter using the Pico Font at 60 pt. Notice that it looks like the original more or less except for the “e”…shame but not that importat as we’re not going to use this logo for anything excetp for trying stuff out.


3) Add stroke style to the text layer by double-clicking the text layer (high lighted with red below). The Layer Style dialog will show up.


Check the Stroke style. Change color to white and set the size to the value you think is best. I think 6pt is the right option but as good as this fits the outer size it makes space for some space in some of the letters. These can be removed later if we need to.


Save you style to the Styles view

Let’s say you’ve played for a while in the layer options and you came up with an effect on a shape that you think is worth saving for reuse. The stroke we just created may be to simple for that but it’s just an example of how you can do this.

    What you have to do is:We’re going to save new styles and you may want to use an empty style file for this work only. Get one here. Get help to install it here if you need it.

  • While being on the layer on which you have set the options for this new style (in this case the “twitter” text layer), go to the styles palette and click on ‘New Style’. You will be asked to provide a name for the Style and choose if you want to include in your styles the layer effects and blending options or not. Just check Layer Effects and save it with name twitter text stroke. The new styles will be added and can easily be applied to other text layers.
  • Reusing the style is simple. Try removing the stroke style you created on the twitter text and the reapply it by having the text layer selected and clicking on the new style. The stroke effect will now have been re-applied.

Adding more styles is simple

  • Lets try to add a gradient as well.
  • The twitter logo is not really twitter any more so I have applied it to the text “tripwire” using another font just to illustrate that the style can be applied to any text object you may have. I think this is certainly a web2.0 style logo.
  • Saving it as a style will look like this. The styles below have been saved to an asl-file and it can be downloaded here. How to do this yourselv is explained below.

Saving the styles you created to a *.asl file

  • If you have made several new styles, you might want to save them in an ASL file. Make your own ASL file by clicking on ‘Save Styles’ and choose to save in the appropriate Styles folder.slideshow

Other resources on web 2.0 styles that you should investigate

How Web 2.0 Logos are drawn

Ever wonder how these guys draw their Web 2.0 Logos? Sometimes its nice to learn from others, build up the basic skills and start your own creativity from there. In this Photoshop tutorial, I’m going to reveal you some of the nice

Web 2.0 logos, how you can draw their logo exactly the same (well, not really 100% though) with Photoshop.


Ultimate Web 2.0 Layer Styles

“Coming to the Layer Styles, I found a lot of styles on the Web to download but none of them were of the today’s trend of Web 2.0. So here is a set of 131 Photoshop Layer Styles I created in .ASL ( Photoshop Layer Style ) format.”


220 Amazing Free Photoshop Layer Styles


How to Create a Clean Web 2.0 Style Web Design in Photoshop

In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout. You’ll be using some basic to intermediate-level techniques to build your very own sleek “Web 2.0” style web design that uses the 960 Grid System.


Web 2.0 Design Kit

Web 2.0 is a term coined by O’Reilly describing the new trends in design and development appearing across a flood of innovative websites. This tutorial will show you how to create some of the more popular “Web 2.0? design effects using Photoshop.


Design a Web 2.0 Style Icon

We will learn how to design a web 2.0 style icon in Photoshop.

This is the end result.


Web 2.0 Tutorials Round-Up

We’ve collected over 65 tutorials, references and related resources, which are supposed to help you to create graphics in Web 2.0-Look. It’s nice to have them ready to hand if you need them. It’s nice to be able to look at them if you need a source of inspiration.


{ 6 comments… read them below or add one }

photoshop styles March 8, 2011 at 8:34 pm

Very well explained tutorial. The images are a great addition and help people understand better. Thanks !


Laura Millar March 18, 2010 at 4:08 pm

I love Photoshop styles, I just can’t get enough of them!
Thank you for this.


Create Your Own Myspace Layout July 20, 2009 at 4:07 pm

It’s great to see how these logos are created. I’ve always had fun when I make my own myspace layout but I am not so great in photoshop with the effects and layers. Thanks for the tips!


Mike June 10, 2009 at 7:23 pm

I’m using styles a lot. Good intro though and nice web20 ideas and links here.


FreelancerCrowd June 10, 2009 at 3:31 pm

Styles are indeed quite a tame saver at a times.


Free design logo June 10, 2009 at 3:33 am

Nice post on logo design and the designs are nice. i like the way you make the gradient as well. Do you think my free design logo site is web 2? i am not sure if it is but I made this site following the trend today.


Leave a Reply

Your email address will not be published. Required fields are marked *

{ 2 trackbacks }

Previous post:

Next post:

Web Analytics