How to simulate Photoshops color overlay feature using GD

GD and GD2 are useful libraries for creating graphics on-the-fly. Discuss your PHP GD and GD2 scripts here.

Moderators: onion2k, General Moderators

Post Reply
runey
Forum Newbie
Posts: 2
Joined: Mon Sep 10, 2007 2:26 am

How to simulate Photoshops color overlay feature using GD

Post by runey »

I was hoping to someone could help me find a way to simulate the 'Color Overlay' feature from Photoshop using only the GD Library...

Basically I have a transparent overlay that I want to place over a background image...
This is so I can fade the edges of that image to the background color of the page...
This I've already done...

However the overlay image is a set color, black in this case...
I need to be able to change it under certain circumstances to match the page color...

To change this in Photoshop I would just go to blending options -> color overlay and select a different color...

I was hoping to find a way of doing this using the GD Library instead...

The overlay picture can be found here... http://trekcon.com/overlay/overlay.png
The background picture can be found here... http://trekcon.com/overlay/background.jpg
The result can be found here... http://trekcon.com/overlay/composite.jpg
The code can be found here... http://trekcon.com/overlay/watermark.php

Hopefully what I'm asking makes sense :)

Thanks in advance for any help
Jason Hart (aka Runey)
runey
Forum Newbie
Posts: 2
Joined: Mon Sep 10, 2007 2:26 am

Post by runey »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Well it's always the way... I spent the last couple of days trying to figure this out...
So of course no sooner after I post this plee for help, do I figure it out for myself...

The above links are still valid (for now)...

Here's the code I came up with... I would still appreciate knowing if there is a better way of doing this...

Thanks...

Code: Select all

<?php
// Runey (2007)
// trekcon@gmail.com

// Variables to be passed by community builder
$overlay = 'overlay.png';
$background = 'background.jpg';
$color = '000000';

// Open overlay and background images
$overlay = imagecreatefrompng($overlay);
$background = imagecreatefromjpeg($background);

// Turn on Alpha Blending
imagealphablending($background, true);

// Colorize overlay image
imagefilter($overlay, IMG_FILTER_COLORIZE, hexdec('0x' . $color{0} . $color{1}), hexdec('0x' . $color{2} . $color{3}), hexdec('0x' . $color{4} . $color{5}));

// Place colorized overlay on background image
imagecopy($background, $overlay, 0, 0, 0, 0, imagesx($overlay), imagesy($overlay));

// Output header and final image
header("Content-type: image/jpeg");
header("Content-Disposition: filename=" . $background);
imagejpeg($background, NULL, 80);

// Destroy image data
imagedestroy($overlay);
imagedestroy($background);

?>

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

A *better* way? I doubt that there's a faster way then simply putting a transparent layer over it.
Post Reply