Category Archives: Text

Arabic Text In Adobe Illustrator Tip


You may never come across this problem but if you ever come into this situation, it will be a lifesaver. If you ever come into the problem of incorporating Arabic text into Illustrator, this tip is just for you. Adobe Illustrator is a type of program that only best suits the need of the English language so trying to use texts that have different letters than those of the English language will only lead to failed attempts. Though one thing should be noted; there is an Arabic version of Adobe Illustrator titled Adobe Illustrator Middle Eastern. This, of course, supports typing Arabic text correctly. This would imply purchasing it which is a waste since presumably you are using Illustrator already.

First let’s make sure that you have an Arabic language support for your PC or Mac. Add the Arabic language if you must.



Make sure that you select the right language before you start typing into a program. Make you sure you also select the right font before typing such as Arabic Typesetting or Adobe Arabic.


Now if you try typing Arabic into Illustrator without any support (plugins, etc.), you will get something similar like this. We have two problems with how Adobe Illustrator handles Arabic text. One problem is that Adobe Illustrator will normally type from left to right but this is a problem since Arabic is read and written from right to left. The second problem is that letters don’t connect at all which is a really big problem since there are rules of how certain letters of the Arabic language connect all of which depends of where they placed (beginning, middle, or end). Take for example the Arabic letters ف, ا , د , and ي which are “da”(d),  “alif” (a), “fa” (f), and “ya” (i or e) respectively. Now if I want to write my name, I have to abide rules when connecting letters. There is “f” sound in the begging so I’ll write ف in the begging. An “a” comes after so I’ll connect the “f” and “a,” فا. A “d” sound comes next but “alif” (a) can’t connect any letters after it so I’ll leave the “d” unconnected, فاد . Now an “ee” sounds comes at the end but “da” doesn’t connect with any letters after so I’ll write “ya” separate, فادي .

The left one is how adobe Illustrator will write it.

The right one is the correct way to write my name. We will see how to bring correctly formatted Arabic text into Illustrator.

Again the two problems are that Illustrator will write Arabic text from left to right and won’t connect the letters as you can see below.

Now I present two solutions to the problem.

1.) Install the ScribeDoor plugin for Illustrator.

Now this maybe costly but $89 (if purchased for Illustrator) / $119 9if purchased for Creative Suite) will be cheap in comparison to the Middle Eastern version. It’s also a good alternative since you manage the kerning and many other things inside Illustrator. You can also download a 7-day free trail if you want to try it out.

Note: When installed, you can access the ScribeDoor plugin by going to Window>ScribeDoor. You may need to adjust the ScribeDoor settings inside the ScribeDoor window if Arabic text still don’t connect or type in the right direction.

2.) Install Inkscape for free.

Inkscape is another vector program like Illustrator but it’s free. One good thing about this program is that it supports other languages so you can type Arabic letters just fine in Inkscape. Inkscape’s appearance is similar to Illustrator so it’s not too hard get acquainted with Inkscape. Select the type tool (has a symbol of an A) on Inkscape and click on your canvas to start typing.

So let’s test Inkscape if it can correctly write the Arabic word for door (Bab) or باب correctly.

Now it’s important what you do here. DO NOT simply highlight the text and copy and then paste it into Illustrator because Illustrator won’t recognize what you pasted and will react with crossed boxes as you see below.

The correct way is to select the text you wrote and right-click and copy it. Now paste it into Illustrator and you get outlines instead of text. Now this may upset some but I don’t mind it since you alter the kerning, tracking, or anything else in Inkscape if needed.

I hope you’ve enjoyed this tip and learned something new.

T-Shirts Time


As I’ve been tasked with redesigning buttons/brochures, I have also been tasked to redesign the AVID 2011 T-shirts. Since the AVID team voted for a certain T-shirt design, I’ve been told to illustrate the design onto a computer version. I started this project today and this is its progress so far.

Look out for a tutorial tomorrow.

Re: Senior


Not only did I redo the buttons from Junior year but I also recreated the Senior Awards Evening covers for Senior graduation. I have many tutorials to post but I’ll start with a “Making a…” first with one object you can see in the picture.

“3-D Text” Part 2


Welcome back to the second part of  the 3-D text tutorial. In this part, we will add a faded shadow to our 3-D text.

