Creating png overlays to make your images look better

I'm big into png overlays, it transforms boring old images into a richer looking design.

 

Take a look at this variation:

Taken from the premium template Event

 

To create a png overlay is quite simple, take the dimensions of the images, in this case 140px square, then create your png overlay in photoshop, give it a bevel effect, drop shadow or even a piece of sticky tape.

 

Then in your markup which will be in the module template files. Tip: use Dreamweaver and search for the markup, in this case "<div class="sys_file_search_pic">" as this is the markup in the template file.

Then add your div, in this case "<div class="event_overlay"></div>". For this markup you will need to set the positioning to absolute and the image pathe, like so:

 

.event_overlay {

    backgroundurl("../images/event-overlay.png") no-repeat scroll 0 0 transparent;
    height146px;
    left0;
    positionabsolute;
    top0;
    width142px;
    z-index0;
}
Then you will need to set the parent div which contains the whole block and add the css:
.bx_events_unit {
    height233px;
    positionrelative;
}
It might take a little tweaking but this is the concept.
Have a go, big hint: install Firebug it will help your develop.
Enjoy!

PlayBox Design | Taken from Event.

 

Quote · 21 Dec 2011
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.