dcsimg
A Flash Developer Resource Site

Results 1 to 16 of 16

Thread: simple effect: paint peel revealing overlay image?

  1. #1
    a.Bird Zacaboo288's Avatar
    Join Date
    Oct 2005
    Location
    NY
    Posts
    404

    Effect: paint peel revealing overlay image

    Notice: Mac users, please substitute the Ctrl key with your Cmd key.

    This is a free stock photo I found on stock.xchng:


    So far, this is what the layer panel looks like:


    The image is pretty neat, but I want to make it more interesting. I want it to appear as though the white wall behind the peeling paint has an interesting printed image, sort of like a stamp.

    This is the image that I want to "stamp" on the wall, behind the paint, which I also found on stock.xchng:


    You can see that the high contrast of the girl will make a more effective "stamp" effect. Images with wide ranges of grays will have less of a stamp quality and more of a photo effect. It's really up to you, just play around!

    From here (in above image of the girl), Select All (Ctrl + A) and Copy Merged (Ctrl + Shift + C) to copy everything you see on the canvas to your clipboard. Now click on your Channels panel and create a new channel by clicking the page-peel icon (second to right on the bottom of the panel). If you cannot find this panel, go to your menu bar and click the Window menu, and then check Channels. The new channel you created is called Alpha 1 by default. Paste (Ctrl + V) this image into your Alpha channel. Your Channels panel should essentially look like this:


    Ctrl+Click the thumbnail of the girl in the Alpha 1 channel and you now have a mask selection. What this does is make a selection of every pixel based on it's luminance value. If a pixel in the Alpha channel is black, 0% luminance, it will be 0% selected. If white, 100% lum, it will be 100% selected. Middle gray, 50% lum, 50% selected. Et cetera. Learn it. Know it. Live it.

    Since my image is essentially just black and white (whith a bit of gray in between for anti-aliasing) all of the highlights (white) were selected, the shadows were not. But I don't want to print her highlights onto an already white wall, her shadows would look much better. Since I want exactly the opposite of I what I have selected right now, I'm going to Inverse my selection (Ctrl + Shift + I). Every pixel that was 100% selected is now 0% selected. Every pixel that was 50% selected is still 50% selected.

    Click on the RGB channel to make sure all your channels are unhidden except for your Alpha channel, which should automatically hide. With your mask selection still on the canvas, create a new layer in the same document. Hide all other layers except for your new layer. Now use the Paint Bucket Tool (G), select black as your foreground color and with your new layer highlighted in your Layer panel click anywhere on the canvas. Every pixel selected 100% is filled with 100% black; 0% selected filled with 0% black (completely transparent); 50% selected filled with 50% black (not gray, just black but 50% transparent... layers underneath will show through. If can't completely wrap your mind around this right now, don't worry about it. The concept may need to be put into practice several times for it to really make any sense).
    Last edited by Zacaboo288; 10-09-2006 at 12:25 AM.

  2. #2
    a.Bird Zacaboo288's Avatar
    Join Date
    Oct 2005
    Location
    NY
    Posts
    404
    OK. Hide all your layers except for the new one you just painted in to see what you have. Something like this?


    vvv


    Select All, Copy and go to your main document with the peeling paint or what have you. In this document, Paste and resize to taste.


    vvv

  3. #3
    a.Bird Zacaboo288's Avatar
    Join Date
    Oct 2005
    Location
    NY
    Posts
    404
    Now check it.


    vvv

    vvv

    vvv


    Enjoy.

  4. #4
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Nice one, Zac. Thanks for sharing!
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  5. #5
    a.Bird Zacaboo288's Avatar
    Join Date
    Oct 2005
    Location
    NY
    Posts
    404
    Of course, I'm happy to contribute. I don't really ever make these tutorial things, and to be honest I really rushed it so please feel free to PM me or post here any comments or questions.

    In the words of national geographic, "Dare to explore!!!"

  6. #6
    He has risen! lefteyewilly's Avatar
    Join Date
    Mar 2001
    Posts
    2,597
    zac, the only thing i'd ask you to detail for the noobs would be how you went from teh layer mask of the girl to the final version. ....In other words...how did you erase the edges of the girl and still keep the natural shadows of the paint peeling.

    And if you wanted to add an additional adjustment to the tutorial/final image...maybe you could have adjusted the levels of the girl so it matched the lighting of the wall. Because, the image, to me at least, should be a bit doned down/darker than what it shows right now to make it look natural.

    also, just a very minor nitpick...maybe you should specify that the image with the paint peeling is a stock image, not something that was created.

    i know those are all minor things, but i think it'd help for people who visit this thread through a search engine and have no clue.

  7. #7
    a.Bird Zacaboo288's Avatar
    Join Date
    Oct 2005
    Location
    NY
    Posts
    404
    Omg. I just went more indepth with the first post and I'm almost having trouble understanding it myself. Can someone please critique this for me? My brain is fried.

  8. #8
    Senior Member
    Join Date
    Dec 2001
    Posts
    169
    Nice nice.. Thanks for sharing.
    -s7N
    ___________________________________
    time you enjoy wasting, isnt wasted

  9. #9
    the future is here
    Join Date
    Oct 2006
    Location
    dubai,uae
    Posts
    18
    thnx very much man
    my blog
    my forum


    ramoody5...where the future is.......

  10. #10
    Senior Member Black_phoenix's Avatar
    Join Date
    Oct 2000
    Location
    Leeds, UK
    Posts
    2,194
    Nice work! love the cracked paint image.

    bp

  11. #11
    Senior Member
    Join Date
    Jul 2006
    Location
    San Jose, CA
    Posts
    334
    Very nice.
    I (Love | Hate) Flash.
    ----
    Save a version back so others may help you!

  12. #12
    the future is here
    Join Date
    Oct 2006
    Location
    dubai,uae
    Posts
    18
    hi

    I dont know why it didn't work with me!!!!!
    ]
    specially the last part in the layer mask....plz explain...

    thnx
    my blog
    my forum


    ramoody5...where the future is.......

  13. #13
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Actually, it would be a lot easier if you took the time to explain exactly where you think it went wrong. Precisely what part are you having trouble with?
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  14. #14
    the future is here
    Join Date
    Oct 2006
    Location
    dubai,uae
    Posts
    18
    well first of all the gradient... I mean how did u make the girl coloured???

    then secondly... it did not become l(under the wall paint!!!)

    and what is the mask layers job any way....

    thnx very much
    my blog
    my forum


    ramoody5...where the future is.......

  15. #15
    the future is here
    Join Date
    Oct 2006
    Location
    dubai,uae
    Posts
    18
    hello??
    can u answer me...
    my blog
    my forum


    ramoody5...where the future is.......

  16. #16
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    I wanted to give Zac a chance to take it, but I'll go ahead and give you my answer.

    So you've got the girl, and now you just need to add the gradient and layer mask, right? There are a number of different ways to do the gradient. The way I prefer is to use a Gradient Overlay Layer Style. This will let you apply a gradient and tweak it to taste without a lot of undoing. Once you get the gradient the way you want it...and at this point you won't be able to see anything beneath it...create a new layer, select both the new layer and the layer with the gradient layer style, then merge them. This will 'flatten' your layer style and make it part of the layer itself instead of being applied on top of it.

    The last thing would be to choose a Blending Mode...Zac used Multiply, but I ended up using Darken when I just tried it out...and reduce the opacity. Again it's a matter of personal taste and preference. Zac's layer was 76% and mine ended up looking good at 56%. That just goes to show you there are a ton of different ways to do just about anything.

    Now that you've got your gradient layer set up over the peeling paint image, go to Layer>Layer Mask>Reveal All. It won't look like anything happened because the mask is revealing everything in that layer, but your mask is now active and you will notice that your foreground/background colors change to black and white. Now you want to use the Brush Tool and black paint to 'erase' everything that is outside the interior where the paint has peeled away. If you take away too much, just hit 'X' to switch the foreground/background colors and paint it back in. The reduced opacity and the blending mode of the gradient layer should allow the shadows of the peeling paint to show through on their own so you shouldn't have to worry about those at all.

    Does that help clear things up?
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center