Making Graphic Development Kits

PART I: Introduction

If you're a web designer, you sometimes find yourself having to do the same type of changes to images (hue change, lightness, add blur, etc.) , and even if you use macros it's hard to open each image and edit it individually... And what about when you want someone to skin a web application you made?

Don't Panic! It's simple really, use a GDK!

a GeeDeeWhat?

GDK: Graphic Development Kit...

This tutorial will tell you how to make these GDKs and cut the time you take in editing graphics in half (or more! )

PART II: Let's Get Graphical!

Let me tell you what a GDK is briefly. It's a collection of images in one file, but when you save it it saves each file individually!! (how handy).

To make this, we make a new file (any size, go big if you're not sure, and trim later).

We draw our files there (or if we want to make one with premade images we add them) untill you have something like this:



I recommend that you align your images to a grid so the slicing is better organized (doesn't seem like much in small GDKs but when you do a big one, you'll thank yourself for it).

PART III: Slicing Our Way Through The Tutorial

This part is essential! it's the basics of GDK making, you have to slice your image with the slice tool (normally found in the toolbar under the magic wand or by pressing "K").

Once you have the slice tool, drag it around the image checking that it's EXACTLY the output you want. (using a grid will make less awkward and small slices)

the result will be kinda like this (it's a bit zoomed in so it looks better)





Don't worry, this is for reference of the slices, if you want to keep on working without these messy things Press "Ctrl+H" or go to "View>Extras" And uncheck it.

ok, now we have them sliced... we must select the filename (you know, so when we save them we  don't get strange images and we get: myfilename.jpg, totallyunrelatedfilename.jpg, etc.

right click on the slice button in the toolbox and select "slice select tool" and right click on the slice you want to rename and select "Edit Slice Options".

You will see these fields:



The drop down box is to select if the slice is exported (choose no image for ALL the blank images... if you don't want to delete them manually or get bulk space... another reason why the grid was a good idea, you get less blank slices)

The name field is the filename it will use when exported...

The other fields are if you export in HTML mode, so they have links already generated and alt text.

Just edit this for every slice... It may be a bit time absorbing at FIRST, but it makes editions easier (specially for 3rd parties that will edit your graphics, like for a forum skin or anything).

... After you did all that, you save the file (.PSD) and voila! you have your own GDK!...  But how do you get the images you ask? simple!!

Go to file>Safe For Web and select the options you want (gif, png, resolution, etc.) and click on save... you can choose to save with an HTML of the files placed like in the PSD or just the images (recommended).

Click where to save and DONE! you will have a folder looking like this:

Click to enlarge

PART IV: Finally

It's simple as that... and it's a good habit to make a GDK if you will be making either of these:

 -A Web application using buttons (for skinners)
 -A Buttonset or skin for a forum or similars.
 -Anything that involves editing many images in the same way.