Create Web 2.0 Style Logo with Photoshop

Advertisement

In this tutorial i am going to show you how you can create one logo with web 2.0 style.

Note: This tutorial was published before on another small site some years ago. I decided to close that site but i always liked this tutorial and he got a lot of positive reviews. So i decided to update it and publish it here at Photoshop Star.

Final Image Preview

Create Web 2.0 Style Logo with Photoshop

Step 1

Create a new document with size of 600 x 300 pixels and fill it with white color.

Create Web 2.0 Style Logo with Photoshop 1

Step 2

Create a new layer. Select the Polygon Tool, set sides to 3 and on Polygon Options select Smooth Corners.

Create Web 2.0 Style Logo with Photoshop 2

Set foreground color to #91D638 and draw a polygon facing up.

Create Web 2.0 Style Logo with Photoshop 3

Step 4

With layer selected, go to Layer > Layer Style > Blending Options > Stroke.

Create Web 2.0 Style Logo with Photoshop 4

Create Web 2.0 Style Logo with Photoshop 5

Step 5

Create a new layer. Add a white polygon on the center, slightly smaller than the green polygon.

Create Web 2.0 Style Logo with Photoshop 5

Step 6

Create a new layer. Draw another green polygon, slightly smaller than the white polygon.

Create Web 2.0 Style Logo with Photoshop 6

Step 7

With this layer selected, go to Layer > Layer Style > Blending Options and add the following styles:

Create Web 2.0 Style Logo with Photoshop 7

Create Web 2.0 Style Logo with Photoshop 8

Create Web 2.0 Style Logo with Photoshop 9

Step 8

Merge all visible layers into one except background layer. Duplicate layer and rotate upside down and you will have something similar to what i have.

Create Web 2.0 Style Logo with Photoshop 10

Final Image

Now add some text using font Myriad Pro, Semibold, Smooth, 47px and color #888888.

Create Web 2.0 Style Logo with Photoshop

You can see now logo with different colors:

Create Web 2.0 Style Logo with Photoshop 11

Advertisement


  • http://iapdesign.com iapdesign

    Very nice and simple tutorial for creating web 2.0 logo very much appreciated.!

  • http://www.alherabd.com farid

    Professional & i like very much such type of logo.

  • alexhairyman

    Very nice, quick and easy, and doesn’t use illustrator like a lot of tutorials

  • Rakesh

    Very nice……………

  • Cece

    very good, but im having a hard time with duplicating & rotating the pic…

    • Cece

      Never mind.. i figured it out. But good tutorial though!

  • Howdy

    How to rotate? Im trying but it puts error “open gl” is required to appy on document

    • Howdy

      never mind, i got it

  • http://www.tutsnow.com Tutsnow

    creating an elegant yet minimalist logo takes a lot of discipline… hats off to you mate! great job….

  • braifen

    Thank u for the tutorial, i love it

  • Albert

    great tut!

  • steffenw

    Best detailed tutorials I’ve seen so far. Very usefull

  • Suneel

    it’s great tutorial.

  • Micah

    good tut! :D

  • CHAOS

    That’s so cool! Thanks1 Fast and professional!

  • ovi

    Thanks.

  • http://www.gctraiwindroad.edu.pk Muhammad Wajid

    nice way and nice designed