Welcome to the first part in hopefully a long series of tutorials on Graphics for Programmers. The goal of this set of tutorials will be to give some of you "Army of One" programmers out there some quick and easy techniques to start creating cooler looking graphics for the games your developing with XNA. In many of the posts on the XNA forums it seems like that are alot of pure programmers out there that are giving a go at XNA who claim to have "not one graphical bone in their body"... well hopefully we can help you change that a little bit!
This first installment goes over the basics on how to make stuff look SHINY! This technique would most likely be used in your game menus, etc but it should be a good starting point for many Photoshop first timers because it doesn't involve many different tools.
NOTE: This tutorial assumes that you are using Adobe Photoshop CS2.
Well here we go... open up Photoshop and get to work:
1.) Create a new image and lets make it 500px X 500px.
2.) OK... Next we are going to use the Custom Shape Tool... this tool lets us create create some cool basic shapes (primatives)... in this tutorial we are going to start by making a rounded rectangle as our cool shiny shape. After clicking on the "Custom Shape Tool" in the toolbar select the rounded rectangle option in the top menu:
3.) There are a couple of settings that apply to the shape we are about to create... most notable for this example is the "Radius" of the corners on our rounded rectangle... since we are making a fairly large button here lets go with something like 15... that will give us nice rounded corners on our rectangle! You can also set the color of the shape from the options at the top of the screen as well... Since our website is blue I am going to make my shape a similar color blue...
4.) Now lets drag out our shape... I am going to make a perfect square... you can however make any kind of rectangle you want in this tutorial... the instructions will be the same... NOTE: holding down shift while dragging out the shape will keep it proportioned as a square.
5.) OK... Now that we have our shape the fun begins! Take a look at the layers panel... You will notice that our shape is on a layer name "Shape 1" and it isn't just a normal layer... it has a color selector in it and a mask applied to it... what we want to do next is RASTERIZE that layer so the make will be applied and we will be left with a shape that we can do some other things to. Right click on the layers name in the layers panel and select "Rasterize Layer".
6.) OK... Now that our layer has been rasterized we need to put a selection around the rectangle we made... this is easily done by holding down CTRL and clicking on the picture of the layer in the layers panel.
7.) That will give us a bounding box around our shape... now... we want to put a slight gradient in the shape in place our our plain blue color... to do this you need to setup your color picker with a light shade of your color as the foreground color and a darker shade as the background color... this will allow us to just use the default settings on the gradient tool to fill our shape... and note that we have a selection around our shape so when we go to put the gradient in it will be confined to the area inside our selection. After setting up your light and dark colors click the gradient tool in the tool bar and left click and hold in the top center of your box and move the mouse down to the bottom center of your box and release the left mouse button... that should fill your shape with a graident between the two colors. For this example we are not going to use a big contrast between the two colors... that would ruin the shiny effect to some extent... so when choosing your colors don't make them like night and day from each other... just a health contrast between the two.
8.) OK... NOTE that we haven't clicked off our our object yet!!! DONT... we are going to use the selection we have in this step! We are now going to create the "shine" on our object... to do this we first need to "Contract" our selection by 2 pixels... this will leave a nice border around our shine and create a nice effect in general... you can make your border bigger or smaller... that is entirely up to you... To do this go to the "Select" menu... move over "Modify"... and select "Contract"
9.) OK... Now... lets create a new layer in the layers panel ABOVE our current layer... just click the "New Layer" icon in the layers panel.
10.) Our new layer will be called "Layer 1" and it will be selected automatically... now we want to fill our selection on this new layer with WHITE! Just go to the "Edit" menu... select "Fill" and in the dialog that comes up pick "White" from the "Use" list.
11.) OK... Now... we need to zoom our a little on our image... this will allow us to make another selection that is MUCH LARGER than the size of our image... you will see why in a second... hold down CTRL and press "-" (minus) 3 times... that should zoom us our to 33.3%... then hold down the left mouse button over the first icon in the tool bar (the rectangle marquee icon)... that will pop up a list of tool varients... let go of the mouse button on the "Elliptical Marquee Tool"... that lets us create a selection using a circle instead of a square! Now we are going to create a selection that basically cuts off half of the white rectangle we created... do this by dragging out a selection from the gray area of your image about in the horizontal middle of your rectangle. Try to make your selection like I have in the screenshot below... the red elipse is just there for your reference as to where to start and end your selection:
12.) After creating your new selection we want to zoom back in... hold down CTRL and press "+" (plus) 3 times... this is what you should have now:
13.) Now... just press "Delete" on your keyboard... that should delete the bottom half of your white rectangle... the top half will also have a slight arc in it... this is white area will soon become our "Shine"!
14.) Now... go into your layers panel... and with "Layer 1" selected lets drop down the opacity of the layer to about 20%... you can also clear your selection by just left clicking anywhere on your image.
15.) Now you should have something like this... its ALMOST DONE...
16.) Now lets put a black "Glow" inside the blue area of the rectangle... that will add some more depth to our object... click on the layer named "Shape 1" in your layers panel and then to to the "Layers" menu move down to "Layer Style" and select "Inner Glow":
17.) In the dialog that pops up set the settings to what I have below... one of the key items here is changing the "Blend Mode" to normal... if you don't do that when you change the color you wont see anything!
18.) There you have it!!!! You can continue to play around with it if you want... here is what it looks like after finishing the tutorial:
19.) Here is some extra credit... if you dont already know the wonders of the PNG format you should... We are going to add a quick drop shadow to our rectangle... do that by clicking on "Shape 1" in your layers panel and then go to the "Layers" menu... move down to "Layer Style" and select "Drop Shadow"... you can play with the settings and create the shadow however you want... here is how I did mine:
NOTE: I also deleted the background layer in my image by simply dragging it to the trash can in the layer panel... then when saving my image as a PNG it will save the transparency information as well... notice how cool our object looks over our gradiented background on our website!!! (NOTE: If you are using IE6 you wont notice... but ALL other modern browsers support PNG transparency now! THANKS IE7)!
HERE IS THE FINISHED PRODUCT AFTER THE EXTRA CREDIT
Here is some Extra-Extra credit!! Make sure you save this image as a PSD somewhere on your computer... it is VERY easy to make varients of this even from our tutorial... if you notice the "Shine" we put on is on its own layer... so if you wanted of say a red button or a green button all we have to do is change the fill on the "Shape 1" layer... we can easily do this by CTRL clicking on the "Shape 1" layer in the layers panel and then using the gradient tool again on the selection in that layer... I have made a couple of samples using some different colors:
When applying something like this to a game you could easily just write some text over these and make buttons with them, etc... but as you can see... this is a fairly easy effect and you can do this to any kind of shape or object... just use your imagination!
