How to make "Eye Catching" Cool Animated Urdu Banners

 

 

Assalam-o-Alaikum Urdu Lovers!!!!

 

 

As a regular user of Internet and surfer of many urdu sites, I noticed something. There are thousands of “eye catching”, cool looking, animated banners/ GIFs. But when it comes to urdu banners or GIFs, we hardly see any. Though, we can see some urdu banners, but they are not as good as we observe in English cases.

I’m a regular visitor of urdustan for four years and a member of its "behind the camera" Team. So, to give urdustan a better look, I made some animated urdu banners. Visitors and Webustaad (Web Master) liked them very much. Later, some other visitors who were interested in making urdu banners for their site/ home pages, kept asking Webustaad how he made these urdu banners. So Webustaad asked me to share this knowledge/ technique with others.

The purpose of this document/ tutorial is to spread the knowledge so that Web Masters of other urdu sites as well as amateur users can make banners/ GIFs for their Home Pages.

This tutorial has been divided into 2 categories:

 

Banners in Khat-e-Naskh
   
Banners in Khat-e-Nastaleeq

 

 

Banners in Khat-e-Naskh

Making coooooooooool banners in Naskh style is as EASY as writing your name in any word processor and then a couple of clicks to give it a better look (Bold/ Italic/ Underline). Following, 'almost free' softwares are required for this section. Urdu Nigaar is free utility by Naseem Amjad and other two tools are not freewares, but their cracks/ hacks are available on net ;). Find them and enjoy :)

 

1-    Urdu Nigaar (for writing urdu script)

2-    FLAX  (for applying cool animation effects and exporting in .SWF format)

       SWfX can also be used for this purpose, the method is same :)

3-    Macromedia Flash 4.0 or later (for importing .SWF file, we made with FLAX and exporting

       into .GIF format i.e., our final format for putting our banners/ GIF images on Internet).

 

Now, here goes the step by step procedure.

Start Urdu Nigaar and type your desired text in urdu (Point A)

Select it and choose copy (Point B).

 

Now run FLAX and right click in the "Text Box" (Point C) and choose paste, you will see some garbage in "Text Box" as well as "Preview Window". But don't worry, we will get BEST out of WORST.

Now click on Font Drop Down Menu (Point D) and choose "Alkatib1".

Text in "Text Box" is still garbage (Point C), but you can see urdu text in "Preview Window" (Point E).

 

 

Select any effect from FX Drop Down Menu (Point F), try other settings/ properties area marked with blue rectangle (Point G).

 

When you are satisfied with your work, go to File Menu and choose "Export as .SWF". Name your .SWF file. Your Banner/ GIF is almost done.

Click HERE to learn how to convert .SWF file into .GIF file.

The result of all this work will look much like this.

 

Banners in Khat-e-Nastaleeq

 

Softwares/ Programs required for this job are as under:

 

1-    Inpage/ Power Page (for writing urdu script in Nastaleeq Font)

2-    CorelDraw 5.0 or later (for importing urdu text from Inpage and exporting in .WMF format)

3-    SWISH 2.0 (for importing .WMF files we made, applying cool animation effects and exporting in

       .SWF format)