What You’ll Be Making:


Tools:

  • Illustrator CS4/5
  • Blend-Tool
  • Gradients/Fills
  • Slight experience w/ Illustrator

Steps:

1. A. Start out by locking our original text and not the blend.  B. Now you’ll be able to select the blended text.


2. A. Copy-drag a clone of the blend to anywhere else on the screen. B. Make sure that the blend is selected and go to Object>Blend>Release. C. You should see the blend being separated into different objects as you see below. D. Delete the larger text since it wouldn’t make sense for a casted shadow.

3. A. Copy-drag (holding option/alt) a clone of the new unblended text in any downward direction. B. Use the blend-tool again to make a blend with these two texts. C. Double-click the blend-tool from the tool bar to bring up the settings for the blend-tool. Give it a specified-steps spacing with 50 steps to make a smooth blend (go higher for more smoothness) so the computer doesn’t do too much work in making blends.


4. Give the most bottom text an opacity of 0% by first selecting it with the white arrow tool then adjusting it’s opacity. This will give faded shadow look. B. If the blend looks off, select one of the text and right-click and choose Arrange>Send to Back/Bring to Front. C. You should see something change. D. It is best to lock our original object before proceeding any further.

5. A. Move the shadow blend back onto our original object. B. If it’s not already behind the original text/object, then right-click and choose Arrange>Send to Back. C. You should see the “shadow” move to the very back.


6 A. Improve this blend by lower its opacity to around 50%.  B. Use the white arrow tool to move the text with 0% opacity closer to the solid-filled text. You will have achieved a 3-D effect as you see below.

I hope you enjoyed this tutorial and learned a new skill.

“3-D” Text Part 1


I wanted to post this earlier, but due to internet problems (finally resolved) I will finally post this today.

Today we will be making 3-D text as a request from a student I was helping earlier. Some applications of this tutorial can be seen here in my poster where you can see the 3-D text is combined with a faded shadow.

This tutorial will guide you in the first part of making the 3-D text. The second part is optional and only adds more interesting effects.

What You’ll Be Making:


Tools:

  • Illustrator CS4/5
  • Blend-Tool
  • Gradients/Fills
  • Slight experience w/ Illustrator

Steps:

1. A. Use the Text Tool to type out a text.  B. Give the text any color.


2. A. Copy-drag (by holding option/alt and then releasing it) the text twice to anywhere else on the screen. B. Give different colors to each of the copies but try to make them darker shades of the original text’s color.


3. A. Press W to bring up the Blend-Tool. Click one of the cloned text then click the other cloned text to make a blend. B. Double-click the Blend-Tool icon in the toolbar to bring up the settings. When the window pop ups, change the spacing to specified steps. Enter 50 for the steps to ensure a smooth blend but this will vary on how far your two blended objects are. C. You should get something like you see below.


4. A. In case your blend is facing the wrong way, adjust the arrangement of one part of blend by selecting (double-clicking the object) that part then right-clicking and choosing either Arrange>Send Backward/Bring ForwardB. You should see the blend change to your correct arrangement.


5. A. Scale one of the parts of the blend while holding option/alt+shift to maintain its proportions. This adds a sense of depth/perceptive.  B. Move the blended-objects closer together if you haven’t done so already (this insures a smoother blend).


6 A. Move the blend back onto our original text. B. Make sure the blend is selected and right-click and choose Arrange>Send to Back. C. Check to see if you’ve gotten something similar to what you see below.

We will continue off with Part 2 tomorrow.

Vector Orb Tutorial Part 2


Here is Part 2, which will finish up with the Orb’s shadows (using clipping masks) and the orb’s reflection (using opacity masks).

You’ve probably seen these types of orbs around the web and now you have the chance to make your own stylish vector orb.

Steps:

8. A. Draw a gray oval and make sure to give this oval an opacity of 50 %. B. Add a Gaussian Blur of 5 to it by going to Effect>Blur>Gaussian Blur. C. Draw an object on top of everything and make it obstruct the orb and the “shadow’s” intersection (see picture). Then right-click this object and choose Make Clipping Mask.

