Aug 30th

Twitter Box User Interface Design in Photoshop

Twitter Box User Interface Design in Photoshop

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!

Related Articles

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 Thoughts123 Comments

Leave Your Response