Create a Out of Bounds Surreal Photo manipulation in Photoshop

surreal photo manipulation out of boundsPhoto manipulation is an art that requires a lot of patience along with the expertise in Photoshop. With our creativity and imagination, we can manipulate any photograph the way we want. Its all about how we use our imagination and properly understand the effects that can be achieved in Photoshop and other similar tools and employing them with a lot of experimentation.

I was browsing the website The Design Inspiration for some, yeah you guessed it, ‘Inspiration’ and I fell upon this rather amazing photo manipulation art that I immediately fell in love with it. The concept was great and the execution was flawless.

The concept had a very artistic tint of humor in it. I immediately sat down to create the artwork in Photoshop. The result was pretty impressive and so I decided to share it with you guys and I hope you like it and you can provide some suggestions too.

I’m not quite sure whether to brand this as a ‘Surreal’ artwork, but I think this is an interpretation of might have been a dream, but for the kitten, its obviously a nightmare.

Therefore, in this tutorial, I shall walk you through creating an awesome out of bounds photo manipulation. Here are the prerequisites that is required for the successful completion of the tutorial. I also have added the PSD file, in case you want to edit and tinker with it.

DISCALIMER :

This is not intended to act as a tutorial exactly, but just as a walk through on my interpretation of how this artwork was created. I do not consider this as my own. I have dropped in a line to the artist asking for his permission to recreate his artwork and I hope he obliges.

I have merely written this tutorial so that we can learn some really cool features of Photoshop and understand it better. If you have indifferences with my thoughts on this, please feel free to contact me.

For more information on copyrights of artists and their works, please read the document in Deviant Art : Copyright Policy

Tutorial Details:

Difficulty : Intermediate
Duration : 1 hour
Tools Used : Photoshop CS3

Stocks Used:

Room : ~blontj of DeviantArt

Picture Frame : ~malchik stock

Shark : ~wrydgrendal

Kitten : ~lugburzoxay

Cloud : ~jotamyg

Water Fall Brush Set : Readhead Stock

Water Splash Brush Set : Brusheezy

Puddle stock image : Rosaline Stock

Preview of Final Image:

Before starting the tutorial. I am presuming that you are quite familiar with basic commands in Photoshop and hence I will clearly explain the relevant and most important elements or adjustments that I make and for all the minor details, I shall explain it in words without screen shots. I have presented them in a down-to-earth language so I’m pretty sure you will cruise through the tutorial. I hope you can forgive me for this lack of commitment :) However, I have tried my best to keep the tutorial as detailed as possible. This tutorial is mainly intended to highlight the advantages of the adjustment layers and how important they are while creating some intense photo manipulations. So, Lets move on.

STEP 1:

Download the Room Stock image and Paste it in your document. Now download the Picture frame and open the PSD file after unzipping it and paste the frame in your document. Using the Transformation Tool (Click CTRL + T), rotate the frame as shown below

Step 2: Adjusting the contrast of the Frame

The frame looks too bright and out of contrast to be fit into such a dark room. So, let us meddle with the brightness, saturation and pretty much everything.

First, Create a ‘CURVES’ Adjustment layer. This is can be done as follows. Below the Layer’s Palette, click on CREATE NEW FILL OR ADJUSTMENT LAYER, the small icon that looks like a circle (half black and half white) and select CURVES.

Now, adjust the settings as shown below :

ADDING A CLIPPING MASK:

If you notice, the entire image (including the room) has been adjusted but we want only the frame to get adjusted. So, we need to ALT + Click between the CURVES Layer and the FRAME Layer (this will add the curves layer as a clipping mask)

Alternatively, you can RIGHT CLICK on the adjustment layer and select ‘CREATE CLIPPING MASK‘.

The frame still seems a bit colorful, so let us add a Hue/Saturation adjustment layer in the same way we added the Curves Layer. Set the Saturation level to -53. After setting the saturation, add a Clipping mask for this layer too.

Now, the frame still looks a bit bright, so let us add a LEVELS Adjustment Layer. This layer darkens the dark areas even more thus providing a depth to the image. Use the following settings or you can experiment with it, until you feel you get the right one.

I also added a Exposure Adjustment layer, as I wasn’t satisfied with the result after the Levels Adjustment. This is not necessary but its left for you to decide :)

This is how the frame looks at this point of time.

Now, I hope you kept on clicking ALT + Click (Creating Clipping masks) after you added every adjustment layer. Take a look at my Layers Palette for reference.

STEP 3 :

Now grab the Shark Illustration and Open it using Photoshop. As you can see, we need to EXTRACT the shark from its blue background. There are so many ways to achieve this but I prefer to use the most flexible one, PEN TOOL. It takes a lot of time to extract the image from its background using the PEN TOOL but it is definitely worth it.

