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 arround 4 types of arcs.
Goals
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 arround 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 arround 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:
// the name of destination image
$dest='decals/'.time().'.jpg';
//the background
imagefilledrectangle ( $im, 0, 0, 590, 60, $colors[$_POST['bcolors']]);
$colors array contains the available color which are stored by the administrator in the database.
Thus, when the visitor selects a background it is passed as parametter to imagefilledrectangle function.
- Font selection
Users should be able to select fonts for their future decals. Knowing that we can't consider all the fonts will be available on all visitor's computers we had to upload them on the web server directory.
We allowed the admin to manage the fonts, adding their names and uploading files in admin area.
The fonts in the select box came from the database. Selected font was passed in the call to imagettftext funtion which is drawing on the previously created image.
- Color Selections
The color selections had to be a palettes which appear when user clicks and disappear when color is selected. The palette had to look as a table with colors and these colors are also defined in the
admin area so they had to come dynamicly. We had to seed a static javascript function with dynamic content.
We created a PHP cycle which was taking the colors from the database and then creating a string for HTML table. This table is then passed to a javascript function which creates the palletes with the help of hidden layers:
function showTable(table)
{
mouseX = window.event.x + document.body.scrollLeft+25;
if(table=='background')
{
var content="";
var y=460;
}
if(table=='fonts')
{
var content="";
var y=690;
}
if(table=='shadows')
{
var content="";
var y=810;
}
document.getElementById('tabler').style.pixelLeft=mouseX;
document.getEle mentById('tabler').style.pixelTop=y;
document.getElementById('tabler').style.visibility='visib le';
document.getElementById('tabler').innerHTML=content;
}
Of course, once the user select the desired color we had to hide the pallette:
function setColor(elid,color,fromid,shc)
{
document.getElementById(elid).value=color;
docum ent.getElementById('tabler').style.visibility='hidden';
}
Thus we created nice palettes which appear and disappear on a single click and don't take much space on the screen.
- Drop Shawdows
The decals offered has the ability to have a drop shadow added so we had to add this option to the online builder. PHP however didn't offered a nice function for that. We created a procedure which draws the texts twice - once the original 100% saturated text and once the shadow with a percentage of the color and appropriate displacement. Of course the shadow was drawn on the image before the main text.
@imagettftext($img, 20, $gr[$i], $x+$dx, $ys[$i]+$dy, $scolors[$shadowcolor], "fonts/".$_POST['fonts'],$word[$i]);
- Arcs
The main problem came when we had to 'rotate' the texts thru arcs. First we created perfect Bezie funtion which to draw the curves and adjust the letter above them. But what a surprise - the curves looked perfect alone, but when we adjusted the letters above them they seemed rough.
After studying this problem we realised that the rough screen resolution and the disability to antialise the images wouldn't allow us to create nice arcs. We were standing against insoluble problem.
We decided to create few arcs with a graphical software (CorelDraw) and to see what could be wrong.
We noticed that Corel's curves were looking great after they are manually adjusted. However you can't just leave the program to create perfect curves automaticly. A human eye was needed to judge when a curve looks right and when not.
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 (http://atecsigns.com/decal/step_1.php).
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 arround arcs.
Conclusions
About The Author
Bobby Handzhiev is a senior developer in PIM Team Bulgaria
As increasing numbers of people search for information on the... Read More
After planning the design and content of your website, it's... Read More
If you have your own business website and you are... Read More
"What's in it for me?" you ask. "Why should I... Read More
So you want to have a website. You have gone... Read More
You have seen those web pages where they have the... Read More
So what do you do if need to get a... Read More
When a user signs up at your website, you may... Read More
The internet is a sea of knowledge. Getting your information... Read More
1. Be clear on your purpose.Building a website can be... Read More
Design and layout can make your communication come alive and... Read More
A lot has changed in the way sites are optimized... Read More
Most people know they need a website in order to... Read More
A website provides invaluable advantages for businesses who have one.7... Read More
The Disability Discrimination Act states that service providers must not... Read More
Writing for the web is totally different to writing for... Read More
A website is like an information flow, with you as... Read More
Most interactive websites nowadays would require a user to log... Read More
Although CSS layouts have been around for years, they haven't... Read More
In the late 1990's three San Francisco based web developers... Read More
Build it and they will come is not always true;... Read More
If you like the Internet and surfing through the billions... Read More
1. Address your targeted audience on your business site. Example:... Read More
What is SQL? SQL stands for Structured Query Language and... Read More
The DDA (Disability Discrimination Act) states that service providers must... Read More
Anyone who knows anything about web accessibility knows that images... Read More
In the big, wide online world there are millions of... Read More
The cost of setting up a web site is dirt... Read More
An automated accessibility tool is a piece of software which... Read More
When building a relationship, listening is more important than talking.A... Read More
Are you, like many other website owners, frustrated at the... Read More
D.zigns dzignerwebs The Basics Before starting on... Read More
Knowledge is power.And undoubtedly, it is the key to making... Read More
Does My Web Site Require A Web Database?If your web... Read More
URL rewriting are major needs for your sites that produce... Read More
Server Side Includes (SSI) with ASP People often... Read More
Build it and they will come is not always true;... Read More
Starting and maintaining a business is challenging enough without the... Read More
Do you need a web site? Are you considering getting... Read More
Your business website is a critical aspect of being able... Read More
You hear a great deal about the Internet these days... Read More
Why do some web sites reap huge benefits while others... Read More
What to do if you are an artist after you... Read More
It's now easier than ever to take payments on the... Read More
Q. Hey, Cathy: I'm just setting up a website. What... Read More
When we review the sites of potential clients, there are... Read More
When visitors add your web site to their Favorites or... Read More
The art of turning website visitors into paying customers depends... Read More
This is a growing concern amongst many business owners. Does... Read More
You know exactly what your organisation does and what your... Read More
Everywhere you look these days, people are telling you that... Read More
A PHP Redirect automatically transfers a web user from one... Read More
While it may seem like a "quick and easy" task,... Read More
1. The first page appears quickly.It's a good way to... Read More
Your website conversion rate should concern you. This simply refers... Read More
If one more business owner tells me their website sucks... Read More
Are you aware that 90% of the websites on the... Read More
How popular is online shopping? And is there room for... Read More
Directory Generator, a product from Armand Morin and Marc Quarles,... Read More
Failure, just like success, is measured differently by each and... Read More
So you want to have a website. You have gone... Read More
Absolutely everything stems from the purpose of your website -... Read More
Dance is how you pamper your soul and satiate your... Read More
The internet is a sea of knowledge. Getting your information... Read More
Just starting out, you can start with a simple informational... Read More
Your web site will be your window to the world.... Read More
Web Development |