Datis Design Weblog

(X)HTML, CSS, Web Design by Farshad

In the first part I have told you how can you make a HTML web page from a Photoshop template, Now in this part I am going to tell you how can you make a CSS file for that HTML file and finishing this web site. If you want you can see the first part here.

Building CSS File

First I set the general settings for the page, like font, font size, color and… :

*, body, html {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
}

Now if you look at the HTML file you can see that we have a container DIV which surrounds all of our elements in the page. So I can easily make it the size I need, also I give it a 10px margin to have some space from the top of the browser window :

#container {
	margin:10px auto;
	border:2px solid #000000;
	width:800px;
}

Ok, the header DIV in Photoshop file has 150px height and its background color code is 99cc66 :

#header {
	background-color:#99cc66;
	height:150px;
}

And for the title header :

#header_title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:34px;
	color:#FFFFFF;
	padding:10px 0 0 20px;
}

Slogan :

#slogan {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	padding:5px 20px;
	color:#FFFFFF;
}

For building the navigation I use the method that previously I write a tutorial about, you can check it here :

ul, li {
	list-style:none;
}

#navigation {
	margin:20px 0 0 0;
	padding:0 10px;
}

#main_nav li{
	display:inline;
	margin:0 20px;
}

#home, #about, #portfolio, #services, #contact{
	position:relative;
}

#home a, #about a, #portfolio a, #services a, #contact a {
	text-align:center;
	padding:5px 25px;
	border:2px solid #FFFFFF;
	background-color:#009999;
	text-decoration:none;
	color:#FFFFFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
}

#home a:hover, #about a:hover, #portfolio a:hover, #services a:hover, #contact a:hover {
		background-color:#000000;
}

I need 450px width for content DIV, also I have added 25px padding all around it, and it should be left float :

#content {
	width:450px;
	padding:25px;
	float:left;
}

And for content header :

#content_header {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	padding:0 0 10px 0;
}

For sidebar DIV I give it 250px width and 300px height, and it should be right float :

#sidebar {
	text-align:center;
	background-color:#009999;
	border:2px solid #000000;
	margin:25px 20px 30px 0;
	width:250px;
	height:300px;
	float:right;
}

Recent works title :

#recent_work_title {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#FFFFFF;
	font-size:18px;
	padding:10px 0;
}

Images of portfolio and mouse over effect :

.portfolio_image img {
	border:2px solid #99cc66;
	margin:5px;
}

.portfolio_image img:hover {
	border:2px solid #000000;
}

And finally site info DIV which is similar to navigation part :

#siteinfo {
	text-align:right;
	clear:both;
	height:50px;
	background-color:#000000;
	color:#FFFFFF;
	padding:5px;
}

#siteinfo_title {
	padding:5px;
}

#siteinfo_nav li {
	display:inline;
}

#siteinfo_nav li a {
	padding:5px;
	text-decoration:none;
	color:#FFFFFF;
}

#siteinfo_nav li a:hover {
	text-decoration: underline;
}

You can how can you easily make a valid (X)HTML/CSS web site with a designed Photoshop template, also your code is very readable…

You can download all files from this link. (13 Kb, RAR File)

Flash, General by Farshad

Adobe Systems Inc. today rolled out a beta version of its Adobe Flash Player 10 (formerly called Astro) browser plug-in, which adds features to help designers and developers create special effects and cinematic Web experiences.

The new offering adds support for custom filters and effects created using Adobe’s Pixel Bender tool kit, Adobe said. The Pixel Bender technology is used in the company’s After Effects CS3 tool, which creates motion graphics and visual effects for film and broadcast.

"We’re doing things that really change the game of what’s possible on the Internet," said Tom Barclay, senior product marketing manager of Flash Player. "The community now has the ability to upgrade the capabilities of the player and create new types of effects and cinematic experiences that are not available with any other browser plug-in."

The beta version of the player also includes native 3-D transformation and animation capabilities, an extensible rich-text layout, and graphics processing unit hardware acceleration, he added.

