1. Begin with the rounded rectangle tool (U) and draw a shape about 218px by 160px. You may use the rulers if you like (Ctrl+R). Use a radius of 10 px. Also make sure your 'paths' option is selected.
2. After drawing your shape right click somewhere inside of it and go to make selection.
3. Once selected fill it with color #0a344c on a new layer other than your background layer.
4. Next use the rectangular marquee tool (M) and draw an elongated rectangle across the upper portion of the box.
5. Enter free transform mode (Ctrl+T) and drag the upper part of it up until the top rounded edges are covered up.
6. Like this:
7. Next use the rectangular marquee tool again to select a large portion of the body. This best done while zoomed in and dragging from the upper left to the lower right.
8. With the selection still active, create a new layer and fill the selection with color #dfeaf0.
9. Now Ctrl+click your first layer (with the dark blue) and use the marquee tool with 'intersect with selection' option chosen to capture the bottom blue strip like so.
10. With the selection still active, duplicate the layer twice by pressing Ctrl+J two times. Your layers palette should look something like this:
11. Now drag one of the new layers to the top of your layers palette and the other one to the bottom, like shown.
12. Of the two layers you got when you used Ctrl+J, select the one you moved to the bottom of the layers palette and go into blending options. Apply a color overlay of #dfeaf0.
13. Now nudge it down 4-6 pixels (Down Arrow) so it looks like this:
14. Next, Of the two layers you got when you used Ctrl+J, select the one you moved to the top of the layers palette and go into blending options. Apply a 1px stroke of white (#ffffff).
15. Make sure your layers palette looks like this and select the dark blue box layer as shown.
16. Use the eraser tool (E) and erase with a small sized brush the area around the 1px stroke you added. This is going to erase the dark blue from the bottom (which you don't need) and make the stroke stand out more.
17. Here is what yours should look like when zoomed in at 200%:
18. Next make a wide selection about 3 pixels tall like shown. On a new layer fill it with white.
19. Now make a wide selection about 2 pixels tall on the dark blue portion of the box and fill it (you can do this on a new layer or on the dark blue box layer itself) with color #8b8b8b.
20. Here is what mine looked like:
21. Now to make the inner 'roster' effect. Choose your rounded rectangle tool (U) with the path option chosen like shown. Use a radius of around 10px.
22. Draw a shape like this:
23. Right click somewhere inside of it and go to fill path.
24. Under contents choose color. Fill it with color #d4dee0.
25. To deselect the path outline, simply go to the paths tab (next to layers) and click the gray space beneath the path like shown.
26. On the layer you just filled go into blending options and add a stroke.
27. Here is what you should have.
28. Next, to make the roster section, I used an outline of a person shown here.
You can get this same person thumbnail here:
29. Copy and paste the image on your document or drag it into the document.
30. Select the magic wand tool (W) and use these settings:
31. Select the 'head' portion of the thumbnail you just added to your document. Fill it with color #c1ced4. Do not deselect.
32. With the selection still active, select the inverse (Ctrl+Shift+I). With your marquee tool (M) use the option 'intersect with selection' and draw from the upper left corner of the thumbnail to the bottom right corner like shown.
33. This is what it should look like:
34. Next set your foreground color to #0a324c and background color to #000000. Select the gradient tool (G) and drag from top to bottom while holding shift to ensure its a straight gradient.
35. When zoomed at 100%, this is what you should have.
36. Now duplicate the layer 7 times and arrange the thumbnails like shown. Give at least 1 pixel of space between each thumbnail.
37. Now lets go back to the bottom bar layer where we applied the color overlay and nudged it down.
38. Go into blending options for that layer and apply this drop shadow:
39. Result:
40. Now to add some neat looking pixel text. Use the font 'Pixel' (found at Nifty Tutorial Resources. Use these settings (with the text selected, press Ctrl+T to get this box):
41. Now add text at the bottom.
42. Type in '< < > >' and highlight the inner 2 carrots and give them a different color like shown.
43. To add these faded dots, use a brush size with 1px diameter and simply just clock where you want the dots.
44. There you go! An awesome looking roster panel for any gaming related website! Enjoy.
See what the final product looks like within a website:
More Tutorials: 