So, using the PEN TOOL (P) start creating anchor points around the boundary of the shark. Make sure the options it set to ‘PATHS‘. You can also use the Rubber Band Feature for an added advantage.

Once you finish creating a path around the shark, right click and select ‘MAKE SELECTION‘ and use 0.5 as feather radius. Now Invert the selection (SHIFT + CTRL + I) and press DELETE to remove the background.

Now, copy the shark and paste it onto our document. Now, we need to create the image as if the shark is coming out of the Picture Frame, so as to depict the ‘Out of Bounds’ Illustration. So, carefully place the shark as shown below

Now, obviously we need to remove the tail and the fin of the shark. So, using the PEN TOOL again, let us create the selection as shown below. You need to imagine how it will look when the shark is about the jump out of the frame :) I reduced the opacity of the shark image to get a better selection view.

Now, right click and MAKE SELECTION. Invert the selection(SELECT > INVERSE) and Click on ADD LAYER MASK (Below the Layer’s palette) OR you can also just delete the selection. Either way, make sure it looks something like this:

As you can see, using a layer mask, you don’t destroy the original image but just mask certain areas of the image. This is how my layers palette looks at this point of time.

STEP 4: Adjusting the Shark image

Now comes the tricky part. The one thing that makes any photo manipulation work awesome is the lighting and the contrast of the image and the elements. If these are perfected with precision, it will blend with the background seamlessly and will never look like it is manipulated.

As this is my first photo manipulation tutorial, I have tried a lot of experimentation and have narrowed down my choices to these adjustment layers and settings. If you think it can be improved, please let me know and I shall work on it.

Let us add a Hue/Saturation Layer with the following settings. Do not forget to add it as a clipping mask so that only the shark image is edited and not the entire document.

Now add Levels, Brightness, Curves adjustment layers with similar settings as shown below.

This is how my layers palette looks at this point of time. I also added a SOLID COLOR adjustment layer with a color : #131313 and set the blending mode to Soft Light and Opacity to around 30%. This will give a gray color contrast to the shark image

STEP 5:

Now, grab the cloud Stock image and paste it onto the document. Using the Transform tool, rotate the cloud image to match that of the frame.

Using the Polygonal Lasso Tool, create a selection as shown below. This is to create a landscape in the picture frame, so that to give an idea that the shark is swimming or something :P

Now, Invert the selection (SHIFT + CTRL + I) and delete the part of the cloud image which does not belong to the frame. Now, add a Gaussian Blur of around 8 px radius. (FILTER > BLUR > GAUSSIAN BLUR)

STEP 6:

Let us now create a drop shadow for the frame. Just double click on the frame layer and select DROP SHADOW and apply the following settings.

The shadow doesn’t look as realistic as it should be. Here are a few elements that are missing and which I spotted.

STEP 7:

1) To add another drop shadow on the left, I duplicated the ‘FRAME’ Layer and set the color overlay to black. Then, I added a Gaussian Blur of around 10px and slightly re positioned the shadow using the Transform Tool (MOVED IT)

2) I also did the same for the Shark as well, duplicated the SHARK Layer and added a color overlay of Black and applied a Gaussian Blur Filter and moved it a bit towards a left.

3) Using the BURN TOOL, I applied some burns on the frame near the area where the shark is about the leap :)

STEP 8: Adding the cute kitten

Download this Kitten image and open it in Photoshop and Using the PEN TOOL, extract it from its background. Make sure your path is a bit inside the boundary of the image you want to extract, to avoid unnecessary bits of background being extracted too. This process is similar to the extraction of the SHARK image.

Now, We need to adjust the lighting, contrast and stuff. We will add adjustment layers, just like we added for the SHARK and FRAME layers.

These are the adjustments that I made. You can follow the same as well.

This is how the image looks after the adjustments.

STEP 9:

Now, we need to add a shadow where the kitten stands and darken some layers to create a realistic lighting effect.

To add a shadow, click on the ELLIPSE TOOL and set the option to SHAPES and create an ellipse. Now, go to FILTER > BLUR > GAUSSIAN BLUR and apply a 5 px blur as shown below.

Now, Using the BURN TOOL and setting the range to MIDTONES, brush the part of the feet which is closer to the ground.

STEP 10:

Let us now add the water splash effect. Grab the Water Fall Brushes from here and load them onto your Photoshop document. Create a new layer and using the Brush Tool, add a water fall just below the shark. You may have to remove certain parts of the water fall using the PEN TOOL method we discussed above.

Now, Grab these Water Splash brushes and add some water splash in a new document to create the splash effect where the shark is coming out of the frame.

