Create a reflective counter in Photoshop
Create a reflective counter by following this step by step Photoshop tutorial.
Create a reflective counter in Photoshop
In this Photoshop tutorial we will be creating a reflective counter graphic. This counter graphic looks fantastic and can be used to display all sorts of information and can be used as a hit counter, displaying a statistics, displaying a financial figure or anything else you like.
This particular tutorial will focus on designing the counter graphic in Adobe Photoshop, the coding of which will be covered in a seperate tutorial. So, this is what it looks like and is what this Photoshop tutorial will be teaching you how to make.
1. Getting started
I’m starting by creating a new document in Photoshop with a white background. The document dimensions are 500px wide by 200px high. You can of course change these to suit your needs however be aware that in this tutorial I’ll be using guidelines – if you are using a different size canvas you’ll need to adjust the guideline positions as necessary.
Then, using the paint bucket tool I’ve filled the canvas with the colour #dde0e5 – this is just to offset the counter from the white so feel free to use whatever colour you choose. It’s not much at this point but this is what I have so far.
2. Guidelines
In Photoshop and in many other graphics design tools guidelines or guides are a great way of making sure that everything you do is accurate. For this Photoshop tutorial I’ll be using a few guidelines so that the size of my counter is exact and that it looks proportional.
To create a new guide in Photoshop go to View > New Guide. In the window that appears you can set the orientation of the guide as well as its position. Using this window go ahead and set up the following four guides.
Horizontal, 75px
Horizontal, 125px
Vertical, 50px
Vertical, 450px
The guides should now be visible. These four guides will help us to position our counter right in the center of the canvas as well as to get an accurate height and width.
3. Main graphic
Select the rounded rectangle tool from the tools window and make sure it is set to draw only the path. Set the radius to 10px and then click and drag from top left to bottom right within the rectangle shape which the guides have created for us.
Open the paths window (Window > Paths) and you should see a path called ‘Work Path’. Holding down the Ctrl key on your keyboard single click on the ‘Work Path’ path. Doing this will now make a selection from the shape we have just created. Your selection should look like this.
Go back to the layer window (Window > Layers) and create a new layer – call it ‘Graphic’. Using the linear gradient tool with a gradient ranging from #fafbfd to #d8dcdf click and drag from the top of the selected area to the bottom. This will fill the selection with the gradient. It will look like this.
4. Adding some style
Great! We’re now going to give this shape a bit of style. Right-click the ‘Graphic’ layer and select ‘Blending Options’. We’re going to be setting two things here, a drop shadow and a stroke. First, the drop shadow. The colour used is #000000.
And then, the stroke. The colour for this is #dedede.
Close the blending options window by clicking ‘OK’. Your image should now look like this.
5. Vertical dividers
We’re now going to add the vertical lines which divide the digits on the counter. To do this we will use the single column marquee tool. First though, let’s create some guides to make sure they are evenly spaced out. In my counter I’ve got five vertical lines allowing for 5 digits and a bit of text on the right. You can of course have as many or as few as you like. To follow mine exactly create the following guides.
Vertical, 100px
Vertical, 150px
Vertical, 200px
Vertical, 250px
Vertical, 300px
This has given us five equal sized sections in which to put our digits. Now, using the column marquee tool make a selection just left of the very first guideline. Create a new layer called ‘Divider’ and use the paint bucket tool to fill in the selection with the colour #d6d6d6. Repeat this process as many times as necessary until you’ve got all your dividing lines in place.
Using the rectangular marquee tool make a selection above and below the graphic using the guidelines to help you. Then simply delete any parts of the divider lines which go outside of the graphics shape. You should end up with this.
6. Shiny overlay
Ctrl and single click the ‘Graphic’ layer which should make a selection of it. Now, holding down Alt on your keyboard using the rectangular marquee tool start from the bottom left and drag about half way up and all the way across the selected area. It doesn’t need to be exact (in fact it works better if it’s slightly off) but you should now have only the top half of the graphic selected.
Create a new layer called ‘Shine’. Using the paint bucket tool fill the selected area with white, #ffffff. Now change the pacity of the ‘Shine’ layer to be 30%. A shortcut for doing this is to just hit the 3 and 0 keys on your keyboard. There should now be a nice shine on the top.
7. Finishing up
If we were going to jump in right away and slice and code this thing then this part would be finished. However, just for now to get an idea of how it looks with text on it we’re going to add some digits. Use the text tool and add a digit or anything else you like between each divider. Then to the right put in a little bit of text, I’m using the word ‘Uniques’ as I’ll be using mine for a hit counter.
I’ve used the font ‘Calibri’ and have made it all upper case. I’ve set my text colour to #2a2a2a.
And here it is, the end result. Let me know how yours turned out by posting a comment at the bottom of this page. You can also download the PSD file for this tutorial here.
The next step is to slice it up!