Preview

Design a Photo Manipulation from Sketch to Color

Jul 17th in Designing by Emil

This tutorial will describe how to make a colorful photo manipulation using only four stock photos and a texture background. We'll look at using the Pen Tool, making colorful rainbow designs, and showing the correct way to pick out stocks to use in our photo manipulation.

Author: Emil

Emil Agarunov is from Brooklyn, New York. He has been using Photoshop for around four years and has been using Illustrator lightly for the past couple of years. His main techniques are vector based images and photo-manipulations.

Final Image Preview

Before we get started, let's take a look at the image we'll be creating. Click the screenshot below to view the full-size image. As always, the layered Photoshop file is available via our PSDTUTS Plus membership.

Final Click

Introduction

This tutorial demonstrates a simple way to transform a creative idea into a great work of art. The first thing you want to do is get inspired. The way I did this was looking at great graphic websites at random. After I looked around, the concept for this image came to me, so I decided to make it. Once you have an idea, your next step is to look for stock images to use in your photo manipulation. I looked for all my stock images on SXC. They have a great selection of images that are extremely large and have good resolution. I also used TextureKing for one image as well.

I picked out about fifteen images, you should definitely do the same thing because the more the better. Once you have your stocks picked, you should look through them all. Then narrow down your selection to around three or four depending on what your design is.

When picking out stock images make sure they can be easily rendered. Stock images that are blurry in areas are difficult to cut out, and they will look like garbage once put on a nice canvas. So make sure to find quality images. The following images were used to make this tutorial: Background Texture Airplane Hand Balloon Book.

Pen Tool Tutorial

One main tool that every Photoshop user should get fluent with is the Pen Tool. Let's review a quick rundown on how to use it. Now if you already know how to use the Pen tool just skip to the next step, otherwise continue on. To get started, click on the Pen Tool. Then use the settings shown below.

Next we click the mouse at the start of a point. Then move the mouse to the end of the point, and then click again. If the shape is curved, or if you want to put a curve on it, you have to hold the left mouse button and move the mouse up and down. Then once you have finished it should look like the first image below, if it is straight.

Now for step two, we will drag our mouse to the middle of the line we have. Then right-click and press Create Anchor Point. Once we've done that you should see a small box on your line. Then hold Ctrl and use the left button to shape the line any way you want. You can see all I did was drag my mouse up from the straight line to make it a curve.

Now for step three, we will connect our loose point that we have to the original point that we started out with. You do this by bringing your mouse to the beginning point. You should see a little circle once you see that you can click to connect them.

Now for the final step, all you need to do is add another Anchor Point just like you did in the second step. Then bring it into the first curve. Now this is just one type of shape you can make. You can make millions of different shapes by messing with the anchor points. Just keep practicing tracing things and making your own random shapes, and you'll get the hang of it. Now we can begin on the actual design.

Step 1

Make sure you've downloaded the Background Texture. Then create a new document by going to File > New. Use the dimensions 1516px by 724px. Then insert the texture into our new file.

If your texture is smaller than your canvas, duplicate it and spread it around the canvas. If you're using the same one as me, it should not be a problem because it blends very well.

Step 2

Let's add some stock images next. The first stock to add should be the focal point of the design. In this case, it's the magical book that brings all its designs to life. Download the Book image. Then cut it out using the Pen Tool, and placed it into your working canvas.

We need to scale down the book. Press Ctrl+T on the the layer with the book image in it. This will bring up the Transforming Options. Then while holding Shift, click on the Diagonal Points, and drag down to make the book smaller. Now when you're doing this, keep in mind that everything should be as proportional as possible. This means that your book should not be bigger than the hand. It should look like a person took a picture of it in real life. Everything is the size it's supposed to be.

Step 3

Let's work on the drawings inside the book. Make sure you've download the hot air balloon, as it make's up one of the drawings. Then cut it out and transform it to make it smaller. Then place it on a page of the book.

Now let's give the balloon image a tilt, so it looks like it's actually in the book. Now select the balloon image layer. Then go to Edit > Transform > Perspective. Then while holding Shift, drag the top and the bottom sides to give it the perspective of being drawn on a book.

