Create TheDesigned.com's Read More Link in Photoshop

Posted in Resources with One Comment

I’ve gotten quite a few praises on the “read more” link on this site. I admit it, is is a little “Apple-esque” and I did get my inspiration from Apple.com. However that still being said, I’ve had many questions about it so I figured I’d show you guys how simple it was to make! So sit back, relax, and take a look at this tutorial…

Step 1

Select the ROUNDED RECTANGLE TOOL and create a shape. Make sure that the radius is set to 10px. It doesn’t matter what the fill color is.

Step 2

Go to the layer style and change the Drop shadow to have an OPACITY of 50%, ANGLE of 90 degrees, DISTANCE of 3px, SPREAD of 0px, and SIZE of 3px.

Step 3

Stay in the layer style window and select Gradient. Were just trying to get a subtle gradient, so on the left side we’ll want a color of #2281ac and on the right, #309dce. Then select Stroke from the left column navigation and change the fill color to #2281ac.

Step 4

Select the ELLIPSE TOOL and hold down shift to draw a perfect circle with a fill color of #175977. Go to the layer style and click on Stroke. Change the FILL TYPE from COLOR to GRADIENT. We are trying to make another subtle gradient, but this time make it the opposite of the one you did for the rounded rectangle. So on the left side of the gradient make the color #309dce and on the right #2281ac. Your image should now look like the one below (this is zoomed in of course).

Step 5

Next, nothing fancy… just select the POLYGON TOOL and change the number of sides to 3 and make a small triangle with a fill color of #f7f7f7.

Step 6

Select the TYPE TOOL and type the words “Read More.” For the font, I used Myraid Pro Regular with a size of 11px. Then go to the layer styles and click on Stroke. Change the FILL TYPE from COLOR to GRADIENT. Again, we are trying to make another subtle gradient, so on the left side of the gradient make the color #309dce and on the right #2281ac.

Step 7

This is the final image. The only other thing you can do is make an exact copy of the layers you just made and change some of the colors around. Take a look at the final image and if you have any questions, don’t hesitate to ask them in the comments.

Related posts:

1. How to Cut Out Images Like a Professional in Photoshop
2. 13 Spectacular Firefox Add-ons for Twitter
3. 25 Sites with Subtle Gradients
4. ffffl*ckr – Browse Favorite Photos
5. Link Collection April 2010