Make a Contact Table in Photoshop

At the end of this 10-step Tutorial you should be able to create a myspace contact table on Photoshop!
[b:cd010765b8]*Please make yourself familiar with Photoshop and its tools, this is a pretty in-depth tutorial, but some things you are just going to have to know. If you have problems with Photoshop or you don’t have the program you can do something similar on Paintbrush, however the quality will not be the same, don’t expect it to be. [/b:cd010765b8][/color:cd010765b8]

*You can also use Adobe Image Ready.
STEP ONE[/u:cd010765b8][/b:cd010765b8]
Open Photoshop and Click on File in the top left corner!

[b:cd010765b8]STEP TWO[/b:cd010765b8][/u:cd010765b8]
Next you need to go to the Open button, and pick a photo/graphic that you want to work with.
(Size doesn’t really matter as long as the photo/graphic is larger than or around 300px, if it is too small you will have space around the picture or you will have a very pixel-ized image.)


Open your photo

*to check the size of your photo/graphic, go to Image, at the top tool bar third from the left, go down to Image Size or Canvas Size and click on it, it should tell you your size in inches…


…so to change that to pixels you need to go to the drop down box that says inches, and click on the down arrow, go to pixels, and it should convert the measurements so you can tell how big the file is.


[u:cd010765b8][b:cd010765b8]STEP THREE[/b:cd010765b8][/u:cd010765b8]
Now that you have a graphic to work with we need to re-size it so it will fit on our canvas. To do this you can do a couple things, first I suggest you crop the actual part of the image that you want on your contact table…if you want the whole image ignore this part and go to the next step…

To crop, you need the crop tool which looks like this


You will place this tool on the image and draw a box around the part of your photo/graphic that you want to keep. If you mess up just right click and hit cancel…when you get it just like you want, right click and hit crop


[u:cd010765b8][b:cd010765b8]STEP FOUR[/b:cd010765b8][/u:cd010765b8]
Now that you have the image that you want and you have it cropped, it is time to make it the correct size. A contact table is 300px by 150px

So to accomplish this with your image you need the re-size tool which looks like this


After you click on this tool, you need to right-click on your image and scroll down to Select all > Free Transform, this will put guides around your image so you can change the size.


Click on one of the corners and make your image pretty small, this is an estimate because we will have to check the size of the image again to make sure we are on the right track.

Once you have your image adjusted to where you want it, click on the re-size tool again, and it should ask you if you want to Apply the Transformation, hit apply.


Your image may look a little funny, but you need to crop around the actual image which will get rid of all that extra space!


Now you should have a smaller image and we can check the image size again. Ok, so if your image is pretty close to the 300px by 150px you can go to the next step, if it isn’t you need to repeat this step until it is. Checking the size is important because if you make your image too small you can mess it up and will have to Undo several times, if this happens don’t worry, everything can be fixed!
STEP FIVE[/b:cd010765b8][/u:cd010765b8]
So if you are on this step your image should be pretty close to the right size, the next thing we are going to do is going to trim some of the image from the top and bottom, so if you don’t want that to happen go back one step and re-size again to make sure that your image is slightly smaller than what we want.

Ok, so you need to go back to the top tool bar and click on Image, and Canvas Size, this time, we are going to change the numbers in the box to our 300x150..


Make sure you are working with pixels because it will make a huge difference!!!

Also if the box beside RELATIVE is clicked, un-click it so you can make the numbers whatever you want.

You need to type 300 in the width box and 150 in the height box, if you get this backwards, well…I don’t really need to say it.

When you finish with this, your canvas should be the correct size, depending on how you sized your image you may need to stretch it out some more or shrink it, do what ever you need to do to make your image the way you want it on your canvas.

Congratulations, you are almost finished!!!!

*Feel free to alter your image in this section, if you want it to be grayscale or whatever, this is the time to do it…and remember some of the coolest contact tables are the ones that you make your own, and to do this, altering the image can be really cool. You are only limited by your imagination and ability. If you need help with this and want some tips, you can pm me about it.
**If you want a border around your table now is the time as well to do this you need to click on your background layer in the bottom pallet on the set of pallets along the right side of the screen. At the very bottom of that pallet there is a tool bar and you should click on the button on the left end that has an “f” on it. It will give you several choices, click on Stroke.


This will open a window and you can change the color of your border and its opacity and thickness, for you to see it you need to change it from OUTSIDE to INSIDE.

