DIY blog buttons using Photoshop

Your blog or website is personal.  It's a reflection of you & your brand... it should feel personal. There are several things you can do to make your blog feel more like your online space. One simple way is to create custom buttons with a fancy font for your blog's sidebar, header or footer.  Hell, you could even put one at the end of your posts to direct your audience to something fantastic. 

DIY blog sidebar buttons

create a simple, custom button in photoshop & install it on your squarespace site

click the image to enlarge

1. Create a new image.  The size is up to you... maybe you want a square? something vertical? This example uses a simple horizontal button. I used 140 height x 500 width.  This will get scaled down later, but I want to make sure I have a nice, crisp image to work from.

2.  Fill in your background with an 'outline color' using the paint bucket.

3.  Use the selection tool to create a center rectangle & fill that in using the paint bucket. 

4.  Click in the center with the type tool & add your button text. In this case, it's simply 'blog'

5.  Save for web & devices.  PNG or JPEG are fine for this.

6. Add an image block on your SQSP site where you'd like to have the button. Then, upload your button image.

7.  Using the 'clickthrough' link feature, insert a link to where that button should lead the reader.  In this case, it should point to the blog.

8.  Depending on how the button looks & where it is, you may want to resize it.  I wanted a smaller button in this case, so i want to shrink it down.  In the image tab, click on the pencil above the image to edit.  Use the resize feature to change the scale.  I went for 300.  Try it, hit save & scale down further if needed.  You don't want to scale back up, so don't get crazy.  

9. Save it!  

BOOM!  You have a fancy button that uses a fancy font.