Sign in to follow this  
fantasy_world

GUI Design with Photoshop

Recommended Posts

fantasy_world    100
hello all I'm making a game called Card. It's a multiplayer game. It has two part a server and a client. Now I have to design the GUI for the Client, so I need some Photoshop techniques. I have seached, and the result is so big. I don't know what techniques are best for GUI designing. I need your advice. thanks

Share this post


Link to post
Share on other sites
Salsa    1146
The result is probably so big because your question is too. Can you be more specific on what you're looking for? I can lend everything I know to help out, but right now I don't know where to start.

Share this post


Link to post
Share on other sites
Klora Jardi    109
Are you trying to figure our what look you want? Or what PS techs you need to know to get the look you are thinking of? I agree with salsa your question is too broad, but it's awesome you are willing to learn photoshop rather than have someone do it for you.
Feel free to PM me with questions, 12 years PS exp and it pays my bills ;) besides I need something to break my day up at work :D
If you see something you like for a GUI link to the pic and people can help you figure out how to do something similiar.

Share this post


Link to post
Share on other sites
fantasy_world    100
I'm glad to here that you are willing to help.
sorry for my big question ;), now I'm still in the first step of learning Photoshop, it's awesome.

Here is my plan. The game is about playing card. It's a multiplayer game. I and my friends have written a framework for this game: Graphics, Network, Audio. We use DirectX for graphics and audio.

The game will run on Fullscreen mode (800x600) with the backgroundcolor : black (so some elements should be bright). Each step of the game will be called a scene. This game have 10 scenes:
- Introduction: name of my group, name of the game
- Main menu: Start, Help, About, Exit (and a background image)
- Get user's information: name, avatar (a slide control for displaying avatars)
- Choose an existing lobby or create a new one: a slide control for displaying existing lobby (with some information: full or not, # of players, lobby owner's name), a button for creating a new lobby.
- Inside an existing lobby: a list of players with their avatars, names, a textbox, a window for chatting, a ready button.
- Inside a new lobby: the same as above scene (existing lobby) but with some extra elements : a control for change the number of players, a button for refusing some players, a button for starting the game.
- Game in action: depend on the number of players, the game will have a table with 2, 3, or 4 (max is 4) players sitting around (player here is his avatar), if which player is in his turn, his avatar will be lighter (or something else); a chat textbox, a window for displaying message sent from players in this lobby; a next button, a pause button, a exit button.
- Help: a semi transparent window with some info
- About: the authors
- Exit: a question: are you sure to exit.

That's my plan. I don't know how to make it look attractive with Photoshop, so I need to find something to learn. I need your advice.

Share this post


Link to post
Share on other sites
philipptr    260
Since its a card game I would make some classic wooden GUI Elements.
Search for a nice wood texture, cut it for example in the form of a button, add a layer with white reflections, and then just write the caption on them in the game, or if you dont want to do that, copy the button, maybe with different texture parts so it doesnt get to repeative, and add the captions in Photoshop.
This is only an example. I would suggest you come up with some basic design ideas first, then try to realize them in Ps and if you have problems come and ask again :)

Share this post


Link to post
Share on other sites
Klora Jardi    109
Another question and yes it sounds sort of obvious but must be asked.
Does someone know how to make your GUI once you make the art? Do you have a program to do it?

What you can do art-wise may be very dependant on what you can implement. If you just want to reskin/texture your GUI you'll need to know what size(pixels) the current "art" is.

But it sounds like you are making the game from scratch? You need to figure out art sizes and layout before your art. Make a sketch of each of those scenes you described to figure out what art/sizes you'll need.
Hope this is helpful, I'm not sure how you work so maybe I'm way off base!

How I work is I have the programmer/interface designer tell me what look he wants and what sizes for the buttons, boxes, etc he wants reskinned are. Generally they have an idea what they want and where it goes. They just don't know how to make it look good...And of course sometimes they have horrible sense :) and you just tell them how you think it should be and tell them what to do. It's give and take.

(I'm lucky, I have an amazing relationship to the level/interface designer/programmer, he's my fiance :D )

Share this post


Link to post
Share on other sites
fantasy_world    100
here are layouts of the first 7 scenes. They look horrible ? ;)

Scene 1:


Scene 2:


Scene 3:


Scene 4:


Scene 5:


Scene 6:


Scene 7:


Everything is texture, each texture has its own events (mouseover, mouseout, mouseclick, keydown ...), window is not sizable. That's what I can implement.

tell me what you think.

Share this post


Link to post
Share on other sites
Klora Jardi    109
I would go through and number all of those individual things on each scene and give numbers to your states (mouseover, mouseout, mouseclick, keydown ...)and I guess a number of avatars as well?
Then you will have an idea of how much art you need to make. Divide your list into groups (buttons, avatars, etc)
Have you figured out what theme to make your game? I mean by that what do you want the overall look to be? Space, oldwest, modern etc? Once you figure that out look for referance photos on the net of textures/things that fit into your idea. Save them to a folder. Then write a description of how each thing on your list should look including size (experiment with different size boxes to see what they display as on your screen).
If you did all of that you'll have all the information to ask someone "I need a button that is 56 by 100 pixels with all four stages and I want the texture to look like this part of this picture in stage one, glow in stage two, do a jig in stage...well you get the point.
Hopefully by this point you'll know what you want and what to ask for to learn what to do. So you can go learn fun stuff like PS techs. What version of Photoshop do you have? If it's recent you can always go to the online help and there are lots of online tutorials out there for effects and free plug-ins. Photoshop forums are great too.

PS. If I was helpful rate me up. :)

Share this post


Link to post
Share on other sites
fantasy_world    100
Quote:
Original post by Klora Jardi
Have you figured out what theme to make your game? I mean by that what do you want the overall look to be? Space, oldwest, modern etc?

Yes, I like modern theme. The problem is that I don't know how to make the game look modern. I need to find some nice textures, and some PS techs.

Quote:
Original post by Klora Jardi
What version of Photoshop do you have? If it's recent you can always go to the online help and there are lots of online tutorials out there for effects and free plug-ins. Photoshop forums are great too.

I have PS version 7. I have found many websites with many effects. My problem is figuring out which effects I should use (that means they are suitable for making a modern look).

Quote:
Original post by Klora Jardi
PS. If I was helpful rate me up. :)

I did it ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this