I am building a blog for my retouching/photoshop work and would like to add an element such as the one seen on this website: http://www.christyschuler.com/retouching.html.
When you click to the portfolio, the before picture morphs into the after pictures, giving a great illustration of the difference between the two images. I know this particular site was done in flash, and there are restrictions with WordPress on using flash elements. My questions is, does anyone know an alternative way to accomplish this illustration (or something similar to it) on WordPress without using flash? Any ideas or comments are greatly appreciated!
The blog I need help with is kaileyflynnretouching.wordpress.com.
You can use a slideshow (either the WP slideshow or a 3rd-party one).
If you have the Custom Design upgrade, you can also use CSS editing to make the image change when you hover over it (personally I find this better than the autoplay on the page you linked to).
Personal opinion only:
My first impression on seeing the example was using a gif animation. But, I’m sorry, it just looked, well, sort of creepy and un-real. Like a gif animation.
I’d be more impressed with a side by side illustration of the differences between the original and the Photoshopped images.
Thanks for both of your comments! It is good to know it is an option in CSS. I haven’t upgraded to Custom Design Upgrade yet but consider it now that I know it is possible. I guess I am also a bit lost on how to actually execute it in CSS, as I am not super familiar with HTML and coding. Hopefully I can find some directions on how to execute it in a support help topic on CSS.
I also just updated how my images are laid out on my WordPress. It would be great to have an unbiased eye look at them and see if it gets the point across as a side by side comparison instead of creating the fancy element! If you get a chance to look at it, let me know what you think.
Agree with Tess’s “creepy”. I would add “tasteless”. The problem is it’s not just two frames (before/after), it’s around 15 frames, supposedly showing the progress from before to after but ending up looking like a shot from a bad sci-fi or horror movie…
Opinion again, because you asked:
I certainly prefer the side by side comparisons.
Not the arrow, though (on the exteriors) because it’s obvious you are showing the improvements you are making to the original image. Looks like a used car dealer pointing out the CHEAP DEAL on the genu-wine 1990 American Motor’s Gremlin…
That theme, Fresh & Clean, has an odd “feature” of dimming the images when the cursor is on them, even accidentally. It’s quite distracting for me to study one image, then the next when that’s going on. On screen, imo, contrast is good: light and dark, saturated color and dull. When going from one picture to the next that (extraneous) dimming (whiting out) draws my attention away from comparing the two pictures.
I don’t know which other theme to suggest, but not all themes do that strange fog effect.
Thanks for both of your replies! I probably should have posted this website example of what I am looking to accomplish as it is actually of architectural retouching and not portraits (which is probably why it is so creepy). The site is: http://www.atticfire.com.
Tess, ill have to look into getting the grayed out feature to go away; I think that is a great point. Thanks for bringing it up.
You can’t get rid of the shadow-upon-hover effect without the Custom Design upgrade. As Tess suggested, you need a different theme (most themes don’t have this effect).
The topic ‘Flash Elements’ is closed to new replies.