This will be your final result:

1. First thing we want to do is create a new canvas of 400×400
2. Next lets go ahead and get out our rounded rectangle tool and set the radius to 8px. Then make a rectangle similar to the following:

3. Now lets go ahead and add a few blending options to that layer. To do so right click the layer and choose blending options and input the following
4. Your document should look something like this:

5. Next we want to add a very slight highlight to the top of our rounded rectangle. The way we will do this is to CTRL+CLICK your rounded rectangle layer to make a selection of it. Next, lets go ahead and create a new layer and fill the selection with #FFFFFF. Using your arrow keys, and with your rectangle selected, move the selection down a couple pixels and choose EDIT>CLEAR

6. We want to go ahead and lower the opacity of this layer to about 30% and you’ll have something that looks like this:

7. Next we want to go ahead and add a Twitter icon to our content box. This is the one I choose to use

8. Try to position it on the top as I have:

9. Next I added the heading to my content box. For ‘Latest’ I used #04a7ca, and for ‘Twitter’ I used #f84c6c, and a generic font, helvetica.

10. All that we need to do now is create how our tweets will be displayed. Using the rectangle marquee tool, create a selection similar to the following and fill it with #FFFFFF

11. Next, lets go ahead and input the following blending options onto that layer
12. Add some text above the box, and then you’ll have something that looks like this

13. Once you do that you can copy it down to fill up the box and your final result will look like this:


Get a commercial/public use licence for this PSD (More info)
Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.
If you enjoyed this tutorial please take a moment to visit one of our sponsors.













Loading...
27 Responses
Eli
One thing that would improve your tutorial is linking to source sites. For example, the Twitter icon. I know it’s a freebie, I just don’t know where it’s from (yet).
If you don’t know where it’s from I’ll leave another comment later with the source.
Alex Rogahn
Its the twitterific icon
fairly well know and umm hate to say this but your not actually suppose to use that, its only for desktop use apparently: http://iconfactory.com
psaddict
Added to http://www.psaddict.com
Matthew Heidenreich
@Alex Rogahn, & Eli
Thanks, I forgot to mention that I had forgotten where I found that icon. I’ll go ahead and put a link in there
Tutorials Room
Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
Waiting for your next tutorial
Geoserv
STUMBLED!
This is fantastic, I submitted it to http://www.faqpal.com
So can we use the icon you used, and anyone know of any custom ones that are free to use?
Jhay
I think you should also write a tutorial on how to make it work on WordPress such coding and css.. but anyway, nice tips!
Matthew Heidenreich
@Jhay
I am actually planning on, at some point, having most of the tutorials turned into coding tutorials as well
mikel
thank you for this tutorial
Murray
Great!
We’re thinking of adding a twitter feed to our site soon, and this is a big help.
Kristel van den Akker
Great tutorial! thanx
dubai web design
this is great tutz will try this..
Business Cards
This is cute! Thanks for sharing this tutorial. Nice work! Twit!
SEOMetuzalem
hello! nice tutorial, will be published 5.5.09 @ http://blog.metuzalem.hr so that more people can see it
苏朋
it‘s great ,I like this.
web2000
Thanks for the inspiration – i will be implementing something like this shortly!
Senthil Ramesh
Fantastic. The tutorials make me go craze about your site.
P.S: I am learning from your site to design for my blog.