Modern Green Logo

May 18th, 2008

If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!


Step 1

To start off with we need to create a new document (File > New). The size I have chosen is 540 by 440 pixels (you can leave the other settings to their defaults).

To fill in the background with a radial gradient we are go

ing to be setting our foreground to a dark brown (#2b201b) and our background colour to a darker brown (#1f1511). Select the gradient tool from the toolbox and set it to radial. Left click somewhere in the top left quarter, drag to the bottom right and release.

Step 2

Secondly, we are going to be making the shape of the logo we are going to be building from. So create a new layer (Layer > New > Layer) and select the elliptical marquee tool. Make a circle in the middle of the document 300 by 300 pixels.

We are now going to be filling the selection with a green gradient. Use the same method as we did in step 1 for the background to add a radial gradient from a light green (#bad43d) to a darker green (#8ca926).

Step 3

Now we are going to be taking a slice out of the circle by making a selection on top of the circle (taking up about three quarters but leaving the left and bottom parts). Hit delete on your keyboard and you should be left with something like this.

Step 4

Duplicate the moon shaped layer (Ctrl + J). Rotate it anti-clockwise a couple of notches (Ctrl + T and then drag around the outside of the box).

Step 5

Repeat step 4 and you should have something like this as your shape, easy huh?

Step 6

Now we are going to be shrinking it. I made the shape large at first for two reasons: so that it will have more detail if we want to expand the logo for some reason, and because it is easier to work with when it’s larger with some of the previous steps.

Select the three moon shaped layers and merge them together (Ctrl + E). Scale it down to about a quarter of the size (Ctrl + T and drag one of the corner boxes inwards).

Move the logo across to the so that you have room to add in some text shortly.

Step 7

We are now going to be applying an outer glow to our logo.

Layer > Layer Styles > Outer Glow

Step 8

The last task is to add the text for the logo. Select the text tool and add in some text. The font I used is Delicious and font size 60 pt.

Step 9

Lastly we are going to be adding a couple of layer styles to the text layer.

Layer > Layer Style > Outer Glow

Layer > Layer Style > Gradient Overlay

And here’s the finished logo.

Posted by PSFreak! at 23:05 on May 18th, 2008 in Web Graphics

23 Responses to Modern Green Logo

  1. Eugenio says:

    Clean design

  2. Dayo says:

    great to finally have a new tutorial after one month of silence.

  3. James says:

    Yea I’ve had a lot of jobs recently and now I’ve finished most of them up so I should have time for psFreak :)

  4. Se7eN says:

    i can’t find the eliptical marque thing

  5. se7en says:

    and where do I give the dark brown color?

  6. James says:

    Go to your tools window and left click and hold down the rectangular marquee tool (second button down in the single column CS3 version) then select the elliptical marquee tool. Alternatively the shortcut is Shift + M to toggle through the marquee tools.

    The dark brown colour goes on the background (in a gradient, a light and dark brown). Are you having troubles with applying the gradient?

  7. Red-Flash says:

    How do you save your files as High Definition files?
    I currently use the JPEG Extension and then save it as ‘Maximum – 12′

  8. James says:

    High definition is just a higher resolution (number of pixels) so if you start with a canvas size of 1920 by 1080 pixels I guess you could call that high definition.

    If you want to save your documents in their layered form with no quality loss save it as a .psd (photoshop document) otherwise the .jpg should be fine for web use? What problem are you having with the .jpg extension?

  9. Red-Flash says:

    The problem on the .jpg extension is that I loose quality if I save it.
    I currently don’t use my pictures on the web because of this.
    I also used to make other an other kind of logo’s, called Apophysis.
    Made with a program called Apophysis. With that program you could save the pictures as a .png extension and you could select amount of pixels you would like to have in the picture. (Quality)
    Its named ‘Rendering’ in the Apophysis program. Is such option available in photoshop? Or can this also be done in another program?


  10. James says:

    I don’t think there is a Rendering option in Photoshop (if there is, I havn’t seen or used it). I find the .jpg extensions good at 80% for web use to save bandwidth although if you want it to be at it’s highest quality you should use the .PNG format.

  11. Red-Flash says:

    Thanks, now I’m losing no quality.

    I also have a tip for those who are using this tutorial.:
    If you want the logo in an other colour, then you just need to add a gradient map. (Gradient map can be found at: Layer > New Adjustment Layer > Gradient map)And then choose your colours, such as a normal Blue and a Darker blue. Then click ok and you will have an other colour.
    Then right click the gradient map and set it to ‘hue’ .

    I really liked the outcome of the tutorial and the outcome of my little change to :)

  12. Nate says:

    Nice and easy tutorial. Great final result!

  13. Riz says:

    Great tutorial!

  14. shazad mirza says:

    Hi thanks for the tutorial it was very easy to follow good job

  15. Eric Shafer says:

    nice tutorial

    could you please enable Feedburner updates via email?

  16. z says:

    how do you do step 3, I made a marquee selection and hit delete, nothing happened

  17. iHashem says:

    I like it ,, simple & clear !

  18. Mark says:

    So durr… Whats the difference between a drop shadow and this black outer glow?

  19. when i saw it at psdtuts i was thinking it might be big tutorial to get the result but it came really small, just sime and great