3D Transform width a Cover and a special Hover Effekt

[anthony]

The numbers for the first coordinate of each coordinate pair for the transformations will need to be changed to match the size of the image after the initial crop. Everything else however should be correct!!!

[asantosjr]

I'm trying to do something similar to that, but more simple (without perspective or glow), only a flat picture with the reflection with a black background.
The only problem is that my images do not have the same size and I don't know how to handle the coordinates (sorry, I'm so newbie )
Can please someone help me?

[Bonzo]

This is a php method; I have deliberatly left it in different steps so you can see what each step does.
You do not say what you are using to run your code; this is php but can be adapted. If you are using php you can use getimagesize( ) for the original image and use that in your code.

Code: Select all

<?php
exec("convert image.jpg -flip temp.jpg");

// Make a gradiant - transparent to white
exec("convert -size 300x400 gradient:none-black gradient_linear.png ");

// Put the gradiant over the inverted image
exec("convert temp.jpg gradient_linear.png -gravity south -composite temp3.jpg ");

// Join the two images together
exec("convert image.jpg temp3.jpg -append temp1.jpg");

// Add the gradiant
exec("convert -size 400x500 xc:black temp1.jpg -gravity center -composite result.jpg");

unlink('temp.jpg');
unlink('gradient_linear.png');
unlink('temp3.jpg');
unlink('temp1.jpg');
?>

[asantosjr]

This is a php method; I have deliberatly left it in different steps so you can see what each step does.
You do not say what you are using to run your code; this is php but can be adapted. If you are using php you can use getimagesize( ) for the original image and use that in your code.

Thanks man! This is almost all that I'm needing...
Sorry for not to give you more info about what I'm doing. I'm making a html based jukebox for my network media player, which does not support javascript.
Today my jukebox look like this:


And I'm trying to do something like this:


I doing all by DOS scripts, and I already realize how to get the correctly image size for the script.
All I need know now is how to make the reflection smaller. Thanks again for your help!

[Bonzo]

I have left the code as before using php - you know how to adapt it for Dos ?

I have cropped the "flipped" image and removed the black background as you are already placing the images onto a background in a table ?
You just need to add the last line of code before the unlinks in the other example if you need it.

Hope this is what you want; I have combined two of the steps.

Code: Select all

<?php
// Create the upside down image and crop it to 283 wide 80 high 0 offset from top left corner
exec("convert image.jpg -flip -crop 283x80+0+0 temp.jpg");

// Make a gradiant - transparent to black and add the gradiant to the image
exec("convert ( -size 300x200 gradient:none-black ) temp.jpg +swap -gravity south -composite temp3.jpg ");

// Join the two images together
exec("convert image.jpg temp3.jpg -append temp1.jpg");

// Remove the tempory images
unlink('temp.jpg');
unlink('temp3.jpg');
?>

<img src="temp1.jpg">

[asantosjr]

I have left the code as before using php - you know how to adapt it for Dos ?

That is simple When you used a "exec" function, you are invoking a Operational Sistem command.
I just use you command (convert image.jpg -flip -crop 283x80+0+0 temp.jpg) at the DOS prompt

Hope this is what you want; I have combined two of the steps.

Yeah! That's what I was looking for... Thank you very much!

[musukosan]

Hello,

i'm a german guy and i'm trying to generate this:
out of that:

I've made it with Photoshop and have uploaded a Picture of each step i've made:

1:
2:
3:
4:
5:
(The Size of the Image (500x550) is important)

And now i'm trying to realize it with ImageMagick (Command Line) but i'm failing already on the first step.
I'm deeply grateful for every help!

Franz

Is there a way to this in PHP? I've only seen a way to do it in command line. Thanks!

[fmw42]

I have a bash script (for command line) that lets you do this relatively easily, called, 3Dbox. You can get it at http://www.fmwconcepts.com/imagemagick/index.html. However, you would have to get help converting it to PHP as I know little about doing IM via PHP.

[Bonzo]

My example uses php and the command line and should give you the effect 4:

When you say use php and not the command line do you mean using magicwand or Imagick ?

[musukosan]

I have a bash script (for command line) that lets you do this relatively easily, called, 3Dbox. You can get it at http://www.fmwconcepts.com/imagemagick/index.html. However, you would have to get help converting it to PHP as I know little about doing IM via PHP.

Hi fmw42,

I stumbled upon your site earlier and found it was exactly what I needed, except I am using a windows version of Imagemagick, so I don't think a bash script will help me. I downloaded the script, however, with the intentions of trying to convert it PHP, but it was hard for me to read without line breaks.

My example uses php and the command line and should give you the effect 4:

When you say use php and not the command line do you mean using magicwand or Imagick ?

Bonzo,

Sorry, I didn't realize the answer was right in front of me in your posts. It was before realizing how to implement the effect I wanted even in command line, so I didn't recognize the php you used. But now I think I can do it using 'exec', I just have to play around with a bit to figure it out. I'll let you know if I have anymore questions.

Thanks guys.

[fmw42]

Hi fmw42,

I stumbled upon your site earlier and found it was exactly what I needed, except I am using a windows version of Imagemagick, so I don't think a bash script will help me. I downloaded the script, however, with the intentions of trying to convert it PHP, but it was hard for me to read without line breaks.

Not sure why your editor is losing the line breaks. But most text editors can use soft wrap (even built-in editors such as wordpad and notepad, etc). There are also free tools for converting Mac/Unix/Windows line breaks as each are different. As for using the script on Windows, that is an issue, but you an install cygwin. Alternately, use PHP exec command and rebuild the script line by line or at least the guts of it.

[el_supremo]

I tried notepad with Fred's unrotate script and it just shows garbage and doesn't seem to have an option to handle a single LF (linux) or CR (MAC) as an end of line. However, wordpad does display the file properly.

Pete

[Bonzo]

Opens OK for me with Notepad++

This was a test of mine at a 3D cube - needs more work when I get the time. It will also generate an image map so that when you selected an image/side you could open a larger image or go to a different page etc.

http://www.rubblewebs.co.uk/imagemagick ... o=cube.png