Page 1 of 1

Draw a rotated banner on an image

Posted: 2016-11-24T01:59:51-07:00
by Riot__
Hi,

I'd like to draw a rotated banner on an image. What I call a banner is a rectangle filled with a color and a text centered inside it.
Want I would like to achieve is:
Image ==> Image

For now, I'm only able to generate a banner at the bottom of the image, but with no rotation:

Code: Select all

convert -background red -fill black -gravity center -size 192x30 caption:"Beta" original.png +swap -gravity south -composite out.png
Do you have any idea?

Re: Draw a rotated banner on an image

Posted: 2016-11-24T09:16:30-07:00
by GeeMack
Riot__ wrote:For now, I'm only able to generate a banner at the bottom of the image, but with no rotation:
While there are several ways to go about this sort of thing, you'll get better answers if you provide the version of IM you're using and let us know which platform or OS you're running it on.

Here are a couple of concepts that might get you going in the right direction. These examples use IM 6.9.6 on Windows. First, you could rotate the input image 45°, create the caption, apply it to the input image, then rotate the whole thing back -45°, something like this...

Code: Select all

convert input.png -virtual-pixel none -background none -distort SRT 45 ^
   -background red -fill black -size 192x30 -gravity center caption:"Beta" ^
   -gravity south -geometry +0+20 -composite -distort SRT -45 result.png
Or you could create and rotate the overlay inside parentheses, then composite it on the input image like this...

Code: Select all

convert input.png ( -background red -fill black -gravity center -size 192x30 caption:"Beta" ^
      -background none -virtual-pixel none -rotate -45 -geometry +40+40 ) -composite result.png
The exact commands and the best approach would depend on several things. Is this something you need to do only once or many times? Are all your input images the same size? Is the text on the overlay always the same? There might be more versatile ways to go about it, maybe more complicated, but possibly more suited to your need.

Re: Draw a rotated banner on an image

Posted: 2016-11-24T10:11:07-07:00
by Riot__
Hi GeeMack,

Thanks for your reply! I'm using IM 6.8.8 on Linux.
My goal is to write a script to generate Android app icons, and I would provide:
  • an input image (500x500)
  • a caption title (Beta)
  • a list of resolutions (192x192, 144x144, ...)
The script will resize the input image to the given resolutions and apply the given caption.

I'll try your examples and let you know if it works like I expect.

Thanks again,
Regards.