Illustrator is the hero for graphics artist. From beginner level work to higher level work, illustrator illustration has been so much important and helpful. This time, I am helping you to create your own website with your own creative design ideas.
Creating website in illustrator does not need complex HTML or PHP scripting. It is just the design presented in HTML format.
I am going to use
Adobe illustrator CS3 to create a simple website. The final format of the website will be like below:
First of all let me tell you that I am only going to use rectangle tool and text tool to create the basic page layout.
Open Adobe Illustrator and create a new document with 960 px by 1500 px .
Now inside the art board (Black border), draw your layout.
The image above demonstrates the layout of the website. The header at the top, the navigator bar with three navigation links and one content container and another right sidebar, and footer optional.
To draw the layout use rectangle tool and position it according to your layout requirement.
When all of the layout is properly made then select all the rectangles, right click in it and choose “Make Guides”
The guides will be created in Layer 1, see at layer palette(F7).
Double click on it and rename it as Layout and click OK.
Now lock the Layout layer and create a new layer above it.
This will be the layer to draw the design outlet of your blog. While drawing your design be inside the layout markings.
After you are done with the basic background and links designing, we’re heading towards making contents in it.
Upto now you must have made Logo for your site, links for your site and the background image/color for the contents of your site.
Double click and rename this layer again.
Again add new layer. Rename it to Home. In this layer you are going to add all the contents that your home page will contain.
Add contents like welcome notes, images and other things.
Lock the Home layer and again create another two layers and contents for About and Contact Page.
Up to now you might have created your whole webpage with Home, About and Contact Page each of them in separate layer.
Sidenote: Play with visibility of layers for easiness in your designing work.
Now make all layers visible by clicking on visibility(eye) icon. But hide two Layers, i.e. About and Contact Layer.
Now time to slice up the images. Go to Object>Slice>Create from Guides.
Now you may have problem if you’ve designed your page outside the layout. If you haven’t then it’s OK, else you’ll have to redesign it for proper slicing.
After you get success in slicking you may head up to link building and export it in html format.
Go to File> Save for Web & Devices.
New window will popup with your whole website view.
You have to create three links for Home, About and Contact.
Double click in the Home link.
In URL type home.html (the homepage URL)
Do the same for About and contact page with URL address about.html and contact.html respectively.
We’re predicting that we’ll have three html files, home.html, about.html and contact.html in same folder.
Since you’ve the Home page contents visible, click Save button at the top right and save it as home.html.
You’ve home.html page ready.
Now in second step, hide Home and Contact layers and follow the same method for navigation links as above.
But save it as about.html
Again hide Home and About layers. Do the same for navigation links. Save it as contact.html
Make sure that you have all three html files in one folder with images folder in it. Also whenever a popup comes up to replace images(for example slicer.gif) click on Replace button.
Now open home.html in your web browser. Click on the links to check if it’s OK.
If everything is ok then you can upload it to your web host and next enjoy the your own cool homepage.
Hands for Drawing : Every artist knows that drawing human body’s hands is a intricate task. This drawing tool lets the artist choose from a variety of hand poses, once he finds what he is looking for he can rotate the camera around and zoom in and out.
