Layout Beginnings
When you make layouts on the net you really have a variety of ways to do it.
- You can think of the layout as a top, middle, bottom idea and work on creating a header, creating a middle and a bottom as individual canvases
- You can think of the layout as a top only with accents to the middle and sides idea, and work on a header, and then with seperate canvases find ways to accent the sides in order to bring the middle together.
- Or you can think of it as one big image. Create on big image to be torn apart into the pieces that make a layout.
In terms of what I do... well I'm the third one.
This layout tutorial is meant to teach you the steps that --I-- take to make a layout. Keep in mind a few things, everyone's tastes are different, perhaps you won't like a certain effect or the effect isn't right for you.
Change it, play with it. The layout is mainly there to make you happy first, and please visitors second (Though bad layout design will get you less visitors)
So with this tutorial we'll be using Photoshop.
Open photoshop up, and go to File then New The shortcut key is CTRL+N
So this popup came up. The settings will probably be different but we're going to change them around so that they match. When working with webdesign we want to use Pixels. So in the drop down boxes beside width and height make sure they're set to pixels. IF they aren't. Click and set them to pixels.
Now that we're in the right measurement we want to set our width to 750 and height to 500. The reason for this is simple. The most common screen res is STILL 800x600. We ARE moving towards 1024x768 and higher but a lot of people and corporate offices still use 800x600. (I work in technical support - I know this 800x600 thing and it is annoying)
So why not set it to 800x600? Well first off we have a scroll bar which takes up about 10 pixels and then we have to leave about 40pixels airspace to allow for different things, like favorites being open... or something similar to that.
We leave 100pixels for the top of IE (or firefox). We want the Good parts of the layout to always be viewable without having to scroll to see the rest. So the bottom is 500 instead of 600.
I suppose you could go higher than 750, but keep in mind a side scroll bar is the most HIDEOUS thing ever. And if you make your users have it... they tend to believe you don't know how to design, or you're forgetting about them. (Yes I know people still use that 640 something res, but really if you're on that... there is no hope for you)
Oh right the rest of the settings.
The next one is Resolution. Resolution is important in terms of printing. If you're printing on 72 pixels/inch it's really tiny. IF you're printing on 300 pixels/inch you're printing on the standard size. (If you scan something 300 pixels/inch is what it scans in at. You can set this higher.)
When working with graphics going on the web, we want 72 pixels/inch. We don't need massive, we need small. We want it to look elegant and fit on the page nicely.
So let's make sure our resolution reads 72 and the drop down reads pixels/inch
Next is the Mode - we're working with color and we want massive color so let's keep this set to RGB Color. (If it wasn't there, use the drop down to find it and select it there)
Lastly is the Contents. When we start our document, what do we want on it?
In this case we're going to go with transparent. We don't want anything on our canvas when we start.
You can alternatively start with a white canvas or a canvas that is the same color as the background from the last time you used photoshop
That color. (The part surrounded by my red and having the red arrow point to it)
So we have our settings, we can now click. OK.
So you're canvas should appear all the way tucked in the corner, we can't work with it there, so drag it down to the center of your screen. (When you're working with a canvas that is the same size as your regular sceen it can be difficult to do things. But it's still possible.)
You'll also notice that there is an outline around the canvas with a little 01 and something that looks like a mail or topograph icons beside it
That.
We don't want that so we just press CTRL and H on our keyboard to make it go away. If it wasn't there when you started... please tell me your settings... it's the most annoying thing ever.
Oh hey we need an image we're going to make into a layout.
So let me hop over to Anime Galleries and pick an image out of the galleries there.
That one there will do for this. It's from Digi Charat. (Make sure you click it to get the full size)
All you relaly have to do once you have the full size is right click the image(on a PC) click "Copy" go back to Photoshop, click File then New And automatically you're settings here will be right, so you just need to click OK and then press CTRL and V to paste the image into the new canvas.
Alternatively you can right click the image (on a PC) click "Save Image As" and save it onto your desktop or into a folder then in photoshop click File then Open. Find the image and double click it to open it in photoshop.
So now we have an image and a canvas. The rest of this becomes a little bit of... how do you want to do it.
Me I think I want to take a Light purple for the background. So I'm going to use my eyedropper tool.
I'm going to find on the image that I'm using (the digi charat girl) the color of purple I want. I want the colors to match so I'm going to pull colors out from the image itself rather than make them up myself.
Then once I have the purple I want I'll use the Fill Tool to drop the color in.
So our canvas is now the color we chose.
If you're wondering the color I chose had a hex code of #D1BDC9 and looked like this:
Well that was all of the easy parts. Now it's time to do the hard parts.
Layout design as I mentioned before is all about taste. You have to try different things to get it to what you want.
In this case the first thing I want to figure out is how do I want the image on here...
First things first, we'll notice our image, of the digi charat girl is really too big. She's pretty and all but if I want to get a good portion of her onto the canvas I'm going to need to size her down.
So click Image and then Image Size
and you'll get this popup.
All sorts of settings.
But all we really want is to double check a few things. We're only using the top part. We want to make sure that the top two fields are linked.
If this little chain is present then yes it's linked and we don't need to worry about only sizing down one part and screwing up the image.
So the next thing we need to do is take it off of pixels and change it to Percent.
WE don't know the exact pixels we just know we want it down to half it's size. So we change this to percent and then enter 50 into the field.
The image is now more our size.
Next it becomes a whole lot of taste...
Somehow you need to get the image onto the canvas. You can do this using the clone tool
Or you can do this by copying and pasting the image onto the canvas.
You could even extract the image and then copy and paste it onto the canvas.
In my case I'm going to copy and paste it onto the canvas.
So I'll use the selection tool
And I'll right click over the image and click "Select all"
Then I'll press CTRL and C on my keyboard. Go over to the layout canvas(My purple one) and press CTRL and V on my keyboard
Looks kind of rough doesn't it?
Well in this case I don't want the image going vertical. I want it horizontal. So I'm going to click Edit and then highlight Transform till it gives me the other drop down menu, then I'll click Rotate 90*CW (This is rotate it 90* ClockWise)
Now my image is sideways.
I have to decide if I want to do a right aligned, left aligned or centered layout. For this time I'm going with left aligned... So I'm going to move my image up into the top left corner.
Bet you're wondering why we didn't do a white BG now...
Well we're going to go blend our image into the background now.
Now when copying and pasting you get the advantage of a layer being made. It's ALWAYS best to work with layers when doing a layout. They will be your BEST friend in the future, so keep them in mind for now.
Your layer controls should be on the right hand side of the sceen, unless you've moved them. I've moved mine up into the little box.
If yours aren't on the screen click "Window" and then "Layers" It'll make it visible for you.
I want you to select the bottom Layer. (This is our purple layer.)
Then on your tool bar, RIGHT click your fill tool. And switch it to gradient.
On the color palette make the top color white.
Now on your canvas, go to the edge of the white, click and drag a little bit towards the end of the canvas. Do not go all the way. When you let go there should be white all the way behind the image, and fading into the purple.
If it's not how you want it, do it agian until you get a smooth fade.
Now we have a smooth blend on the side but we still have a sharp edge of image on white on the bottom. We want to fix that. So we need to make a new layer that'll go OVER the image.
Click Layer highlight new till the drop down comes and click Layer...
Quick keys would be CTRL + SHIFT + N
Once you have your new layer you need to click the layer controls so you can see them again. Click the layer we just made (Layer 3) and drag it to the top. We want it to go over the image this time, not under it.
Now we don't want this bottom fade to go over the WHOLE canvas. So using our selection tool we're going to make a Box from the top left down and towards the bottom right, but stop before you reach the right fade. We want only solid colors in the box.
Just in case you're a little lost:
So once you have that selection, you want to go back to your gradient tool, and still with the white, you're going to click someone near the bottom of the canvas and drag up a little bit. Play with this till you get the right fade for you.
Now our image will blend in. (minimal work done too!)
The next part is to define our text areas. We need to decide how much space we want to allow for our main text and where we want to put links and alot them their room.
To do this we're going to make another layer.
Click Layer highlight new till the drop down comes and click Layer...
Quick keys would be CTRL + SHIFT + N
This is layer 4 now. (we can name layers to make it easy, just click the layer and go to "Layer Properties" then rename the layer I just use the numbers -shrug-)
Make sure you deselct your selection, while on the selection tool you can click off of the canvas (but not on photoshops main background the light grey...) or you can right click and click "Deselect".
So let's define.
Do this how you wish, maybe you want to use lines, maybe colors? However you desire it is how it should be done. This is where taste comes in. I can't define your taste but I can make some suggestions. Your main content area... that should be at least 470px. 2px space and enough room to fit a 468x60 banner into it ^_^; don't want to have to size banners down all the time.
And your link area should be about 90px no less... so you can fit a 88x31 button into it.
So make your definitions.
After you have them, make another layer... with this layer, add your brushes, don't go crazy, make it tasteful. Try different combinations while at the same time keeping in mind that too much is tacky.
After that's done you have the layout image, add your desired text and then it's time for the final steps.
The final steps being the breaking up of the image.
When doing a div layer layout there really is no need to 'break' up the image, all you need is a 750x1px chop off of the bottom to be saved as your background and away you go.
So save your image as a jpg, save your background as a jpg and all you have to do is code it.
For hints might I suggest Let's Make a Layout Div Layers! it might be helpful... ~_^
By the way, this is what my image turned out as (Click to see full size)
I didn't go over text effects in here... because well they're something you really have to learn to do by practice. Play with Layer styles. There is a lot of nifty things you can do with it. ^_^
| 
