Joanne,
(Firstly are you Mac or PC? doesn’t alter the solution, just interested to know)
OK, here we go.
- find out the pixel size of the overall image that you want to end up with. Easiest way to do this is in whatever program you use to make your web pages.
- In PS create a new file that is the same size as the final image needed for the web page.
File - new - fill in the width & height in pixels in the dialogue box keep the background transparent and press OK. - open all three of the new images in PS as separate files.
- decide in what order you want the pictures to appear in the new file.
- crop each of the pictures so they show the area you want to end up with in the final file - use the rectangular marquee tool and drag out the area you want, click on - image in the menu bar and drop down and click on - crop
- Press ctrl A on the keyboard to select the entire image you want to transfer.
- select the destination file you have created and click - ctrl v to paste the image into PS. It will create a layer of it’s own for the pasting - that’s fine for now.
- With this layer still selected, click edit in the menu bar and select free transform. Your image will now have "handles around the edge that you can move and resize the image to fit in the area you want it to sit.
copy steps 6-8 with the other two images. - All three images are now in your destination file, at the size you want, in the place you want. However they will all be on separate layers. There are different ways of dealing with this but we can get to that later.
- Click the text tool from the tool palette (usually on the left side of the UI. Click anywhere in the destination file to start typing. You can set the font parameters now if you wish in the parameters toolbox at the top of the screen, or you can reselect the text after to change it’s look - that’s up to you. You need the text tool selected to re-select any written text.
When you finish typing press enter and PS will put the text on a named layer of it’s own. - Check that all four elements are as you want them to be on the file. If they are not, make sure you have the appropriate layer selected and adjust as necessary.
- Now you can select all the layers in the file (click on the top layer and then shift click the bottom layer to select all the layers). Now right click and select "merge layers"
You now have a single layered file. - File save as - choose the option for you whether it be jpeg, tif or whatever.
- If the output file is too large for the web - this will depend mainly on the resolution of the photos you used, the you can fix that in PS. In the menu bar choose - Image - image size. In this box make sure the box at the bottom of the dialogue is set to Bicubic Sharpener - best for reductions and then you can either chose to reduce the size of the overall image and thus the file size, or (as you have made the file the right size for the webpage already) reduce the resolution in pixels per cm - you can experiment here to get the balance between file size and image quality that you are happy with. Alternatively your web software can do the reduction for you - or at least most of them can - unless you are writing the code yourself?
Hope this helps - write again if you need anything else.
Cheers
Joe