ImageMagick Gradient with weighted fading (which color has highest percent of visibiity)

Posted on 2011-10-09
Last Modified: 2013-11-08
This command properly draws a 1 pixel x 100 pixel green to transparent gradient which is the echo'd to the screen.

exec ("convert -size 1x100 gradient:green-none ".$_SERVER['DOCUMENT_ROOT']."/temp/FAFAFA_trans2.png");
echo "<img src='/temp/FAFAFA_trans2.png' width='100' height='500'>";

However, it's a 50/50 bleed of green turning into transparent at the end.
I'm looking to have that transparency fade out much sooner. more like a 20/80 gradient.  How can I create such an 'on the fly' gradient image weighting the strength of one color vs another.


Question by:Jay Lepore
    LVL 3

    Expert Comment

    by:Pedro Chagas
    Hi, can you show a image that show what you want?

    Author Comment

    by:Jay Lepore
    Yes, Please have a look at this link:
    I have created two simple gradients.  The first one was actually created using the code above ie;
    exec ("convert -size 1x100 gradient:green-none ".$_SERVER['DOCUMENT_ROOT']."/temp/FAFAFA_trans2.png");
    echo "<img src='/temp/FAFAFA_trans2.png' width='100' height='500'>";

    However, I cannot find an example in the Imagemagick documentation showing how I might adjust the length of the green vs the transparent.  So for instance, if I am creating a 100 pixel gradient of green and white, what if I wish for 20% to be green and 80% whilte or something like that.  

    Does that make it more understandable ?

    LVL 3

    Expert Comment

    by:Pedro Chagas
    LVL 40

    Expert Comment

    by:RQuadling covers a lot of options and describes the limitations of the gradient option. may be more on what you are looking for.

    Using ...
    convert -size 100x100 gradient: -sigmoidal-contrast 1,10% gradient_sigmoidal_1_10.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,20% gradient_sigmoidal_1_20.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,30% gradient_sigmoidal_1_30.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,40% gradient_sigmoidal_1_40.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,50% gradient_sigmoidal_1_50.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,60% gradient_sigmoidal_1_60.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,70% gradient_sigmoidal_1_70.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,80% gradient_sigmoidal_1_80.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 1,90% gradient_sigmoidal_1_90.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,10% gradient_sigmoidal_6_10.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,20% gradient_sigmoidal_6_20.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,30% gradient_sigmoidal_6_30.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,40% gradient_sigmoidal_6_40.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,50% gradient_sigmoidal_6_50.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,60% gradient_sigmoidal_6_60.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,70% gradient_sigmoidal_6_70.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,80% gradient_sigmoidal_6_80.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 6,90% gradient_sigmoidal_6_90.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,10% gradient_sigmoidal_9_10.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,20% gradient_sigmoidal_9_20.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,30% gradient_sigmoidal_9_30.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,40% gradient_sigmoidal_9_40.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,50% gradient_sigmoidal_9_50.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,60% gradient_sigmoidal_9_60.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,70% gradient_sigmoidal_9_70.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,80% gradient_sigmoidal_9_80.jpg
    convert -size 100x100 gradient: -sigmoidal-contrast 9,90% gradient_sigmoidal_9_90.jpg

    Open in new window

    i've produced a set of images. I've zipped them together.
    LVL 40

    Accepted Solution

    OK. I missed a bit.

    Using the sigmoidal images, you use that as an alpha overlay on top of the solid green image.

    I THINK this may be what you are looking for...

    convert -size 100x100 canvas:green xc: gradient: -sigmoidal-contrast 2,80% -composite green_2_80.png

    Open in new window

    Green with a gentle fade to transparent.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Suggested Solutions

    This article shows how to convert a multi-page PDF file into multiple image files, with one image file created for each page of the PDF. It does this by utilizing an excellent, free software package called GraphicsMagick. The solution is amazingly s…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    The goal of this is to tech the user how to export photos out of Lightroom and the different options they have. Select which photos you want to export : Select where you want to export and with which options : Export :
    Video by: Kyle
    After watching the Introduction to GIMP and additional tools to use in GIMP we are shown how to utilize multiple tools to create a 3D effect image.

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now