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

[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.