Datis Design Weblog

CSS, Photoshop, Web Design by Farshad

In previous tutorials I have told you how to design a website template in Photoshop and convert it to valid HTML/CSS file. Maybe some people cant do the coding in CSS and HTML. So Photoshop has a powerful tool to convert your template into a working website. But the generated code will not be so beautiful, but it is a fast way and you can easily customize the generated code to gain what you want, at last I will tell writing code by your self is very very better…

Making template ready !

I am using the same template which I have used it in previous tutorials. You should be able to work with slice tool in Photoshop. You should slice your template in the parts you need for example navigation, header, main content, footer and so on…

Look at the sliced template below :

Note : Slice tool has a shortcut which is very useful, it will create a slice based on your current selected layer, for using it you should select your desired layer and hit Alt+Shift+Ctrl+C or select New Layer Based Slice from Layer menu in Photoshop.

Now you Template is ready to be a HTML file…

Save for Web

Choose File menu and select Save for Web & Devices, the new window will be shown, in this window you can choose your slice image type, quality, change your slices, give them link and alt tag and… If you look at the picture below I have chose JPG for all slices and 80 for quality. When you are choosing images type and quality see the final image size and download time in bottom corner of this window it is important.

When you double click on every slice you can give them link and alt tags, look this image below :

Now when you are finished with your links and tags, click save a new window will appear again, Choose a name for your file, and for Save as Type choose HTML and Images and for Settings choose Custom, a new window will appear again, choose HTML from dropdown menu and select Output XHTML :

In dropdown menu choose Slices and in bottom choose Generate CSS and choose By ID for referenced. Now click ok and save. Your HTML file is ready !

You see how powerful is Photoshop ! With some simple clicks you have a website ready to upload ! If you are familiar with CSS and HTML you can easily customize your code to reach what you want, but again writing code by yourself is very better

At the end I put all files for you to download… Have a nice time.

Download files (275 Kb)

General, Photoshop by Farshad

Santa Clara (CA) – GPU acceleration is one of the most significant trends in today hardware industry, opening the doors to an entirely new class of software. It appears that the next Photoshop will be one of the first mainstream applications that will tap into the GPU for a speed up. And, at least from what we have seen during a first demonstration, the progress is simply stunning.

We have been saying it for a while now, mainstream applications need GPU acceleration to ring in the next major evolutionary step in software development. Far too long we have been stuck in a cycle of programming that relies on increasing clock-speeds, brings acceleration with new CPUs and a slow-down with new software releases. Even if Photoshop supports multi-core CPUs, it is one of those applications that always are very time intensive to use and especially if you are a professional user and work with huge images, then you are very familiar with “The Great Wait”, which typically describes the time lost when opening a big file or when applying a filter.

But there appears to be a very effective solution on the horizon, a solution that is most likely more effective than anything else we have seen before and in our experience using Photoshop over the past 14 years. During a demonstration at Nvidia’s headquarters in Santa Clara, we got a glimpse of Adobe’s "Creative Suite Next" (or CS4), code-named “Stonehenge”, which adds GPU and physics support to its existing multi-core support.

So, what can you do with general-purpose GPU (GPGPU) acceleration in Photoshop? We saw the presenter playing with a 2 GB, 442 megapixel image like it was a 5 megapixel image on an 8-core Skulltrail system. Changes made through image zoom and through a new rotate canvas tool were applied almost instantly. Another impressive feature was the import of a 3D model into Photoshop, adding text and paint on a 3D surface and having that surface directly rendered with the 3D models’ reflection map.

There was also a quick demo of a Photoshop 3D accelerated panorama, which is one of the most time-consuming tasks within Photoshop these days. The usability provided through the acceleration capabilities is enormous and we are sure that digital artists will appreciate the ability to work inside a spherical image and fix any artifacts on-the-fly.

According to information we were given, all of these new features are part of the next-gen Photoshop, which should be a part of the “CS Next” suite. The package is expected to be released on October 1.

Source : Neowin

(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>

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

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…

Photoshop, Web Design by Farshad

In this tutorial I will create a header with menu for a web site using Photoshop, You can download the final .psd file from this link.

First create a new document in Photoshop as any size you need, I will create a document with size of 800 x 250. Then create three layers and color them as you like, look at this picture for example :

Now I will give some effects to these layers using Layer Style menu, I will give Gradient Overlay to the narrow green layer on the top, Drop Shadow to the blue background, and Drop Shadow, Inner Glow and Gradient effect to light blue layer. Look at these pictures :

Final image will look like this :

Now create some boxes for menu links, Select them all and bring them under the light blue layer. I gave each boxes the Drop Shadow, Inner Glow and Gradient effect, Also you can give an effect with Color Overlay for Rollover part. At the end you can add any other elements that you want, my final image will look like this : (Click on image for full size view)

Photoshop by Farshad

In Photoshop we can group tools into two categories, Paint tools and Edit tools.

Paint tools are : Brush, Airbrush and Pencil

Brush : It will mix some of the foreground color with background color and produce an antialiasing effect.

Airbrush : It will act like brush tool but the more we hold the mouse button the more color it will produce.

Pencil : It will act like brush tool, but it only uses foreground color and wont mix it with background color.

If we choose auto erase mode it will use background color.

Color Replacement : This tool will replace a specific color in image.

Edit tools are : Blur, Sharpen, Smudge, Dodge, Burn

Blur : It will reduce the contrast between neighbors pixels and make them blue.

Sharpen : It will increase the contrast between neighbors pixels.

Smudge : It will produce an effect like when we move our finger on wet paint.

In smudge tool if finger painting is on it will blend foreground color on image.

Dodge : We can increase the light intensity with this tool.

Burn : It will reduce light intensity and burn the area.

Sponge : It has two modes, Saturate and Desaturate. In saturate mode if we have a color picture, it will increase the color of it and if we have a grayscale picture it will increase its contrast, and in desaturate mode it will act vice versa.

Illustrator, Photoshop by Farshad

In this tutorial I’m going to create a custom RSS logo with Adobe Illustrator CS3 and Adobe Photoshop CS3.

First I start to create logo in Illustrator, so create a new web document in Illustrator and select Arc tool from your toolbox. left click on work area, an arc segment tool option will popup, fill in the fields like this picture :

Read More

Multimedia Fundamental, Photoshop by Farshad

Pixel Dimension

First of all we need to know what is pixel dimension ?

Pixel dimension is total number of pixels in both horizontally and vertically. For example an image with 640px width and 480px height has 307200 pixels in total.

There is another concept named DPI (Dot Per Inch), for example you have an image with 15″ x 10″ with 300dpi, pixel dimension for this image will be
15 x 300 = 4500 pixels in width and 10 x 300 = 3000 pixels in height, and total pixels in this image will be 4500 x 3000 = 13500000 pixels.
Read More