Wanna Make Ur Own Xat Chat Background?

Posted by: wawies on: September 1, 2009

• In: Uncategorized
• 11 Comments

If you are a xat addict and have been around xat you will notice everyone wants a customized xat chat background for their chat box. I will show you how to crate your own! The only thing you will need is photoshop !

This tutorial will guide you step by step, i will also provide a psd/pdd file you will be using in photoshop ! This file has it all in layers!

THE FILE YOU ARE ABOUT TO OPEN HAS COLORS I CHOSE DONT MIND THE COLORS YOU WILL BE ABLE 2 CHANGE ALL COLORS, BORDERS, TEXT AND CONTAINERS!

I have uploaded the file you will be using to sendspace.com you can download it here!

If that doesnt work copy and paste this link into another browser tab!
Link for Xat Chat File! : http://www.sendspace.com/file/fajacy

Once you download it save it and open it with photoshop! Im doing this using Photoshop Cs2! Your file should look something like this once you open it!

Step 1. Click on View, and Click on View Actual pixels! This will show you the actual size of the chat box background we will be creating. The actual chat box size is 728 by 486px.

Layers: Like my bff says “Layers are like a cake” We will be decorating each Layer as we go.

Layer names on this file are:

• Layer 0 : This is the Bottom layer the one that has your actual bg color!
• Copy Of Chat Template: This layer is Hidden and just there to kind of guide us! Keep it hidden.
• Layer 2:  Paint Splatter.
• Shape 10 & Shape 10 Copy:  Small right side Container Ttab.
• Shape 9:  Second small right side Container Tab.
• Shape 8 & Shape 8 Copy: Small Left Side Container Tab.
• Shape 7: Small Left Side Container tab with border.
• Shape 1: This is wher u change the color of the border around the containers.
• Layer A: This Changes the color for the area behind the type here text.
• Layer B: Small container right side bottom!
• Layer C: Small container right side bottom!
• Layer D: Small Container right side bottom!
• User Container: Container for the chat user area!
• Chat Area Container: Container for the Chat area.
• Chat Users Text: Text Color!
• Type Here Text: Text Color!
• Welcome Message: Text Color!

***Picture of what your layers should look like on your photohop!
These are your layers , they are located on the right side screen of your photoshop cs2 editor!***

Step 2. Changing the colors of your containers!

I will start by changing Layer 0*, Double click on Layer 0 . A layer style box should pop up. as you can see Pattern overlay and Color overlay have been selected! Click on Color overlay and Choose a color you wanna work with or like. Choose ur color and click ok!

I Chose the color purple.

Layer 2*. This layer should be a color that matches or goes good with the previous color you chose. Double Click on Layer 2, A layer style box should pop up. Click on Color Overlay and Choose a color, Click ok . Note i chose yellow for this!

Repeat this for layers, Shape 10, Shape 10 Copy, Shape 9, Shape 8, Shape 8 Copy, Choose the Same Color for all these Layers!

*By repeat i mean , Double Click on each of those layers, When Layer Style Box pops up click on Color Overlay, Choose Color , click ok. For these container tabs im going 2 go with pink. Note **Use your dropper and pick the same color.

Shape 7* Shape 7 has a gradient overlay and pattern overlay. Double Click on shape 7, Layer style box should come up, Click on Gradient Overlay and click on the gradient to change color, I chose 2 tones of pinks, choose your colors and click ok.

Do not change Shape 1*

Layer A* Double click on Layer A, On the layer style box Gradient Overlay and PatternOverlay have been selected! We will only be changing the Gradient overlay. Click on gradient overlay and chose colors!

I Chose Pink, Yellow and Purple, click ok after choosing your gradient colors!

Layer B, C, and D* Double click on layer, click on color overlay, choose color and click ok. Choose the same color for these 3 layers! I chose yellow!

User Container* & Chat area container * Double click on layer, a Layer style box should pop up, we are only changing the gradient overlay color, click on it and choose your colors. I chose Pink, Yellow, Purple, and another shade of pink!

On the Chat area you can either use the gradient overlay or color over lay , i chose the gradient overlay! If you decide to go with gradient overlay instead of color overlay, please click on the coloroverlay checkmark so its no longer selected. if you wanna use the gradient overlay you must remove the color overlay in order for it to work!

Example of what should be selected only.

Changing the text and text colors, these are our text layers. As you can see these layers are named based on what the text says, Chat Users, Type here! and Welcome!

Text layer example below!

Double click on Chat Users layer, Style box should pop up, Click on gradient overlay and choose colors that match our design, after choosing colors click ok, right click and copy layer style, right click on the rest of the text layers and paste the layer style. This will make the rest of the text layers match, if you dont want them the same color simply repeat this step and change each dradient style individually with out using the copy layer style method.

Want to add your own welcome message or name of your xat chat group to the design? Click on the text tool, example below.

Select the text tool, put your mouse on the text or highlight it depending on if you wanna remove or keep the welcome part, i chose to keep the word Welcome in it so i placed my cursor right after the welcome and hit enter, and added 2 my xat page on the secong line! You can pretty much change and play with the text till you get it the way you want! My text on my second line was 2 big so i changed the size and font type.

Done with the design, we covered all the layers, ready to save and see what we have created? Up at the top click on Layer, scroll down and choose Flatten Image! If it says discard hidden layers click ok. Click on File (also ontop),save as…Choose PNG as format type, name your file I am naming mine CustomChatA, Click on save! A box that says PNG option should pop up, Make sure it says none, on the interlace options. Click ok and Vuala all done!

Upload your Xat Chatbox background to Tinypic.com or Photobucket.com and add it to your chat box, you now have a customized chat bg!

Final Results if you chose the same colors as i did!

Click here to view actual size!

Hope this tutorial helps all u xat addicts, please feel free to leave a comment or just drop me a line! ty 4 reading!=)