Datis Design Weblog

My Works by Farshad

One of my clients asked me to build two simple web sites very fast, they gave me only one word file that has only 2 pages of information and nothing else, they wanted these web sites be ready in 2-3 days, so these are results, they are not too bad for simple and low budget web sites !

Khalil Sharaf Web Site

This site is for trading company located in Dubai, address is http://www.khalilsharaf.com. For designing this web site I used Adobe Illustrator and Photoshop, and for building it I used HTML 4.01 Strict and CSS.

MakColour Web Site

This one is for a color and raw materials producer, the address is http://www.makcolour.co.uk, for this site I used Adobe Photoshop, Illustrator, HTML 4.01 Strict and CSS.

Illustrator, Photoshop by Farshad

In this tutorial I am going to tell you how can you make a mobile icon with Adobe Illustrator. At the end I will add some effects in Photoshop to finalize work. You can use these simple methods to create any icon you want. Hope this tutorial be helpful for you.

Beginning Work in Adobe Illustrator

First create a new document in Illustrator, then select Rounded Rectangle Tool from the Toolbar and select a color for Fill Color and select none for Stroke Color, then draw a rectangle with any size you want. Now choose Mesh Tool from Toolbar, select a brighter color than rectangle color and then click once on upper left corner of your rectangle. You should make something similar to this :

Again choose Rounded Rectangle Tool and select blue color for Fill Color and none for Stroke color, draw a smaller rectangle inside the previous rectangle. Choose Mesh Tool and select a brighter blue and click on upper left corner of the blue rectangle. Like this :

Now for creating keyboard I will use Rounded Rectangle Tool again and create some keyboard for my mobile like this picture :

Finalizing Icon in Photoshop

Create a new document with 250px width and 250px height in Photoshop. Please note :

I want to use Drag & Drop feature between Illustrator and Photoshop, if you are using CS2 versions or higher, you can benefit the very nice feature of Smart Objects.

While you have Illustrator and Photoshop open, drag every layer and drop it in your new created document in Photoshop. For example drag and drop gray rectangle, drag and drop blue rectangle, drag and drop keyboards and… After this you will have 3 Smart Object layers.

Now select your gray rectangle layer, right click on it and choose Blending Options, I will add Inner Shadow and Gradient Overlay to this layer, see these images :

I will add Inner Shadow to blue rectangle layer :

And Bevel and Emboss and Gradient Overlay for keyboard layer :

Its Done ! Here is the final image :

Hope this tutorial was useful for you, I will put files for you to download…

Download File 521Kb

Illustrator by Farshad

One of the coolest options in Adobe Illustrator is tracing. You can easily convert a raster image to vector ones. But how can you do it ?

I am using Illustrator CS3 in this tutorial.

First create a new document in Illustrator, then place your desired image using place command in file menu. After placing your image you will see Trace Option Bar in Illustrator options bar like this image :

Now you can easily convert your image to vector by pressing Live Trace button :

You can access to more options by clicking the Tracing Option Dialog :

Tracing Options :

• Preset defines the preset you want to trace an image.
• Mode determines the color mode.
• Threshold defines the value for creating black and white image, pixels that are brighter than this value will be white and pixels that are darker than this value will be black. This option is only available for black and white tracing.
• Palette defines the color in tracing image.
• Max Colors defines the maximum color that will be used in trace an image. This option is only available in color and grayscale mode.
• Output to Swatches will create a new swatch for every color in traced image.
• Blur will blur the trace image to specific amount.
• Resample will resample traced image to specific resolution.
• Fills creates filled regions in the tracing result.
• Strokes creates stroked paths in the tracing result.
• Max Stroke Weight determines the maximum width for converting to a stroke path.
• Min Stroke Length determines the minimum length to converting to a stroke path.
• Path Fitting controls the distance between the traced shape and the original pixel shape. Lower values create a tighter path fitting; higher values create a looser path fitting.
• Minimum Area defines the smallest part of an original image that should be traced.
• Corner Angle defines the sharpness of an angles in traced images.
• Raster specifies how to display the bitmap component of the tracing object.
• Vector specifies how to display the tracing result.

(X)HTML, Flash, Web Design by Farshad

As I said before, Validating a web site is an important step in web designing. But when we want to put Flash contents in our web site, validation will be failed. There are some ways to prevent this error, the method I suggest is to use UFO object.

First download UFO from this link.

Next step is to create a new (X)HTML document. Create a placeholder and give it an unique ID. Look at this code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
</head>
<body>
<div id="ufo">
  <p>Place Flash Content Here</p>
</div>
</body>
</html>

In next step we should link the UFO script to our page, please note that the address of the UFO script is right :

<script src="ufo.js" type="text/javascript"></script>

Then we should create an object for each of our Flash contents, look at this code :

<script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
</script> 

In next step we should call UFO for each of Flash objects, we use the unique ID that we create in first step in our (X)HTML document :

UFO.create(FO, "ufo");

We put this code at the end of our script code.

Final Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UFO Test Document</title>
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
    var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
      majorversion:"6", build:"40" };
      UFO.create(FO, "ufo");
</script>
</head>
<body>
<div id="ufo">
  <p>Place Flash Content Here</p>
</div>
</body>
</html>

Usually you need only these parameters that I used in this code. movie parameter get the address of your swf file, width and height parameters get the dimension of your document, majorversion and build parameters get the version of your swf file. There are other optional parameters which you can see in the UFO website. Please note that the programmers of this script wont continue this project, maybe you like to try other scripts, SWFObject is another method for placing Flash files in your document.