Aug 30th

Twitter Box User Interface Design in Photoshop

Matthew Heidenreich in Tutorials with 49 comments

In this tutorial I will teach you how to create a twitter UI box for your website or desktop application. As always the PSD files are available for download with this tutorial. If you have any questions, please ask in the comments.

Final Result

Lets get started

1. The first thing we need to do is create a new document with the dimensions of 700×200.

2. On your background layer, add the following blending options:

3. Next we want to start by creating the base for our twitter box. Using your Rounded Rectangle Tool with a radius of 10px, create two separate rectangles that look similar to the following:

4. Since we don’t want to loose the edibility of our layers, we want to convert our two rectangles into a smart object. To do so select both your rectangles layers and then right click. Choose “Convert to Smart Object” from the drop down menu. It will appear as if your rectangles have been merged into one layer.

5. We now want to add some details to our smart object, so right click your smart objects layer and choose Edit Contents from the drop down menu. We then want to use our Pen Tool (P) to add some curves to the bottom of our tab:

6. Once you have one side complete, duplicate your layer (CMD+J), and then go to Edit>Flip Horizontally and move it to the other side. You can then save your smart object file and return to your document with it looking something like this:

7. Back on your document, we now want to change the blend mode of our smart object layer to Overlay.

8. Next we want to add some blending options to our finished smart object. To do so right click your layer and choose blending options from the drop down menu and insert the following:

9. Your file will look something like the following:

10. We now need our Rounded Rectangle Tool again. With a radius of 10px, create a rectangle similar to the following below your smart objects layer. Name this layer “non-active”:

11. You can see we need to mask out the overlapping rectangles. To do this we will CMD+CLICK our smart object’s thumbnail in the layers palette. With your selection active we now need to invert it by going to Select>Invert. Return to your “non-active” layer, and then click the layer mask icon at the bottom of the layers palette.

12. Now add the following blending options to your “non-active” layer:

13. With the tabs nearly complete, lets add our text. Add the following Character Settings in your type window.

14. We need a slight drop shadow on our “what are you doing?” text to make it stand out on our light background. Add the following blending options to fix that problem:

14. The last bit of text we need is our “share it!” text at the top left hand side of our box. You the same text options as before, except lower your font size to 10pt, and change your anti-alias to italic. Set the blend mode to overlay and then add the following blending options to your text layer:

15. Your box will look something like this:

16. To split up our links a bit, we want to add a divider between our “@reply” and our “direct messages”. Using your Rectangle Marquee Tool create a 2px wide section and fill it with #FFFFFF.

17. Lower your layers opacity to around 22%, and then add the following blending options to your dividers layer:

18. Then we need to soften the bottom of it a little. To do so we want to add a layer mask to our dividers layer and then brush with a white soft brush until it looks something like this:

19. We are almost finished! Using your favorite rectangle tool create a white square that looks like the following to act as a thumbnail:

20. Next add the following blending options to its layer:

21. The last step is to add our input field. To do this, I used a Rounded Rectangle Tool with a radius of 10px.

22. On our newly created input field layer, add the following blending options to liven it up:

23. Using your Polygonal Lasso Tool we then want to make a arrow selection similar to the following:

24. Now go to Select>Invert. Make sure your input layer is selected, and then choose the add layer mask icon from the bottom of your layers palette with your selection active.

25. All that is left now is to add some text to share and your twitter box is complete!

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts49 Comments

Beben August 31st, 2010 at 12:58 am

nice tutorial…
thanks for creatifity ^^

Reply
- WSD - בניית אתר איטרנט August 13th, 2011 at 3:16 am
  
  Well you would only think it WAS made by Photoshop, thanks for the tutorial.
  
  Really helpful for this sort of tabs, regardless to Twitter.
Dan P August 31st, 2010 at 4:13 pm

you didn’t happen to get this from
http://dribbble.com/shots/46702-Search-Bar

here…

did you?

Reply
- Matthew Heidenreich August 31st, 2010 at 5:05 pm
  
  no I did not. This tutorial was written at the end of July.
- Alvin August 31st, 2010 at 5:54 pm
  
  Looks pretty similar if you ask me
- Reece October 3rd, 2010 at 7:37 pm
  
  I can vouch, Matthew showed me a preview of this tutorial before that was posted on dribbble.
- silentt March 10th, 2011 at 6:08 am
  
  so mindreading really exists
richard carpenter September 1st, 2010 at 3:43 pm

does look very similar, good tutorial though. liking the colors.

p.s mat did you get my e-mail?

