How can we help you today?

Start a new topic
Discussions Portfoliobox Forums Tips and Tricks

Before/After Retouching examples

What do people find is the best technique for preparing and presenting before/after examples in their portfolios?


When responding please include link to the section of your porfolio where examples of this can be found.


Thanks!

4 CommentsSorted by Oldest First

Hello,


Thank you for your post! 


Preparation:


This will depend on your preference as you can edit the before and after image before you upload it on your website. Example: You can edit it in Photoshop and have both the images in one image file or you can separate them and upload individually in your website. 


Presentation: 


There are many different ways to do this and some might be a little tricky but you can follow the simple instructions below:


1. Link page - Using this page will allow you to have the "before image" on the first page and after you click the image it will redirect you to the "after image". (You might need to use a lot of gallery pages using this method)


    Instructions:
    

  • Create a Gallery page and select the template Slideshow -> In Context. 
  • Upload the "after image" in this gallery page. 
  • Create a Link page and click the "Add Page" button and link the gallery page that you have previously created. 
  • Remove the default image (If there's any) and upload the "before image" 
  • Afterward, it will look something like this: 


            

2. Section page - Using this method will allow you to display both before and after images at the same time. 


    Instructions:

    

  • Create a Section page. 
  • Add a Gallery section and select the template two & one:
  •  Upload the Before & After images on the gallery page.
  •  Repeat the process depending on how many Before & After images you need. 
  •  Afterward, it will look something like this:



3. Gallery - If you prefer your images to be in full screen then you can use this method. Here the before image will be shown first and after you scroll down the after image will show up. 


    Instruction


  • Create a Gallery page.
  • Set the template to Slideshow -> Parallax. 
  • Upload the Before image first followed by the After image.
  • Then you can test it by scrolling down. 


I hope this helps! Enjoy your day! 



Cheers, Arvin (Forum Moderator)



Thank you Arvin


In the end, though, I have opted for an alternative method: linking out to some Wordpress pages so that I make use of a before-after slider plugin


Here is the page

https://www.achukaphoto.com/editingretouchsamples


The plugin is a little buggy at present and sometimes requires page reloads but in principle I feel this is the best solution, especailly when I get this (or a different plugin) to operate consistently



Hello,


You're most welcome! I'm glad to hear that you were able to come up with a solution that will best display the before & after effect of your images. The plugin is indeed a bit slow but once it loads up it really looks good :) 


Amazing images by the way :)


If you have more questions in the future, don't hesitate to give us a shout :) Have a good weekend!  



Arvin (Forum moderator)

I've done this through simple use of gif files. It is easy to make out of two pictures in Photoshop. Many tutorials available on Google. I have a couple of examples:

https://www.scapevision.ca/retouching

Login to post a comment
More topics in Tips and Tricks
See all 23 topics