Diced Image Layouts
This tutorial was created for Paint Shop Pro 7 but should be easy enough to translate into any layers capable graphics program. The graphic design itself I made in Photoshop..
First things first, open a new canvas at 785 width by 475 height. It is very important that you not make your layout any wider than 785 since any larger and your visitors may have to scroll side to side, specifically if they are using 800x600 or smaller. Whenever you are building your website, you have to remember that the default resolution in most PC's is 800x600. I prefer that visitors not have to scroll vertically so I try to keep the height of my layout at 475 or smaller. Keep in mind however that the height of the page varies greatly by how many toolbars the visitor keeps at the top of their windows, so this is not something that I would pull my hair out in order to make perfect lol..
Now you have your new canvas... The first thing you need to do is decide where you want your link and iframe, how large you need these areas to be and how you want to set them up. I am making this layout for my personal site. Generally speaking, personal sites can do with an iframe width somewhere between 300 - 350 pixels. I am not entirely sure I am going to use this for my personal site so I am making mine 550 pixels in case I decide to use it for Faery Ink instead. Thankfully, it can be adjusted later and will probably need to be adjusted, in order to fit my layout. At this point you may want to get your Rulers out ;)
>> View, Rulers..
Use the rulers to make your square the width you need it, as far as height I am just using my eye for that.
So get out your shapes tool..
>> : Vector off, Retain Style off, Antialias off, line width whatever you like, foreground color whatever you like, background color set to null ...
This is what mine looks like. Notice I have positioned it closer to the right of the screen, this is because I plan on putting my links to the left ;) ( Shown at reduced size for loading purposes )
Now add a new layer
>> : Layers >> Add New Raster Layer
We are going to draw a links area. I have also seen a space liked this used for tagboards lately which is pretty neat too lol.. But anyway ;) The only set rule as far as link areas are concerned is that they be wide enough to fit your longest link title.. and even that is a personal choice. I dont like my link titles to be wrapped so I make my link areas around 75 - 150 pixels. The one you see below is 135 pixels.. Depending on how many links you have you may want to make the link area taller or shorter.. Its entirely up to you. And don't forget you can always put your links area as an iframe so it doesnt have to be tall at all if you do that or use div layers..
Use the shapes tool at the same settings before and create your link area :)
Now it is time to get creative. Add a new layer and draw as you normally would... draw whatever your heart imagines, keeping in mind the area of your links and iframe will be covering it. So if you have a main character of sorts, you will want to put it in an area not entirely covered by the iframe and link area. In fact, the first thing I normally draw is the main character of my layout.. So if you want to start there that is great :) Providing you are not creating a layout toward profit, most doll sites do not mind if you create a layout doll from one of their bases. If you are interested in profiting from the layout, you will have to draw your character from scratch.
I drew a faery that I would like to use in this layout. She is relatively big so she is going to cut into the space I created for my content, but thats ok, even after adding her, I have 400 pixels available for my iframe, so I am in good shape :)
I positioned and edited her so it would look like she is coming out of the iframe. I thought it would be a neat effect to have her left wing sprawled out along the outside of the iframe. I am happy with her, I hope you are happy with whatever you came up with too :) BUT! this is pretty plain neh? Maybe it would look neat if I added a vine of some sort connecting the link area to the iframe area?
Oh this is looking better and better.. I am glad I stayed up all night drawing it lol...
But now I think I want to put my links up at the top next to the flower... What to do with the link area? All that space is now open for whatever I want to add there.. Hmmm.... I think I will keep it and put neat little doodads in there like a live date calendar, my site of the moment, maybe some cliques.. etc.. :)
If you want, you can add more boxes for different things.. Remember to make this layout yours :)
At this point, I am fairly sure I want to use this layout for Faery Ink haha.. So I need to add something to link to the members area. Right now I think a lock of some sort would be neat :)
Well I started drawing and forgot I was writing a tutorial hahahahahaha.. Anyway, you can see where I have elaborated on the layout.. I added new layers for each new thing.. I draw the outline, then add a new layer and drag it under the outline for the base color, then I add a new layer for the shadows, and another for the highlights... etc..
Oh goodness lol.. I had planned on this being a very simple layout.. Not the case anymore XD
Here are the beginnings of a tree...
Next is grass, more flowers, the sky... I was having fun =)
Ok, so you have your layout, all drawn up and ready to dice.
~Link Hearts Enchanted~
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
