Scenario: someone hands you an Illustrator document with their latest web layout and it's your job to convert it into working HTML and CSS. Let's take a look how you can do that. Note: The aim of this tutorial is not to perfectly recreate the design for web use. Instead, we're going to use it to explore workflows and features within Illustrator which help us to do so. The Illustrator File Let's start by taking a look at the document in question: See how our example layout was made in this tutorial It's a layout for a 404 page; a page which tells users that whatever they're looking for can't be found and that they should perhaps try something else. We can see a heading, some instructional paragraphs, a search form and button, plus some buttons with tooltips at the very bottom. The whole thing appears to float in the center of the page, both horizontally and vertically. It has a yellow background, some warm accents and drop shadows here and there
↧