*HELP* PHP - How to recolour a png image?

Discussion in 'PHP' started by BrandonSolutions, Dec 15, 2009.

  1. #1
    For my website, I want to be able to automatically recolour a pet for my website using hex codes and PHP. But I don't know where to start.

    [​IMG]

    Basically on my website you are going to be able to create virtual pets. When you create the pet, I want a random color for the pet image to be generated like the pet I posted above. I have a fully layered PSD version of the pet, if that helps, and I will add reputation to anyone who helps me.
     
    BrandonSolutions, Dec 15, 2009 IP
  2. dorarpol

    dorarpol Peon

    Messages:
    534
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    heyy...u can go to photoshop to do this,use pick tools and make some outline there on new layers :)
     
    dorarpol, Dec 15, 2009 IP
  3. BrandonSolutions

    BrandonSolutions Peon

    Messages:
    142
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I know how to recolour in photoshop, but that is not what I want to do. I want to be able to randomly generate colours from the png, that way there can be lots more colors of a pet available on our site.
     
    BrandonSolutions, Dec 15, 2009 IP
  4. dorarpol

    dorarpol Peon

    Messages:
    534
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ermm..what ur site?still need to see what u means
     
    dorarpol, Dec 15, 2009 IP
  5. BrandonSolutions

    BrandonSolutions Peon

    Messages:
    142
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The URL of the site doesn't matter. Nothing is coded. But here is another image to give you a better idea of what I mean. Except I want to randomly generate the pet color, not select it like in this image. [​IMG]
     
    BrandonSolutions, Dec 15, 2009 IP
  6. dorarpol

    dorarpol Peon

    Messages:
    534
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    my friend say u have to try with flash colour generator?like colortoy?
     
    dorarpol, Dec 15, 2009 IP
  7. BrandonSolutions

    BrandonSolutions Peon

    Messages:
    142
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I found this tutorial that I am going to look through: http://www.phpied.com/image-fun/ If you know any better methods, please let me know.

    Don't know anything about flash colour generator.
     
    BrandonSolutions, Dec 15, 2009 IP
  8. dorarpol

    dorarpol Peon

    Messages:
    534
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
  9. dorarpol

    dorarpol Peon

    Messages:
    534
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    if not,dunno again,im not a good one on site :)
     
    dorarpol, Dec 15, 2009 IP
  10. BrandonSolutions

    BrandonSolutions Peon

    Messages:
    142
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Not really. They don't show the source of there codes.
     
    BrandonSolutions, Dec 15, 2009 IP
  11. dorarpol

    dorarpol Peon

    Messages:
    534
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
  12. dorarpol

    dorarpol Peon

    Messages:
    534
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #12
    dorarpol, Dec 15, 2009 IP
  13. shiva9675

    shiva9675 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    hmm.. here is something you can try.. since you are working on photoshop, you could create layers of the different colors and test for various colour variations. consider there are 2 layers.
    Layer 1.: which is transparent over a certain area alone. for simplicity let us say a simple circle of dia 4 inches and ithas another circle inside it which is 1 inch. now the 1 inch circle layer is below the 4inch circle. the 4 inch circle is transparent only over the area on top of 1 inch ( you can use mask controls to do that ).

    Layer 2: which is also transparent but contains nothing ( just a layer). now you can simply set the background of this div to a color using css in the beginning.

    using javascript you can create various layers too ( using z-index attribute ). now place the 2 layers one over the other i.e, 2 divs with the same position attributes. now you could use one of the color selector scripts and choose to change the background color of the second layer. since the 2 are transparent, the color comes up to the top.

    I am not sure of flash. but i think flash layers also work on similar lines ( not sure.. i dont use flash and have very minimal exp with flash.)

    I am not very sure how complicated it can be on the website app scenario.. but if it is some minimal colors, i think we can accomplish through the transparent pngs images.. It is very similar to using stencils to accomplish somethings. anyway let me know how it comes up :)

    Cheers.
     
    shiva9675, Dec 15, 2009 IP
  14. shiva9675

    shiva9675 Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    sorry had to try it out to make things sure.. the pet image has a lot many gradients(intermediate color variations.).. so it may not work simply using CSS.. sorry about that.. i think you will have to manipulate it as a image itself which can be complex.. may be flash can make your work easier..

    Note in the example you have stated, you have solid colored areas rather than variations.. I hope that helps..

    Cheers
     
    shiva9675, Dec 15, 2009 IP
  15. taminder

    taminder Peon

    Messages:
    581
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I guess you could use this:

    http://www.flooble.com/scripts/colorpicker.php
    Code (markup):
     
    taminder, Dec 15, 2009 IP
  16. Wogan

    Wogan Peon

    Messages:
    81
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    0
    #16
    What you're looking for is a system that does this:

    http://www.degraeve.com/color-palette/

    You could probably set up a faux "API" to send requests to the page, then get the palette results back.

    I ran it on your wolrage/orange picture - check the attachment.
     

    Attached Files:

    Last edited: Dec 16, 2009
    Wogan, Dec 16, 2009 IP