This Photoshop tutorial series is for webmasters who are new to preparing artwork for the web.

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Premise for Photoshop Tutorial Series: You are a web designer at a small agency, and a client has called to request that you prepare a mock-up for a new home page for is company that sells gifts in Victoria. This Tutorial series was perfected and used in College Web Master classes by Author/Instructor Scott Frangos. Now you can build your Web Graphics skills in Photoshop, as you learn your way through this classroom tested series on preparing Art for the Web.

(You will create a collage graphic using the grid and 3-4 images In this lesson, you will create a home page collage by combining images you import and and blend together using layer modes and opacity settings.)

1. Open the 3 images you saved in exercise 1 so you may combine them for a collage. Note that you might like to open them all, then zoom out to make them smaller. You will be able to see them all on screen, and consider how they might work together nicely.

REMEMBER: When several document windows are open at once in Photoshop, it can make your screen cluttered, and you might lose a picture that is open behind another picture that is open. To avoid this, you can zoom the size of each image down to create smaller, more easily managed windows.

2. Open your HomePage1design.psd file and open and place each of the images you saved to disk into it using your favorite method of combining graphics into one document.

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

You can copy graphics from one open widow to another by dragging its layer name from the layer palette over the destination window, then releasing the mouse. The image will appear in a new layer in the target document. Name the layer for each image you copy in, and resize them as needed using the Free Transform tool.

3. Placeholder to allow for other page elements: Create a placeholder graphic that is 468 pixels wide by 60 pixels tall in a new layer. This is a standard web banner size. A fast way to do this is to create a new document set at that size and simply fill it with black and copy it to your master document. You are simply going to place this shape into your home page design -- at bottom left -- as a place holder for an animated banner you will create in a future lesson.

All three photos have been placed, and the banner placeholder was created, and placed into your document (see banner layer hilighted above). You will make your collage small enough so it does not interfere with this placeholder area, which could hold an advertising banner, or may simply be used for contact information, and bottom of the page links, etc.

4. Now work on your collage. Arrange the graphics you have selected to overlap in ways that look visually appealing. Use the Opacity setting and the Layer Blend modes in the Layer Palette to merge the graphics.

5. Add a soft edge effect to each image in your collage by first clicking on the image layer, then choosing the rectangular marquee tool. Set the border softness (tool options bar at top of screen) to approx. 12. Then, make a selection rectangle a small distance inside the graphic. You will see a rounded corner selection indicator – this is how Photoshop displays a selection with soft edges. Next choose Select Inverse, then strike the Delete key on your keyboard. You will leave a soft edge around an image using this technique.

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

The top illustration above shows how the Rectangular Marquee tool has been used to select around the Fiddler with a 12 pixel "Feather" setting, which is displayed as a curved edge selection on screen. Then, Select Inverse was chosen before striking the delete key (it was struck 3 times to get an increasingly softer edge) so that just the outlying area of the image will be removed. The lower image shows one possible "collage" positioning of the three images in this Tutorial.

6. Save your finished collage as a separate graphic using the following method:

a) Make a duplicate of the current document.

b) Use the cropping tool to retain only the collage you created, then flatten the image.

c) Choose Save for Web.

d) Compare JPEG Quality options in the 4-UP tab. Your goal is to select the setting with the fastest download time (usually at 28.8 modem speed, because many 58k dial up services actually give you far slower connections), that also looks good without too much loss in picture resolution.

e) Pick your final selection by clicking on one of the four choices. The last square you click will have a black border around it and that one will be saved when you click the OK button.

This method is your technique to save anything you create in the mock-up document with the Browser layer to a separate graphic file so it may be reassembled into a web page with separate images. You should do this with the Navigation Bar, and the Banner, too.

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

NOTE: To practice saving your images organized for moving to a web hosting server, you save this image into your folder named "images" inside your "website" folder.

7. Save your Collage (using Save for Web) -- remember to use a lower quality setting to gain a faster download time, then compensate for "artifacts" using Blur settings, as you learned in the first tutorial in this series. Shown below is quality level 60 with a .2 blur compensation setting.

Above, three Save For Web options are examined (original is at upper left, then 3 other options are shown) for saving the collaged image. The bottom right version is chosen -- JPEG, 60 Quality, Blur .2 -- to deliver an image that downloads in 8 seconds on a 56k modem, without significant "artifacts" in the photo (remember to zoom in on the edge of the building to check for artifacts).

8. OPTIONAL ENHANCEMENT: If you have time, you might like to add a better sky to the building graphic by selecting the sky area, choosing a blue color, then use the Render:Clouds filter to add your clouds. Example shown above left included using Curves Adjustment to lighten the effect of the clouds.

Above, you can see that the Magic Wand tool (enlarged) was first used to select the sky area at top left and right of building. This was done in the original image file of the building -- not in the collaged page mock-up document. Then a foreground color of deep sky blue was chosen (see RGB color numbers in Color Palette at bottom right), and the background was changed to white. To get the cloudy sky effect, the Clouds filter was chosen on the Render pop-down menu, as shown. You may wish to then adjust the Contrast setting for the sky.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

You can now add this new version of the building photo into your web page mock-up layout, and follow the same process to make it part of your collage.

Next Art For Web Tutorial: Creating a Seamless Background Tile

© 2006 by Scott Frangos, Managing Editor of WebHelperNow.com. All rights reserved.

Guys, please take a look at Server Intellect for Windows Web Hosting. I'm very pleased. You will be too. Take a look and see for yourself!