<\/p>\n

In this tutorial, you\u2019ll learn to properly plan and design a website using Adobe Illustrator.\u00a0 After that, we\u2019ll convert your Illustrator layout into HTML and CSS.<\/p>\n

PREPARATION:\u00a0 Site Map Creation and Content Gathering<\/strong><\/p>\n

Your website shouldn\u2019t be complicated and tedious for users, and it won\u2019t be if you take the time to plan it out before you build it<\/em>.\u00a0 One of the most common mistakes made in the website design process, is jumping straight into the creation of the aesthetic component of your site.\u00a0 This may seem like a fun thing to do at first … but skipping the planning stage will probably lead to roadblocks later on in web design process. <\/p>\n

… Remember that fixing a mistake takes longer than planning ahead and avoiding one altogether.<\/p>\n

Here are some important planning steps:<\/strong><\/p>\n

List the content and features that you want to include in your site.\u00a0 You may not know all of that right away, and of course, you should allow for some flexibility as your ideas grow and change.\u00a0 But, try to include as much as you know now. For example, lets say your site will be about a new business. Your plan can include things like:<\/p>\n

– Services offered.
\n– Testimonials.
\n– Prices.
\n– Contact Information.<\/p>\n

You should make a sitemap.\u00a0<\/strong><\/p>\n

Just like when you plan a road trip and create a route, you should create a navigation map for your site.\u00a0 You can easily do this in flow chart form.\u00a0 That way, you can create and visually see the links between your main pages and subpages.<\/p>\n

Gather your content and text. \u00a0<\/strong><\/p>\n

Your content should not be determined by a pre-established site design; rather, your design should be flexible enough to accommodate different lengths of content.\u00a0 Content can include photos, videos, website copy, etc. A good way to organize these files is by creating one folder on your computer and keeping all of your content in there.<\/p>\n

Using a grid to plan your website’s layout.<\/strong><\/p>\n

<\/p>\n

You have a choice of layouts and there will be advantages and disadvantages depending on your content.\u00a0 Like I mentioned before, it\u2019s important to choose a layout that can handle all the different forms of content you\u2019ll want to include in your site.\u00a0 <\/p>\n

Now that you have an idea of your content from your planning list, you can make a decision on what grid to select.\u00a0 When selecting a grid, it\u2019s important to choose one that provides the best flow of information of your content to the audience.<\/p>\n

In the image on the right, you’ll find some basic and common grid layouts you can use.\u00a0 These are just basic structures that you will further customize down the road.\u00a0 Your choice of grid will be affected by the amount and type of content that you\u2019ll have on your site.\u00a0 One thing you\u2019ll modify, for example, is the location and font for the menu. \u00a0If you have too many items or the item names are too lengthy, reducing the font size may not always be the best solution.\u00a0 <\/p>\n

You have to remember that there are many kinds of people that browse the Internet and you want your site to be friendly to everyone\u2019s eyes, old or young.\u00a0 You should use your common sense when it comes to menus.\u00a0 In the case of a long menu with many items, you may want to use a vertical layout but a shorter menu can be placed horizontally.<\/p>\n

<\/span><\/p>\n

Lets work on the 3rd layout of the batch and try to figure out where we would put our items.\u00a0 In the images above, you\u2019ll see that I have chosen to have a banner, my menu to the left, and my content on the right.\u00a0 These layouts are just a basic skeleton, like I said, and you can further customize them to fit your needs.\u00a0 For example, maybe you\u2019d like a dedicated area for contact info instead of leaving as a menu item.\u00a0 This will keep it visible at all times and make it easy to locate.<\/p>\n

MOCKUP: This is where we start the design process with the help of Adobe Illustrator.<\/strong><\/p>\n

We have to decide what the size of our working document will be. \u00a0I did all of the work for you here but I\u2019m still going to explain how I got there and why.\u00a0 When trying to figure out what document size to use, I looked up the stats for the most common screen resolution:\u00a0 1280p x 800p.\u00a0 But, that doesn\u2019t give us the size we should use for our document \u2013 we still need to subtract things that take up screen real estate like menu bars, toolbars, tabs, scroll bars, etc.\u00a0 That gives us a \u201csafe area\u201d of about 1200p x 625p.<\/p>\n

<\/p>\n

All right, now is the creative part. Open Adobe Illustrator. On the welcome screen select \u201cNew Web Document\u201d. <\/p>\n

<\/p>\n

The \u201cNew Document\u201d dialog box will appear and we are going to make some adjustments to the current settings.\u00a0 Select a size of 1200p x 625p and make sure the units are in \u201cpixels\u201d.<\/p>\n

<\/p>\n

Now we have our new document and so I\u2019m going to jump to the actual design process.\u00a0 For now, we\u2019ll concentrate on translating a layout in HTML code and leave the funky Web 2.0 designs and graphics for other tutorials.\u00a0 So, I had chosen Layout Number 3 for my example.\u00a0 The layout has a banner, vertical menu and the content is to the right. Go to the \u201cView\u201d menu and make sure \u201cSmart Guides\u201d is checked.<\/p>\n

