Create a Game or Clan Website Roster Panel

May 16th, 2007 · 4 Comments

29. Copy and paste the image on your document or drag it into the document.
clan-game-website-design-28.jpg

30. Select the magic wand tool (W) and use these settings:
clan-game-website-design-29.jpg

31. select the ‘head’ portion of the thumbnail you just added to your document. Fill it with color #c1ced4. Do not deselect.
clan-game-website-design-30.jpg

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 lft corner of the thumbnail to the bottom right corner like shown.
clan-game-website-design-31.jpg

33. This is what it should look like:
clan-game-website-design-32.jpg

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.
clan-game-website-design-33.jpg

35. When zoomed at 100%, this is what you should have.
clan-game-website-design-34.jpg

36. Now duplicate the layer 7 times and arrange the thumbnails like shown. Give at least 1 pixel of space between each thumbnail.
clan-game-website-design-35.jpg

37. Now lets go back to the bottom bar layer where we applied the color overlay and nudged it down.
clan-game-website-design-36.jpg

38. Go into blending options for that layer and apply this drop shadow:
clan-game-website-design-37.jpg

39. Result:
clan-game-website-design-38.jpg

Tutorial Pages: 1 2 3 4 5 6

Tags: Drawing · Web Layouts

Subscribe by email!

Add to Google Reader or Homepage

Subscribe in NewsGator Online

Add to netvibes

Subscribe in Bloglines

Link to Nifty Tutorials:
Let us know you've linked us!