Now let's make it look like its actually drawn with a pencil. First get rid of all the color by selecting the layer and hitting Ctrl+Shift+U. Once all the color is gone, grab the the Eraser Tool. Select a nice grunge brush. Then set the Opacity of the eraser to about 40%.

Erase small parts of the balloon until it looks worn out. Then select it again, and go to Filter > Artistic > Colored Pencil. Then put the options as 4-8-25 and press OK. Once we do that, set this layer to Color Burn. This should give a nice effect that looks like someone has drawn it with a pencil. See the results so far below.

Step 4

Add another new version of the balloon image. We'll be using this to show the balloon come to life through a rainbow. Make sure to cut out the balloon. Then scale it down to about the same size as the drawing. Then place it directly above the drawing, and a little to the side, as shown below.

At the bottom of our layers there are about seven small icons. Press the circle that is half black and half white. This will open a list of things for you. Then press Gradient Map, and select the black to white Gradient Map. Place the Gradient Map layer directly above that new balloon image we just made. Then right-click on our Gradient Map layer, and choose Add Clipping Mask. This makes the gradient go directly towards the balloon. It doesn't effect anything towards the rest of our canvas. Now our balloon is black and white with no color.

Grab a soft brush around 100px, or choose a slightly smaller one. Set the color to black. Then select the gradient layer, and brush a little bit on a spot of the balloon where you expect the rainbow to be. This brings some of the original color of the balloon back. This spot will be where the rainbow ends.

Step 5

Now we give it a little depth and add more contrast to the balloon. Grab a Brush, and place its Opacity on 100%. Then selected the 1px Brush. Then use the Pen Tool to trace around the whole balloon. Then right-click, and choose Stroke Path. Set the Brush with Simulated Pressure to unchecked. Then turn the Opacity down to about 69%.

Step 6

Take out our Pen Tool. Then plan the path that you want the rainbow to go. I imagined the path as almost straight, but with a slight curve. After planning, let's start creating the rainbow.

Start from the top of the penciled balloon. Choose a nice vibrant color you would see in a rainbow. I chose a lime green. Then I made a little pipe shape going all the way up to the balloon in the air. Then right-click and press Fill Path. Remember to make a new layer for the rainbow.

Once we have one color, keep adding on more vibrant colors. I used seven different colors: lime green, yellow, orange, pink, light blue, dark blue, and purple. Once I had my rainbow done, I needed it to stand out a bit more. Select the rainbow layer and go to Filter > Sharpen > Sharpen. Do this once or twice depending on your results. This gives a nice sharp effect to your rainbow.

Step 7

Next we'll add an extra effect to our rainbow, and make it look magical. Duplicate our rainbow layer. Select the lower one of the two, and go to Filter > Blur > Gaussian Blur. Use a setting of 4.0. This is a quick effect to help build the aurora around the rainbow.

Step 8

Now we'll add the lighting and shadows of the rainbow. Keep in mind, we need to make it look as realistic as possible. Let's start with the shadows. Add a new layer, and have it be right above our main rainbow. Then take a moderately small soft brush, and add the color black to it.

Then on this new layer, add some black shadows to each color individually. Be sure not to just fill the whole thing with black. Remember to give each color a little bit of black shadow. Then set it to Overlay. Mine looks good to me, but if there is something wrong with yours play with the Opacity.

Next we add the highlights, so make a new layer, and use the same brush. Also, use the same technique, except the color should be white. Then set this layer to Soft Light. Below are my results. The first picture is of the shadows and the second is of the highlights.

Step 9

Let's add more to this magical effect we're going for. Go to our Brush Pallet, and select a 1 pixel Brush. Then grab the Pen Tool. Then use it to stroke out the waves going around the rainbow. Make them colorful. Use the colors from the rainbow to make about four or five easy strokes. Color each one with a different color. Then add an Outer Glow to it. Use the settings shown below.

Now find some Star Brushes. Websites like DeviantArt should have a nice collection of star brushes. Once you have that, make a new layer. Then use a nice colorful brush to add small stars across the rainbow. Then set it to Screen. The results are shown below.

