How to create multiple color background with watermark 1

[jaspenn]

I am a very casual user of Photoshop 7 and know enough to do very basic work.
I would like to create an image (for a web page background) that has 3 wide horizontal bands of different colors and a watermark (logo) faintly visible in the background of all 3 colors.
I have no idea how to approach doing this.
If anyone can offer some advice, help, or a source for information, I will be most appreciative.
I just discovered this forum and it is a wealth of useful information.
Thanks!

 

[deeshubby]

I'm assuming you know how to create new layers and use the "dotted rectangle" selection tool.

1. Create New Photoshop Document
(assuming most folks see web pages on 800 x 600 monitors, make your document size about 780 pixels wide by 410 pixels high - which is all the space you have left after discounting the browser buttons and scrollbars)

2. Make sure you can see your LAYERS palette. (usually on by default, if not: go to WINDOW menu and select LAYERS)

3. In LAYERS palette: Double-click on the BACKGROUND layer to unlock it and hit OK to turn it into Layer 0

3b. I prefer to hit (CTRL+A) to SELECT ALL and then hit(DELETE) to clear Layer 0 and make it transparent.

4. Now go to the toolbox and get the rectangle selection tool (top-most left corner tool). Select top 3rd of screen.

5. Now go to toolbox and click on the foreground color to launch the color picker. Choose some color you want to make as your first "color band". Hit ok to quit the color picker.

6. Select the PAINT BUCKET from the toolbox (sometimes it hides beneath the GRADIENT TOOL) (keyboard shortcut: hit the (G) key)

7. Click the paint bucket inside the selected area of the document to paint it.

8. Hit (CTRL+D) to deselect (dotted lines will disappear)

9. Go to the layers palette and Create a new layer. (named Layer 1 probably)

10. Repeat steps 4, 5, and 6 to create the 2nd and 3rd bands of color.

11. Now that each band of color is on it's own layer, you can adjust color strength of each band by playing with it's OPACITY settings in the LAYERS palette (FUN!). With the GENERAL SELECT (black arrow) tool from the toolbox you can select individual layers and then move the colored bands around if the position of each band was not perfect.

12. Open up your logo in a seperate Photoshop document. (CTRL+A) to select the entire logo, and hit (CTRL+C) to copy the entire logo. Then make the new document active and (CTRL-V) to paste logo into the new document.

13. Logo will come into the color-band document on it's own layer. Go to LAYERS palette and drag new logo layer to the TOP MOST layer (I realize if it was on a WHITE background it will block out a lot of hard work you just did on those colored layers)

14. Play with the BLENDING MODE of this logo layer in the LAYERS palette. The BLENDING MODE is a menu that is found next to the OPACITY setting. It is usually set to "Normal" but you should try setting it to "Mulitply" or some other option to make the white background disappear and let the colors show through. You can then, also, adjust the OPACITY for a nice watermark effect.

15. Other special effects can be applied to the LOGO layer by RIGHT-CLICKING on the logo layer and select "Blending Options..." - play around in the resulting pop-up and hit "okay".

Hope this helps...

 

[deeshubby]

oh yeah.. almost forgot...

16. Now that your background image is perfect. Go to "FILE" menu and select "Save For Web..." option.

17. A pseudo-ImageReady module will pop-up which will help you create a GIF or JPG file for the web. All of the options are going to be on the RIGHT-HAND side.

18. Make sure you are previewing the "Optimized" version of the graphic (tabs at the top-left of module) rather than the "Original" - the optimized version is what you will actually be saving for the web.

19. If saving as JPG format, use the QUALITY slider to affect download size (size of file will show in bottom left of screen).
If saving as GIF format, choosing smaller color palettes (256 colors is the max palette for GIF, but often 128 colors or 32 colors will do) will make for smaller files.

20. After making all adjustments, hit the SAVE button.

 

[jaspenn]

deeshubby...thanks for such great, detailed instructions. As soon as I can dedicate some time to it, I'm going step by step to finish off my project.
Thanks again for your help.