Framing a picture...

E-Liam · 12-05-2005, 12:52 PM

Hi,

This tutorial is intended to show you how to create a frame for your picture before placing it on a web page.

Application: GIMP

Level: Lower Intermediate

First, open a new layer measuring (approx) 285 x 220 pixels @ 72dpi. Make the background transparent. Now click on File | Open as Layer and locate the picture you’d like to frame.

Select the picture, and then click Open. You may need to scale the picture to the intended size of your finished image. To do this, click on Layer | Scale Layer and increase/reduce the size of the picture until it is just slightly smaller than the area you have chosen for the background., and click the Scale button. ( This may be behind your work area now) You can of course play around with the scale tool to get the most pleasing view of the picture.

Next, create a new transparent layer. We’re going to fill this with the surface finish of the frame. For this tutorial we’re going to go for a brushed aluminium effect. Fill the background with a pale grey colour. Then go to Filters | Noise | Scatter HSV and choose the following values.

Next, apply gaussian blur. Go to Filters | Blur | Gaussian Blur and choose the following values.

To do this you may need to break the link between horizontal and vertical by clicking the chain link.

Next click Select | All, then Select | Shrink and shrink by 20 pixels. Next we need to give the illusion of depth to the frame. Shrink again, this time by 1 pixel, and use the Fill tool to fill the area with black. Next, shrink by 2 pixels and using the Blend Tool set to linear, fill the inner area in diagonally, from top left to bottom right using a dark and light grey. Next shrink by 1 pixel again and fill in in black. Now right click in the middle of the frame and choose Edit | Cut.

That’s it. You now have a framed picture to put on your site. You can of course use any colour style of frame that you like, but this shows you the uses of a couple of tools you may not have used before.

I don't know if someone would like to have a go with this for another app?

Cheers

Liam

**devil lady** · 12-05-2005, 01:45 PM

Nice one E-Liam.
I did mine in PSP using similar settings for the frame colour etc. I selected the pic within the frame and used the cutout setting to add depth to it.

**Grove** · 12-05-2005, 03:14 PM

Tried it in Photoshop CS. Works a Charm

v-six · 12-05-2005, 04:11 PM

Also, an addition would be if you just want a simple border around your image so make it look crisp on the web, the easiest way is to increase the canvas size. If you want a 1 pixel border, increase the canvas size 2 pixels by 2 pixes (600 x 400 image goes to 602 x 402).It works better to keep it at even numbers, as some programs don't like half pixels so much.

12-05-2005, 12:52 PM	#1 (permalink)
E-Liam Manager, On the Web Join Date: Jan 2004 Location: Bracknell, UK Posts: 929 OS: XP	Framing a picture... Hi, This tutorial is intended to show you how to create a frame for your picture before placing it on a web page. Application: GIMP Level: Lower Intermediate First, open a new layer measuring (approx) 285 x 220 pixels @ 72dpi. Make the background transparent. Now click on File \| Open as Layer and locate the picture you’d like to frame. Select the picture, and then click Open. You may need to scale the picture to the intended size of your finished image. To do this, click on Layer \| Scale Layer and increase/reduce the size of the picture until it is just slightly smaller than the area you have chosen for the background., and click the Scale button. ( This may be behind your work area now) You can of course play around with the scale tool to get the most pleasing view of the picture. Next, create a new transparent layer. We’re going to fill this with the surface finish of the frame. For this tutorial we’re going to go for a brushed aluminium effect. Fill the background with a pale grey colour. Then go to Filters \| Noise \| Scatter HSV and choose the following values. Next, apply gaussian blur. Go to Filters \| Blur \| Gaussian Blur and choose the following values. To do this you may need to break the link between horizontal and vertical by clicking the chain link. Next click Select \| All, then Select \| Shrink and shrink by 20 pixels. Next we need to give the illusion of depth to the frame. Shrink again, this time by 1 pixel, and use the Fill tool to fill the area with black. Next, shrink by 2 pixels and using the Blend Tool set to linear, fill the inner area in diagonally, from top left to bottom right using a dark and light grey. Next shrink by 1 pixel again and fill in in black. Now right click in the middle of the frame and choose Edit \| Cut. That’s it. You now have a framed picture to put on your site. You can of course use any colour style of frame that you like, but this shows you the uses of a couple of tools you may not have used before. I don't know if someone would like to have a go with this for another app? Cheers Liam __________________ My Mother suggested a family outing... so I told her Uncle Bob was gay. (Trevor D.) Never argue with an idiot! They'll bring you down to their level and beat you with experience. --------------------------------------------------------------------------------- A member of the Alliance of Security Analysis Professionals since 2004. Last edited by E-Liam : 12-05-2005 at 01:06 PM.

12-05-2005, 01:45 PM	#2 (permalink)
devil lady Tech, Design Team Join Date: Sep 2005 Location: Tasmania, Australia Posts: 951 OS: XP SP2 My System	Nice one E-Liam. I did mine in PSP using similar settings for the frame colour etc. I selected the pic within the frame and used the cutout setting to add depth to it. __________________ . HiJackThis Everest Home Edition Ad Aware Spybot S & D Ewido online scan Spyware Blaster Last edited by devil lady : 12-05-2005 at 01:51 PM.

12-05-2005, 03:14 PM	#3 (permalink)
Grove Professor/Moderator, TSF Design School Join Date: Jun 2005 Location: Australia Posts: 2,382 OS: Windows XP SP2	Tried it in Photoshop CS. Works a Charm __________________ ========================================== Get Help: TSF Security Forum \| HijackThis \| MB's 5 Step Process Get Clean: AdAware SE \| Spybot S&D \| CWShredder \| Ewido \| CleanUp! Get Protected: SpywareBlaster \| SpywareGuard \| Windows Updates \| IE-SpyAd If TSF has helped you, please consider making a donation to help keep the board running.

12-05-2005, 04:11 PM	#4 (permalink)
v-six Manager, Design Join Date: Sep 2004 Location: High Falls, NY Posts: 2,064 OS: OS X for mac, XP Pro for PC	Also, an addition would be if you just want a simple border around your image so make it look crisp on the web, the easiest way is to increase the canvas size. If you want a 1 pixel border, increase the canvas size 2 pixels by 2 pixes (600 x 400 image goes to 602 x 402).It works better to keep it at even numbers, as some programs don't like half pixels so much. __________________ mysql> --i-am-a-dummy Brewing up something good at vervesix...