http://tinyurl.com/lkm6h5 Subscribe to the Rss Feed

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.
First Image for the Read More Tutorial

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.
Drop Shadow

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.
Gradient Image

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).
Tutorial So Far

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.
Triangle Image

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.
Text for Read More

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.
Final Image

About the Author

Greg loves design, marketing, and new media. You can follow him on Twitter @gregdougherty.

0 Bookmark(s) in Delicious Stumble Float

  • h1brd
    09-03-09

    Simple but very well done. Can certainly be useful to some, keep up the good work.