Post by anyu on Nov 16, 2009 18:39:36 GMT -5
Someone brought up that Spick's table tutorial doesn't explain how to go into photoshop and make the table, so I have written this tutorial to help those of you who would like to learn how to make a table using Photoshop, though it does an excellent job of explaining how to put one together. The concept should be fairly similar in GIMP, from what I remember, but unfortunately I have not used GIMP for quite a while.
Generally, I start with a table that is about 500 pixels tall and 425 pixels wide, though your size will vary depending on how tall or how wide you want your table to be. Make sure that the background is transparent.
The second step is deciding what you want the table to look like. I'm not going to make anything super-fancy for this tutorial. If you've seen the two tables that I have made for this site already, then you know what I am going to do. There will be a simple, square image of my wolf above the table.
To start, chose an image you want to use. I am using THIS one.
Okay. Obviously, that image is too large for a table. I am only going to use the wolf. So, I am going to use my cropping tool and crop out a section that is 425 pixels wide and 310 pixels tall, which is my preferred height and width for this part. Once again, size may vary depending on how tall or wide you want your table.
Make sure your settings look something like that, so you get the right size. Then you crop the picture. My image is a little too big this time to post here, so THIS is the link.
Okay. So, you've cropped your image. Now what? Make sure that it looks the way you want it to. Enhance the quality, add whatever you feel like adding, etc. All I am going to do is add a red border around the image.
Now, you may have noticed on my tables how the main image sort of fades into the table. To achieve that, I use the gradient tool. This part may be a little more confusing, so bear with me as I try to explain what I do. First of all, I make sure that I am using the same color that I used on the border of the picture (if you did not make a border, that is fine). It is also the same color that I will use for the main body of the table. Here are my settings:
You will need to select the gradient tool. If you don't know where it is or can't see it, right click on the paint bucket tool. That should bring up a little bar that gives you the option of selecting the paint bucket or the gradient tool. Choose the gradient tool (in the image below I already have the gradient tool selected. Your photoshop will probably have a paint bucket selected, so it may look a little different.).
Next, chose these settings for your gradient tool (the image is long, so it's a link this time):
Now that the tool is selected and you (hopefully) have the right settings, it's time to use it!
This is a little harder to explain and you may have to experiment on your own a little for it to really make sense. To use the gradient tool you draw a little line by clicking and holding on one part of your screen and then moving the mouse (while still holding it down) and letting go when you think your line is long enough.
I do this down at the bottom of the image, because we don't want the entire image covered in color. Sometimes you also have to repeat drawing the line to make it dark enough. Let me show you.....
Drawing the line.
After drawing the first line. (this is what it looks like after you have let go of the line once you've drawn it)
After 10 times.
Okay. So that's all for gradients. Now you need to copy and past this image into the blank image that we made at the begging. Copy and paste it by first hitting Ctrl + A to select the image, then Ctrl + C to copy it. Pull up your blank image and hit Ctrl + V to paste it. Make sure you move it all the way to the top of the image.
Now for the table part!
So, to make the table beneath the image we will be using the rounded rectangle tool, though you are allowed to use any shape you want.
To select the tool, go down to a shape tool that looks like a square and right click, then look for the one that says "Rounded Rectangle Tool" and select it.
Now, you can set a specific size for the shape you are going to make or you can try doing that part on your own. I like to set a specific size because it's more accurate and I suck at estimates. So, I set a fixed size for the shape. At the top of the screen, after you have selected the rounded rectangle tool, there is a bar with options concerning the tool. It should look like THIS.
The shape you are going to make will be the main body of the table, so it should fill up most of the rest of the empty space on your image. To make it the size you want it to be, refer to the picture below (note, I used a size 125 instead of 75 for the height):
Now you make the shape. All you have to do is click and it appears! Then just move it to where you want it.
IMPORTANT!
Now you must do a little bit of reorganizing of layers. Refer to the image in the link below to see what your table should look like at this point and how your layers should be arranged.
i38.tinypic.com/2gy5apx.jpg
Now we need to make another shape, but smaller this time, so it fits inside the first one. And this shape layer can stay on top of the other two layers, so you don't have to move it. This time, however, you want to chose a different color for the shape. I usually chose a lighter color. In this case, I am using white.
If you used a fixed size for the first one, make it skinnier by at least 10 pixels and shorter vy at least 10 pixels as well, though a few more pixels may be preferable than most. I am doing 30 pixels shorter and skinnier. It is the same process as before, just changing numbers. So, the new shape that you make should essentially be smaller than the first one.
Once you have the second shape down you can do several things with it. You can leave it as is or you can lessen the opacity so that it is slightly see through and matches the background a little better. I like to mess with the opacity, which can be found above the layers, so I will do that and show you what I come up with.
This is what I have so far. Notice how there is a large amount of space underneath the table? That is because I want to add the name of the wolf there. Here you can also see that I played with the opacity of the white layer. What you see here is the white layer at an opacity of 25%. You can experiment with that to see what looks best.
That is the basic form of the table. I am going to add the name of my wolf at the bottom, like I did with Ashmari. I won't tell you how to do that - this is where you have to be creative.
Save the image as a .psd file, in case you mess up after this point and you can go back to your layers and start again.
Now you need to merge all of your layers together. Right click either of the shape layers or your picture layer and click the option that says "Merge Visible." That will merge all of your layers into one layer very conveniently. Now we get to use the cropping tool again!
First we want to crop the middle section of the table (by the way, we are splitting the image into three parts so that we can put it into the code included in Spick's table tutorial). Like we did when we cut the wolf picture, chance the size constraints of the crop tool. I am doing 425 pixels in width and 20 pixels in height.
When you crop that out, save it as a .jpg file...perhaps something like tablebg.jpg (this part of the image will serve as the background for your table). Once you have saved the image, hit CTRL + Z, which will undo the cropping and bring you back to the complete table.
Now we are going to crop out the top part of the image, like so (this time I did not set a size for my crop tool):
Once you have cropped, save the image again. This one can either be as a .jpg image or a .png image, but only use .png if there is some sort of transparency at the top of your image. Maybe save it as something like tabletop.jpg...or whatever xD
Now, hit Ctrl + Z again to go back to your entire table. It's time for the bottom half of the table now. I am not using a fixed size for this cropping either.
This time, once you have cropped the image, save it as a .png image. Something like tablebottom.png or something. After that, you are finished!
Just upload all three of the images and plug them into the code that Spick has provided for you in the table tutorial.
Remember, this is just how I make tables. I am sure that there are other ways to make them as well, so don't be afraid to experiment with them. Here is my finished product:
Generally, I start with a table that is about 500 pixels tall and 425 pixels wide, though your size will vary depending on how tall or how wide you want your table to be. Make sure that the background is transparent.
The second step is deciding what you want the table to look like. I'm not going to make anything super-fancy for this tutorial. If you've seen the two tables that I have made for this site already, then you know what I am going to do. There will be a simple, square image of my wolf above the table.
To start, chose an image you want to use. I am using THIS one.
Okay. Obviously, that image is too large for a table. I am only going to use the wolf. So, I am going to use my cropping tool and crop out a section that is 425 pixels wide and 310 pixels tall, which is my preferred height and width for this part. Once again, size may vary depending on how tall or wide you want your table.
Make sure your settings look something like that, so you get the right size. Then you crop the picture. My image is a little too big this time to post here, so THIS is the link.
Okay. So, you've cropped your image. Now what? Make sure that it looks the way you want it to. Enhance the quality, add whatever you feel like adding, etc. All I am going to do is add a red border around the image.
Now, you may have noticed on my tables how the main image sort of fades into the table. To achieve that, I use the gradient tool. This part may be a little more confusing, so bear with me as I try to explain what I do. First of all, I make sure that I am using the same color that I used on the border of the picture (if you did not make a border, that is fine). It is also the same color that I will use for the main body of the table. Here are my settings:
You will need to select the gradient tool. If you don't know where it is or can't see it, right click on the paint bucket tool. That should bring up a little bar that gives you the option of selecting the paint bucket or the gradient tool. Choose the gradient tool (in the image below I already have the gradient tool selected. Your photoshop will probably have a paint bucket selected, so it may look a little different.).
Next, chose these settings for your gradient tool (the image is long, so it's a link this time):
Now that the tool is selected and you (hopefully) have the right settings, it's time to use it!
This is a little harder to explain and you may have to experiment on your own a little for it to really make sense. To use the gradient tool you draw a little line by clicking and holding on one part of your screen and then moving the mouse (while still holding it down) and letting go when you think your line is long enough.
I do this down at the bottom of the image, because we don't want the entire image covered in color. Sometimes you also have to repeat drawing the line to make it dark enough. Let me show you.....
Drawing the line.
After drawing the first line. (this is what it looks like after you have let go of the line once you've drawn it)
After 10 times.
Okay. So that's all for gradients. Now you need to copy and past this image into the blank image that we made at the begging. Copy and paste it by first hitting Ctrl + A to select the image, then Ctrl + C to copy it. Pull up your blank image and hit Ctrl + V to paste it. Make sure you move it all the way to the top of the image.
Now for the table part!
So, to make the table beneath the image we will be using the rounded rectangle tool, though you are allowed to use any shape you want.
To select the tool, go down to a shape tool that looks like a square and right click, then look for the one that says "Rounded Rectangle Tool" and select it.
Now, you can set a specific size for the shape you are going to make or you can try doing that part on your own. I like to set a specific size because it's more accurate and I suck at estimates. So, I set a fixed size for the shape. At the top of the screen, after you have selected the rounded rectangle tool, there is a bar with options concerning the tool. It should look like THIS.
The shape you are going to make will be the main body of the table, so it should fill up most of the rest of the empty space on your image. To make it the size you want it to be, refer to the picture below (note, I used a size 125 instead of 75 for the height):
Now you make the shape. All you have to do is click and it appears! Then just move it to where you want it.
IMPORTANT!
Now you must do a little bit of reorganizing of layers. Refer to the image in the link below to see what your table should look like at this point and how your layers should be arranged.
i38.tinypic.com/2gy5apx.jpg
Now we need to make another shape, but smaller this time, so it fits inside the first one. And this shape layer can stay on top of the other two layers, so you don't have to move it. This time, however, you want to chose a different color for the shape. I usually chose a lighter color. In this case, I am using white.
If you used a fixed size for the first one, make it skinnier by at least 10 pixels and shorter vy at least 10 pixels as well, though a few more pixels may be preferable than most. I am doing 30 pixels shorter and skinnier. It is the same process as before, just changing numbers. So, the new shape that you make should essentially be smaller than the first one.
Once you have the second shape down you can do several things with it. You can leave it as is or you can lessen the opacity so that it is slightly see through and matches the background a little better. I like to mess with the opacity, which can be found above the layers, so I will do that and show you what I come up with.
This is what I have so far. Notice how there is a large amount of space underneath the table? That is because I want to add the name of the wolf there. Here you can also see that I played with the opacity of the white layer. What you see here is the white layer at an opacity of 25%. You can experiment with that to see what looks best.
That is the basic form of the table. I am going to add the name of my wolf at the bottom, like I did with Ashmari. I won't tell you how to do that - this is where you have to be creative.
Save the image as a .psd file, in case you mess up after this point and you can go back to your layers and start again.
Now you need to merge all of your layers together. Right click either of the shape layers or your picture layer and click the option that says "Merge Visible." That will merge all of your layers into one layer very conveniently. Now we get to use the cropping tool again!
First we want to crop the middle section of the table (by the way, we are splitting the image into three parts so that we can put it into the code included in Spick's table tutorial). Like we did when we cut the wolf picture, chance the size constraints of the crop tool. I am doing 425 pixels in width and 20 pixels in height.
When you crop that out, save it as a .jpg file...perhaps something like tablebg.jpg (this part of the image will serve as the background for your table). Once you have saved the image, hit CTRL + Z, which will undo the cropping and bring you back to the complete table.
Now we are going to crop out the top part of the image, like so (this time I did not set a size for my crop tool):
Once you have cropped, save the image again. This one can either be as a .jpg image or a .png image, but only use .png if there is some sort of transparency at the top of your image. Maybe save it as something like tabletop.jpg...or whatever xD
Now, hit Ctrl + Z again to go back to your entire table. It's time for the bottom half of the table now. I am not using a fixed size for this cropping either.
This time, once you have cropped the image, save it as a .png image. Something like tablebottom.png or something. After that, you are finished!
Just upload all three of the images and plug them into the code that Spick has provided for you in the table tutorial.
Remember, this is just how I make tables. I am sure that there are other ways to make them as well, so don't be afraid to experiment with them. Here is my finished product:
[atrb=border,0,true][atrb=cellSpacing,0,true][atrb=cellPadding,0,true][atrb=width,422,true] |
[atrb=background,http://i36.tinypic.com/16jey9t.png]WORDS GO HERE AND STUFF |
 |