I don't know how tutorials work
Hi guys! You all asked for a tutorial on how I made the "mass deck collection" backdrop I made, so I'll try to write this as concrete as possible. This will also require that you have basic html/css knowledge and photoshop(6.0 or higher! I'll be using cs2 for the tutorial). If you have any questions though, do ask here or on plurk! Also, please keep in mind that this is going to be based using Colors cards, but this tutorial can be used to put backdrops in any TCG collecting deck!
Part 1
1. First, figure out how big the mass deck collection will be. The bigger the cast, the bigger the backdrop will be! Do keep in account of the card layout as well. (If there is no card layout for said mass deck collection, then go by the default DW post layout). Most card layouts on DW from what I've seen, are 800 px wide, so generally, try to keep it about 10~15 cards per row since each card. but it shouldn't be hard to calculate). I then arrange each of the deck cards by color, and in numerical order. An example would be something like this:
This is relatively smaller in size but it should work out similarly as if I were collecting 3 or more decks in a series. For this however, the size of the backdrop would have to be 550 pixels wide and 300 pixels in height.
2. Find an image that would fit that size and open it up in photoshop! I'm going to use the following:
Most medium to large images fit 550x300 pixels, but if you happen to find a high quality screenshot/scan, do crop and resize as needed! My original image was 4019x2750 pixels so I decided to crop and resize the image as I see fit:
Much better! Perfect size to put up as a backdrop.
3. The next thing to do is to open a new blank file in photoshop and input the following:
For width and height, put in the size of what the backdrop of the image you'll need. Keep the color mode in "RGB". For backgound contents, I recommend we use "transparent" as parts of the backdrop will be transparent (especially since the filler cards have rounded corners). Everything else should be at its default settings.
Once you have it open, it should look like this:
Note: I actually prefer to have my background layer as transparent, so I'm able to see what's going to be visible, or what's not visible. However, if you feel that you do not need to do so, you are free to have the background any color you like!
4. Next. Go back to your backdrop image file that you have opened, and select all either under the dropdown menu > select > all, or using the shortcut keys "alt+a". This should get the program to select the image as needed. After that, copy the image by hitting "ctrl+c" or under "edit" under the dropdown menu like so:
5. After you have the image copied, switch back to the new blank transparent file you have, and make a new layer on top of "layer 1". Name the new layer so that it differentiates from the previous one. I've named mine "backdrop" for now.
6. After that paste the image! You can hit either "ctrl+z" on your keyboard or look for "paste" under "edit" in the menu. It should come out somewhat like this:
7. Adjust the image's brightness/contrast/saturation as needed! If you would like to use the image as is, feel free to do so. For me, I'm going to adjust the image since it looks a little dark for me:
Much better!
8. The next thing to do is to open the filler card files of the decks you plan to mass deck collect together! As shown before, I'll be using Rukia and Ichigo's deck fillers for the tutorial. :)
9. So what do with these filler cards you ask? We simply copy them and paste them onto the backdrop file we have open.
Like so! Continue filling the picture with any other filler cards from decks that you plan on collecting (or just any card fillers of the same type, really. It works all the same). It should turn out something like this:
Neat, isn't it?
10. Okay, now merge all the filler card layers! Why? Because we don't need that many layers to properly make the backdrop image! As long as the fillers are mostly in tact, it should be fine. You should have only 3 layers now: the filler card layer (rename if you need to!) the "backdrop" layer and "layer 1".
Looking less cluttered now. Onward!
11. Next, we select the "transparent" parts in the "fillercards" layer. Please do not select anything outside the cards themselves!
It should turn out somewhat like this.
12. Now, make a group set by going to the "Layer" in the dropdown menu, select "New" and choosing "Group". Feel free to name the group anything you like! (or just go with the default).
Note: Please make sure the mode is set to "pass through" or it won't work!
13. Once you made your new group, click on "Add layer mask" in your layer window (please make sure you're on the "group" layer!). It should be located on the bottom right, the third button that looks like a "square with a circle" in it. It may look different in earlier/later versions so do check other photoshop tutorials if you can't find it.
Your new "group" should now look like this:
14. Now to the fun part! :D Move the backdrop image to the "group" layer.
Looks... the same, doesn't it? Not exactly. Moving the image to the group layer actually remove the corners and creates some transparency so it doesn't show up when you input the backdrop onto your mass deck collection. Here's a closeup picture if you're still not sure!
15. Here's where it can go into different directions! I prefer the backdrop to be light so that the cards stick out more but if you prefer that the backdrop be visible, do skip to step 16.
Now, the next thing to do is to lighten the image! Under the dropdown menu on your backdrop layer, go to Mode > Adjustments > Hue/Saturation and adjust the Lightness so the image isn't as visible. Click on "Ok" when you're done.
I've adjusted the lightness here so it's 50% lighter but you can make it as light as you like.
16. Turn off the "fillercards" layer so that it's not visible anymore. It should look like this:
Now you can see the transparency more clearly!
17. When you have done so, go to File under the menu and select Save for Web. Save as either "png" or "gif" and be sure to check "transparency" under either of the formats. Otherwise, the transparent parts won't be transparent. When you've finished saving, you should get an image file of the following:
Now it's all ready to be put onto your mass deck collection! Now for Part 2:
Part 2
You have your image ready. Now what? Do you have your deck collection set up? If you haven't do so right now! I still have mine from the first part:
Here's the table coding I've used. It's basic table coding but you are free to adjust it to your needs/what have you, or apply it to your own post.
CARDSGOHERE
The default color is white(#ffffff) so you're free to change the table colors, or leave it as is. Just put in the cards you want where it says "CARDSGOHERE", and the backdrop image you have to where "IMAGEURLHERE" is and you're done!
Thank you so much for reading!
I hope this helped!
Part 1
1. First, figure out how big the mass deck collection will be. The bigger the cast, the bigger the backdrop will be! Do keep in account of the card layout as well. (If there is no card layout for said mass deck collection, then go by the default DW post layout). Most card layouts on DW from what I've seen, are 800 px wide, so generally, try to keep it about 10~15 cards per row since each card. but it shouldn't be hard to calculate). I then arrange each of the deck cards by color, and in numerical order. An example would be something like this:
This is relatively smaller in size but it should work out similarly as if I were collecting 3 or more decks in a series. For this however, the size of the backdrop would have to be 550 pixels wide and 300 pixels in height.
2. Find an image that would fit that size and open it up in photoshop! I'm going to use the following:
Most medium to large images fit 550x300 pixels, but if you happen to find a high quality screenshot/scan, do crop and resize as needed! My original image was 4019x2750 pixels so I decided to crop and resize the image as I see fit:
Much better! Perfect size to put up as a backdrop.
3. The next thing to do is to open a new blank file in photoshop and input the following:
For width and height, put in the size of what the backdrop of the image you'll need. Keep the color mode in "RGB". For backgound contents, I recommend we use "transparent" as parts of the backdrop will be transparent (especially since the filler cards have rounded corners). Everything else should be at its default settings.
Once you have it open, it should look like this:
Note: I actually prefer to have my background layer as transparent, so I'm able to see what's going to be visible, or what's not visible. However, if you feel that you do not need to do so, you are free to have the background any color you like!
4. Next. Go back to your backdrop image file that you have opened, and select all either under the dropdown menu > select > all, or using the shortcut keys "alt+a". This should get the program to select the image as needed. After that, copy the image by hitting "ctrl+c" or under "edit" under the dropdown menu like so:
5. After you have the image copied, switch back to the new blank transparent file you have, and make a new layer on top of "layer 1". Name the new layer so that it differentiates from the previous one. I've named mine "backdrop" for now.
6. After that paste the image! You can hit either "ctrl+z" on your keyboard or look for "paste" under "edit" in the menu. It should come out somewhat like this:
7. Adjust the image's brightness/contrast/saturation as needed! If you would like to use the image as is, feel free to do so. For me, I'm going to adjust the image since it looks a little dark for me:
Much better!
8. The next thing to do is to open the filler card files of the decks you plan to mass deck collect together! As shown before, I'll be using Rukia and Ichigo's deck fillers for the tutorial. :)
9. So what do with these filler cards you ask? We simply copy them and paste them onto the backdrop file we have open.
Like so! Continue filling the picture with any other filler cards from decks that you plan on collecting (or just any card fillers of the same type, really. It works all the same). It should turn out something like this:
Neat, isn't it?
10. Okay, now merge all the filler card layers! Why? Because we don't need that many layers to properly make the backdrop image! As long as the fillers are mostly in tact, it should be fine. You should have only 3 layers now: the filler card layer (rename if you need to!) the "backdrop" layer and "layer 1".
Looking less cluttered now. Onward!
11. Next, we select the "transparent" parts in the "fillercards" layer. Please do not select anything outside the cards themselves!
It should turn out somewhat like this.
12. Now, make a group set by going to the "Layer" in the dropdown menu, select "New" and choosing "Group". Feel free to name the group anything you like! (or just go with the default).
Note: Please make sure the mode is set to "pass through" or it won't work!
13. Once you made your new group, click on "Add layer mask" in your layer window (please make sure you're on the "group" layer!). It should be located on the bottom right, the third button that looks like a "square with a circle" in it. It may look different in earlier/later versions so do check other photoshop tutorials if you can't find it.
Your new "group" should now look like this:
14. Now to the fun part! :D Move the backdrop image to the "group" layer.
Looks... the same, doesn't it? Not exactly. Moving the image to the group layer actually remove the corners and creates some transparency so it doesn't show up when you input the backdrop onto your mass deck collection. Here's a closeup picture if you're still not sure!
15. Here's where it can go into different directions! I prefer the backdrop to be light so that the cards stick out more but if you prefer that the backdrop be visible, do skip to step 16.
Now, the next thing to do is to lighten the image! Under the dropdown menu on your backdrop layer, go to Mode > Adjustments > Hue/Saturation and adjust the Lightness so the image isn't as visible. Click on "Ok" when you're done.
I've adjusted the lightness here so it's 50% lighter but you can make it as light as you like.
16. Turn off the "fillercards" layer so that it's not visible anymore. It should look like this:
Now you can see the transparency more clearly!
17. When you have done so, go to File under the menu and select Save for Web. Save as either "png" or "gif" and be sure to check "transparency" under either of the formats. Otherwise, the transparent parts won't be transparent. When you've finished saving, you should get an image file of the following:
Now it's all ready to be put onto your mass deck collection! Now for Part 2:
Part 2
You have your image ready. Now what? Do you have your deck collection set up? If you haven't do so right now! I still have mine from the first part:
Here's the table coding I've used. It's basic table coding but you are free to adjust it to your needs/what have you, or apply it to your own post.
CARDSGOHERE
The default color is white(#ffffff) so you're free to change the table colors, or leave it as is. Just put in the cards you want where it says "CARDSGOHERE", and the backdrop image you have to where "IMAGEURLHERE" is and you're done!
Thank you so much for reading!
I hope this helped!