Reply
- Matthew Heidenreich September 2nd, 2010 at 1:12 pm
  
  I did not. Could you shoot it over again.
Imran Khan September 8th, 2010 at 5:00 am

very nice tutorial!!! will try that for sure.

Thanks for sharing

Reply
porno September 21st, 2010 at 9:06 pm

Hi

Your work is good, i did one same like that but with some depth. Anyhow its very nice., and thanks for your tutorial

Reply
Free WP Themes September 22nd, 2010 at 8:51 am

Good dispatch and this post helped me alot in my college assignement. Gratefulness you as your information.

Reply
GLW September 22nd, 2010 at 5:46 pm

..i was about to get my PS on till i go to the part waaay at the top for making the curves with the pen tool….and gave up …typical me LOL

Reply
ooy October 10th, 2010 at 2:14 am

It’s nice!!
I don’t know how to use the color when I design.i’m so sad!

Reply
adamctemple November 6th, 2010 at 2:46 am

Great looking design. I would love to see someone attempt something similar using HTML5 CSS3 and maybe jQuery to make it all work. Hopefully we are getting to the point where chopping up a lot of images can be kept to a minimum.

Reply
Logomondo December 30th, 2010 at 5:26 am

Excellent work, Keep it like this!

Reply
Smashing Wall January 9th, 2011 at 6:40 am

I have made this one, UP …..

Reply
hari prabhas February 4th, 2011 at 3:11 am

Nice One…Thanks for sharing…

Reply
Nick February 13th, 2011 at 9:54 pm

I’m about to jump off a building! haha

Reply
Clippingshop February 17th, 2011 at 7:00 am

Wonderful tutorial..Thanks for sharing.

Reply
Brett Widmann March 8th, 2011 at 12:05 pm

This is a fun tutorial! I love the finished product.

Reply
csabi March 10th, 2011 at 2:54 am

Hi! I just love your tutorial! Congratulations!
I know this is not the best way to say it, but I`we just opened a tutorials indexing website and I would like to ask you to submit your tutorials or to publish using our Publishing system, it will bring you some extra traffic
Please give a chance for my website: http://www.tutorialswindow.com

Thanks!

Reply
Makind March 21st, 2011 at 4:45 pm

Cool Tutorial, Congratulations!

Thanks for post, very util !

Reply
Tutorial Lounge April 16th, 2011 at 3:22 am

you did excellent work.

Reply
adalberto gomes May 22nd, 2011 at 4:25 am

Hi there…Thanks for the tutorial. Please, help to find the best solution for my psd to wordpres conversion. Is tehre any software to convert ready-made templates to wordpress cms?

Reply
Luke watts June 8th, 2011 at 4:08 am

hey this is wonderful interface, i really like this. But now i need to search tips for implementing this in twitter.Thanks for wonderful stuff

Reply
Cosmin Negoita June 19th, 2011 at 5:02 pm

Checking every week for new posts since August 2010 is some crazy s**t. I hope you ain’t dead man, cuz your tutorials are the illest!

Reply
Web design Cambridge July 28th, 2011 at 5:44 am

That is very in depth. Great for someone like me who is not so strong on the graphical side of things. Ta!

Reply
Danny Galagher August 8th, 2011 at 10:20 am

It’s the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you some interesting things or suggestions. Perhaps you can write next articles referring to this article. I wish to read more things about it!

Reply
mobil bekas September 3rd, 2011 at 3:04 am

I am learning Web Design and I found this thread very helpful indeed. Thank you for posting.

Reply
Logo Blog October 11th, 2011 at 1:29 am

Nice tutorial! as a graphic designer, this would gonna helpful to me! thanks

Reply
American Classic Statue Decor October 22nd, 2011 at 12:59 am

that was the best article ive read in a long time.

Reply
Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:00 am

Cool Tutorial, Congratulations!

Thanks for post, very util ! you did excellent work.

Reply
tardive tyskinesia lawyer October 26th, 2011 at 3:43 pm

Great tutorial man, as a new guy in the world of photoshop I only managed to do this in 2h, but it’s simply amazing!

Reply
Michael Cobases November 12th, 2011 at 11:22 am

Tutorial really looks simple but once I tried to create on my own it took way more time than just reading this article, but finally I managed to create something at least close to your example!

Reply
Mali Levi November 15th, 2011 at 8:06 am

The graphics are nat, now i need to find a way to connect this great traffic t a code-source so it will effect twitter updates, time to work

Reply
Cincinnati Web Design December 13th, 2011 at 2:15 pm

Thanks for that post – nice tut

Reply