I get a few emails every once in a while asking me how I created the glorious orange subscribe box you see in the sidebar.
The subscribe box we have in place here really stands out with the colors chosen, and makes finding subscription options a lot easier.
Today, I’m going to show you how to design and code it. Really, it’s very simple. All we are designing is a background image with some text and icons on it, and to code it – all it is is creating a few classes. I will explain everything in better detail than this of course!
Requirements for following this tutorial
- To design, all you need today is Photoshop, and a basic understanding of a few tools and how they work. The tools used are as follows:
- Gradient + Fill Tool
- Rectangular Marquee Tool
- For coding, you should have a text editor and an FTP program to upload your files.
Really simple little setup we have here, so let’s begin.
Designing the Box in Photoshop
Step 1: Creating the template
Start off by creating a box, let’s say with the dimensions 300×220. After that, select the paint bucket tool and fill it with the hex color #F86D12.
After you have your box, go to your top menu, select Layer ? Layer Style ? Gradient Overlay and put in the following settings to create that white shine you see on the top of the box:
Click the image for full view.
Creating a tiny indent
This is an effect I like to add to many of the textures I create for the web. A simple one pixel solid white line to the top of the image can really give the texture a huge push.
So create a new layer, zoom in a little bit and draw a 1px solid white line across the top of the image. Set the layer to Overlay and adjust the opacity if you feel it’s too bright.
By now you should have a simple orange background with a shine on top, and a 1px indent. We’re making progress!
Step 2: Adding Content
Alright, so we now have the background of the box finished, now it’s time to add some content to it.
I always work down, I create the heading, write the short description, then I created the input boxes to signup for our RSS Feed.
Just some basic settings I did to create these things:
Heading (“Subscribe” text)
- Font: Myriad Pro
- Color: #000
- Drop Shadow Settings (Layer ? Layer Styles ? Drop Shadow):
Click the image for full view
Input Box
- Tool: Rounded Rectangle
- Layer Style: Gradient Overlay, Inner Glow, Drop Shadow
RSS Icon
The RSS icon I used is part of the free icon set by Function. I simply changed the color by adjusting the Saturation level, and added a small circle beneath the icon to give it a shadow.
Coding the Box
Coding this box is really simple. All we’re doing is placing text in a container, replacing one line of text with an image, putting a background image into an input box and making an icon break out of a box (may get tricky).
Step 1: Setting up the layouts
I will give you the basic outline of both the HTML we are going to work with and the CSS. Here you go.
<div id="feed"> <h3>Subscribe</h3> <p>Feed pitch here.</p> <form> [email code here] </form> <span class="icon"></span> </div>
And our CSS code will look like:
#feed {
background: #f86d12 url(path/to/image.png) repeat-x;
padding: 1em; /* may need adjusting */
position: relative; /* this is used for the RSS icon, explained later in this tutorial */
}
#feed h3 { ... }
#feed p { ... }
#feed input { ... }
#feed .icon { ... }
Step 2: Setting up the H3 Heading
Because we made an image for the heading within our H3 tag, we want to replace the text we have with that image. It’s a very simple trick to do too. Right now, focus on your #feed h3 { ... } line in your CSS and add the following to it:
#feed h3 {
background: url(path/to/image.png) no-repeat;
height: xpx;
text-indent: -9999px;
width: xpx;
}
Nothing complicated there. Basically, that line is says to add a background image with a height of “x” and a width of “x” to the H3 tag within the container marked as feed. Then, we have the line that makes it work, text-indent: -9999px; which will make the text disappear and only display the image.
If you don’t understand how it works, remove the text-indent property from the line and look at the H3 tag to understand.
Step 3: Styling the input box
I didn’t include my input code in the template I gave you, but usually whenever you have code for an input box, it will look like this:
<form action="http://domain.com/"> <input type="text" value="Enter your email address" /> <input type="submit" value="Subscribe Now!" /> </form>
So, if you look in your CSS, there is a line that we will use to target input forms. We are now working in #feed input. Here is the CSS you can use:
#feed input {
background: url(path/to/image.png) repeat-x;
padding: 0.7em;
}
Not much going on here. Basically, we apply a background image to the input box and give it a little padding so the text isn’t smashed up inside.
Step 4: Adding the “breaking out” icon
One of the coolest things about the sidebar here are the icons that break out of the box in each little panel. In the CSS we are using #feed .icon to style.
So I will start out with the basic styles, just to make the icon show up:
#feed .icon {
background: url(path/to/image.png) no-repeat;
height: xpx;
width: xpx;
}
After that, you should get an icon to show up, but with no formatting.
Now, there are a couple of ways you can make the icon break out of the box, and I will teach you the absolute positioning way to do it. I think this way is much easier, and a good way to introduce some of you novice coders to a very useful CSS method.
Add these lines to #feed .icon:
position: absolute; right: -10px; top: 5px;
Now, the icon will have moved from the bottom left of the box to the top right of the box. You may need to adjust the number of pixels you shift the icon to, but that’s really the jist of it.
Click for full size image
There you have it!
All in all, that was a very simple tutorial to do. Creating the box in Photoshop is very easy, and coding it is almost easier. Now, with a little tweaking you can make the subscribe box your own and add your own content into it.
How did I do?
I am interested in hearing what you guys thought of the tutorial. I don’t write tutorials often, so I am looking for feedback on how I can improve the way I explain things like this to you. So be honest with me, did you like how this tutorial came out? Could you follow it easily? Was everything explained well? Let me know, because I have plenty of other tutorial ideas I would love to start writing here!
The Discussion
Leave a Comment Read Again?Now how did you know I was looking for just such a feed box? Terrific tutorial and well laid out, step by step so even a newbie could have a go with confidence. Many thanks Alex.
Thanks a lot Kate! I’m glad you enjoyed the article.
That’s one sexy subscription box! Lol! It’s nice of you to share with us how to make it. Thanks.
.-= Gordie Rogers´s last blog ..Is There Anything That’s Unforgivable? Part 1. =-.
Haha, thanks Gordie!
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
the “Sleek, Orange Subscribe Box” is verry originally recreated!
greez from Germany
This is perfect – I got the thesis theme recently but want to pretty it up . Most helpful. Thank you
.-= Flash Your Tattoo Blog´s last blog ..Female Tattoo Artist =-.
Thanks, it’s very easy to add into Thesis!
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
Great first tutorial Alex, you really did do a good job with it. I was able to follow-through with it well and things went great. I like how you used a different color to bring out the “subscribe” section of your blog. I agree with you that changing the color tone of the “subscribe” section of your blog will help readers be more aware to subscribe.
Thanks Rob, glad you think the tutorial came out okay.
It really does help to make the subscribe box stand out so much. I think that is one of the reasons why we have been gaining as many subscribers as we do: because it’s so noticeable.
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
Good stuff Alex, its a nice share, sexy subscribtion box attract more subscribers
.-= Web Hosting Blog´s last blog ..Influence of Web Hosting on SEO =-.
I’m glad you enjoyed the tutorial! You’re totally right, it does attract people to clicking on it.
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
After reading this post I have and additional point, which is try to choose a light color like orange or red or yellow. This is an eyecatchy colors, which will attract more subscribers.
.-= Reza Winandar´s last blog ..5 Tips to Increase the Number of Subscribers for Beginner =-.
I agree completely. Just like what we did here, the RSS box is the only orange color on the site – so it sticks out greatly.
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
Cool tutorial Alex, I’m still loving the subscription box you did for my site! I really feel that it stands out really well, but still fits in nicely with the rest of the theme, if you get what I mean? :p Sorry for being so vague!
.-= Simon | Teenius´s last blog ..Get Blogging Lessons From A Pro =-.
Thanks Simon, I really like the one on your site too. One of my favorites I have ever designed!
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
I think you have a bright future working with computers, I was amazed to see that a 16 year-old wrote that. Well done!
Glad you think so!
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
I think you’re gifted at writing tutorials. Alex, there are like a lot of companies who are looking for your talent.
This one’s great! I love photoshop tutorials 
.-= Liane YoungBlogger´s last blog ..A Law-Abiding Blog – Following FTC’s Blogging Rules Starting With a Disclaimer Page =-.
Glad you think so Liane! That only encourages me to write some more.
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
Excellent, excellent, excellent. I was trying to do this months ago.
Thanks Alex, this will help so many people. I always learn something when I pop over to this site!! You guys should sell some of custom-functions and CSS files
I would buy them!!
Please add some more tutorials in future.
Thanks
.-= David´s last blog ..Google’s New Fade In Home Page =-.
I’m really glad you liked it David! As for the custom functions and CSS, I think you’re onto something.
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
Thanks, Helped me a lot. I was looking for a good tutorial like this one.
.-= Make Money Blogging Online´s last blog ..Blogging – A New Way to Market =-.
Glad you enjoyed it!
To save a little time and headache doing the 1px white line across the top, you can just use image -> canvas size. Then anchor the image to the bottom middle and increase the height 1 px. (you have to make sure you pick white for your BG color. That is really helpful for those of us who don’t have a surgeon steady hand.
.-= Blake @ Props Blog Ideas´s last blog ..The Ten Commandments of Comment Etiquette =-.
Or, just hold shift while dragging the line and it will stay in a straight line!
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
Great article you got here. It would be great to read something more concerning this theme.
Every time we write about our theme we see a pretty good reaction, so I think we will just have to keep doing it!
.-= Alex´s last blog ..8 Funny Things I Learned From Designing That I Apply to Life =-.
I was trying to work up a subscribe box like yours using this tutorial, but I’m having problems displaying the RSS Icon.
When I use the Span tag, the icon doesn’t show up unless I type text.. Then the text shows up (maybe I’m using text indent wrong), and the Icon just shows up in the bottom left (even after I include the extra code you mentioned to make it “break out”).
Any idea what I might be doing wrong?
.-= Blake @ Props Blog Reviews´s last blog ..Let Click Booth Make You An Affiliate Rockstar =-.
It is simple awesome, I would like to make one for my website using blue green mix of color. I would also try to round the corners of the box since that would be looking more smooth, thought this one is cool too. Great tutorial
- J.
Alex, I found this while trying to stop banging my head against the wall. It seems you have gone a long way in relieving my frustrations. Thank you!
-Lawton
P.S I think my readers would love some blogging help-if you are up for an interview @lawton_chiles on Twitter.
Hi Alex
I’ve been trying to apply this to my blog but am having heaps of trouble. Im using Thesis,
Ive got the subscription box done, i follow your steps but it just turns out to be a disaster, the thing is i don;t know what went wrong, is there anyway you can help me to shed some light and go in depth, is this tutorial for thesis?
i dunno im just lost now!
thanks for the tutorial though, ive been waiting so long to apply this but not that i just got wordpress and thesis i cant get it done,
.-= Lam N´s last blog ..MLM Traffic: Attraction Marketing Blueprint Part 2 =-.
Hey Alex,
this is simply great tutorial. I loved it. this is best way to keep our blog unique. thx for sharing mate.
Regards
Jaydip
.-= Jaydip ´s last blog ..4 Ways to float internal link juice =-.
I’m mostly interested in the breaking out icon, but somehow it isn’t showing up when I put it in my widget bar.
This is the code is have:
And this is the CSS code:
Subscribe
Feed pitch here.
#feed .icon {
background: url(http://www.mandarin-only.com/rss-icon.png) no-repeat;
height: xpx;
width: xpx;
position: absolute;
right: -10px;
top: 5px;
}
.-= Ramses´s last blog ..How To Keep Momentum =-.
Hm, something went wrong with the HTML code.
Anyway, should is put something between the span tags?
.-= Ramses´s last blog ..How To Keep Momentum =-.
Thank you for this tutorial. your site design has really inspired me as I have been working on my site – especially the colors. I have mostly gotten this to work for me, but I cannot get the Icons to break out of the box. I can move them to the correct location, but the part that should stick out of the box just doesn’t show.
.-= Gabe´s last blog ..God Became a Servant =-.
Hi Alex, you outline HTML ans CSS in the tutorial. Where do I enter these codes for the Thesis Theme? In the custom, custom functions or both?
Hi Alex,
I have pretty much the same question as Cate does…where does all the code go in Thesis?
I am a newbie blogger alex, i think i can’t do it. He..But I’ll try it!! Very Nice Subscribe Box
.-= food recipes´s last blog ..Hello world! =-.
Hi,
what is the fontname from “Blogussion” , it´s very nice.
Regards
Gerhard
The absolute position is only can controlled from the top, and right.
Is there anyway to make the position control from the bottom?
Because I want to make a picture that is always in the bottom if the pages is changed, with the top control it will only gives the exact position from the top, but I want it from the bottom, i try to change it, but bottom is not working.
Can you show me the way Alex?
Thank you before..
still downloading latest Adobe… I’ll try this, thanks Alex, you’re rock!!
.-= Penghuni Gubug´s last blog ..Facebook Hack, Tak Peduli =-.
I admire the useful information you provide in your posts. I’ll search for your own weblog and have my kids check up here frequently. I’m quite certain they will learn the lot brand new stuff here compared to anyone otherwise!
Wow great rss box, but can i get your image because i can’t use photoshop
.-= Iseng Ngeblog´s last blog ..Kupon Hostgator 2010 =-.
I will try this but i’ll try in my local PC because i don’t have experience about editing themes before.
Yeah i have one blog that using thesis too and i don’t know how to do this in thesis
Great subscriber box i must try this, thank you
You have a fantastic post here, really informative. Very well written I shall be bookmarking this website and subscribing to your feed so i can regularly read content of this quality.
your instructions are very confusing I tried following it but no good…Do you have any other suggestion for this?
Theres that rad box again I just saw in another of your posts. I really must dedicate a weekend to learn photoshop–really wan’t to have this creative controll over elements of my sites.
That code is pretty pimpin’
Nice tutorial. Most people do not show step by step how they made image and how to use photo shop. I like this post great for people to learn how to make own images.
Comments on this entry are closed.