The new support for 3-D is "really 3-D for the rest of us," Barclay noted. "It allows people to take what they know in the 2-D world and transform it into 3-D. It’s native so the performance is very fast, and it will not result in larger file sizes."

New bit-rate streaming for video links between the Flash Player and intended future releases of Adobe’s Flash Media Server will automatically adjust video quality as bandwidth changes without having to rebuffer, the company said. "This will provide a seamless playback experience with no starting or stopping of video waiting for the stream to catch up," Barclay said.

In addition, a new text engine in Flash Player 10 allows designers and developers to have more creative control over device font attributes such as rotation and style, Adobe said. The new version also adds more text layouts, like vertical and bidirectional, which support the creation of rich Internet applications like interactive e-books and online publications in additional languages, Barclay added.

The beta version of Adobe Flash Player 10 runs on the Windows Vista, Windows XP, Windows Server 2003, Windows 2000, Mac OS X and Linux operating systems. The Adobe Pixel Bender Exchange is available for beta users to create custom effects for the Flash Player, according to the company.

The general release of Flash Player 10 is expected later this year.

Source : Computerworld.com

(X)HTML, Photoshop, Web Design by Farshad

One of the important objects that web designers need to know is to make a valid (X)HTML and CSS website with a designed template from Photoshop or other designing softwares. In this tutorial I am going to show how can you build a valid website with a template that I have designed in Photoshop. Please note that this tutorial is in two sections, first one is for making the HTML one and second one is for making the styles with CSS.

Dividing The Template

If you look at the websites, you can see that most of them are following a fixed structure, maybe in some cases you see that a website has more elements or less. When you are designing a website template you should note that arranging these elements is very important, if you look at this picture you will understand :

This simple template was made in Photoshop, if you look you will see that this has a division for Header, a division for Navigation, a division for Content, a division for Sidebar and a division for Site Info (or Footer). In some cases maybe you see that a website has more sidebars or other elements. Now look at this picture :

In this picture I have divided the template to the sections that I have mentioned above, now we can easily make a HTML file with this picture. (You can see larger images by clicking on them)

Building HTML File

We begin with the top of the picture, the first section is Header, so we can easily make a DIV tag for Header and give it an ID, We use to build other DIVs for other sections :

<!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>My Website</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>

In building a website which you want to be a Valid (X)HTML/CSS site and have a good SEO, you should bring all those elements that you have designed in the template, for example if you look at the template you will see that I have put a large text for website title (Welcome to my Site), so we can easily use H1 tag to create this text, and then we will create the style for it later. With this method at the end you will see that your website has a great readability which is very good for screen readers, also it is very understandable even without any styles and graphics.

<!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>My Website</title>
</head>
<body>
<div id="container">
<div id="header">
  <h1 id="header_title"> Welcome to my Site </h1>
  <h2 id="slogan"> A Webdesigner Portfolio </h2>
</div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>

Giving an ID is very useful, later you can easily give any style to your HTML tags, you should keep this note in mind that you only can use each ID for one time. Now for Navigation we can use ul and li tags :

<div id="navigation">
  <ul id="main_nav">
    <li id="home"><a href="#" title="home">home</a></li>
    <li id="about"><a href="#" title="about">about</a></li>
    <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
    <li id="services"><a href="#" title="services">services</a></li>
    <li id="contact"><a href="#" title="contact">contact</a></li>
  </ul>
</div>

Put the code in Navigation DIV, Now Content DIV, we need H1 tag for this section, also because we have some paragraphs we need p tag too :

<div id="content">
  <h1 id="content_header"> What Can I Do For You ? </h1>
  <p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.

    Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.

    Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.

    Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.

    Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
</div>

Now for the Sidebar section, we need to put 2 images for our portfolio, so we need img tag :

<div id="sidebar">
  <h3 id="recent_work_title"> My Recent Works </h3>
  <div class="portfolio_image"> <a href="#"><img src="" alt="Image 1" width="150" height="150"></a> </div>
  <div class="portfolio_image"> <a href="#"><img src="" alt="Image 2" width="150" height="150"></a> </div>
