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 arround 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 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.getElementById('tabler').style.pixelTop=y;
document.getElementById('tabler').style.visibility='visible';
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;
document.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
- 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
About The Author
Bobby Handzhiev is a senior developer in PIM Team Bulgaria
|
|
|
Created & Maintained by Empower! CMS Web Sites
Host2Sell Web Hosting | Emarketing Workshops | Site SEO Review | FREE NewsletterCreating Dynamic Website Content With Php - Mysql
Fresh website content for your visitors can be of real benefit when attempting to generate repeat traffic. Most webmasters, however, just don't have enough spare time to frequently update or rebuild their pages manually. ...(related: Web Development)
5 Tips To Supercharge Your Website Sales Copy
The art of turning website visitors into paying customers depends almost entirely on good sales copy. What is that?Simply put good sales copy is the content of your copy and presentation of your copy put together in such a way that it increases your visitor to sale conversion rate on a consistent basis.It's an ongoing process in which you will always try to beat your "control". Beating the control is marketing lingo for engaging in a never ending process of constant improvement to your sales copy in order to bea...(related: Web Development)
How To Promote Your Law Firm Website On The Internet For Maximum Profit
Making maximum profit from your law firm website is important, but as a lawyer you might not have any clue about search engine optimization and Internet marketing for your legal site. However, it is not so difficult to poise your website to be successful online even if you are not experienced with Internet marketing and driving website traffic. All you have to do is review the following tips and include them in your website marketing plan. Before you know it you will notice that your website counter is recording more hits per day and telling you that your directories, keywords, and links are working.Tip #1 - Submitting to Law DirectoriesTake some time online to orient yourself with the myriad of law directories available. Register your domain name and the type of law you practice with as many law directories as you possibly can. By ...(related: Web Development)
The Importance Of Website Stats To You
One of the best tools you have as a webmaster is your website statistics. The most popular site stats programs are Awstats, Webalizer, and Analog. Usually, they come free of charge and are accessible through your website's control panel provided by your web host.Awstats gives you valuable information like which file types on your server are getting hit the most, what page is getting the most hits, the numb...(related: Web Development)
Do You And Your Website Have Credibility?
I recently received an unsolicited e-mail from some company offering me their search engine optimization services for $199. Even though I had absolutely no interest in the offer, just out of curiosity, I decided to check out this company with the various search engines.Incredibly, they were nowhere to be found! I couldn't find them on Google, Yahoo, Dogpile, anywhere! That's because they didn't really exist. They never did. They were just another on...(related: Web Development)
Web Analytics - Getting It Right
Understanding and using web analytics.In recent years, website marketers were concerned with increasing 'hits' and the 'stickiness' of their sites. They were concerned with increasing page views and the amount of time spent on the site. This is definitely a hold over from the paper based businesses of the past, and has proved to not be of much use in the fast moving internet world.As a result, hits and views are no longer considered useful metrics f...(related: Web Development)
Why Should Your Business Go O.n.l.i.n.e.
Optimize your time. How much time each day must you devote to paperwork, scheduling and accounting? You strive to meet the needs of your clients, but when chained to the obligations of business management, it's just as important to make sure the doors stay open as it is to satisfy customers. By integrating your daily tasks and taking advantage of the amazing Web-based software solutions out there, you can make more time for clients and spend less time behind your desk. Do you work from home? When your business is online, you can manage your business any place you have a connection to the InternetNickel here, nickel there. A close second to making ...(related: Web Development)
Traffic For Webmasters
"If you build it, they will come"; is an age old phenomenon for webmasters that they develop the website and visitors themselves would visit that. This may be true for only a handful of websites but the most important and crucial topic for any webmaster today is to how to get targeted traffic to his website.How good is a website without traffic, only webmasters know that very well and this is no doubt the biggest question of the new Internet age. The new webmasters have to face a lot of problems in order to attract the targeted traffic to their website. But by following few most used methods they can attract visitors of their particular niche group in a very safe manner. These methods are used and recommended all over the world and have been best...(related: Web Development)
Website Globalization
Globalize Your WebsiteThe Internet has unlocked a wide array of markets and knocked down barriers that previously prevented merchants from marketing their products on a global scale. There are a number of ways to 'globalize' a website and broaden a businesses general appeal to an international audience.1.) Payment Optio...(related: Web Development)
Making Your Website Shine! Attract And Keep Visitors At Your Site!
When you consider the billions of individuals and companies on the net who are attempting to influence visitors with their wares, it is vitally important that your site offers something out of the ordinary. An important fact to remember is that what the site says is far more important than how it looks. Why? Because good copy sells!Pretty is as Pretty Does!I don't mean to imply that a beautiful site isn't going to attract visitors, but pretty is as pretty does! What happens once visitors get to your site? Your potential prospects will surely appreciate an entertaining and good-looking web site but they didn't necessarily come by to be dazzled by the design. They came because they were looking for your product or service. So be sure your site is conveying an enthusiastic message about your business.Content must be ...(related: Web Development)
site-map - Copyright © 2006 Empower! Web Design | All Rights Reserved. | Web Development