Forums

Here is a tutorial for how to design your list (and even a website) around multiple screen resolutions, since this is a problem that is constantly coming up. XD This tutorial uses Photoshop CS2, although the PS features used are available from PS6 and up. If you don't have any version of photoshop, you still might be able to figure out how to do it using another program (there are many freeware/open source programs that have similar features to photoshop, and of course there is always the option of pirating o_O).

Setting up your background for multiple resolutions
First, decide what is the largest screen res that you are willing to accommodate. For this example, I picked 1600x1200. Next, decide what other resolutions you are going to accommodate (I recommend at the least using 1024x768, 1280x1024, and 1280x800, the most common resolutions on MAL).

Open up photoshop and create a new file, with the following specs (1600x1200; Make sure "Resolution" is set at 72 (it's the web-friendly dpi)):


So now you have a file. Fill it with black to make the guides easier to see (you can change this later). Go to "View>New Guide":


To make things easy, let's start with the smallest resolution and work our way up. Set to create a guide at 800 pixels vertical, like so:


And this should happen:


Now go to "View>New Guide" again, and set 600px horizontal:


And you should get this:


Now you have a guide that shows you what will be inside an 800x600 screen area. Duplicate this process for each screen resolution you want to accommodate; I have chosen 800x600, 1024x768, 1280x1024, 1280x800 (if you are doing 1280x1024, just add a horizontal guide at 800px), and 1440x900 (if your image is 1600x1200, then the document bounds are your guide for that size). The end result looks like this:



And now I can work on a design that will accommodate each screen resolution, by knowing what each screen is going to see. And to prevent myself from accidentally moving the guides, I will select "View>Lock guides":



PLEASE NOTE that this doesn't mean your wallpaper has to be the maximum size; on separate layers, test out how different background colors will look (outside of your wallpaper size), and use that color as the background color for the page. That way, you can accommodate people with larger resolutions while not using a ginormous wallpaper. Example:



As you can see, the wallpaper isn't the maximum size, but now I can see what people with other resolutions will see when they load the page, and opt to change the color of the background to fit with the wallpaper, like so:



Now I just set that color to my background in the CSS.


WHOOPS! I fudged my guides
If you accidentally move your guides or put them in the wrong place, get rid of them and start over like this:




I want to view the image without the guides, but I don't want to have to clear them and do them all over again o_o;
Go to "View>Show>Guides," and you can toggle the guides on and off without having to clear them :D See:





How to toggle snap
Most versions of Photoshop are at default set to snap. Snap can be very helpful, when used properly. You can toggle it on and off in the following menu by clicking "Snap" (if it is on, there will be a check-mark next to it):



You can also tell Photoshop what to snap to in the following menu by clicking the options:



How is snap useful? If you want to line something up directly against a guide (or center it on top of a guide), snap will make sure it is accurate. Go ahead, play with it :D


Positioning Your List
First, make sure that snap is turned on ONLY to document bounds and not to guides (see above). Now, select the rectangular marquee tool from the tools menu:



And up to the menu options at the top; select "Fixed Size" from the Style drop-down menu. Now, in the "height" and "width" boxes, put in the size you are going to make your list. Let's make it 600x1200:



Now click anywhere on your image. A selection box of that size will appear:



Now you can move around the selection box and see what your list area is going to cover :D


Now that I know where I want to put my list, how do I know what to tell my CSS?
First, make sure that your Info Palette is open. If not, go to "Window>Info," or press F8 on your keyboard. Now, let's make sure that the Info Palette is displaying pixel information, and not some other silly standard like "inches" or something. Click the ">" button on the Info Palette and select "Palette Options..." from the menu that pops up:



The third option down will say "Mouse Coordinates." Select "Pixels" from the drop-down menu:



Now the Info Palette will display your mouse coordinates; hover your mouse over the edge of selection area and the Info Palette will display the mouse position as X/Y coordinates (X being the width between the document bound from the left and your mouse, Y being the height from the top):



Use these coordinates to define the position of your list. =)


other tips
1. There is a book for graphic/web designers called "color index" (it's pretty much a print/web designer's "Bible"). If you have $23 bucks, get a copy (isbn: 1581802366). It will make itself VERY useful.
2. If at all possible, check your design on multiple browsers/resolutions/computers, or have a friend check it for you. Remember, nothing in web-design is ever foolproof :D
3. Apple+z (or ctrl+z for windows users) is your friend :D (it is a quick "undo button;" however, keep in mind that it erases that action from your history altogether, so you can't "redo").
4. Photoshop comes with a feature that allows you to view web-safe color palettes. Click the checkbox next to "Only Web Colors" from the color picker menu. Also, it's so nice, it even gives you the hex code for the color:




Questions? Problems? Need more info?
Feel free to ask :D And I will help you to the best of my ability. You can reply to this topic or send me a PM, although I would prefer that you reply to this topic in case other users have the same question.

Props for this Scrum, impressive tutorial!

Dude. Thank you so much for taking the time to make this tutorial. It's really easy to do, and it makes me facepalm that I didn't think of doing it myself, haha.

I guess it takes an outsider to show the most obvious of things, eh? XD

Thanks for this. Very useful, especially for me. D:

Thanks in advance for the tutorial, ScrumYummy.
I haven't read through yet, since im taking a rest from working on my new design. But ima definitely gonna use it since that was my primary problem with the design im developing.

Very nice guide. I've used Photoshop to design my last 2 BGs but used layers to highlight the borders instead. I never knew about setting all the grid lines up. I'll give that a try next time I decide to make a new BG.

You are all very welcome! And thank you for the compliments. <3



XD I had no idea that guides existed either, until someone showed me about three years ago. It's so simple and helpful, but I had never noticed it before XD So yeah, sometimes it just takes someone to come along and point something out =)

Thank you so much for making this awesome tutorial. :)

I've just started tweaking my lists, and this is a really big help. ^_^

I have MSPaint.. can you make a tutorial for mspaint? I'm really impressed with what you have done I'd really enjoy it if you made one for MS Paint ^_^








for you foos who think im serious triple click this line... IM JOKING YOU FOCKN DORKS

You're welcome! <3 If you have any questions, feel free to ask :D



I thought you were serious there for a second. "Is he serious?? Please tell me he's not serious. D: " XD

Anyway, even if you were serious, you will never see any windows tutorials out of me :D

Hey Scrummy! Thanks for the tutorial. I'm still very confused when it comes to html and designing my list but I messed around with some of the things in your tutorial on photoshop cs2 and it's a great start for me.

Thanks for the tut, but what if you have a 1680x1050 resolution? What size would you make the document bounds?

I would still make it at 1600x1200; you can put a 1050px horizontal guide in first and design to your specific resolution, or go all the way and fill in all of the guides if you want to see what others are going to see. =)

