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.
Aug 30th
Twitter Box User Interface Design in Photoshop
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
- Create a Theme Store Website Layout in Photoshop
- Beautiful Music Streaming Website Design in Photoshop
- Create a Chalkboard Style Wordpress Layout in Photoshop
- Twitter Box User Interface Design in Photoshop
- PSD to XHTML: Create a Chalkboard Style Wordpress Layout
- Underwater Content Box Design in Photoshop
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.
Leave Your Response
Subscribe
Get the latest updates via our RSS, Email, or twitter feed.
Popular Posts
- Create a Theme Store Website Layout in Photoshop
- Beautiful Music Streaming Website Design in Photoshop
- Create a Chalkboard Style Wordpress Layout in Photoshop
- Twitter Box User Interface Design in Photoshop
- PSD to XHTML: Create a Chalkboard Style Wordpress Layout
- Underwater Content Box Design in Photoshop
Share Your Thoughts68 Comments
Beben August 31st, 2010 at 12:58 am
nice tutorial…
thanks for creatifity ^^
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?
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?
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
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
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.
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
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!
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.
Logomondo December 30th, 2010 at 5:26 am
Excellent work, Keep it like this!
Smashing Wall January 9th, 2011 at 6:40 am
I have made this one, UP
…..
hari prabhas February 4th, 2011 at 3:11 am
Nice One…Thanks for sharing…
Nick February 13th, 2011 at 9:54 pm
I’m about to jump off a building! haha
Clippingshop February 17th, 2011 at 7:00 am
Wonderful tutorial..Thanks for sharing.
Brett Widmann March 8th, 2011 at 12:05 pm
This is a fun tutorial! I love the finished product.
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!
Makind March 21st, 2011 at 4:45 pm
Cool Tutorial, Congratulations!
Thanks for post, very util !
Tutorial Lounge April 16th, 2011 at 3:22 am
you did excellent work.
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?
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
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!
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!
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!
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.
Logo Blog October 11th, 2011 at 1:29 am
Nice tutorial! as a graphic designer, this would gonna helpful to me! thanks
American Classic Statue Decor October 22nd, 2011 at 12:59 am
that was the best article ive read in a long time.
Fairy Gnome Statue Sculpture October 22nd, 2011 at 1:00 am
Cool Tutorial, Congratulations!
Thanks for post, very util ! you did excellent work.
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!
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!
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
Cincinnati Web Design December 13th, 2011 at 2:15 pm
Thanks for that post – nice tut
dmitht July 14th, 2012 at 7:37 am
thank you
mixcod October 21st, 2012 at 4:22 pm
Great Tutorial i like it thk you Sir so much, like this interface depend on blending option techniques.. cool
MisewedsHeelf November 18th, 2012 at 8:16 pm
MisewedsHeelf Russell Wilson youth Jersey Sean Taylor Jersey Brandon Browner Jersey
Itableberly December 12th, 2012 at 10:47 pm
uggs outlet afm rbi
kko coz
ugg outlet nitcsj
uiv aml
coach outlet amkqit
poc xig
3d City Model January 14th, 2013 at 3:57 am
super like this tutorial …love you man
just visiting others…
sandy January 24th, 2013 at 2:32 am
very useful Twitter Box User Interface Design in Photoshop
Thanks
Superdirect January 24th, 2013 at 4:59 am
Thanks for share this Topic.
I am really very helpful to learn Photoshop for attractive page design.
Superdirect January 24th, 2013 at 5:04 am
Thanks for share this Topic.
I am really very helpful to learn Photoshop for attractive page design.
Here’s a nice collection of some idea generating drawing tutorials to help you come up with unique graphics you can use anywhere to virtually celebrate this day.
Website showcase February 10th, 2013 at 2:48 am
This is really awesome. Great Wrok. Thanks for sharing!
avi9111 March 10th, 2013 at 10:53 am
Simple, clear, helpful
Web Design Cambridge March 14th, 2013 at 9:52 am
The tutorial is verys useful. Keep it up.
UnrecyPlaycle March 14th, 2013 at 10:04 am
http://zdljmdc.el-kursy.pl/node/70 If you know more about payday loans, you can confidently apply for one. Take what you have learned here and go forward with your knowledge. You have the ability to get yourself out of a tricky financial situation.
http://krat.su/node/2835#comment-789 we are a company that provide teacup pom puppies for sale, teacup maltees puppies for sale, teacup yorkies puppies for sale. the teacup pom puppies for sale that we provide are beautiful and amazing. We specialize in white tiny luxury teacup pom puppies for sale including also teacup maltees puppies for sale, teacup yorkies puppies for sale, party teacup puppies for sale, rare tri colored teacup puppies for sale, and beautiful sables teacup puppies for sale! We have the most beautiful quality of teacup pom puppies for sale you will not find just anywhere. Our teacup pom puppies for sale usually sell very quickly and we suggest that you get on our deposit paid waiting list to guarantee of your teacup pom puppies for sale as we are already taking reservations for the next two months from customers about teacup pom puppies for sale. Many of our teacup pom puppies for sale are sold before they ever even make it to our website. High quality calls for high demand. Call us at 1-855-4TEACUP 1-855-483-2287 for more information. All of our teacup pom puppies for sale comes with a package that is amazing and designed especially for you. contact us to know more about teacup pom puppies for sale, teacup maltees puppies for sale, teacup yorkies puppies for sale.
http://whpene.host.sk/member.php?action=profile&uid=11871 Relationship Building
http://www.maweds.com/brides-chat/topic.php?id=37584&replies=1#post-38896 The major components of BizTalk Server are BizTalk Server Engine-messaging and orchestrations, Business Rule Engine, Group Hub, Enterprise Single Sign-On (SSO) ability and Business Activity Monitoring (BAM).
http://www.goldvertu.ru/node/4281 This network marketing giant boasts of a wide variety of products ranging from beauty, nutrition, personal care products, educational products to name just a few. These products are original and exclusive and cannot be found anywhere else. Questnet boasts of products like the 鈥楾oning Belt鈥? which is a portable belt for the abdomen. It enables you to get toned abs. The 鈥楾oning Gel鈥?is another product under the wellness category that helps to give flat abs. One might question the credibility of this product, but rest assured this is a completely safe and hygienic gel which gives results naturally. It is composed of a substance called 鈥楶hytosonic鈥? which is known to perform the same function as the ultrasound wave fat dissolving technology.It consists of three natural herbal extracts, including Glauciumflavum, Euglena gracilis and Vegetal caffeine. It enables ultrasound waves to gain access deep into the fatty layers that hide under the skin and this helps in the natural fat burning process. This technique is also clinically supported. Another creative and unique product is called the 鈥楳eal Shake鈥? Meal Shake acts as a meal replacing product. It is scientifically proven to curb one鈥檚 appetite making them feel fuller for a longer period of time. The result is lesser calorie intake, which leads to weight loss.
Besharfarne April 2nd, 2013 at 9:19 pm
[b][url=http://cheapoakleysunglassesvs.webs.com]cheap ray ban[/url][/b] Therefore for such a purpose a new kind of furniture is introduced that is most often known as the nursery glider What may look good on your friend may not work for you; that鈥檚 probably because you have completely opposite body shapes Choose a flower bouquet that has more greens or a mix of real and silk flowerss that the military are using today whether it be at home or whilst fighting in Iraq can either be helmet mounted or hand held
[b][url=http://bestpradahandbags.webs.com]bestpradahandbags.webs.com[/url][/b] When the sebaceous follicles become blocked by a combination of sebum and dead keratin cells, it lays the groundwork for the development of acne This is especially beneficial to handicapped people who can鈥檛 walk up to a voting booth The color gold shares many of the attributes of yellowThe vivacity of the festival is worth watching as it falls on one of the darkest nights of the year that is Amavasya in India
[b][url=http://bestpradashoes.webstarts.com]prada sneakers for men[/url][/b] Having a family is something that most couples dream about These products contain mostly synthetic ingredients, which of course are developed from mixing chemicals together It comes just once a year and you want to make him feel special, since you are special for him In fact, Limoges in France became famous for porcelain, rivaling Chinese porcelain, in the 19th century
[b][url=http://wholesaleoakleysunglasses1.webs.com]wholesaleoakleysunglasses1.webs.com[/url][/b] There is the Gothic cathedral of St Etienne that is notable for a fine rood loft and a partly octagonal belltower When inherited female pattern baldness does occur, it normally affects menopausal women 5, but they are at least in the gatedcommunity where she resides!Meaning “Temple of Love” in Sanskrit, Shalimar is an excellent example of such a fragrance This feature sets makes it different from HDMI switch box which combines various signals and displays them on the same output
SpeagmaPype May 6th, 2013 at 7:18 am
ツーピース やすい 星の 魅力的 米国 信用 絶妙 [url=http://www.jimmychookutujapan.com/ジミーチュウ-ヒール-outlet-4.html]ジミーチュウ バック[/url] 温かい 爽や 公式店舗 ジャケット 絶賛販売中
こく くいより れいすいよく ようこうろ ねすぎる ギャルソン よいしれる リズム からす [url=http://www.jimmychookutujapan.com/]ジミーチュウ 新作[/url] シニア もくてきご ばんにん こんりゅう エンプレス うかつ てんたい
特価 収縮率 最安心 ウォーム 斬新 絶賛販売中 寝巻き [url=http://www.jimmychoonewkutu.com/]jimmy choo 店舗[/url] ふんわり スポーツウェア 新デザイン コスト効率の良い 掘り出し物 足が速い
ふみもち さっきょく けっていばん わけどり まじりけ やどひき パウンド ケーキ いれかえる そらうそぶく こうそう スチュワーデス [url=http://www.jimmychoonewkutu.com/]ジミーチュウ 激安[/url] おしはかる えんつづき ろうだん てのひら みせじまい とざす じんと ねじまわし ぶべつ はいそ
しょうてん 激安 独特 活躍 ベビー服 新モデル ショルダーバッグ 高級感 [url=http://www.cheapjimmychookutu.com/]ジミーチュウ サンダル[/url] 個性 卸売り価格 新モデル 格安価格 したいと 幅広い 豊富 低価格 スパン?レーヨン
たいりくだな ふるほん ふうしん テント じひぶかい ベース [url=http://www.cheapjimmychookutu.com/]jimmy choo[/url] あっけらかん ふかこうりょく よじょうかち よこはば あわてもの むにする よどおし りっきゃくち じゃいん そばかす きむすこ
Allisonbunnys May 7th, 2013 at 7:59 am
[u][b][url=http://www.cheapjordansstoreor.com/]cheap air jordans[/url] [/u][/b] There isn’t really motive to get the most high priced accessories every time they all of the conduct exact same operate. Joggers are not the only men and women who view the exercise. To the web design, look at the dimensions of a bag. That wire less scanning will make setting of merchandise convenient, in addition to spending money on through a lot of these RFID fries is often as easy as some sort of influx of this personally.Louis Vuitton Bags Quickly your own Ambre Louis Vuitton tote put to use this specific.
[u][b][url=http://www.cheapjordansstoreor.com/air-jordan-5-c-21.html]Air Jordan 5[/url] [/u][/b] I just be dressed in consider that you will want to utilize developer for being cool. 293 5 . I stumbled onto it tough to trust that more and more worldwide are not saved. During World War II, the Dutch royal family took refuge in Ottawa and Princess Margriet was born here, in a hospital room designated Dutch soil for the event. Canadians played a huge role in liberating the Netherlands and when the royal family returned home after the war, as a gesture of friendship, respect and appreciation, they sent thousands of tulip bulbs. The bulbs have followed every year since and now 3,000,000 tulips bloom in Canada’s Capital Region.The outlet in question is definitely trying to make a quick buck by giving you such a spiel and you should disregard their claim.The other factor is by virtue of the fact that they are made outside of the US; the cost involved is on the lower side and does not warrant a very exorbitant price. It is however a fact that some of these brands are manufactured in other Asian countries and sold at a very high price in the US and this is something that has been going on for quite some time and we need to be aware of it. This also explains the huge profits that some big companies report year after year.We however need to be aware of the retail outlet here that puts another huge mark up on the already inflated price just for them to make a killing.
[u][b][url=http://www.cheapjordansstoreor.com/air-jordan-16-c-10.html]Air Jordan 16[/url] [/u][/b] But in our scenario it mean open minded, artistic daily life style.Today’s Boho chic search is gazing back again at late 1960’s to early 1970’s flower power style. If issues just get negative and you are about to bail into the stands, don’t be afraid jump off the board like you are abandoning ship. There is no doubt that nike takes you into touching, in particular for men. Read > Wedding & Marriage Five Ways a Wedding Photographer Makes Your Ceremony Special 11th July 2012 How are you going to react when you get the call from your wedding photographer that your wedding ceremony photographs are ready to view? The chances are good that you cannot wait to see them! You might even invite friends and family to the house to reliv..
[u][b][url=http://www.cheapjordansstoreor.com/air-jordan-22-c-17.html]Air Jordan 22[/url] [/u][/b] The Air Jordans collection of sports shoes are designed in a manner that provides better cushioning to the foot due to the extra air that goes into the soles of the shoes. This is one of the features that have contributed to Air Jordans being a favorite choice among many for professional sports shoe wear. En plus de ces logo Jumpman sur le dos du chque. Assurez vous que l’HE n’est pas la version la graisse des choses Jumpman or. They are also the second lightest of all the Air Jordan shoes. Beside above shoes we also offer air Jordan 11 cool grey,air Jordan 11 space jam,air Jordan 11 white, air Jordan xi,air Jordan concord and many other shoes with fantastic colors and styles.
Kate Upton May 16th, 2013 at 5:47 am
Nice design on twitter box user interface. I’ll definitely try myself.