Step 10

Now we'll add to the background of the rainbow. Grab a medium sized soft brush and make a new layer. Then pick one side of the rainbow. In this case, I picked the right side, It has colors like blue and purple. Then on this new layer brush along the edge of the rainbow. Use the colors blue and purple. Now go to the opposite side. It has green and yellow. Do the same thing there.

Now take out the Smudge Brush and use another small soft brush. The Smudge Settings should be set to about 35%-40%. Smudge those colors upward towards the rainbow so it looks like an aura of the rainbow is behind it. Then liven it up. Bring some more color to the rainbow.

Make a new layer over the smudged background. Pick two colors that we see in that smudge that we just made. On the left is yellow and on the right is blue. Take a soft brush and brush a couple of dots over the smudges using those colors. Then set it to Color Dodge.

Step 11

Now this is a simple step to give the balloon some more color. Make a new layer. Then repeat the wavy lines that we added to the rainbow. This time put them around our balloon. Be sure to use vibrant colors that match your rainbow. Remember to use a 1 pixel brush, and to set the Stroke without the Simulated Pressure.

Step 12

Now let's focus on the other half of the design. We need to add in the image of the hand with the pencil drawing everything. Make sure you've downloaded the Hand image. Then cut it out properly, and place it into the document.

Size it down by using Ctrl+T, but remember to not make it too small, or too big. Make it proportional. That is the key for it to look realistic. Then duplicate our hand layer. Select the bottom one of the two hand layers. Then press Ctrl+U and bring the brightness down to make it completely black. Once its all black, select it and go to Filter > Blur > Gaussian Blur. Set it to about 6.0. Then set the layer to Overlay. Then move it to the left a bit to make it look like the shadow of the hand is on the book.

Step 13

Let's create our Airplane next. This step is pretty much a complete repeat of what we did to the balloon. So take the airplane and cut it out. Then place it down on the book. Turn it to black and white and erase. Then add the Pencil Filter, as we did with the balloon.

Now for me the color burn option didn't look so good, so I put it on Pin Light instead. Lastly, add the plane on top, as we did with the balloon. Add a Gradient Clipping Mask and add a small bit of color. Color with a black brush on the gradient layer.

Step 14

Now we add the second rainbow that connects the penciled plane to the real one. This technique is bit different. First, make a new layer. Then go to the Brush Settings, and pick a 3 pixel hard brush. Grab the Pen Tool for this new layer. Make more waves in the form of a rainbow using colors you used in the first rainbow.

Once you have a wavy path going with your Pen Tool, Right-click and choose Stroke Path, but this time remember to keep the Pressure checked. Now you should have a lot of waves going down to the book in the shape of a rainbow. Then take the Smudge Brush and use the same settings as last time. Smudge a little bit on the edge of all the stokes you just made. Then add the Star Brushes just like we did with the other rainbow. Then turn it to Screen. Then select the rainbow and Sharpen it.

Step 15

Ok now we will add some more colorful strokes to the rainbow but we will make them only one pixel. So make a new layer and add them using more vibrant colors. Now for the final step of the rainbow we will make a new layer under all of these rainbow layers. After that lets pick a dark purple color.

Something very dark but not completely black. Then take a big soft brush and brush behind the rainbow to cover the back of the rainbow with this dark color. If it doesn't look good, be sure to drop the opacity a bit.

Step 16

Go find yourselves some nice patterns. If you cant find anything online, do what I did. Go to your Custom Shape Tool and open up all the shapes and try to mix and match shapes that can make for a good pattern. Once you found them, make a new layer and put each shape on a new layer. Arrange together into a nice design. The first picture below is the result.

Merge all the layers together. Then size the shape down by using Ctrl+T, as shown in the second image below. Then duplicate the shape enough times to cover whatever area you are filling. And after that set it to Overlay at around 45%, and then Sharpen it. The last two images below are what the image look like before and after applying an Overlay.

Conclusion

After that make a new layer and go to Image > Apply Image. Then go to Filter > Blur > Gaussian Blur at about 2.0. Then set that Layer to Lighten at 20%.