</div>

I have used another DIV in this section because we have 2 images which has same style, and I gave it a CLASS not ID.

And finally the Site Info is same as navigation section :

<div id="siteinfo">
<h4 id="siteinfo_title">
www.mysite.com
</h4>
  <ul id="siteinfo_nav">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="about">about</a></li>
    <li><a href="#" title="portfolio">portfolio</a></li>
    <li><a href="#" title="services">services</a></li>
    <li><a href="#" title="contact">contact</a></li>
  </ul>
</div>
</div>

Building a HTML file for our website is complete, now you can save this file and view it in your browser, as I told you before this file has a great readability without styles too, you can easily understand the website structure with this file.

In the next tutorial I will show you how to make CSS for this HTML file… Good Luck…

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>My Website</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <div id="header">
    <h1 id="header_title"> Welcome to my Site </h1>
    <h2 id="slogan"> A Webdesigner Portfolio </h2>
    <div id="navigation">
      <ul id="main_nav">
        <li id="home"><a href="#" title="home">home</a></li>
        <li id="about"><a href="#" title="about">about</a></li>
        <li id="portfolio"><a href="#" title="portfolio">portfolio</a></li>
        <li id="services"><a href="#" title="services">services</a></li>
        <li id="contact"><a href="#" title="contact">contact</a></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <h1 id="content_header"> What Can I Do For You ? </h1>
    <p id="main_content"> Lorem ipsum vis eu hinc animal iuvaret, agam munere apeirian cum in. Erroribus suscipiantur ad vim. Eu qui euismod appetere scriptorem, duo in unum porro. Erant alterum cu qui, mea ut partiendo pertinacia, an sea viris alienum.

      Ea duo viris intellegat, nam ut quando elaboraret. Populo omnium appetere et eos. Dicant docendi nominavi mel an, eam an probo consul. Eu has quem blandit maiestatis, soleat fierent ex ius.

      Et cum facete propriae, mei eu aliquid urbanitas interesset. Nam ex docendi omittantur. Duo cetero laboramus ei, cu dolores accumsan persecuti ius. Liber vivendo vix id, mel ad omnis voluptatibus. Pri an accumsan appareat singulis, ne mel veri epicurei philosophia, te nam enim sonet dolorum.

      Vis an sadipscing dissentiunt. Atqui omnium eos id, ei senserit erroribus sed. Est aeterno virtute id, harum aperiri graecis vel eu. Posse quidam nostrud mel no, habeo adipisci at mel. Has munere audire aperiam cu.

      Ex vix cetero euripidis, ius tantas perfecto similique ne. Ea duo mundi detracto appareat, pri vocent menandri prodesset ex. Vide labores te vix. Illud aliquam eum ad. Mel in illud vidisse, nec tota iudicabit ad, pericula honestatis eum cu. Qui sonet utroque gloriatur id.</p>
  </div>
  <div id="sidebar">
    <h3 id="recent_work_title"> My Recent Works </h3>
    <div class="portfolio_image"> <a href="#"><img src="images/portfolio_1.jpg" alt="Image 1" width="104" height="104"></a> </div>
    <div class="portfolio_image"> <a href="#"><img src="images/portfolio_2.jpg" alt="Image 2" width="104" height="104"></a> </div>
  </div>
  <div id="siteinfo">
    <h4 id="siteinfo_title"> www.mysite.com </h4>
    <ul id="siteinfo_nav">
      <li><a href="#" title="home">home</a></li>
      <li><a href="#" title="about">about</a></li>
      <li><a href="#" title="portfolio">portfolio</a></li>
      <li><a href="#" title="services">services</a></li>
      <li><a href="#" title="contact">contact</a></li>
    </ul>
  </div>
</div>
</body>
</html>

General by Farshad

One of the important tool for every web designer and web developer is FTP software, there are many FTP software out there, I have tested some of them but recently I have found something that I think is best !

