Tutorial – Creating Scrabble Game Pieces in Photoshop CS3

seventhfury — Fri, 10 Apr 2009 15:05:23 +0000

Ever wished you could use Scrabble® game pieces as a part of your designs? Whether you want to use them as a header or just as another asset in your designs, the followingtutorial will help you easily create digital versions of Scrabble® game pieces in Photoshop in around 20 minutes.

Final Image Preview:

Step 1

First, you’ll need a reference file. I used this CC image that I found on Flickr, it’s a good starting point because all of the pieces are laid out nicely in order.

Step 2

Create a new file in Photoshop at 72dpi with a width of 1024px and 854px. This is the same size as your reference file, so open that up and place it into your new file as the first layer. Give the reference layer a name, such as “Reference” so you can keep tabs on it. Once you have that taken care of, select your Rounded Rectangle Tool (press U) and set the radius of the rounded rectangle to 10px. Using the tool, drag a shape over the first game piece to make the shape we’ll be using. Once you have your shape, put it in a group folder by hitting the little folder icon at the bottom of the Layers palette (or by using the keys Open Apple+G on a Mac, Control+G on a PC, I believe). Name the group “A” as this is the group for the letter A game piece.

You can set your color to anything, it won’t matter because we’ll be using blend options to make the effects for the game pieces.

Step 3

Once you’ve got your shape you’ll be perfecting the styles and eventually replicating first game piece throughout so we have a uniform set. Double-click on the shape layer you just created and you’ll see the Layer Style palette come up. Check the box next to Pattern Overlay and choose the generic wood pattern that comes with Photoshop CS3. Leave the settings as they are, but keep the Layer Style Palette open–we’ll be using it for the next few steps.

Step 4

Next we’ll be giving a slight highlight to our game piece. Select Gradient Overlay in the Layer Style palette. Change the Blend Mode to Screen, the Opacity to 47%, and change the angle to 90º. You should be able to leave the other settings, compare to this image:

Step 5

Choose the Bevel and Emboss section attribute in the Layer Style Palette. Here’s where you’re going to change a bunch of settings. Set the Style to Inner Bevel, the Technique to Smooth, the Size to 5, and you should be able to leave the rest except for the shading colors. For the Highlight, set the color to D69A54. For the Shadow, set the color to D59C4B. Your settings should look like this:

Step 6

Next we’ll be adding Contour and Texture, located underneath the Bevel and Emboss section in the Layer Styles palette. We’ll combine this into one step as it’s pretty easy. For the Contour, simply set the Opacity to 50%. For the Texture, select the same generic wood pattern that we used in Step 3, then change the Scale to 127, the Depth to +26, and then check the boxes next to Invert and Link with Layer. These are pretty subtle effects, but they help with the overall realism of the game pieces. Here are the settings:

Step 7

Next, select Inner Glow in the Layer Styles palette and set the Opacity to 10%, the Source to Center, the Choke to 0%, and the Size to 51. You can leave the rest of the settings as they are, and they should look like this:

Step 8

The last thing we’ll be doing in the Layer Styles palette is add a Drop Shadow, so check the box and set the Opacity to 48%, the Distance to 0, the Spread to 0, and the Size to 5. We’re going for a subtle effect here, and it should look like the image below. You can finally close your Layer Styles palette!

Step 9

Next we’re going to lay out the letters. I used the font Univers 47 Condensed Light for my pieces, but as it’s a commercial font not everyone may have it. Do your best to find a font as similar as possible, as this one works pretty well. You’ll want a sans-serif font that is condensed to fit well into the pieces.

For the letter I set my Univers 47 font to 103pt and for the number I set it to 40pt. I also set the Anti-Aliasing to Strong for both. Set the paragraph alignment to Center Align for both so that you can center up the letter on the game piece and change it out easily for each piece. Be sure to put both of these layers into the group folder “A” so we can keep things organized.

Step 10

Once you center up the letter on the game piece and have the number where you want it, double click on the layer for the letter to pull up the Layer Styles palette. Check the Bevel and Emboss box and set the Style to Emboss, the Direction to Down, the Size to 5, and change the Highlight color to #EACEAD. You should be able to keep the rest of the settings as-is, but compare to the image below. Once you do this, hit OK and then copy the layer style over to the number layer by holding the Alt/Option key and dragging the “FX” symbol on the letter layer to the number layer.

Step 11

Now all you have to do is copy the folder you have for the first game piece 23 times and change out the letters and numbers! It’ll go much quicker if you select a folder and then hold down Shift and Alt while you drag the pieces to their new destinations because holding Alt and dragging will give you a duplicate folder and holding Shift will keep the folder in line. Also, I’d recommend laying out the top four pieces and then selecting all four folders and holding Alt and Shift to drag down 4 times. This will give you rows of 4 to work with and will speed up the process dramatically. Here’s the final result:

I hope this tutorial has helped you get an understanding of how to do this, and hopefully you will have picked up a few other new tricks along the way. If you want to post links to examples of work you’ve done after using this tutorial, we’d love to see them! Fill out your reviews and comments below to participate.

As an added bonus, here’s an example of how you can use the game pieces in a layout. This is a DVD cover that I designed for a family event, and the pieces came in handy for it:

New Wallpaper – New Year, New Game

New Print – Mortar of Apocalypse

seventhfury — Wed, 18 Jun 2008 14:57:00 +0000

Just finished coloring my latest piece (although I actually sketched this about 5 years ago on a city bus on the way home from art school), and it’s looking pretty good.

My original thought on this as I drew it was that this guy needed a big frickin’ gun. No, wait.. a HUGE frickin’ gun! The kind that would, in no way, be able to be supported by his weight alone. In fact, the gun-to-guy weight ratio balance would be off so badly that he would be lying on his back in about a second. But, this isn’t real life, and nothing even says this is an illustration of anything from our universe so maybe he’s on another planet or something. Yeah, that’s it..

Overall, I’m happy with the way this turned out. I originally didn’t plan on adding in the smoke or spark effects, but I thought it needed something more so I started playing around with smoke and that eventually led to a much larger idea: the character seems to be literally ripping apart or on the verge of exploding. Very cool.

I’m working on improving my coloring speed and overall composition, so hopefully you’ll enjoy this latest addition to my illustration/print portfolio.

You can view the work in detail and purchase prints either at my DeviantART Print Shop, or my RedBubble Store. Enjoy!

New Wallpaper – The Moment

seventhfury — Fri, 23 May 2008 16:16:00 +0000

Desktop Preview

I’ve been really, really busy lately working on a slew of great new projects but I thought I’d take the time to put together a new wallpaper for you to enjoy over Memorial Day Weekend.

This new wallpaper is called The Moment, and it centers around the idea of letting yourself go in the moment wherever you are in life. Too often it’s easy to get caught up in the dramas of work and every day life (as I know all too well), and this visual representation is my way of smoothing out the ruffles to get ready to let go of everything and relax over this nice upcoming holiday weekend.

I used some stock imagery for this wallpaper, so I want to give credit to Amminopurr for this great shot of the girl with the headphones. The rest came out of my fingertips.

You can download the full wallpaper package here. If you need help getting your wallpaper set up on your desktop, follow the instructions below.

Directions for Mac users or Directions for Windows users

New Wallpaper – Burn the Night

seventhfury — Mon, 21 Apr 2008 15:22:00 +0000