Lastly, let's make another new layer and then again go to Image > Apply Image. Then go to Filter > Sharpen > Sharpen. And you are done!!!


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. socoduce July 17th

    1st!


  2. Charles Williams July 17th

    Very nice. It almost looks animated.


  3. Jibbs July 17th

    1st :-)


  4. Clint July 17th

    Nice tutorial…not sure about the perspective on the last step


  5. Jibbz July 17th

    i have learned alot from psdtuts and frankly i use alot of techniques i learnt here but recently i dont find these tutorials that fruitful i m not sure if the techniques used arent that creative or the final results are not attractive enough ….


  6. Jeff July 17th

    Cool Tutorial, I never thought of doing something like that before. The rainbow coming from the plane looks amazing. I’ll have to give this one a good go.


  7. David July 17th

    I like this one a lot… great concept. I’d love to see more pen tutorial work… real in-depth use of it as it is such a powerful tool.


  8. abethebabe July 17th

    I really like this, the only thing that bothers me is the the color going from the book to the balloon has a curve that is too sharp


  9. greven July 17th

    Nice Effect. :)


  10. demogar July 17th

    The pattern’s perspective in the last step looks “strange”
    Really nice piece of art :P

    Thanks for sharing


  11. puffgirl July 17th

    fantastic! love it.


  12. Dan July 17th

    Nice.


  13. Nate July 17th

    This is crazy… In a good way.


  14. borromini July 17th

    Nice tutorial and very nice outcome, but you don’t know how shadows works. I think isn’t a problem of perspective but a problem of how shadow go on the book.


  15. Edson July 17th

    I don´t know what is the importance to be first… :-(
    But, nice tut, congratulation.
    I always have a inspiration looking greats job here


  16. BogDinamita July 17th

    Final product looks somewhat boring . oh and the texture’s out of perspective. But honestly, the ideas thrown in this tut… i love ‘em


  17. Constantin Potorac July 17th

    Hehe… great job. I love the ending


  18. smeegy July 17th

    wow! i’ve been looking for this tutorial like forever.
    thanks for sharing! :D


  19. gartsman July 17th

    cluster-fuck. what the hell is going on here?


  20. Fedebut July 17th

    agree with abethebabe, this curve is not good.

    I don´t like the hand too, looks like a floating hand.

    Perdón por mi inglés , pero lo que quiero decir es que la mano esta muy dura recortada, y la curva del arcoiris del Globo, tiene algun nodo extra, que le da algo muy raro.


  21. Photo Pro Direct July 17th

    If ure interested in photoshop ebooks and magazines check photoprodirect.blogspot.com. It worths a try


  22. MONSTER July 17th

    Decent tips.


  23. joeliciouz July 17th

    OH M G … veeeery good effect

    I LIKE IT


  24. Lamin Barrow July 17th

    Fantastic tut, Thanks very much. :)


  25. Wouter July 17th

    wow, never tought it can be so special :)


  26. Felix July 17th

    The composition seems to me a bit inharmonious. I guess its because the perspective of the plain-sketch and the book-texture is incorrect.


  27. Alex July 17th

    This is really nice but the little details that would of made it better just weren’t in it. Perspective is really important in images like this, and although the sketch of the balloon looks good, the sketch of the plane and the pattern are just flat in the image. Shame


  28. Ruben July 17th

    Wow, nice effect! I might try this one out, thanks!


  29. Khaled July 17th

    nice ;)


  30. Matt Radel July 17th

    Like the tut, HATE how people feel the need to comment with “1st”.


  31. MD July 17th

    Thnx :) will try it :)


  32. Danny July 17th

    cool tutorials :)


  33. rybaxs July 17th

    not good… cool tutorials!


  34. Mark Abucayon July 17th

    simple but I will try it later.


  35. zvonko July 17th

    woah….gotta try..thnx


  36. Michael T July 17th

    Awesome tutorial and great effects. I have to try this; thanks.


  37. spasquini July 17th

    Mmh! I do not agree with the positive comments here.

    The image lacks in composition, in more than one part. The rule of the thirds is ignored, here, there is object bad alignment, and the montage effects are really too much evident.

    For me this is a really bad tut, comparing to the usual quality average here on PSDTUTS


  38. Lorenzo Bondioni July 17th

    wooooooow….wonderful tutorial…I LOVE IT!!!


  39. Jared July 17th

    There are a few nice effects achieved in this tutorial, but overall it feels sort of half completed. The texture on the book is not mapped to the contours of the book, so it’s completely unrealistic. Additionally, lighting is not preserved across objects in the composition, such as the book, the hand, and the airplane. A good start, but I’ve come to expect much greater overall attention to detail here at PSDTuts.


  40. chokdidesign July 17th

    i feel strange about this one too…
    though some tricks are cool,

    you implement the respect of perspectives on the pattern on the book…
    it wouldn’t be that much more to do i guess!


  41. Shaw July 17th

    I like this tutorial, it’s simple and effective BUT… in my oppinion, the rainbow coming from the hot air baloon looks tacky?


  42. aGS July 17th

    I like the texture on the Rainbow, allthouh I’ve read the tutorial, I can’t find how to make it look like made of stripes… step 8…


  43. Steffen July 17th

    really cool tutorial. nevertheless i dont really get the effect you achieved on the lines you did with the pen tool. i would love to see a more detailed tutorial focusing on the effect you achieved there. my one is way to flat in comparision to yours.

    that would be awesome


  44. Jan Blažíček July 17th

    Well, altough I really like the idea of such image, it seems a bit out of perspective and those rainbows just don’t fit in this image. Of course it is easy to criticise and complain, but for example I think that the plane should be like flying out from those colours. I don’t really get why it should come from the sketch book to right front part of the wing. Anyway, its great technique that counts, maybe a bit better explanation would help next time.


  45. Gregory July 17th

    The “pencil sketch” aspect is probably the best I have ever seen photoshop produce. So Kudos on that… the pattern on the paper? WTF? Couldnt spend a few more minutes to either… not add it or give it a little perspective to make it look part of the page. A little love on the background with the healing brush would have been good so it doesnt have a couple hard lines and look so titled.


  46. Joefrey Mahusay July 17th

    Great work. I like the book design.


  47. Braden Keith July 18th

    Didn’t scream oh my goodness to me just scrolling through it, but it seems to have good reviews so I may just have to read through it.


  48. Qbrushes July 18th

    love the colours and i agree with some of you that it seems abit out of preceptive.


  49. The Floating Frog July 18th

    In summary, good idea, execution could be better. Teaching someone to be creative is more valuable sometimes than the execution of the final product.

    ORIGINAL CONCEPT + EXECUTION = Best chance of message getting across, wowing the beholder and achieving an awesome, worth while piece of work.

    Create a bad concept and you might as well pack up and become a milk man…

    …Thanks for the tutorial and inspiration ***


  50. Shane July 19th

    thanks for posting - though I’ve gotta admt that the style of the image isn’t to my liking particularly.


  51. angeloff July 20th

    very nice


  52. Pantzini July 20th

    I do not find this useful and/or inspirational as usual.
    I have to say this is kind of a photoshop disaster to me… the hand? the book? the rainbows? I can’t see the point of it.


  53. Aj July 21st

    that’s fantastic


  54. Zenor July 21st

    Great work there.


  55. Jessica July 24th

    There was so not a link
    to the airplane stock image.
    :(

    But this was a great tutorial..
    I love the outcome, it’s totally
    my wallpaper (:


  56. Bunny Got Blog July 24th

    Great info :)


  57. moji July 28th

    cooooool arrangement


  58. mofe July 29th

    Wow! so beautiful! fantastic!


  59. Mr. Tunes July 30th

    i was having fun with it until i got to the pen and rainbow part like some of the other people above. and that’s where i gave up. would like to learn that though.

    i dont know why everyone rips on the final image, if you can learn some neat tricks along the way that’s all that matters.


  60. paresh August 3rd

    nice , thanks for sharing.


  61. projectgrafix August 15th

    Thanks for such detailed explanation! Very nice design.


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name December 1st

Arrow