Image slicing in Photoshop--------from Ter

里挖耳朵

The first in (hopefully) a series of tutorials on how to make skins for Championship Manager 4.

This tutorial will take you through the process of making a button graphic in Photoshop and expanding the canvas to include the other three button states (over, clicked and disabled) and slicing these up and batch exporting them to png files which will then be your new button in the game.

This process can be used for all the other graphics in the game.

Firstly, you need a button to start with.

Open Photoshop and create a new image {ctrl n} with the following settings.

Width: 100 pixels
Height: 20 pixels
Resolution: 72 pixels/inch
Mode: RGB Color

Contents: Transparent

Then draw a rounded rectangle using the rounded rectangle tool {u} You can change the roundness by changing the Radius setting.

Once you have done that, you might want to add a nice bevel effect to it. In the layers tab. click the Layer Style icon (looks like an f in a circle and choose bevel and emboss.

In the window that pops up, change the size to 2 and the opacity of both the highlight mode and shadow mode to 50

Change the layer opacity to 99% in the layers tab.

You now have a standard button that you are going to use in the game.

You now need to do graphics for the three other button states (over, clicked and disabled)

In the Image menu, select Canvas Size. In the window that pops up, select the up arrow as the anchor point, and change the height to 80 pixels.

Now, right click on the layer name in the layers tab (should be Shape 1) and choose 'Duplicate Layer'. Name this new layer 'Shape Over'. Click OK

Select the 'Shape Over' layer and then choose the move tool {v} Then press shift and the down arrow key twice to move the layer 20 pixels down just below the other layer. You now have a duplicate button! You now need to make this button different to the original one to give a rollover effect. Add a new layer style like you did with bevel and emboss, but this time select 'Color Overlay'. The button should go bright red... don't panic!

Click on the red box in the window that came up and choose white in the colour selector. Then OK that and change the opacity to 10. Now you have a rollover effect!

Right click on the Shape Over layer, and choose Duplicate Layer like you did before and call it Shape Clicked, and move this new layer down 20 pixels as before. Go to the Layer Styles again and choose bevel and emboss. All you need to change is the Direction to Down. Now you have a clicked button!

Duplicate this layer and name it Shape Disabled. Move it down 20 pixels and in the layers tab, change the opacity to 50%. You now have a complete button set. Now would be a good idea to save your work... so save your file as a PSD. This will keep all your layer sets intact.

Part two of this tutorial will take you through adding and naming the image slices and part three will take you through the export process.

里挖耳朵

Part 2: Creating and naming image slices

For this, we need to use the slice tool {k}

It works like the rectangular marquee tool in that you drag a box out. Each box is a 'slice'. You'll see what is happening when you are going through the tutorial.

Firstly, we want to split each button into the 3 sections we need. button_left, button_middle and button_right.

On the first button, drag out a slice on the top left of the button about 8 pixels wide. Then, next to that draw another slice 1 pixel wide and the height of the button. Then do another slice on the right side of the button which should also be 8 pixels wide and 20 pixels high.

Then you need to do the same for the other three buttons and you should have something similar to that shown in image1 below

Slicing Example

[ Last edited by 里挖耳朵 on 2003-11-13 at 10:35 PM ]

里挖耳朵

Next we need to name each slice.

I'll use the numbers of the slices in the image above to highlight what to call each slice.

You need to use the slice select tool {k} for this.

Just double click on the slice and change the name to what you want the filename to be. Everything else can be left blank.

01: button_left
02: button_middle
04: button_right
05: button_over_left
06: button_over_middle
07: button_over_right
08: button_clicked_right
09: button_clicked_middle
10: button_clicked_right
11: button_disabled_left
12: button_disabled_middle
13: button_disabled_right

For the slice 03, change the slice type to No Image so that nothing in that slice is saved as we don't need it

Now would be another good time to save your image.

里挖耳朵

Now we're ready to export the files for use in CM4.

In the file menu, select 'Save for web' {alt,shift,ctrl s} and you should be presented with a window. Choose the Optimised tab to make things less confusing for you and in the Settings panel on the right, choose PNG-24 and make sure interlaced is not checked and transparency is checked.

Click the small arrow on the right of the settings panel and choose 'Edit Output Settings'

Go to the 'Saving Files' section and in the file naming part, change all the drop downs to none expect the first one (slice name) and last one (.ext). The Example should now read MySlice.gif

Then uncheck Put Images in Folder and the other two options.

Then click 'Save' to save the settings as the name of your choice. This will now appear in the drop down when exporting images so that you won't have to do all that again.

Now you can OK that.

Click Save in teh Save For Web window, and change the Save as type to Images Only and make sure your settings are selected in the Settings drop down. Also, make sure you are saving all slices.

Now all you need to do is select your button directory and hit save and replace the images there. You should now have a complete new button setting in CM4.

里挖耳朵

And here is the completed PSD file for you to play around with.