<\/p>\n

Now grab the \u201cslice tool\u201d from the tool bar or press \u201cShift + K\u201d and drag a rectangle shape around the banner area. Having \u201csmart guides\u201d enabled will help you be very accurate with the shape. Don\u2019t worry if is not perfect right away because we\u2019ll fine-tune it later.<\/p>\n

<\/p>\n

As you can see in the screenshot, we have divided the design into two areas or slices. Even though we only did that once Illustrator will complete the rest of the slices for us.<\/p>\n

To finish making slices:<\/p>\n

1. \u00a0Draw one over the content (gray) area.
\n2. \u00a0Draw one over the menu box.
\n3. \u00a0Draw one over the contact box.<\/p>\n

<\/p>\n

As you can see even though I only drew a total of four slices Illustrator created eight to fill in empty spaces. To make adjustments to your slices and get very accurate results, use the \u201cslice selection tool\u201d until you get them just right.<\/p>\n

\n
\nTRANSLATION:\u00a0 Refining Your Code for the HTML Template<\/strong><\/p>\n

For this next step we have to reduce our work areas to exactly the dimensions of our design.<\/p>\n

<\/p>\n

1. \u00a0Go to the \u201cFile\u201d menu.
\n2. Click on \u201cDocument Setup\u201d.
\n3. \u00a0When the document setup window opens click on \u201cEdit Artboards\u201d.
\n4. \u00a0Move the nodes until the gray area completely surrounds your work, and then press the escape key.<\/p>\n

<\/p>\n

Now we are going to export what we\u2019ve created to HTML:<\/p>\n

\n1. Go to the \u201cFile\u201d menu
\n2. Click on \u201cSave for Web and Devices\u201d
\n3. Under the preset section select JPG and \u201cVery High Quality\u201d.
\n4. Click on \u201cSave\u201d.
\n5. In the \u201cSave\u201d dialog box settings select:
\n6. Format to HTML and Images.
\n7. Settings should be set to Default.
\n8. Slices should be set to \u201cAll Slices\u201d.
\n9. Select your destination folder.
\n10. Click \u201cSave\u201d again<\/p>\n

<\/p>\n

What Illustrator will do is create an HTML document with a table with cells of the exact dimensions of your slices and containing the images of your design. The images are saved in a new folder called \u201cImages\u201d in the same directory that contains your Illustrator file.\u00a0 For those of you experienced with HTML, you know by now that tables must be translated to <div> tags. \u00a0To do that we don\u2019t need the generated HTML because the images created for the slices give us the dimension to specify properties for our divs in the CSS.\u00a0 If you are an HTML newbie, the HTML exporter from Illustrator is a great time saver.<\/p>\n

Now there are just a few more changes to make before you can start putting the rest of the content in your html page.<\/p>\n

You need to make sure that when we remove the image from the cell, that the cell will stay the same size.\u00a0 To do so, copy the image location and dimensions somewhere because we are going to use these as attributes for the table cell.<\/p>\n

Images\/Untitled-2_06.gif width=”139″ height=”232″<\/p>\n

The code of the table cell will turn into this:<\/p>\n

<td” width=”139″ height=”232″ align=”left” valign=”top” background=”images\/Untitled-2_06.gif”><\/td><\/p>\n

Do that for the rest of the cells marked and then you\u2019ll be able to write your content in between the tags.<\/p>\n

PHOTOSHOP<\/strong><\/p>\n

If you feel more comfortable working with Adobe Photoshop instead than Illustrator, than you are in luck. The workflow to export to HTML is exactly the same, except for the artboard size change. \u00a0In Photoshop you just need to use the \u201ccrop\u201d tool and then export by going to the \u201cFile\u201d menu and selecting \u201cSave for Web and Devices\u201d using the same directions that were explained for Illustrator.<\/p>\n

CONCLUSION<\/strong><\/p>\n

This technique is very simple and will save you lots of time.\u00a0 Adobe Illustrator is a great tool for layout and design. I find it easier and more versatile than Photoshop and I would advise that after completing this tutorial and getting more familiar with HTML and CSS, you try and eliminate the use of tables for a more elegant solution using <div> tags and CSS.\u00a0 I\u2019ll hopefully cover this in an upcoming tutorial.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this tutorial, you\u2019ll learn to properly plan and design a website using Adobe Illustrator.\u00a0 After that, we\u2019ll convert your Illustrator layout into HTML and CSS. PREPARATION:\u00a0 Site Map Creation and Content Gathering Your website shouldn\u2019t be complicated and tedious for users, and it won\u2019t be if you take the time to plan it out […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/317"}],"collection":[{"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/comments?post=317"}],"version-history":[{"count":27,"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/317\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/317\/revisions\/336"}],"wp:attachment":[{"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/media?parent=317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/categories?post=317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/tags?post=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}