Alright, this is our first tutorial, so I hope you guys find it easy enough.
Today, we’ll be creating a nice and fancy date icon like this one, using photoshop.
Add more flare to your website design with great custom date icons like the ones seen on business opportunity blogs and information technology degrees white paper sites. Go easy on your cheap web hosting provider by using these css driven icons. So grab your domain registration and snag a dedicated servers list, burn it, then get into business!
This is just the photoshop work, I’ll update with how to code a date icon shortly.
Step One.
First, open up photoshop. For this tutorial, our icon is 53*53px, so I’ll change my document size to 55*55 for safe measure.
First, we’ll draw our base shape. So get out the Rounded Rectangle tool, and set it to 5px.
Draw in your shape, and set it to any color. You should now have this.
Now, I Rasterized the layer (Right click, Rasterize), and I added a solid edge. To do this, I simply took the rectangle marquee and filled over one of the corners. You should now have this.
Step Two.
Alright, now we have our base shape. We’ll add some styling effects.
Right click the layer and go to Blending Options.
Inside Gradient Overlay, Set it up as follows.
- Blendmode: Normal.
- Opacity: 100%
- Gradient from: #1f7be5 to #4a9bea.
- Linear, at 90 angle.
- Scale 100%.
Inside Stroke, Set it up as follows.
- Size: 1.
- Position: Inside.
- Blending Mode: Normal.
- Opacity 100%.
- Fill Stroke wit: #196cc8.
It should now look like this.
Step Three.
Now, we’ll add a nice simple shine. In order to do so, we need to create a custom shaped brush. I like to use a wide soft brush. In order to get this effect, we take an ordinary soft pixel brush, and we change the roundness, so it’s flatter (wider).
So, Make a new layer, and Take out the brush tool. Select the 100px Soft Brush, and open up your Brushes window (F5). Go to Brush Tip Shape and set the Roundness to 50%. This will give us a unique shine brush.
Now, on our new layer, create one brush on the top left of our icon. It should look something like this.
Now, in order to keep our stroke open, we need to remove one px all the way around our box. This can be done simply. In your layers Palette, Ctrl+Click on the preview image of the base layer. If done correctly, this will select our shape.
Now, go to Select -> Modify -> Contract. Contract by 1px, which is the inside of our shape, no longer selecting the stroke. Now, right click our selection (you must be using the Rectangle Marquee) and select Select Inverse. Now press delete.
You can now deselect. This should remove the white shine behind the icon, and on top of the stroke. Something like this now.
Step Four
Now, for a bit of minor styling.
With our fancy shine, comes a new fancy technique! You may like it where it is, but it’s too white to match our blue! So, in order to fix this, I always switch the Blending Option over to Overlay. This gives us a nice little effect. Sometimes, you may choose to lower the opacity if some of the white is too harsh as well. This is what I get now.
Step Five
And now, onto adding in elements of a Date Icon. First, we’ll add our text date.
My text for the month is…
- Tahoma
- No Anti-Aliasing
- Size 16
- Bold
- #ffffff
Step Six
Before we continue, we need to add a holder for our text date. Having just white text on a gradient background wouldn’t be too fashionable. so, we’ll add it’s own miniature container.
I do this by Duplicating our original shape, and filling it in white. Once I’ve done that, I resize and reposition it.
So, First duplicate our original shape.
In Layer Styles, Remove the gradient overlay, and replace it with a Color Overlay, set to white.
In order to resize it accurately, and keep a 5px border, I simply select, and nudge every part of the element.
So first, select the left half, and nudge it over 5px. It should be like this.
Then do the same on the right side.
Then the same with the bottom.
Then do the same by cropping the top. This can be done with the Rectangle Marquee tool. It should look something like this.
Step Seven
Now, to finish! All we have left is the Date Number. Simply add it in with some text.
My text for the Date is…
- Tahoma
- No Anti-Aliasing
- Size 16
- Bold
- #388e1
Et Voila! You’re done your date icon.
Stay tuned everyone! I’ll update with how to code this with a single image, and two div tags using css shortly!
good tutorial but it can be done in 2 simple steps that takes about 1 miniute.
anyway- thanks for sharing!
Thanks for the comment Dvir!
I’ve made it broken down into more simpler steps for beginners.
Anyone advanced can do a beginner tutorial, but if I make it too advanced there’s lots of people that wont be able to follow along.