Then, download this puddle stock image and paste it on the document. Move it down so that it appears on the floor. Desaturate the puddle image, Set the Blending mode to SCREEN, and an opacity of around 50% and using a Transformation tool, change the perspective of the puddle to match that of the floor. Using the eraser with soft brush, erase certain parts of the image. Use the below image for reference

At this point of time, the image looks something like this:

STEP 11 : Playtime

Now, comes the interesting part in the manipulation. This effect was inspired from a tutorial written by one of my favorite artist, Constantin Potorac of PSDTUTS. It creates a montage appearance in easy steps.

If you want to know the terms of usage, please read this document on PSDTuts.

Click on CHANNELS in the layers palette. Select the Green Channel and press (CTRL + A) then go to Edit > Copy. Select the Blue Channel and go to Edit > Paste and then select the RGB Channel. This adds a very surreal appearance for the image.

STEP 12:

The image appears a bit bright, so let us add a level adjustment layer to rectify that. Use the following settings.

Create a new layer and add a BLACK to TRANSPARENT Radial Gradient to darken the corners of the room and to add a directional spot light effect.

Now, Merge all the layers (FLATTEN) by selecting all the layers and pressing SHIFT + CTRL + E and duplicate the layer by pressing CTRL + J.

Now, Its all about minor editing. Go to FILTER > OTHER > HIGH PASS and apply a filter on the dupicated image. Set the blending mode to OVERLAY and set the opacity to around 20%.

One of the main reasons, I have used the High Pass filter technique is because it works so well at sharpening images. Areas in the image which are not an edge are left untouched. The only areas that have sharpening applied to them are the edges, which is exactly what I need to give a detailed yet fantasy appearance for my image. Sometimes, applying the Smart Sharp Filter also works, but not as good as the HPF and moreover you don’t have to get confused with many options and parameters :) So this makes our job easier.

This is the final result. Feel Free to download the PSD and start editing and experimenting. Click on the image for a larger and a more detailed look.

surreal photo manipulation

Well, we have come to the end. Hope you enjoyed the tutorial as much as I did. This is my first tutorial on Photo manipulation, so there are bound to be some errors in the lighting and contrast as we can see clearly, it is not that perfect. But, still there are lots we can learn from this tutorial. I am open to any kind of suggestions and critiques. So, feel free to drop in your thoughts and opinions. Thank you

free psd download photo manipulations

As this is a derived artwork, you are not authorized to resell, redistribute or claim this file as your own. Feel free to experiment with it and learn. Sharing is Caring so remember always to attribute to the original author. Thanks for reading this article.

Download the testking 350-001 design tutorials to learn how to create user friendly web layouts. Become expert using testking SY0-201 live demos and expert testking 70-680 design guides.

