In this tutorial, you’ll create an organic style green website with Adobe Illustrator. This tutorial shows you how to create illustrative vector graphics and apply this to web design layouts. Let’s get started!
Introduction
A little while ago I wrote a tutorial entitled Use Adobe Illustrator to Create a Clean Website Layout which was met with much fanfare with equally notable opposition. That tutorial was directed towards people just getting started in Illustrator. It eventually made it to the front page of Digg as well.
To set things off on the right foot let me take a moment to point out the obvious… this website design can be created in Photoshop too! However, the purpose of this advanced tutorial is to explain how to use Adobe Illustrator to design a website. Let me also distinguish design from front end coding. While I’ll show you how to design the website in Illustrator, this could be taken further (with the use of standards based XTHML/CSS) to make the design function.
Without further ado, here’s how to make a green landscape website in Adobe Illustrator.
You can find the Source files in the directory labeled ‘source’ that came in the files that you downloaded. You may wish to look through them briefly before we begin.
Step 1
Make a new document with a width of 1160px and a height of your choosing. Set the Color Mode to RGB. You can leave the Raster Effects at High 300ppi since our design doesn’t make much use of raster effects.
Step 2
I prefer to work with a browser in the background so I can get a better idea of what the final design will look like once it’s complete.
Step 3
The proportions of the browser screens are not the same as the 1160px document so you’ll simply use the Direct Selection Tool (A) and click and drag over the area highlighted in red. Then, using the Direct Selection Tool again (without deselecting anything) click on one of the points you selected and drag everything over to the black line on the right, which is your document size.
Step 4
A website with a width of 960px or smaller will work well for the majority of a websites visitors. Our document is setup to 1160px width to compensate for people with larger monitors who may stretch the browser window open wider. The space between the blue vertical guides measures 960px and represents the area all of your main content should stay in between. Anything outside these guides has the potential to be out of view for some visitors.
Step 5
This step is essential for creating a legible site. Make SURE you know what the website looks like when viewed at 100% zoom. You don’t have to work at 100% zoom but you need to be aware of what the website looks like when it’s viewed at actual size (100%). To change the zoom you can click in the lower left hand corner of your document window.
Step 6
The first step is to create the rolling hills. Draw an ellipse using the Ellipse Tool (L).
Step 7
Duplicate the Ellipse and overlap them.