4-    Macromedia Flash 4.0 or later (for importing .SWF file, we made with SWISH 2.0 and exporting

       into .GIF format i.e., our final format for putting our banners/ GIF images on Internet.

 

Before using Inpage, enable "smooth edges of screen fonts" under "Effects" Tab of Display Properties. Enabling/ Disabling this option, means a BIG difference.    

 

For convenience of readers, this documentation has been divided into Two Sections i.e.,

 

Expert Users

 

Novice Users

 

Expert Users do not need step by step instructions, so I'm not dragging them into that, just an overview of complete procedure is enough to save their valuable time. However, in case of any hinders, they can go through "Novice Users" section ;). Following paragraphs is an overview.

 

"Write your desired Urdu Text in Inpage (also known as Power Page), adjust settings and copy the "Text Box" and paste it in CorelDraw. Then convert the Text into curves, resize it if needed, apply colors and border if required, export it in Windows Metafile (.WMF) format in "curves" mode. Now run SWISH and import Windows Metafile, adjust the settings and resize it as per your requirement, apply built in effects and cool animation and export it in Flash Movie (.SWF) format. (The MAIN part of making urdu banners is working in SWISH, the more you know about SWISH, Flash Animation, effects and combination of effects, the more cool banners/ GIFs can be generated). Now in Flash, import Flash Movie (.SWF file). The function of Flash in making urdu banners is only and only to Import .SWF file generated by SWISH and Export it into .GIF format (Unfortunately, SWISH does not support exporting in .GIF format, that's why we have to use Flash). If you have some other utility that can convert Flash Movies into GIFs, you can use that too.

Here, I assume that our Expert Users know how to export a Flash Movie into .GIF. If you are facing any problem like, only 1st frame is being exported, please read Novice Users Section.

 

 

Novice Users! Here is your step by step guide for generating cool Urdu GIFs and Banners.

The knowledge of working in Macromedia Flash and SWISH is not essential, but the more you know about SWISH 2.0 and Flash, more cool banners you can make from this technique.

 

O.Ks, enough theory for today, now let's do some practical. We will write a sher (verse) that goes like this in Roman Urdu.

 

Nahi khel Aay DAAGH yaaroN say kah do 

Keh  Aati  hay  urdu  zubaaN  Aate Aate.

 

 

For Quick reference, following Image will show the "Points" we will use for this job.

 

1st Step   

  1. Start Inpage and draw a Text Box with "TextBox Tool" (Point A)

  2. Now select "IBEAM Tool" (Point B), click in the box and start typing above sher (verse).

  3. After finishing typing, select the text and apply font size 18 pt (Point C).

  4. Resize the Text Box, if needed, select the Text and choose "Full Justify" (Point D).

  5. The final look of this sher (verse) will look much like Point E in the image.

 

           

            Step 1 is now completed and our sher (verse) is ready for copy/paste in CorelDraw.

 

2nd Step   

  1. Left Inpage running and run CorelDraw. (DO NOT close Inpage EVEN you are finished with urdu writing and has copied the Text Box.)

  2. Switch over to Inpage, select "Arrow Tool", click on the border of Text Box (handles will appear, click right mouse button and choose "copy" from list.

  3. Switch over to CorelDraw and choose paste either from by right click menu or Edit menu.

  4. Now you can see urdu text in CorelDraw. You might see VERY large text here, if so, just resize it by selecting any corner handle (this keeps the size ratio same as original). The screen will look much like in following Image (Point A).

  5. Now select urdu text and choose "Convert to curves" from "Arrange Menu".

  6. Now choose "Export" from "File Menu" (Point B).

  7. A Dialogue Box will appear, choose "Windows Metafile" (files with .WMF extension)     (Point C) , select your file name (Point D) and its save location (let's say, Desktop), and check "selected only" (Point E) to make sure, only our sher (verse) is going to be export.

  8. After all these options, when you click "Export" (Point F) another small Dialogue Box will appear prompting you either to export txt as TEXT or CURVES. click "curves" (Point G). Now you have a Windows Metafile (with WMF extension) containing urdu text in curves. The functions of Inpage and CorelDraw has completed, now you can close them, if you want to free some PC resources.

 

 

 

 

 

 

            Step 2 is now completed and our sher (verse) is ready for importing into SWISH 2.0 for applying cool effects.

 

 

3rd Step   

  1. Run SWISH and import .WMF file. A confirmation dialogue box will appear asking "merge imported objects into one shape". Choose NO (its important).

  2. 1st adjust the movie size (for instance, the standard size of banner is 468 x 60 pixels). Now click on the "object" and resize it to fit in this movie size.

  3. Select the "object" (Point A) and click on Add Effect (Point B), choose a effect for instance, 1st apply "Vortex" effect (Point C), then wave and then explode. You can choose other effects as well as sub-options in main effects and try different settings for adding more customized effects. Its all upto you, how deeper you can go and add cool or hot effects on your banner.

  4. Test your creativity by clicking on "File>Test>Test in browser" option.

  5. If you are not satisfied, make essential adjustments and when you are finish, export your banner by clicking on "File>Export>SWF...". Now choose a name and location for your Flash Movie (.SWF) file and you are finish with SWISH Tool. You can close this application if you want to free up some system resources.

 

            Step 3 is now completed and our sher (verse) is ready for importing into Flash for exporting in .GIF format i.e., our target format for placing banners on our sites.

 

 

4th & Last Step   

  1. Run Macromedia Flash and import (from File Menu) that .SWF file we created.

  2. From Menu Bar go to Modify>Movie and resize the movie size according to your imported .SWF file. The easiest way to match the size, choose "Match contents".

  3. From File Menu, choose "publish settings". A dialogue box will appear, click on check box GIF Image (.gif) (Point A). When you check this option, A "GIF Tab" will appear (Point B). Now click on this tab.

  4. Enable "Animated" option instead of Static (Point C). Click OK and now you are ready to export your movie in GIF format.

  5. Again Click on File Menu and choose "Export Movie", type and name for your movie and that is the end of hardships.

 

 

 

Now you have a Banner/ GIF file that will look much like this one.

 

 

 

I'm putting some other banners, made for urdustan. All of them were created with same technique, except last two.

 

 

 

 

 

 

 

 

 

 

 

 

 

If you find out any better way or improvement for this work and for exchanging information and knowledge,
please mail me @ hakmakali@yahoo.com



Hasan Ali