In this tutorial, I`m going to show you how to design a clean and simple, yet very fancy and complex chat window. Along the way, we`ll build different user interface elements, like buttons, fields, boxes and scroll bars, using a series of Photoshop designing tools.

What we`re going to build today:

First step is to open Photoshop and create a new document of 600×450px. Set the “Background Contents” to “Transparent.

Let`s build the background. Grab the Paint Bucket Tool(G) and paint the blank canvas with a blue color(#54728c). Prepare the layer for filters by going to Filter->Convert for Smart Filters. Now make the background noisy by applying to it a Noise Filter of 2%(Filter->Noise->Add Noise).

Add a gradient to the background to make it look better.

The background is finished. Don`t worry about that middle white spot. We`ll cover it with the app shape.

Now let`s build the app. Select the Rounded Rectangle Tool(U), put it in “Shape Layers” mode to create shapes, set the radius to 5px and draw a rectangle of 460×340px.Stylize it with a white stroke of 1px, color overlay(#f9f9f9) and a smooth dark outer glow:

We`re going to build now the header of the app. This is a tricky step, as we need to make a rectangle with rounded corners and straight corners too. Ctrl+Click the shape-app layer to reveal its selection. Grab the Rectangular Marquee Tool(M), put it in “Intersect with Selection” mode and draw a selection by starting above the shape and ending at 30px under the top of the app. This selection will intersect with the current one and will result another selection with rounded corners at the top and straight corners at bottom. Create a new layer, select the Paint Bucket Tool(G) and paint inside the selection with any color you want.

Apply the next gradient overlay to beautify the shape:

Create a “Close” button by drawing a small circle of 17×17px with the Ellipse Tool(U). Make it white and apply to it a small drop-shadow. Then select the Line Tool(U) and draw 2 lines to create an “x” or simply type in with the Type Tool(T) “X”.

With the Type Tool(T), add a title at the middle of the header. I used the beautiful “Yanone Kaffeesatz” font which can be downloaded from the Google Fonts Library. With this touch, the header is finished.

Now let`s build the scroll bar. Select the Rectangle Tool(U) and draw a rectangle of 17×250px.

Stylize it with the next blending options to make it look like a real bar:

Now the bar looks as we wanted to be:

You noticed that the browser bar has 2 arrows, one at the top and another one at the bottom of the bar, so let`s draw them too. Select the Rectangle Tool(U) and draw a rectangle of 17×17px. Add it the next blending options:

With the Custom Shape Tool(U), add a small gray up-arrow inside the rectangle.

Now duplicate the 2 layers and put them at the bottom of the bar, then rotate the arrow 180 degrees.

The arrows are placed where they belong and are looking good:

Now we have to make the middle bar which will scroll up and down.

Select the Rounded Rectangle Tool(U), set the radius to 2px and draw a rectangle of 15×60px. Then apply to it the same blending options you used when styled the up and down arrows (gradient and stroke).After, select the Line Tool(U), set the height to 1px and draw some lines exactly like on the next image. We want to create the drag effect existing on any bar.

Now the bar is finished:

Let`s continue. We`re going to build now the conversation area by building each chat box. Select the Rectangle Tool(U) and draw a rectangle of 443×81px.

Add to it the next gradient overlay:

Now just under this shape, draw 2 lines, one darker and other one lighter than the background, like in the image. Using this technique,we`ll create a nice depth effect.

Let`s populate this first box with some text and an avatar. The title is made with Yanone Kaffeesatz font, font-size:18px, font-weight:regular and the rest with Arial, font-size:12px, font-weight:regular as well. Being just a design, I can afford using some dummy text like the very popular “Lorem Ipsum…”. The avatar is 40×40px. I imported my own avatar, but you`ll have to use your avatar

Group the layers used to build this first chat box(Ctrl+G) and duplicate the group in order to obtain 2 more boxes. Modify them as you want to get a realistic conversation.

Now the window starts to look like a real one.

We have to build now the text area, in which the user can type in to chat. Select the Rounded Rectangle Tool(U), set the radius to 3px and draw a rectangle of 345×30px, under the conversation area.

Stylize it by adding it an outside stroke of 1px and #eaeaea color. Add some text to make it more visible and realistic.

The last step is to build a “Send” button. With the same Rounded Rectangle Tool(U) and 3px radius, draw a rectangle of 70×30px, next to textarea.

Stylize the shape with an inside stroke of 1px and #2b5e8b color and the next gradient overlay:

Let`s make the button shining a bit. Apply here the same selection technique used when we created the chat header, to obtain a rectangle with rounded and straight corners. Select only half of the button and color it with white. Then reduce the opacity of the white layer to 10% and you will obtain a more eye-catchy button.

Inside the button, with the same font Yanone Kaffeesatz, type in the message “Send” and add then stylize it with a smooth drop-shadow.

With this final touch, we`ve reached the end of the tutorial and obtained a clean, clear and beautiful chat window. Have a look at what we`ve done today:

I thank you for your visit, I hope this tutorial will help you somehow and if you have any questions, just drop them in the comments area. Until then, I wish you have a great day!

Related posts:

1. How to Design a Sleek Progress Bar in Photoshop
2. How to create a clean and design portfolio layout using Photoshop
3. Design a Gorgeous ToDo List Application in Photoshop