ShareTweet

I love doing small jobs for previous customers who want to keep the same look and feel of my original design even for temporary advertisements or little features. Ashely Walkup from Beauty 4 Moms and Embracing Beauty is going to be featuring a virtual baby shower on her WordPress blog, Embracing Beauty, and asked if I could create a little button for her to advertise this event. I was delighted to do it, especially as it involved two of my favorite things – girlie design and babies! Let me give you some basics on how I designed this button, and share with you how to wrap text around a path in PhotoShop.

First, I created a new file in Photoshop in the pixel size that I wanted the final button to be. I also ensured that RGB was chosen and that the resolution was set to 72 (web resolution). I created the brown and pink circles and style them with bevel and emboss, a pattern overlay (from a pattern I created previously) for the center, and drop shadows, than I found a royalty free picture online of an adorable baby to use for the button, and edited it extensively in PhotoShop by using the blending options to blend it into my button design background as well as gave it a pillow emboss, a slight inner shadow, and a light gradient so that my text stood out really clearly on top of the image.

I made sure to make use of the brown and pink colors from her site, along with the font styles and beveled look of the social icons I created for her sight as well so that this little button ties in perfectly. To add some more depth to the font, I added a very slight inner shadow to each set of words. I also broke up the text of the main wording so I could position each word exactly where I wanted it to be rather than being stuck with the alignment of the text as naturally displayed.

Wrapping Text Around a Path: One feature I needed to use was the ability to wrap the text of the website and dates around the circle. Let me tell you how you can do this.

1.) First choose the object tool, and select the circle shape. This can be found toward the bottom of the tool panel on the left of the screen. You’ll see the line tool, a square, rounded square, and circle.

2.) Then go up to the top of the page and selected the Paths tool (the square with the little pen icon in it).

3.) Now create your circle path in the size you want. If it’s not exact, it doesn’t matter as you can edit this later. It should just look like a simple circle outline (no fill color should be showing).

4.) After creating your circle path, select the Text tool while still on that Path layer, and make sure that your cursor is directly on top of the path before beginning to type. You’ll notice that as you hover your cursor over the path, the text tool changes icons to a little curvy line. When it appears like this, it will automatically make the text you type in wrap around the path.

That’s all there is to it. You can adjust your font size, delete extra space around the text to align, and transform the size and shape of this path just as you would any other object.

I hope this was informative, and please feel free to leave a comment if you have questions or other ideas for using PhotoShop to create cute buttons for the web. Also, let me know if you are interested in any custom design work.

© 2011, Sarah. All rights reserved.

ShareTweet