GUI Design with Photoshop
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
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.
Kult House - Fresh Production Media
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.
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.
-Lost Little Girl in Gamedev (LLGG)---------------------------------------------Insert Soulless Corporate Logo HERE. I am Dread Pirate Roberts(TM) #17603. Please ask about franchise opportunities in your area!
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.
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.
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 :)
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 :)
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 )
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 )
-Lost Little Girl in Gamedev (LLGG)---------------------------------------------Insert Soulless Corporate Logo HERE. I am Dread Pirate Roberts(TM) #17603. Please ask about franchise opportunities in your area!
here are layouts of the first 7 scenes. They look horrible ? ;)
Scene 1:
![](http://www.freewebtown.com/opensky/cardscenes/1.JPG)
Scene 2:
![](http://www.freewebtown.com/opensky/cardscenes/2.JPG)
Scene 3:
![](http://www.freewebtown.com/opensky/cardscenes/3.JPG)
Scene 4:
![](http://www.freewebtown.com/opensky/cardscenes/4.JPG)
Scene 5:
![](http://www.freewebtown.com/opensky/cardscenes/5.JPG)
Scene 6:
![](http://www.freewebtown.com/opensky/cardscenes/6.JPG)
Scene 7:
![](http://www.freewebtown.com/opensky/cardscenes/7.JPG)
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.
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.
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. :)
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. :)
-Lost Little Girl in Gamedev (LLGG)---------------------------------------------Insert Soulless Corporate Logo HERE. I am Dread Pirate Roberts(TM) #17603. Please ask about franchise opportunities in your area!
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 ;)
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
Recommended Tutorials
Advertisement