Speaking visually, how do you know what you want to do to your profiles? Specifically, pet profiles. What programs do you use to make your profiles? Do you do one big image and then code to fill in, or is it bits and pieces?

Help me I'm new and I want to make my pet profiles nicer ;3;

well personally i just kind of come up with my layout idea in my head based on my knowledge of graphic and web design - if you think about the page in terms of a grid, you can consider how many "grid squares" it would be appropriate for each section to take up. for instance, my pet flowering has a large tc that takes up the most space, then a box for the story that takes up the same width but is a little shorter, and then pull-out tabs for the minion and spotlight that make up the difference in height between the treasure and story box. then i simply code each bit into the right spot with the right height and width and background color and all those fancy things like rounded borders and opacity and whatever. again, using flowering as an example, this is the code i wrote for the tc:

{position:absolute; top:105px; left:50px; width:345px; height:545px; overflow:auto; background-color:; opacity:.85; padding:2px; border-radius:10px; border:5px solid } :hover {z-index:3} .treasure_item {margin-left:2px; margin-right:2px} img {opacity:.9; border-radius:10px; height:60px; width:60px; margin:4px} img:hover {opacity:1; -webkit-transition: opacity .2s linear; -moz-transition: opacity .2s linear}

you could also create a background image in photoshop or something and then position each section to line up with it, but i don't like that method because everyone has different sized computer screens so some people might not be able to see the whole thing and other people might get a bunch of blank space. my favorite thing to do (and it might be a method i overuse) is to find a nice big image that i think would look nice as the background and use some code to make it scale with the page so people with small screens and big screens alike can see the whole image, so it doesn't look cut off or too small. this is the code i use for that, i simply found it by googling 'scaling background image css':

html {background:url(IMAGE URL) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover}

(and obviously where it says IMAGE URL is where you would paste the url of the image you're using)

now, recently i started experimenting with a different layout, which you can see on the page of my pet rococo, which is much more vertically-oriented than most profiles i've done. it's also different because instead of positioning everything using "position:absolute" and then manually fiddling with the numbers until it's exactly where i want it, i just positioned the "content" div and then from there i adjusted each section using "position:relative" to move them relatively higher or lower on the page, which in some ways is a lot simpler and cleaner than my usual style.

ummm yeah sorry i kind of went off on a tangent there. basically, if it helps, you can sketch out layout ideas on paper or on the computer, create mock-ups of profiles in photoshop or whatever program you have. i just sort of come up with an image in my head or figure it out as i go along. you can find inspiration by looking at other people's pet profiles - spotlight winners are a great place to start. also maybe look up some web / graphic design resources, there are tons of tutorials out there explaining what makes for a good layout and interface and what to avoid. but yeah, just have fun with it. you can do anything as simple or complex as you want.

In general i tend to make pet profiles for others more than myself, so I usually start with what images i've been given. I use paint shop pro and try to find what the best layout would be for what i have to work with. Then i make everything as one large image, with all the different parts on separate layer, so I can save the different sections as individual PNG's: background pattern, the profile layout, the pet overlay, scroll overlays and any other images that need effects/links or will need their z-index changing on a hover or something.

uhhh, then I use my base code layout (I just be lazy and steal the code from the last pet I worked on) and edit in all the different sections and effects and stuff. Oh and, if i need the overlay on a separate layer I tend to keep the overlay on the base profile image and then add it as well as a separate DIV, so that i can align it exactly where I meant it to be (unless I'm gonna alter its transparency, of course)

So uh, to answer in short: i work out a layout based on the resources given and I save things mostly as bits and pieces, as it allows for more complex coding and effects.