How to Create your Own Chat Window UI in Photoshop

September 28, 2012 · 4 comments

by sanjay

create-chat-window

Recently I was talking to a friend on Facebook, during the conversation I noticed the chat window UI and though to my self “what if I design my own chat window”? Well that’s the inspiration for today’s tutorial, we will create our very own chat window in Photoshop. Although the techniques that we will use are basic, I do hope that you’ll learn something here.


ElegantThemes
ThemeForest

Advertisement

This tutorial is aimed for newbies, but if you’re a rockstar in Photoshop and you want to share a few tricks of your own, feel free to follow.

Final Product

how to create your own chat window in photoshop - Tripwire Magazine

Let’s Begin

how to create your own chat window in photoshop - Tripwire Magazine

Open your Photoshop and set the size to 450px width, 300px height.

how to create your own chat window in photoshop - Tripwire Magazine

Now, fill our canvas using Paint Bucket Tool (G) and select the color #e9e8e8.

how to create your own chat window in photoshop - Tripwire Magazine

Name this layer as Body, grab your Rounded Rectangular Tool (U), set your radius to 3px and draw a square like shape. Now we will create another shape, hold Shift and draw another rectangular shape. This time radius was set to 0.

how to create your own chat window in photoshop - Tripwire Magazine

In Body layer, right click the layer and select Blending Options > Drop Shadow and set your color to #bab6b6.

how to create your own chat window in photoshop - Tripwire Magazine

Now on Gradient Overlay, follow the settings above.

how to create your own chat window in photoshop - Tripwire Magazine

In Gradient Overlay Settings, make sure that angle is set to 90 and Opacity is at 100%.

how to create your own chat window in photoshop - Tripwire Magazine

Next is Stroke, set the Size to 1px, Opacity to 100% and follow the given color hex.

how to create your own chat window in photoshop - Tripwire Magazine

You should have something like this one, notice the shadow and stoke that we did.

how to create your own chat window in photoshop - Tripwire Magazine

Create a new layer and name it header, grab your Marquee Tool (M) and draw the shape same as above. Fill it with #2998ed.

how to create your own chat window in photoshop - Tripwire Magazine

While still selecting the header layer, hold CTRL + Click on the body layer and hit CTRL +Shift + I and delete. The excess of the header will be removed. You should have the same header layer as the one above.

how to create your own chat window in photoshop - Tripwire Magazine

On header layer, Right Click > Blending Options and select Inner Shadow, set your angle to 90 and Size is 2.

how to create your own chat window in photoshop - Tripwire Magazine

Now on Gradient Overlay, set this colors and hit OK.

how to create your own chat window in photoshop - Tripwire Magazine

In Stroke, set the size to 1px and use the color #2576b4 hit Ok.

how to create your own chat window in photoshop - Tripwire Magazine

Here is our header layer should look like, now we will add some text.

how to create your own chat window in photoshop - Tripwire Magazine

Add your name on the layer, we used Arial Regular 13pt color #FFFFFF.

how to create your own chat window in photoshop - Tripwire Magazine

We will add some detail to our text to make it “POP”. In Blending Options > Drop Shadow set Distance and Size to 1px, Change the Blend More to Normal and Angle to 90.

how to create your own chat window in photoshop - Tripwire Magazine

After that we will create the exit button on the right side, just type in the “x” character on the right side same as above.

how to create your own chat window in photoshop - Tripwire Magazine

In Blending Options > Drop Shadow set the Distance to 1px and Opacity to 38%.

how to create your own chat window in photoshop - Tripwire Magazine

Now on Inner Shadow, set your Distance and Size to 1px and angle is 90.

how to create your own chat window in photoshop - Tripwire Magazine

Our header should look like this. Now let’s move on to the chat conversation!

how to create your own chat window in photoshop - Tripwire Magazine

Bring in some photo (we will use mine) and set the size 40px by 40px.

how to create your own chat window in photoshop - Tripwire Magazine

On image layer, go to Blending Options and set Drop Shadow Distance and Size to 5px, angle 90.

how to create your own chat window in photoshop - Tripwire Magazine

In stroke, set the size to 1px and color #FFFFFF

how to create your own chat window in photoshop - Tripwire Magazine

After that we will add some text, for the name text I used Arial Regular 13pt #1e6daa. For the conversation text Arial Regular 13pt #8e8e8f, for the date Arial Regular 8pt #a2a2a2.

We will just replicate the conversation, and add another image to make it more realistic.

Between those conversation text there will be a line, grab Single Row Marquee Tool (M) and draw the line same as above.

Use the color #f3f3f3 for the lines and set the opacity to 82%, delete the excess on the both sides.

Now we will work on the icons, on Custom Shape Tool (U) select the speech balloons shape (grab here) and draw one facing left. Use the color #b5b5b5.

Duplicate the first one, and press CTRL + T and select Flip Horizontal. In Blending Options > Stroke and set the color to #FFFFF and size to 1px.

how to create your own chat window in photoshop - Tripwire Magazine

I added another name text at the bottom of the chat window, on the right part we will put a status icon name this one status. Select Ellipse Tool (U) and hold Shift, draw a small circle.

how to create your own chat window in photoshop - Tripwire Magazine

Blending Options > Gradient Overlay follow the color settings above.

how to create your own chat window in photoshop - Tripwire Magazine

In Stroke, set your size to 1px and use the color #83a659.

Final Product

how to create your own chat window in photoshop - Tripwire Magazine

And we are done! I hope you learned a few tricks by following this tutorial, some of the things that you should take note is the detail on the header, shadow on the body and of course our clean chat window UI.

If you came up with different versions of your own, feel free to post your work in the comments below. I want to see what you guys have! Also if you have questions or stuck on some of the steps, feel free to ask in the comments.

 

Author : Sanjay Khemlani

Sanjay is a Web Designer from Philippines, he is dedicated to clean coding and effective design. He also writes tutorials about Web IU and Web Design on his blog.

{ 4 comments… read them below or add one }

Muhammad Andik Cahyono August 1, 2012 at 10:59 am

wow great job…explained very well

Reply

Mike December 20, 2011 at 4:31 pm

Thanks for your tutorial its ok :)

Reply

faizan December 19, 2011 at 5:32 pm

amazing man………..it was great.

Reply

Mani Mazz December 11, 2011 at 9:44 am

Could connect the facebook chat through it to the sidebar, and talk with friends even logged out, GREAT.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics