A fellow called kakapo asked me to create a button with Imagick. He had an image of the button and a Photoshop tutorial but unfortunately the tutorial was in Chinese. My Chinese is a bit rusty so it will take a little longer to create that specific button ;)

The button in this example is created after this tutorial http://xeonfx.com/tutorials/easy-button-tutorial/ (yes, I googled "easy button tutorial"). The code and the button it creates are both very simple but the effect looks really nice.

Here we go with the code:

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. /* Create a new Imagick object */
  4. $im = new Imagick();
  5.  
  6. /* Create empty canvas */
  7. $im->newImage( 200, 200, "white", "png" );
  8.  
  9. /* Create the object used to draw */
  10. $draw = new ImagickDraw();
  11.  
  12. /* Set the button color.
  13.    Changing this value changes the color of the button */
  14. $draw->setFillColor( "#4096EE" );
  15.  
  16. /* Create the outer circle */
  17. $draw->circle( 50, 50, 70, 70 );
  18.  
  19. /* Create the smaller circle on the button */
  20. $draw->setFillColor( "white" );
  21.  
  22. /* Semi-opaque fill */
  23. $draw->setFillAlpha( 0.2 );
  24.  
  25. /* Draw the circle */
  26. $draw->circle( 50, 50, 68, 68 );
  27.  
  28. /* Set the font */
  29. $draw->setFont( "./test1.ttf" );
  30.  
  31. /* This is the alpha value used to annotate */
  32. $draw->setFillAlpha( 0.17 );
  33.  
  34. /* Draw a curve on the button with 17% opaque fill */
  35. $draw->bezier( array(
  36.                     array( "x" => 10 , "y" => 25 ),
  37.                     array( "x" => 39, "y" => 49 ),
  38.                     array( "x" => 60, "y" => 55 ),
  39.                     array( "x" => 75, "y" => 70 ),
  40.                     array( "x" => 100, "y" => 70 ),
  41.                     array( "x" => 100, "y" => 10 ),
  42.                  ) );
  43.  
  44. /* Render all pending operations on the image */            
  45. $im->drawImage( $draw );
  46.  
  47. /* Set fill to fully opaque */
  48. $draw->setFillAlpha( 1 );
  49.  
  50. /* Set the font size to 30 */
  51. $draw->setFontSize( 30 );
  52.  
  53. /* The text on the */
  54. $draw->setFillColor( "white" );
  55.  
  56. /* Annotate the text */
  57. $im->annotateImage( $draw, 38, 55, 0, "go" );
  58.  
  59. /* Trim extra area out of the image */
  60. $im->trimImage( 0 );
  61.  
  62. /* Output the image */
  63. header( "Content-Type: image/png" );
  64. echo $im;
  65.  
  66. ?>

And here is a few buttons I created by changing the fill color value:

red

green

blue

Bookmark and Share