FileZilla FTP client software is really good, its so easy to use, fast and reliable. And most importantly it is Free ! Yes its a free FTP software that you can download it for many operating systems.

Some of the program screen shots :

Main Features :

• Easy to use
• Supports FTP, FTP over SSL/TLS (FTPS) and SSH File Transfer Protocol (SFTP)
• Cross-platform. Runs on Windows, Linux, *BSD, OSX and more
• Available in many languages
• Supports resume and transfer of large files >4GB
• Powerful Site Manager and transfer queue
• Drag & drop support
• Configurable Speed limits
• Filename filters
• Network configuration wizard
• Remote file editing
• Keep-alive
• FTP-Proxy support

You can download it from this link. Also you can check its website.

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.

Photoshop by Farshad

Maybe you have heard destructive and non-destructive editing in Photoshop, but what they really mean ? Advanced Photoshop users always try to use non-destructive editing. This method of editing means that anytime you can change these edits or remove them easily. This method is differ from History Palette , this method is always available for you to edit even when you close and open your file in future but History Palette is only available when you are working on your file and when you close it, the history will gone !

How can we use non-destructive method ?

One of the most common used features in Photoshop is Adjustments, if you use it from Image menu and select one of the Adjustments from there, you will use destructive method, because after adding some of those adjustments then you cant come back and reverse them. But there is a nice way to do it in non-destructive way, for doing, go to layer palette and at the bottom you will see some icons, look at this picture :

As you see there is 3 icons that I have put their names, for using adjustments select your desired layer and select Create a new fill or adjustment layer, after doing this you can always come back and edit the changes you have made to your layer or remove them so easily without losing your original file. But note that not all of the adjustments are included in this way !
One of the other icons is for Add layer mask, this is one of the another useful methods in Photoshop, when working with images usually we need to remove some parts of image or select some part of it and edit them, we usually chose eraser tool or selection tools to edit such things, but with clicking this icon we can easily add a layer mask to our image and edit it as we like without losing our original image.
Another icon represents Add a layer style which we can easily add effects to our layer and edit or remove them later.

One of the powerful features that has been added from CS2 version is ability to work with smart objects. With this powerful tool you can convert your layers to smart object and resize or transform them without losing their original quality. Also you can easily bring Illustrator file into Photoshop which will known as smart object and when you edit the original file in Illustrator and save it, when you come back Photoshop will automatically update it.
For making a layer a smart object you can go to layer menu, select smart objects and select convert to smart object. Or you can choose your layer in layer palette and right click on it and choose convert to smart object.
After converting it to smart object a small icon will appear in layer thumbnail, look at this picture :

If you double click on this icon you can easily edit the original file, if it is from external program, the related program will be open and then you can edit it, if you convert it inside Photoshop, then a file with .psb extension will be opened and then you can edit it and save it, when you come back to your file it will be updated automatically !

At the end always remember that doing your edits in non-destructive mode make your work take longer time, but at the end you have this ability to always come back and edit or remove your effects or adjustments or anything else…

Flash Actionscript by Farshad

For using a sound in Flash Actionscript we must use Linkage properties and choose Export for Actionscript option. Look at this picture :

Choose a suitable name for Identifier, because you will need it in Actionscript.

In next move we should make an object from our sound :

mySound = new Sound();

Then with the name we choose for Identifier before we attach it to our object:

mySound.attachSound("test");

With start method we can make our sound file play, the first parameter will tell Flash to start sound at the specific point (in seconds). Second parameter will specify number of loops :

mySound.start(0,99999);

Some of sound methods

• stop methol will stop the sound.
• position method will store the stop point of sound in milliseconds.
• setVolume method will specify the sound volume.
• getVolume will get the sound volume. (between 0 and 100)
• setPan will specify on which channel should sound be played, the value is between 100 and -100
• getPan will return the current Pan value.
• setTransform method will use and object with 4 parameters.
• duration method will return the length of the sound in milliseconds.