STEP SIX[/u:cd010765b8][/b:cd010765b8]
Now we are going to put in our text! To me it is easier to type out the text that I want and then find a font, but you can do that in whatever order you want. You need to click on the text tool which looks like this:

That shouldn’t be too hard, right? Ok so you need to draw a text box from the top left corner to the bottom middle, this will give you plenty of room for your left column of text.

Now it is at your discretion what you want to put in your text field, some people abbreviate, others use different words, I am going to tell you what it is and you can deviate accordingly.
Send Message

Add to Friends


Add to Group[/color:cd010765b8]

*I prefer to shorten that so that my background is more prominent!
Message or Mail


IM or Chat


It is really up to you!

Once you have that typed out, you need to check your font size and spacing. To do this you will need to stay in the Text application and on the tool bar on the top with the buttons, you need to click on the button that is to the very right it looks like a list of text


This should bring up a small pallet called the Character Pallet
You will need to adjust the spacing by clicking the drop down box to the right of the font size box


I would put my spacing at 11pt or so, it works better with the links like this. Now to change the font you need to highlight your text and pick a font…it is up to you on which font you want, and the size depends on the font that you choose.

[color=red:cd010765b8]**It is important that your font work well with your background, however it is even more important that your font is easy to read, if that means making it bigger or brighter, smaller or darker, whatever, but it needs to be clear!!![/color:cd010765b8]
[b:cd010765b8]STEP SEVEN[/b:cd010765b8][/u:cd010765b8]
You will need to make a text column for the other side of your table, which you can do the same way as in Step Six. Justification is your choice, it really depends on the image as a whole some look better centered, some right/left, some left/right, whatever you think looks best.

The text on the right side of the table should be the following,

[color=blue:cd010765b8]Forward Member

Add to Favorites

Block Member

Rate Member[/color:cd010765b8]






Your font size, type, and spacing should be the same, if it isn’t you need to change it to match the other side.

*Just like with the image you can alter your text, just play around with the tools on Photoshop, and if you need help, pm me.

[b:cd010765b8]STEP EIGHT[/b:cd010765b8][/u:cd010765b8]
Before saving this step is something that I do because balance is important, so that your text and the links match up. As in the table above I would leave a space at the top of the box because the links do not start at the very top. Also you can grab a guide from the top ruler and make sure that your text columns are even.
STEP NINE[/b:cd010765b8][/u:cd010765b8]
Saving your contact table:
Click on File, Save As


I would save the image as a JPG file, they tend to do better once you upload to the internet and plug into the code.

Name it whatever you want, and remember where you save it to. You could make a folder in your “My Pictures” file for your contact tables.

A window should pop up and ask you about image quality, slide the meter all the way to the right so that your quality is at maximum, then hit OK
STEP TEN[/b:cd010765b8][/u:cd010765b8]
Uploading your image to the internet is really simple and with a small file like this, it is easy to do as well. There are lots of sites out there that will let you upload, however, I use Image Shack, it is free and you don’t have to sign up for anything to use it!


Click on the Browse button, you need to go to wherever you saved your table at and click open, then hit the Host It! button.

Once the page loads you should have about eight or nine links to choose from, it is extremely important that you use the correct one, but you are in luck because the one you need is the very last one.


You need to highlight and copy this URL!

You will then paste the URL into the code at the end of this tutorial, where it says “URL HERE”

Now Highlight the entire code, and paste in your “About Me” or “I’d Like to Meet” section, and Save your profile!!

[color=red:cd010765b8][b:cd010765b8]CONGRATULATIONS YOU HAVE MADE A CONTACT TABLE!!! SEE IT WASN’T THAT HARD![/b:cd010765b8][/color:cd010765b8]

[code:1:cd010765b8]<style type="text/css">
.contactTable {width:300px!important; height:150px!important; padding:0px!important; background-image:url("URL HERE"); background-attachment:scroll; background-position:center center; background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px!important;}
.contactTable a {display:block; height:28px; width:115px;}
.contactTable .text {font-size:1px!important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none!important;}

Here is the code!!!

Please let me know if I need to add anything or change anything, or if it is ok the way it is[/b:cd010765b8][/color:cd010765b8][/size:cd010765b8]

Remember: A Block and Add button is required or your myspace goes poof, [b:cd010765b8]no exceptions.[/b:cd010765b8][/color:cd010765b8][/size:cd010765b8]

© 2004-2018 All rights reserved.
MyGen v2.6 - 146295548 Unique Visitors
This page was created in 1.021 seconds
Privacy Policy

eXTReMe Tracker