View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Suggestions and Tips for Graphic Design

When doing GUI design, you will always have to import some images. Here are some suggestions and tips for how to edit these images before they were imported. This might help you to build a more gorgeous and more accurate GUI window.

The only software I used to do this is Adobe Photoshop. You can get a trial edition and the user guide of it on Adobe website. Unfortunately, I'm using a Chinese version Photoshop now, so I will not show you any screenshots here.

First, I strongly recommend you to set the resolution of all the images to be the same. 72 pixels per inches is a good choice. It is large enough keep the clarity but is not too large to save the hard disk space. This can help you to figure out the size of each image and avoid further problems. To do this in Photoshop, press Alt+Ctrl+I to open the image size dialog, and modify the resolution value directly.

Next, set the sizes of all the images. You can draw a draft of the GUI window on a paper to help estimate the size of each image. Keep in mind the the size of a GUI window is about 600px 800px. You can set the size by modifying the size values in pixel (Attention! It is in PIXEL but not in inch or centimeter) in the image size dialog, just the same as what you did when you set the resolution.

If you want to combine all the images together before import, you should create a new canvas in Photoshop, set the size to be the same as that of your GUI window, and the resolution to be 72.

Adding the images into the canvas, you should copy the layer of the original image, and paste it on the canvas. Make sure to keep different images in different layers so that you can edit the images separately.

Reference lines will help you to get the exact position of each image. In Photoshop, you can find the adding reference line tool in the views menu to add either horizontal or vertical reference lines. These lines can be seen when you edit the graph, but will disappear when you save the image as a JPG file. Reference lines are also very helpful when you design the map of the game.

Now, the only thing you have to do is to save the canvas as a JPG file and import that file to GUI. Also, save the PSD file at the same time, so that you can make changes later if you want.

If you have any question about Photoshop, please use the guidebook on Adobe website. Also you can find our design by searching CS2340TBA in smalltalk repository.

Link to this Page