9. A. Make a circle a same size of the orb and copy the M as well. Make the M black and the new circle gray. B. Make the M into outlines by right-clicking the text and choosing Create Outlines. C. Now group these objects. D. Now scale it down so it’s on the same level as our original shadow.

9-I E. Give this object a blur of 20. F. Give this object and opacity of 50%. G. Now move this object back onto our orb. H. Draw a circle of the orb’s size and make sure it’s above our dark object.

10. Option-Drag a copy  of everything besides the 2 bottom shadows.

11. A. Open a Transparency window if one is not open already. B. Double click the area to the right of our orb’s thumbnail (see picture) and uncheck the Clip check box. B-I. Now draw a circular mask about the same size as our orb (see picture). C. Now add a linear gradient to our mask. Be sure to make it fade to black downward where black of an opacity of 100% goes to black of an opacity of 0%. D. Now check the check boxes for Clip and Invert Mask.

11-I. A. Adjust the linear gradient by pushing the side with 0% black more to the 100% side so there is more of the fade showing.

12. A. Double click the thumbnail instead of the mask to exit out the Masking Mode. B. Move the reflection under our orb.

13. A. With the reflection still selected, go to the Transparency window/tab and click the chain so it vanishes. B. Now use the Reflect Tool (O) and flip our reflection horizontally. This way, our mask won’t be effected when flipping. C. Give the reflection an opacity of 75%. D. Apply a Gaussian Blur of 10 onto the reflection.

14. Now you should have made something as close as mine.

I hope you enjoyed this tutorial and will look forward to the next one.

Logo Making


We seem to be past the Self-portrait assignment and in the midst of logo design. I have one logo design that I’ll focus my time on. Meanwhile, I’ll try to finish my self-portraits before Christmas break.

Also, I’m sure there is something similar to my Gg Icon but I don’t what it could be. Leave a comment if you know something really similar to it.

UPDATE: I will try to make at least 1 tutorial a week (posting it either Friday or Thursday) if not more.

UPDATE 2: WILL POST A NEW TUTORIAL TOMORROW.

Poster Update


The math poster has been fix and finished. All I want though, for these past days, is to get them printed. But Skocko has failed me in this request but I am partly to blame too. I gave him the file on Tuesday yet he forgot to print it. The next day, he opened the  file to find non-outlined text (and a missing embedded image) and so he didn’t print it Wednesday. He didn’t print the poster on Thursday since he couldn’t find the file even though it was on his laptop. I doubt it will get printed today either and I want to have it up before this upcoming Tuesday since that is the day the Math Club will meet again.

Hopefully, the poster will turn out alright.

Also, I’ll put up my vectored pencil if anyone wants it. Download via Box.net.

Ma(c)th Clu(la)b


Working in Mac Lab Saturday School and today is way longer than before since the video team was shooting something. I spent my time fixing up my math poster. I would say it’s almost ready for printing. I pen-tooled everything except  the wrinkled paper texture, of course. I added a bunch of textures to the pencil as well as the eraser. I will present the finished piece to Mr. Anderson, hopefully, on Monday.

“3-D” Shadow Tip


Just an easy way to make “3-D” shadows unlike regular drop shadows that don’t connect the vertices of the letters/objects.

Materials: Illustrator CS3/4/5 Blend-Tool

Steps: Follow instructions and click the pictures for reference.

1. Create some text using the Text-tool. Write anything you want, I used FaDesigns.

2. Click the text and hold (PC: Shift+Alt,Mac: Option+Alt) to drag a copy. Set it down anywhere, I prefer at the bottom of it. Also, let’s change it’s color to black.

3. Right click the copied-text and choose Create Outlines.

4. Drag another copy, preferably, diagonally to it.

5. Get the Blend-Tool(W) and click one of the black text then the other.

6. Double click the Blend-Tool in the Tool-box. Now a window should pop out. Set the spacing to specified steps.  Then set the steps to about 20. The larger the number, the smoother the blend, the more work for the computer to process. So 20 is about good enough for blends like these.

7. We’re not done yet. Right click the blended text(“3-D shadow) and choose Arrange>Send to Back (PC: Shift+Ctrl+[ , Mac: Cmd + Shft + [ ).

8. Now drag the shadow over(under) the original text and you got yourself a cool effect. Try this fun experiment yourself!

%d bloggers like this: