Jump to content
MakeWebGames

Layout Help


ashbow97

Recommended Posts

Hey :) Right, I'm interested on having a go at creating my own layout for the game. I've got Photoshop CS3, and I know a bit about graphics, so that side isn't the problem... I just have NO idea at all on how to change it from a simple PSD file into a game layout :L

I know that you need a login, register and in-game (not sure if anything else). And I pressume you kind of have to cut the file up?

If any of you are willing to guide me (just PM me for my MSN) I would be most grateful, or if you know of any tutorials (video or written) I will be equally gratefull :)

Thanks, Ash :D

Link to comment
Share on other sites

Heres the quick version.... you get photoshop, (or another photo editing software supporting layers and slicing) open your file you want to slice into a layout, put the slices where you want the images cut apart ( kinda like cropping), and finish the slicing process by saving it as a sliced image.... Photoshop cs5 even writes the html for you when you save for web and devices.

Link to comment
Share on other sites

It even codes it after slicing? I've got cs3 and it has that option. I've looked at tutorials and now know how to slice for a website... but if someone could give me an idea of what I need to slie :) I've got an idea so here goes:

 

  • Left Box (at the top, which will contain money, name etc)
  • Right Box (which will contain stats etc)
  • This little design at the top
  • The name of the game (or header)
  • Display Picture Box (I'm going to link it to show the players display picture)
  • Navigation box
  • News Bar (I have a little box at the bottom which I hope to put a marquee or something there)
  • Background (which I take would take a few slices)
  • I have a box in front of the background (where the content will go)

I still have two questions if I'm gonna do this by myself.

 

  1. Say if the content is bigger than the page, like a long peice of text... will my 'content' box stretch with it?
  2. I'm not compeletly sure what to do with the style.css, I can fiddle around... I suppose that's the best way on how to learn, but any help would be well, helpful xD

 

@morgan1122 - This is a great tutorial that teaches you how to slice and a bit more (if you don't already know) on html :) The videos take a while to watch, but they are helpful :)

 

Link to comment
Share on other sites

I suggest you sit down with a pad and paper and start drawing boxes and listing the things you want in them for designing a custom layout. When you are happy with that, you will know what / where to slice. As well as an idea of what you are going to have to do to your code.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...