And don't forget, you can always figure out which dimension each guide is for if you have the "info" palette open, and the XY coordinates set to pixels (for instructions on how to do this, see the screen caps under "Now that I know where I want to put my list, how do I know what to tell my CSS?").

I say this because after awhile, they all look like they're just blue bars and suddenly you can't remember what any of them are for. XD

*EDIT*
You can also make notes for yourself about which guide is for what resolution, using the note tool:



The main note box (in the pic, the one that says "guide") can be closed by clicking the little box on the top left of the note, and re-opened when you double-click the note symbol on your canvas.

Ah I see. Thanks. Now my only problem is to find a good wallpaper with a background I can copy and which fits for the 800x600

My list as it is now is pretty basic, so I wanted to at least make sure it was viewable in all resolutions. I mean I only got this monitor the other day and realised my list as it was before was terrible. XD It only looked good on my old monitor. Ah well.

Again, thanks for the tut.

Wow.. wonderful tutorial. Maybe I should get started with vamping my list.

I do think this guide is a bit excessive as far as resolution guides, but people really do need to consider what will happen when people use higher resolutions than their own. A quick way to avoid a lot of hassle is to pick a solid background color and then fade the edges of your background to that color (choose web-safe colors if possible). Then you won't have to worry too much about higher resolutions. My list uses this technique since I could not extend the horizon indefinitely...

Also, in positioning your list don't forget the height of the top mal bar, since your background is positioned behind it. I copied and pasted it into my proof for reference. Making a proof helps quite a lot, although keep the limitations of the html structure in mind (the borders of the tables in my original proof weren't possible T_T ).....

I just use a large single coloured canvas, works for me. Though I don't tend to use intricate backgrounds; too much effort. I can't even be bothered properly colouring my list as is. >.>

But yes. I do plead people cater for resolutions beyond 1280x1024/1600x200. I've seen practically no lists that look any good at my resolution. :(

I guess this is a stupid question but...will the blue lines automatically go away when the picture is saved, or will it show up? I've never used it for bg before...

~Kairyn

nope :D They stay there until you tell them to go away.



You can also set a guide for the height of the bar. Not to mention give the bar a custom background. :D