6 Weeks Design Tip: Create & Add a Blog Button

I receive a lot of emails asking how to create and add a blog button, so today I thought I’d give you some of my nerd knowledge and show you how I created the 6 Weeks logo in Photoshop. I’ll also give you the code to add a little box under your blog button so people can copy the code and add it to their own site.

[ 1 ] Open a new document: I like to create two different sizes when I make a new blog button. One larger and square and another that is smaller and horizontal – like 200×200 and 200×100.

[ 2 ] Open a background pattern: Using the rectangular marquee tool, select a square on the background. Copy and paste this into your new document.

[ 3 ] Create a new layer, then using the marquee tool again, draw another box and fill with a color.

[ 4 ] Now we’ll add the stripes on top of the yellow later. Use the line tool to draw a diagonal line.

[ 5 ] Right click on the line layer and select Duplicate Layer then move the new line down a bit. Repeat this over and over to create stripes. You can change the color of your line by double clicking the little color box on the layer.

[ 6 ] Merge your stripe layers to make them easier to manage. Select all the layers to want to merge and click Layer > Merge layers in the toolbar, or hit Ctrl/Apple + E.

[ 7 ] Now we want to make sure the lines are only on the yellow (this would be more important if the stripes were a differed color than the background). Click onto the yellow box layer and then click Select > Load Selection. You should see a dotted line around the yellow layer.

[ 8 ] Click onto the stripe layer, click copy and paste, which will make a second layer of stripes the exact shape of the yellow box. (You can delete or hide the original line layer)

[ 9 ] Re-order your layers so the gray layer is on top, then the stripes, and yellow on the bottom. See how nicely they’re labeled :)

[ 10 ] Using the type tool add your text, then right click on the text layer > Blending Options to add a 2px, white stroke.

[ 11 ] Using the type tool again, add a big yellow 6.

[ 12 ] Duplicate the 6 layer and make it gray by double clicking the color box in the character palette.

[ 13 ] Move the gray 6 layer so it’s under the yellow 6 layer. Then nudge the gray 6 so it peeks out from under the yellow 6. (Make sure the Move Tool at the top of your pallet is selected if you can’t move the layer)

[ 14 ] Now we add more stripes! Right click and duplicate the stripe layer, then slide it so it’s over/under the 6.

[ 15 ] Next click onto the gray 6 layer and then click select > load selection

[ 16 ] Click onto the stripe layer and click copy and paste. You can hide/delete the extra stripe layer, so you only have the stripes covering the yellow box and the stripes covering the gray 6.

[ 17 ] Right-click on the yellow 6 layer and select Blending Options to add a 1px white stroke.

[ 18 ] Use the type tool to add two dotted lines.

[ 19 ] And finally (YES! We’re at the end!!) Right click on the gray background layer > Blending Options to add a drop shadow.

TA-DA!

Major high-five to those of you who made it through this whole tutorial. If you got stuck on any of the steps leave me a comment and I’ll do my best to help. And to those of you sans Photoshop – I hope you can take some of these ideas and apply them to programs like GIMP or Pixlr.

Now, for the code to add a blog button and html box to your sidebar…

First you’ll need to upload your image somewhere, then add the following code to a gadget/widget:

<img src=”http://sillygrrl.com/wp-content/uploads/2012/02/sg-circle.png“>
<br>
<input value=”&lt;a href=&quot;http://sillygrrl.com&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;http://sillygrrl.com/wp-content/uploads/2012/02/sg-circle.png&quot;/&gt;&lt;/a&gt;” size=”30″ onclick=”copy()” type=”text” />

Your image URL goes in the tan spaces and the link to your blog goes in the green. You can change the 30 at the end to make the box longer or shorter. Enjoy!

< <  Last Post: Amy on being brave online + Next Post: Being too inspired by other bloggers  > >

Share/Bookmark