0

We are using GD to try and create a product customization tool like the following: 1: http://www.jared.com/en/jaredstore/custom%40jared/monogram-initial-necklace-available-a-z-732541000256533/100135/~/100135.100139.100601

and 2: http://www.jared.com/en/jaredstore/custom%40jared/mens-dog-tag-necklace-732541000247781/100135/~/100135.100138

Especially #1 the monogram I am having issues to replicate.

We have considered ImageMagick too but that monogram looks like something more then just ImageMagick.

I have already been able to create the ability to have 3 text lines with full name/middle name/last name and that seems to work well with GD by allowing the administrator to set the x/y coords along with max width of each text line and font size then the customer just enters the text on the front end and it works well.

The problem we are running into is with the monogram. It seems in cases where someone wants to use script or interlocking font and they use a W and the letter is a wide letter or in cases when someone uses a J where the letter is skinny we can't get it to look good for both cases. Also in link 1 it seems they are doing something special to allow this monogram to look so good especially the script/interlocking letters connecting together very nicely. The way that the monogram is so perfect I don't think they are using imagemagick or GD. I will say that currently we are using a text entry for each letter when Jared's is using one line for the entire field. Also please note we need the middle letter to be larger which I think it looks like Jared's is doing.

So what is the proper way to do this?

SO Links I Found Covering the Topic but did not go farther than just mentioning ImageMagick and GD:

How to customize Images dynamically in php or jquery?

How to create Image with custom text in php?

Community
  • 1
  • 1
henry
  • 71
  • 5

1 Answers1

0

Ok so in the end I realized what we had to do. Custom font files. So we used one text field for the monogram and we pass the first/last/middle initials that way (although to the user we showed 3 fields) as one url parameter along with the other url parameters needed. To get it looking right we took the font files we wanted and modified them so that the lower case letters were the same as the uppercase letters just smaller. We had to modify the horizontal and vertical glyph placement also...on all of them and also some more on some of the wide letters. Now on the server side we create the monogram using one GD text annotation with the first letter as lower case, last name as upper case and last letter as lower case.

It is looking a lot better now.

To be honest I got the idea from one of the SO answers from Robert Seddon-Smith that I had left as a reference:

How to create Image with custom text in php?

He didn't go into detail so I was not sure and had to research first.

We used this for font editing: http://fontforge.org/

Hope it helps someone.

Community
  • 1
  • 1
henry
  • 71
  • 5