PIM Team Case Study – Creating Text Effects With PHP And GD

PIM Team Case Study – Creating Text Effects With PHP And GD

See how you can create graphic effects on text with PHP and GD – drop shadows, arcs, fonts and colors.

Problem

A-tec Signs and Sraphics Inc. launched a web site with the idea to sell decals online. To achieve better customers ineterest the website had to integrate online decal builder. The company is offering also decals for vehicles which brought some specific requirements to the builder like having the decal text turning around 4 types of arcs.

Goals

  • Provide users with preview area
  • Allow visitors to choose font and color
  • Allow adding drop shadow and selecting drop shadow color
  • Allow turning the text into arcs
  • Real Time calculating

Solution

Because of the need for increasing customers interest we had to think about not for perfect math formulas when showing the graphs in the preview area, but for the people who will look at them.

As we will reaveal below, there were few problems going around human appreceptions for something ‘perfectly smooth’ and the matchematical perfect figures.

Methodology

We were going to extensively use PHP GD library for the text effects. It provided easy changing of fonts and colors, adding drop shawdows and rotating the texts.

We had also to create color palletes which to appear when user click and disappear when color is selected (You can personally try the decals creating here). Using hidden layers and javascript was supposed to do the work.

The main problem in this site was to create 4 types of arcs so when the user selects one of them the text is created around imaginary arc (like in the vector graphical softwares). We were going to study Bezie’s formulas and create these arcs with its help.

Implementation

PIM Team Bulgaria had the task to build the full functional online decals builder with the following features:

– Decal background

Some users were supposed to have their decals placed on colored background. We had to allow the preview area to be painted in a selected background. First we created the image in temp folder:

We got a totally different direction. There wasn’t an universal function to help us. The solution we found was to ‘manually’ adjust each letter. We created a procedure with cases which were adjusting each letter on the appropriate place and with appropriate rotation depending on how long was the text. It worked!

We created 2 arrays for each arc type – one array with the positions and one array with the rotations.

The rest was simple:

if($arctype)
{
$start=(35-$l)/2;
if($start%2) $start+=1;
$gr=array_slice($gr,$start,$l);
$ys=array_slice($ys,$start,$l);
}
if(!$arctype)
$ys=array();
$gr=array();
//making the arrays
for($i=0;$i

You can go on the atec’s site and try the arcs we achieved ().

Results

Now A-tec Sings’s web builder creates perfect decals with graphs, calculates the price and allows you to add the decals to your shopping cart and chgeckout (the shopping cart software is also created by PIM Team Bulgaria).

The builder allows the visitor to create the desired decals with any color, dropped shadow, background and shape, to preview it and to calculate the cost for different sizes and quantities.

The website and builder were promoted with massive radio advertising company. At that time it was the only decal builder which allowed creating texts around arcs.

Conclusions

  • Use GD to create text effects
  • Do not forget that you can create you own functions for what GD does not offer
  • Do not always search for math perfect formulas. The graphical effects are intended to the human eye
  • Load fonts in the server
  • Use javascript and hidden layers to achieve great flexibility

Related video: Religion means diversity


Leave a Reply

Your email address will not be published. Required fields are marked *