How to Create your Own Chat Window UI in Photoshop

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.

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

Let’s Begin

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

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

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.

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

Now on Gradient Overlay, follow the settings above.

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

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

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

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

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.

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

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

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

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

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

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.

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.

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

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

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

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

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

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

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.

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.

Blending Options > Gradient Overlay follow the color settings above.

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

Final Product

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.

 

Tagged as: chat window using photoshop, Design, Freebies, P, photoshop chat window, Photoshop Tutorials, Tutorials, web design chat window