Logo designer help needed

[vbsaltydog]

I am writing a web based logo design application that is meant to take an existing image and allow the visitor to add custom text to the existing image and choose from a few available positions over the existing image where they can place their custom text. I know IM can layer multiple images and flatten them when ready so I was thinking of making a text image using compose and then adding it as a layer over the existing logo base image before flattening and saving.

I am looking for advise or ideas on how I can best achieve my goal as I am only loosely acquainted with IM.

Thank you for your assistance.

[fmw42]

There are many ways to convert text to an image or overlay it on an image.

See -annotate, -draw, label (-annotate may be the most flexible)

http://www.imagemagick.org/script/comma ... ?#annotate
http://www.imagemagick.org/Usage/text/#annotate

http://www.imagemagick.org/script/comma ... .php?#draw
http://www.imagemagick.org/Usage/draw/#intro

http://www.imagemagick.org/Usage/text/#label


Most of these allow you to specify a background image and a position where you want the text to show. So you may not need to create a separate image first and overlay it on the background. However, if you do, then you want to use -compose ... -composite. See

http://www.imagemagick.org/Usage/compose/

Also see:

http://www.imagemagick.org/Usage/text/
http://www.imagemagick.org/Usage/fonts/
http://www.imagemagick.org/Usage/annotating/

You might also want to look at my script, texteffect, for other ideas on style and effects. See
http://www.fmwconcepts.com/imagemagick/index.html

[vbsaltydog]

If I were trying to build a web application where users start out with a pre-defined logo (say 300 x 300 jpg) and can customize the logo by adding their own styled font text positioned where they want on the original logo would I be better off using:

'annotate' to draw the text and -gravity to position it

or use:

'compose' to create a new text based image and then use layering to place the text image over the original logo image at the desired position by the x and y axis locations?

Is there a reason to use one method vs. the other? Are there any other methods that you would recommend?

Thank you for your assistance.

[vbsaltydog]

There are many ways to convert text to an image or overlay it on an image.

See -annotate, -draw, label (-annotate may be the most flexible)

http://www.imagemagick.org/script/comma ... ?#annotate
http://www.imagemagick.org/Usage/text/#annotate

http://www.imagemagick.org/script/comma ... .php?#draw
http://www.imagemagick.org/Usage/draw/#intro

http://www.imagemagick.org/Usage/text/#label


Most of these allow you to specify a background image and a position where you want the text to show. So you may not need to create a separate image first and overlay it on the background. However, if you do, then you want to use -compose ... -composite. See

http://www.imagemagick.org/Usage/compose/

Also see:

http://www.imagemagick.org/Usage/text/
http://www.imagemagick.org/Usage/fonts/
http://www.imagemagick.org/Usage/annotating/

You might also want to look at my script, texteffect, for other ideas on style and effects. See
http://www.fmwconcepts.com/imagemagick/index.html

Fred,

Thank you for your informative response. Let me begin by notifying you that the link on your scripts page to your texteffect actually goes to your unrotate and you might want to change that. I manually corrected the url and think your texteffect script looks very powerful and seems to be a good solution.

So if my raw logo that is to be customized is 300 x 300 and I use your texteffect script to create three text based images, 1 for arched over, one arched under, and one straight for the center. Can you advise the best method for positioning the text images over the raw 300 x 300 logo?

Obviously for the centered text over logo, this would need to be added as a new, higher layer and then flattened but for the over and under arches, if the arches are designed to fit a 300 x 300 logo then they would be above and below the raw logo and would not really need to be added as a new, higher layer and flattened would they? How would I get them over/under the raw logo before saving it?

Thanks again.

[fmw42]

Thank you for your informative response. Let me begin by notifying you that the link on your scripts page to your texteffect actually goes to your unrotate and you might want to change that. I manually corrected the url and think your texteffect script looks very powerful and seems to be a good solution.

Thanks for informing me of the link error. I have corrected that now.