Comments
69 Responses to “Create a Out of Bounds Surreal Photo manipulation in Photoshop”
  1. Marco says:

    Holy damn, that’s pretty sweet mate, well done! Really like the idea, and the outcome makes it even better. Keep up the great work!
    .-= Marco´s last blog ..jHTML-Ipsum: HTML Ipsum using a jQuery plugin =-.

  2. Rich, this is a quite good looking photo manipulation! Outcome is awesome.
    .-= Nikola Lazarevic´s last blog ..Five of the Best Product and Industrial Design Talks on TED =-.

  3. Iruhdam says:

    The technique is great.. :)

    like the way you used High pass filter.. :)

  4. ximi says:

    Amazing piece you created there! Nice attention to the detail!
    .-= ximi´s last blog ..50 Extremely Delicious Examples of Food Photography =-.

  5. Nicely done Richie. Great technique and outcome!
    .-= Shawn Ramsey´s last blog ..A Handful Of CSS Trends And How To Use Them =-.

  6. this is a good manipulation Rich – thanks for sharing this with us

    : )
    .-= Digital Art Empire´s last blog ..50+ Supremely Elegant & Fresh WordPress Themes =-.

  7. Rocky says:

    Wow this is nice photo manipulation and final outcome is great.. Nice work :)
    .-= Rocky´s last blog ..Amazing Examples of Vexel Artwork =-.

  8. David Cox says:

    It’s pretty good rich. Maybe a bit more splash where the shark is popping out, but well done.
    .-= David Cox´s last blog ..Celestial Lights =-.

  9. Nice photo manipulation tutorial Richie… Keep up the good work :-)

    -deepu
    .-= Deepu Balan´s last blog ..Geeky Girls – Showcase of 50+ incredibly talented female web designers =-.

  10. Mihai O. says:

    Great tutorial Richie!
    .-= Mihai O.´s last blog ..Burning City in Adobe Photoshop =-.

  11. Aravind says:

    GOOD WORKS…..
    .-= Aravind´s last undefined ..If you register your site for free at =-.

  12. Richie says:

    Thanks a lot guys. I appreciate your comments and value them a lot. Will create more such awesome stuff in the coming weeks. So stay tuned :)

  13. John says:

    This looks like another tutorial I’ve seen with a couch and a bird cage instead of the shark.

  14. Nicely done Rich. Thanks
    .-= Eren Goksel´s last blog ..Create an Impossible Triangle Illustration =-.

  15. Violet says:

    I was going to say the same – that it is very similar ti the tut on psd tuts+ – But as you say just the room stock is the same

    I like that that piece (posssibly – I could be wrong) has been taken as inspiration yet darted off in a completely different direction.

    And that you have reverse engineered it to create the tutorial – Kudos

    Great work – keep it up

  16. shabnam says:

    what a creation!!! I love manipulation!! lol

  17. Blogartz says:

    Great tutorial, thanks for sharing this with us.

  18. PSO says:

    Very realistic.. Congrats for good work
    .-= PSO´s last blog ..Your Very Own Home-Grown Phoenix =-.

  19. Shinfo says:

    Uh, no… not just the stock is the same, the concept is the same. Exactly the same. Don’t get me wrong, the outcome is great but all you really did was remake a PSD Tuts tutorial.

  20. It was really gr8 post!
    thanks for sharing…
    I love it! :)

  21. Reynaldo Villas says:

    nice tutorial. im just a begginner in photoshop but iam able to follow the steps. tnx.

  22. wael says:

    gooooooooooooooooooood

  23. D-oNe says:

    Very well explained on the details and easy to follow and the final result just amazing…
    Thanks for sharing this with us… hope to see more like this :)

  24. This is an awesome tutorial. I’ve been wanting to look deeper into photo manipulation. Thanks!

  25. PsdDude says:

    I saw this theme many times but this is so funny! thanks for the tut!

  26. csabi says:

    Hi! I just love your tutorial! Congratulations!
    I know this is not the best way to say it, but I`we just opened a tutorials indexing website and I would like to ask you to submit your tutorials or to publish using our Publishing system, it will bring you some extra traffic
    Please give a chance for my website: http://www.tutorialswindow.com

    Thanks!

  27. 3ds max says:

    one of the coolest photoshop tutorials, the shark looks kinda funny for me, it’s smiling :D
    Thanks for posting

  28. One of the best photoshop tutorials i ve ever seen ! Thanks for sharing.

  29. I absolutely love the finished product – I haven’t taken the time to run through the tutorial (yet!) but the skin on the shark looks fantastic – and so lifelike.

  30. That shark’s gonna get it. That shark’s gonna have more scars when that kitten is finished with it. I love the outcome. I love every step done in this tutorial. I love this creativity and idea.

  31. Decent little beginner’s tutorial mate! nice work.

  32. Bill says:

    I Love Photoshop, because it is making our lives more colorful, thanks for the nice tutorial.

Trackbacks
Check out what others are saying...
  1. Social comments and analytics for this post…

    This post was mentioned on Twitter by Richbugger: Create a Out of Bounds Surreal Photo manipulation in Photoshop http://goo.gl/fb/BC7Dm

  2. Create a Out of Bounds Surreal Photo manipulation in Photoshop…

    I shall walk you through creating an awesome out of bounds photo manipulation….

  3. Create a Out of Bounds Surreal Photo manipulation in Photoshop | Richworks…

    I shall walk you through creating an awesome out of bounds photo manipulation…

  4. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  5. Create a Out of Bounds Surreal Photo manipulation in Photoshop…

    The concept had a very artistic tint of humor in it. I immediately sat down to create the artwork in Photoshop. The result was pretty impressive and so I decided to share it…

  6. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  7. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  8. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  9. [...] View the tutorial Stay up-to-date with Graffi – subscribe to the RSS feed! [...]

  10. [...] layers and how important they are while creating some intense photo manipulations. So, Lets move on.continue Share on Facebook var button = document.getElementById('facebook_share_link_2188') || [...]

  11. [...] Tutorial – Create an ‘Out of Bounds’ Surreal Photo Manipulation in Photoshop [...]

  12. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  13. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  14. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  15. [...] Create an Out of Bounds Surreal Photo Manipulation in Photoshop [...]

  16. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  17. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]

  18. [...] CREATE A OUT OF BOUNDS SURREAL PHOTO MANIPULATION IN PHOTOSHOP [...]

  19. [...] CREATE A OUT OF BOUNDS SURREAL PHOTO MANIPULATION In this tutorial, artist will walk you through creating an awesome out of bounds photo manipulation. Here are the prerequisites that is required for the successful completion of the tutorial. He also have added the PSD file, in case you want to edit and tinker with it. [...]

  20. [...] Create a Out of Bounds Surreal Photo manipulation in Photoshop [...]



Leave A Comment

You must be logged in to post a comment.