Cutouts and Popups


Open a new image large enough to hold your text or graphic. Add your text or image. Make sure it is the same color as your background. If you are using a pattern for your background make sure you fill your selection with the pattern.



Now choose Image/Effects/Cutout. To make your image recessed, set the parameters to Shadow=Black, Blur=(I used 5 to 8; Experiment), V. and H.Offset=(I used 3 to 4).



And to finish choose Image/Effects/Dropshadow. Settings should be; Shadow=white, Blur=0 to 1, V.and H.Offsets=1 to 2.



If you want your image to be raised set the V. and H. Offsets to negative values.



Then finish with a negative value for the Offsets of the dropshadow.
You don't have to fill the interior of your cutout with the same color.
If you noticed, the bars on this page were also cutouts. They were made with the selection tool on a copy of the background image. Then the cutout effect was applied.

The images below were done with textures. The only difference from the above technique was that I selected a light color from within the background to make my dropshadow with (and I also saved them as JPG images to prevent dithering).




This image I tried a little different technique. My first cutout settings were; Shadow=white, Blur=2, Both Offsets=2. The second cutout settings were; Shadow=black, Blur=2, Both Offsets=-2. Then I finished off with a black dropshadow settings; Blur=10 to 15, Both Offsets=2. This could be done on the textures above too.
I got this effect from Jan Eriksson.

This technique is also really good for Mouseover effects.
Tutorials
See more great cutout effects from Webgraphics on a budget.

Main Page