| |
| |
|
Go Back | About | Contact | Web Design News | |
|
|
|
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
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
About The Author Bobby Handzhiev is a senior developer in PIM Team Bulgaria
MORE RESOURCES:
Web-Development - Google News |
|
|
|
RELATED ARTICLES
10 Tips For Running A Profitable Web Site 1. Address your targeted audience on your businesssite. 7 Reasons YOU Need a Website 1) A marketing necessityI still hear it said from time to time that you really do not need a website if you are a private practice professional. I disagree. How Web Templates Are Helping Online Businesses to MultiplyTheir Income Web templates by nature are created to aid and ease thestrenuous process of a typical web development phase. Ideacollection, analysis, research, design are just a small partof a bigger picture. Having a Domain Name And Web Site Gives Your Business The Key To The Door Just like all things in life, the ways to run a business are rapidly changing and evolving. The potential involved with having a domain name/web site is staggering to say the least. 7 Questions to Understand Your Customer Better Customer service questionnaires can help your clients better understand their requirements. Your clients can benefit by:* Focusing on immediate project requirements* Increased awareness of budgeted time and finances* Better understanding of project goals* Setting priorities of essential project features* Planning for project post-implementation phaseOn the other hand, you as a service provider will have a clearer understanding of what your clients want. Website For The Company Store If your company own one or more stores, you might be wondering if it would be a good idea to have a website. You might also be wondering if a website for the company store would be profitable for your business. Planning Your Website for Success Most people know they need a website in order to publicise and promote their business but very few people know what they want in their website. Fewer still are those who can actually sit down and plan their websites well. 9 Simple Steps to Create a Background Tiled Image Branded with Your Name You have seen those web pages where they have the name of the Name Web repeated over over over in square tiles as the background. Now by following these 9 Simple steps you too can create a web page Branded with your Name, or Company Name. Building Websites with Directory Generator Directory Generator, a product from Armand Morin and Marc Quarles, builds directory-style websites for you in a matter of minutes. It is simple to use, it's reliable, it does what it claims to do. Creating Websites that Cater to Exam Preparations One of the things that Internet excels is disseminating information and knowledge across many brains and continents. In this global economy the aspirations of the younger generation is not bounded by countries or continents. Where on Earth is Your Websitee? You've just finished congratulating your marketing team. After six months of concentrated effort you can now actually find your own company web site within the search engines. Successful Web Development: 10 Key Elements There are many elements that are key to successful web development. There is no arguing that elements of talent such as graphic design, writing, and technical expertise are important. I Did It: Six Months to a Successful Website For years now I've been looking to start my own business, but my highest priority has always been to spend less time working, and more time with my family, while still giving them everything they need (and most of what they want). It's a common dream, right? No boss to answer to, less stress, more vacation, more quality family time. Art, Artists and the Web: Part 3--What to Put on an Artist's Website What to put your the website if you are an artist.1) The art workTry and think like a gallery hanging a show. Is Your Web Site Talking to Your Customer? A while ago one of my clients approached me and mentioned thatthey were experiencing a serious problem with customerregistrations (obtaining customer names and e-mail addresses),on their web site. They still had a lot of traffic, but werefinding that the ratio between traffic and registrations hadbeen dropping steadily. The Cost Of A Web Site Just starting out, you can start with a simple informational site, which is all most need initially, and build up to a fuller site (e-commerce and/or interactive) when you can afford it.Your goal should be to get an online presence. Remember This When Building A New Site - Beginners Guide I recently helped my mom to launch a website (www.mom2me. Revealing the Firefox Secret Used by Top Web Developers and Power-Browsers Profiles are one of the best kept secrets around regarding Mozilla Firefox (my browser of choice).In the role of web site designer, I find it useful to have Firefox set up with various Extensions for helping test compliance, keep track of Google Adsense earnings, checking PageRank and Alexa rating, etc. Frequent Business Question: How Do You Start a Web Business? Today it seems everyone is jumping on the entrepreneurbandwagon, and who could blame them? Setting your ownschedule, working from the comfort of your own home, andnever having to deal with a horrible commute or officepolitics again, this option is quite popular among all ages.With the advent of the technology age, it seems moreindividuals are looking to the internet to provide themwith goods or services. How to Make Your Own Website For Free If you like the Internet and surfing through the billions of web pages on it then you might be thinking that you also would like to have your very own web page. Well, fortunately you can create your own web page for free and have it online so the whole world can surf the web and see what your web page is all about.
|
ChicagoAnimation's Acquisitions: Market Polls - 1pennyStock.com
Sponsors: Paving | VTL's | Religious Statues
