A number of issues regarding images for website design.

[iamevilhomer]

Good evening everyone, it's my first post here so let me begin by saying Hello!

So, I have a fairly basic understand of Photoshop and will hopefully understand methods suggested as solutions to my problem, provided you can keep them nice and simple!

Right, so here's my problem.. I'm designing a website in Photoshop for a college project, I'm basically creating images in Photoshop which I'll later code as links in Dreamweaver. The intention is for the images to look something like this;



As you can see, it's a simple photograph with rounded edges (done using the rounded rectangle tool), a stroke and a bit of Photoshopped stripey lines in the bottom right corner.

I want to make three more images just like this but with a different photograph and the problem I'm having is resizing the final image to be exactly the same size as the one above, so that the final images will all be the same size and will look perfect when aligned next to one another on my website (bare in mind that the photos used are all different sizes to start with).

I was hoping there might be a nice easy solution to this problem and I've had a look on youtube etc but not found anything particularly useful.

Thanks.

 

[MrToM]

Welllllllllll as its only three more images here's one way: (If you had lots more than 3 this may be tedious)

Take the image you already have (posted here), rasterise it, and set the 'Fill' Opacity to zero. (copy it if you need to keep the original but turn off the copy visibility).
That should just leave you with the border.
Hopefully the 'stripey' thing is on its own layer....if not, get it on its own layer.
Also, if your original image is not on its own layer then include it in the following.

Next, use File > Place and select the images you want...including the original if its not already on a layer.

When the images are 'placed' they should become 'Smart Objects' meaning you can scale them up or down without losing any quality.

As you place each image use the 'transform Handles' (tiny sqsuares on the corners and midpoints of the smart object) to re-size each image to that of the border

Re-arrange the images so that they stack Under the 'Border' layer and the 'Stripey' layer......and under the original image if its there.....the order isn't really important but all the images need to be UNDER those other two.

If you need to, make the 'border' layer a clipping mask by right clicking the layer and selecting 'Create Clipping Mask'....this should remove the corners sticking out from behind the rounded shape.

You can then turn the visibility on or off of each 'image' layer as and when you want....using the 'Save for Web' from the File menu to save out each version.

I think thats all, I've probably missed a vital bit but I'm sure as soon as I hit 'Submit' I'll think of it.

Regards.
MrTom.

 

[IamSam]

Here is a PSD file that shows you one way of doing this: http://www.mediafire.com/download/yw2rl1e2omhei49/RoundedRectangle_02.psd

This is a large file and may take some time to download.

As has been mentioned by MrTom, I had already started my upload of the technique with examples, so I will leave them.

 

[iamevilhomer]

That's awesome guys, thanks for the help, I really appreciate it.

 

[leadingedge]

Open all the images in one document and chose rectangle shape with rounded corner. Right clicking on the images layer and selecting 'Create Clipping Mask'.... option, then set the border of the rounderd corner shape.. right click on shape layer. Select stroke option and add gradient color border and in last steps using the 'Save for Web and device' from the File menu to save out each image.