Finding Resources

[foxfirefey]

Class Notes

Class has still been pretty quiet on the CSS learning front, but it's time to move on.

You can always look at the syllabus to see where we are. Our previous class was the second part of the lesson HTML and CSS overview; Examining with browser developer tools. Next week, we will review the foundation of core2 layouts.

Lesson Readings

So, this week I want you to find some resources you might want to use for your layout. There's a list started here:

Style Making Resources

Feel free to suggest your favorites--for instance, I'm not sure what the landscape of image hosting is currently like since I have my own webhost.

Exercises

I want you to think about the following:

• The color scheme for your layout. You'll need foregrounds (for text), backgrounds, and accent colors for things like links. If you are making an S2 layout, I recommend two sets of color schemes: one dark on light and one light on dark, to give you the best base to work from.
• Graphics you might want to use--backgrounds, accents, etc
• The positioning of layout elements you want to aim for--sidebars, no sidebars? What's in the header?

I totally recommend you chatter in comments about things you're thinking about and what you find that you like, along with giving your favorite resource recommendations.

Comments

[marahmarie]

OK, it's time to break out of lurking mode, I guess. I've read but not "participated" in the lessons because so far, I'm familiar with most of the ground covered. I'm waiting for something that completely throws me for a loop (which is going to happen) so I can go "Oh wait, what" in the comments until I get it.

So this is my CSS issue (well, this is one of two): I can edit and write CSS but I don't have and don't know how to use Photoshop - but I have another image program that's pretty much identical to Paint.NET and I love it, but how do I use it the way most people use Photoshop to position a layout background? I get lost on how to do a mockup (in any image program at all), then translate that into an actual CSS layout with proper positioning.

My other issue is I can edit anybody's layout to do almost anything but I don't know enough about positioning to write my own layout from scratch. I've looked everywhere for help, but most design sites seem to advocate not bothering - they suggest using pre-made grids that are already available online, or including basic CSS resets (where all paddings and margins have been zeroed out for you).

I want to write my own basic grids/do my own resets so I know how to do them, but to do that I guess I'd need to know how to position basic page elements across a variety (or at least one or two) Dreamwidth styles. I don't really know where to start with that.

I have an idea for a layout for a poetry-type DW community that would have a big rose that breaks through from entry-body over and across the sidebar from somewhere in the middle of the page, so I'm hoping to be able to do that layout without ganking someone's else's style sheet as the base by the time I'm done with the courses here.

Oh, and for those here looking for image hosting? I use a free account on Wordpress.com that also hosts a blog of mine. They give you 2GB free storage space which is more than adequate for my current image needs and (in my experience) the images load much, much faster than they used to load from Photobucket, ImageShack, TinyPic, etc.

[ninetydegrees]

how do I use it the way most people use Photoshop to position a layout background? I get lost on how to do a mockup (in any image program at all), then translate that into an actual CSS layout with proper positioning.

Marahmarie, can you clarify what you mean here by 'use Photoshop to position a layout background'? Also do you have problems creating the mockup in a photo editing program or just the part where you translate that into CSS?

As for resets, well, it depends on what your start with. Do you make your own layout layer, use an existing one but don't use its stylesheet or use the layout and its stylesheet and work from there?

[marahmarie]

I've seen some layout makers kind of uncover the process they go through to make a layout, and for some of them, that starts with throwing a mockup of how it will look together in PS (but I'd be using another imaging program, like Paint.NET or a clone). I can't even get my mind around how to do that. So, let's say I visit a pattern site and see one lovely pattern and go, "Ooh, shiny," so I download the pattern, open it in Paint.NET - then what? My mind just goes blank. I'm lost from that moment on. Is it necessary to use an imaging program for the layout's pre-construction, or is it possible to do just do all the positioning in your head and then translate that to CSS somehow? If so, I can't figure it out too well that way, either. That's why I wind up ganking other people's layouts and just completely re-writing them if I have to (because at least that way I know where basic elements are supposed to go to start off with). :)

Do you make your own layout layer, ****use an existing one but don't use its stylesheet***** or use the layout and its stylesheet and work from there?

I'd only want to use a pre-existing layer. No base style sheet. I think it's easier that way. :)

Edit: Just to be clear, I have a problem with both: creating the mockup and translating it to CSS. If I could create the mockup that would be half the battle; I can't get that far, though, so I have no idea how to translate the mockup successfully to CSS.

[seleneheart]

I don't know if this will help you or not, re: the question about using graphics software to help with a layout. And I use paint.net for my stuff at work -- it's a good little program. Anyway, this is my process for the Photoshop part of it.

When I'm doing a layout CSS from 'scratch' I usually gather a lot of pictures of things that have elements that go well together. Like pictures of dresses, or pillows, or interior design. Advertisements. Anything to give me a place to start visually.

For instance this picture which I just now grabbed from google:


It has some great colors, some that can work for the background, something that can work for text. It has a few patterns, like the drapes and the pillows. I think I want a subtle green on green stripe for the body background like the drapes show. So I make a webpage sized canvas in photoshop, and cover it with the green stripe.

Then I like the blue pillows with the white leaves as maybe the pattern for the container that holds the entries. Or maybe the sidebar if I pull the transparency down. Anyway, I either hunt for a similar pattern using some of the resources above, or I try sketching something. Then I use the marque tool to apply it above my stripe.

After that I use the color picker to grab colors for the various elements of the layout. Like maybe the couch color for the entry background and the coffee table color for the font, and maybe the plain blue pillow color for links. I put all those elements on the canvas, using layers and the marque tool to control where things go.

The important thing is to test how well they work together, because sometimes colors react to each other in weird ways.

I suggest you find your rose picture and use it as your inspiration. Make a canvas and then make the elements you'd want on the layout. Use the marque tool and move the boxes around until you like it. I find it's usually easier to write the CSS if I have a clear idea what I want it to look like.

Okay, that was really long.

I kinda like that pic . . .

[marahmarie]

It will help immensely - what an incredible way to break it all down - thank you for going to the trouble of explaining this in a way that I can (miraculously) understand.

[ninetydegrees]

It is absolutely not necessary to create a mockup. I do it because I need something concrete and it might be useful if you ask for somebody else's input but everybody has their own thinking and designing process. You mention using a pattern to base a design on; well, I could never do that. I need to have the basic layout of the design, which I generally sketch on paper first, before I can think about the rest. Do you feel you need something concrete like a pencil sketch, a collage or a digital image or do you feel you don't necessarily? And if you do, maybe it only needs to be a draft, not the final design.

If you base your design on an existing layer, the question is are the elements in the right order for you in the first place? If manipulating CSS with floats or absolute positioning or elaborate margins to significantly move things around is an issue maybe changing the order of the elements in the source would work better for you (which, ok, means S2 editing which sounds difficult but isn't much at this level). Not that I want to discourage from using CSS. It's just a thought. :)

[marahmarie]

If manipulating CSS with floats or absolute positioning or elaborate margins to significantly move things around is an issue

It's absolutely not an issue. I sort of enjoy messing with default positioning (here's an example of me changing a right-floated #primary div to float left using pure CSS, which I did just for fun and because, well...I like entries to float left). It doesn't matter where elements are to begin with because I know how to move them even where they're not supposed to move. I just don't know where to put them to begin with, if that makes sense (in other words, with no existing layer to work with, I'm lost, as in, "Um, where does stuff go?").

But seleneheart has given me a great framework for taking new-style editing out of Web Dev's CSS editing panel and into some sort of imaging program to start with instead (which long-term, I think is going to be much more productive for me) and for that I'm very grateful. Thanks for your thoughts on this, too. :)