87 - Web Page Background -

Learn These Tools & Concepts:

Make a Background in Photoshop that Fills the Page, Looks Dignified and Professional.

Put all your images and designs in the upper-left corner of the viewport.

This tutorial is part of the Fan-Tastic Project and Portfolio Project.

  •   Moving easily between Photoshop, Illustrator, Flash and Dreamweaver requires recognizing their similarities and differences.

  •   Only then can you begin higher level thinking about what you're doing, rather than how you do it.

  •   In other words, it's irrelevant what program you're using you once you understand the basics; they're all based on the same products - you can usually figure it out.

•   The trick is to NOT be intimidated when you encounter an unfamiliar problem. This is developing "critical thinking/problem solving skills."

Other People's Work:

Here are examples of work inspired by this tutorial.

Step #1: Open PhotoShop ~

Open an image you can use in your project …

Click the Lasso Tool …

… and go to the Menu Bar and set the Feather to whatever.

Drag the Lasso around your image.

Then hit Cmd+Shift+i or go to: Select > Inverse

Then hit Delete.

Step #2: Open a New Blank Document in Photoshop ~

Open a new document 1200 X 1000 pixels

Drag your image onto the new blank document.

Zoom out and adjust the position of the image using Cmd+T

Set the image in the upper left hand corner of the canvas.

Step #3: Pick your Colors ~

Go to: kuler.adobe.com

Search for a color harmony that suits your project.

Once you find a color scheme, click the slider icon.

Copy the HEX number of the color you choose for the background.

Switch back to Photoshop and double-click on the color picker.

Paste the number here:

Remember your color selection. Write it down. You will be referring back to it frequently.

Step #4: New Layer ~

Make a new layer & drag it to the bottom …

Fill it with the color you chose.

Try hitting Alt+Backspace to fill or go to: Edit > Fill

Step #5: Brushes ~

Make another new layer.

Choose a second color from your kuler selection.

Click on the Brush Tool …

… and select the Preset picker on the menu bar.

Click the Brush Append button in the upper right corner and choose a brush pattern.

Find a brush pattern that appeals to you. This may take some time. Your brush selections may be different than the ones shown here. Use whatever brush patterns you have available.

Paste your brush on the new layer with the new color.

Make another new layer.

Change to a 3rd selection from your color scheme.

Select a different brush pattern.

Also try lowering the opacity of the brush.

Paste it on the new layer with a different color.

These are just suggestions. Ultimately it's up to you to take a risk and be creative on your own. Experiment! Try different things.

Step #6: Save your Work ~

Go to: File > Save for Web & Devices and select .jpg as the file format …

Lower the quality of the image until the size is below 100 kilobytes, on average.

Backgrounds for websites should be as small as possible. They must be downloaded every time your viewers open your pages so it's important to keep it as small as possible so they load quickly.

Step #7: Root Folder ~

Hit and put the file in the root folder of your project …

Step #8: Open your body Tag in CSS~

Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and Double-Click the body tag:

Select Background and attach the image …

Last Step: Save, Compress and Attach your Site ~

Right-Click the root folder of your site, and compress it.

Attach the .zip file with the completed steps and continue working …

Continue working …