Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that the text and links are worked out, we'll add a background color or image to the page. This will create an edge to our page, as well as add color and maybe even texture. Looking for a background color, we want something traditional. Subtle. Something that works with the color of the type and the color of the links. Red is a traditional color in typography, but here it's too overwhelming. The dark brown gray makes a nice contrast to the white page, crisp and elegant like a tuxedo, but it might be too dark.
If that felt to dark, we could lighten it up, but this feels too muddy to me. We could bring in a totally different hue. A nice warm, dull yellow feels luxurious. This one has possibilities, though I'd want to tone it down some. The dark brown gray also has possibilities, but I'd also like to try a background image. A subtle elegant texture could make a nice contrast to the text. We haven't been given an image to work with, so we're going to have to come up with a generic image that needs some general guidelines.
We want something traditional looking, maybe traditional ornaments or shapes. We also want a muted, subtle color palette, so it doesn't compete with the text. And a texture that doesn't compete with the text either. There are a lot of sites for free background images. It's important to make sure any image you use is available and legal for use on your web page. I enjoy backgroundlabs.com and squidfingers.com. They have very different kinds of images.
I visited both sites searching for a possible background image and found a lot of patterns. I narrowed the selection down to a few based on our guidelines. This one is too busy when it tiles. This one has potential, but I'm not sure about the color. This one is too graphic. It reminds me of retro linoleum, which is great. It's just not right for this project. This one is way too dark. I love the pattern and the subtlety, but it makes the white page glow.
This one, well, it's sort of cliche, but I like it. It's light enough to not compete with the text. It has very traditional forms. It softens the border around the page and it pulls everything together. There are a lot of good things about this one, but I'm not crazy about the gradation and I think you could have a slightly smaller footprint so it would repeat more often and I might want it a little lighter. I think I use this one as an inspiration and make my own. Here is the one we made in the studio.
It's almost the same color and if possible it's even more cliche, but that's what I like about it. It's sort of fun. Also we no longer have a gradient in the forms and the forms relate more to the Chopin Script. This is the background image we're going to use. Whenever possible, make your own image. That way you'll get exactly what you want and not have to cross your fingers and hope that something out there will work for you. If you want to make your image, but don't know how I recommend Photoshop CS5 for the Web, Chapter 4, from the lynda.com library.
So we've picked an image for the page. I want to take a minute to point out they we are going to put the image in the background, but we're keeping the text on a white background over the image. I purposely will not place the text directly over the image. Type over an image, even a subtle image texture like the one we've chosen, is much harder to read. The background colors constantly change and legibility of some of the words gets compromised. Readers have to work harder to read the text.
A good rule is to only put text over flat solid colors, so the background remains constant to the text.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.