Revolution X

Graphics Community => Photoshop Tutorials => Topic started by: Celebrus on May 27, 2009, 12:15:12 pm



Title: Painless Forum Markers
Post by: Celebrus on May 27, 2009, 12:15:12 pm
Painless Forum Markers
This tutorial will teach you how to create forum markers(new and no post icons next to individual boards) using Photoshop. The forum markers we will be making shall be 32x32px in size.

Step 1
Create a new document of size 32x32 pixels with a transparent background. Select two different grays. I have #a7a7a7 and #8d8d8d.

Step 2
Draw a gradient over your canvas using these colors.
(http://localhost/tuts/fm1.png)

Step 3
It's time for some gloss. Use the elliptical marquee tool to create a circular selection over your image.
(http://localhost/tuts/fm2.png)
Now create a large white to transparency radial gradient on a new layer. Deselect(Ctrl+D) and set this layer to soft light. Lower it's opacity to around 50%.
(http://localhost/tuts/fm3.png)

Step 4
It's looking real plain now, but we will fix that. Now lets create a border.
Create a new layer for the border. Press Ctrl+A to select the entire canvas. Then go to Edit>Stroke and use these settings.
(http://localhost/tuts/fm4.png)
Lower this layers opacity to around 20%.
(http://aetus.net/tutorials/photoshop/forum_markers/fm5.png)

Step 5
Let's add a line around the bottom of the forum marker. Zoom in as far as you can go, and then create a new layer. Get your pencil tool out and draw a white line with a 1px brush leaving gaps around the border as show in the image. Hold down the shift button while drawing the line so that it is straight.
(http://aetus.net/tutorials/photoshop/forum_markers/fm6.jpg)
Set this layers opacity around 10%. Now draw a similar black line just above the white one on a new layer and set it to soft light at 50% opacity.
(http://aetus.net/tutorials/photoshop/forum_markers/fm7.png)

Step 6
Now we are almost done, all we need to do is put up a shape in the marker. It could be anything you want, such as your logo, but I am just going to put one of Photoshop's default shapes there, that looks like a '>' there. I set it's blending mode to 'Soft Light'.
(http://aetus.net/tutorials/photoshop/forum_markers/fm8.png)

Step 7
Time for coloring! Pick your color and fill a new layer with it and then set the layer to 'Soft Light'. I will be using blue. You will need to play around with this for a while. If your color isn't saturated enough, you can duplicate the layer or do a hue/saturation adjustment.
(http://aetus.net/tutorials/photoshop/forum_markers/fm9.png)

Step 8
All you have to do now is modify this icon to create the rest of your icons. Lower the opacity of the shape a bit to get your no new posts icon. Bring the opacity back to earlier and use the same technique we used to create the line at the bottom of the marker to create a little shape on top for your sub-new posts or child board new posts indicator. And here's the entire set-
(http://aetus.net/tutorials/photoshop/forum_markers/fm9.png) (http://aetus.net/tutorials/photoshop/forum_markers/fm10.png) (http://aetus.net/tutorials/photoshop/forum_markers/fm11.png)

I hope you enjoyed this tutorial as much as I enjoyed writing it.

NOTE: Original Topic: http://aetus.net/forum/index.php?topic=110.0


Title: Re: Painless Forum Markers
Post by: deathwilldie on May 28, 2009, 05:08:36 pm
Nice tutorial!  I love that you made a video tutorial and a text tutorial :D


Title: Re: Painless Forum Markers
Post by: Exilis on May 28, 2009, 07:50:41 pm
I remember wondering what he meant at one point and saying a video tutorial would help, then I was surprised when he actually made one. XD


Title: Re: Painless Forum Markers
Post by: el mafioso on June 12, 2009, 05:35:39 pm
this is what i came out with

(http://i291.photobucket.com/albums/ll285/tecatin1/iconfr.png)
(http://i291.photobucket.com/albums/ll285/tecatin1/iconfr1.png)


Title: Re: Painless Forum Markers
Post by: Mojobojo82 on June 13, 2009, 09:08:50 am
Awesome Guide!
Im going to start with beginner ones for now... Hope i get better >:D