So if my raw logo that is to be customized is 300 x 300 and I use your texteffect script to create three text based images, 1 for arched over, one arched under, and one straight for the center. Can you advise the best method for positioning the text images over the raw 300 x 300 logo?

If you use my script, the text image will not be something that you can control by size. It will end up being as big as needed to hold the text as specified by the font and point size and padding. You will need to generate the text image, then look to see how big it is, then resize it to your desired size. Then you can place it on a 300x300 background image above or below the logo you have in that image after you check to see where you need to place it. You can then use

convert backgroundlogoimage textimage -geometry +LOCX+LOCY -composite outimage

That will place the textimage so that its upper left corner is at LOCX,LOCY relative to the upper left corner of the backgroundlogoimage. You will need to make the textimage have a background color of none so that it is transparent. Then when the textimage is placed over the backgroundlogoimage it will not cover anything except where the text is actually located. The backgroundlogoimage will then show elsewhere.

I suspect some trial an error will be needed to get the textimage the size and location you want to place on your backgroundlogoimage.

[vbsaltydog]

Thank you. Trial and error is all part of the process.

If my logo is 300x300 and I create, then resize my text image to 300 wide. Is there an easy way to create a top or bottom (depending on whats needed) padding over/under the logo where the text image can be placed?

Again, your help is appreciated.

[fmw42]

Not sure I understand. You do not need to pad the text image to place it on the logo image. You can use -geometry to place it correctly without padding it to the same size as the logo image.

If you do need to pad for some reason that I do not understand, then see

-border
http://www.imagemagick.org/Usage/crop/#border


or

-extent
http://www.imagemagick.org/Usage/crop/#extent

[vbsaltydog]

Perhaps if I am clearer on what I need to do, it will help to see which tool I need.

I have an image that is 300x300 on a web page. I have a series of questions in a form. (ex. font type, font size, font color, text to add to logo, logo text position). I need to use IM to dynamically create an image based on the 300x300 logo that shows the visitors settings for font, text and position. The three possible positions for the custom styled text to appear are:

above the 300x300 logo
below the 300x300 logo
across the 300x300 logo

all three positions need to center the text relative to the logo.

Does this help?

[fmw42]

This is not an easy task to automate as the height of the text will depend upon the font and pointsize selected. Thus the text may not necessarily fit above or below the logo, especially if you distort it in other ways such as with my bulge which will make it bigger in the middle.

The only thing I can suggest is that you create the text image, find out how big the text image is, scale it to the size you want such that its height will be small enough to fit above or below the logo and its width will fit within the 300 pixels wide logo image. Then calculate where to place the upper left corner. All of this depends upon how much room you have above and below the logo within the 300 x 300 logo image.

In any case, you do not need to pad the text image to place it on the logo image. You just need to make it small enough to fit above or below and not wider than your logo image. Then you can figure out where to place the upper left corner of the text image with respect to the upper left corner of the logo image and use -geometry to do the placement.

If you have an example logo and text you want placed then I could give you an example of how that placement command would look.

[vbsaltydog]

I am making some good progress with this page:

http://www.imagemagick.org/Usage/annotating/#labeling

but I need to remove the excess white canvas outside of my image before labeling.

Do you know of a way to do this. I think I need a function like -trim but it needs to work
even if the border color is the same as the background color.

[vbsaltydog]

I am also needing to use windows true type fonts for my -draw text but for some reason the -font option works with native fonts like Arial and Courier but when directed to a .ttf file, it does not work and defaults to Arial or something. I am using ttf files in another convert command on the same server and it works. Do you have any idea why I am not able to display the ttf fonts in this line:

convert $secret_path/logo1.jpg -font $secret_path/comic.ttf \ -gravity south -background red -splice 0x50 -fill white -pointsize 35 \ -draw "text 0,0 'Test Text'" $secret_path/images/output.gif";

[fmw42]

see whether

convert -list font

lists the fonts you want to use. If not you may need to run Anthony Thyssens scripts:

imagick_type_gen.pl (this is the main one)
show_fonts
graphics_utf

see

http://www.imagemagick.org/Usage/scripts/