Adobe Illustrator CS6. Illustrating Innovative Web Design

Transcription

1

2 Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe Illustrator to create the image, as well as Adobe Dreamweaver to insert it into the web page. You will also use CSS (Cascading Style Sheets) to apply the image to only a particular section of the web page. The result is a unique looking display for the main content of your web page. Adobe Illustrator is a vector graphics editor and a graphic design tool. While raster graphics are made up of a collection of pixels or dots, vector graphics are created through mathematical equations that define the graphic elements. The result is that vector graphics tend to scale smoother than raster graphics. Vector graphics look sharper in print and on a computer screen than their raster counterparts, and are useful for designing typography, logos, and page layout elements. Raster graphics are used for photographs, retouching, and hand-drawn illustrations. 1 The finished product Application Bar Control Panel Artboard Tools Panel Palettes Status Bar 2 The Adobe Illustrator CS6 Interface Computer Services, Temple University 1

3 Setting the Page up in Dreamweaver Before we create anything in Illustrator, we re going to open Dreamweaver and set up the page that will later have the Illustrator graphic. Open the Dreamweaver page 1. Launch Adobe Dreamweaver CS6 on your computer. 2. Open the file training.html. 3. Click the Code button in the upper left to switch to code view. Notice there are several sections delineated by div tags. The div tags allow us to set rules for how those 3 Div ID's defining the sections of the web page sections will display, such as what the height and width of the section should be, what the margins are, and if a background image should be used in a section. These will be defined in our CSS. Attach a Cascading Style Sheet (CSS) to a web page Cascading Style Sheets are files that apply rules for how our web pages will display. They allow web designers to make changes to multiple pages at once, by attaching one CSS file to many different pages. When the CSS is updated, such as setting a new font, every page it is attached to will update as well. You can create a blank CSS through the file menu in Dreamweaver, or attach an existing CSS to a page you are working with. 1. In Dreamweaver, click the Format menu. 2. Select CSS Styles, then Attach Style Sheet. 3. Click Browse, then navigate to format.css. Click OK. The CSS is now attached to the page. You should notice that the page has picked up some of the formatting from the CSS, including a background color, font settings, and height and width settings for the various div ID s. If you open the CSS file we attached, you can see the rules that are being applied. The hot pink text defines what element a rule will be applied to, and the content between the {braces} shows the rules themselves. 4 CSS programming CSS is a programming language that takes time to learn. 2 Computer Services, Temple University

4 You can find more information about the CSS language at where you ll find some free tutorials on how to write in CSS. Computer Services, Temple University 3

5 Creating our graphic in Illustrator Next we ll move over to Adobe Illustrator and create a background image for the maincontent section of our webpage. In this case, we ll use a simple rounded rectangle with an elegant brushstroke for the border. Then we ll export it out for use in Dreamweaver. Create the Illustrator file 1. Launch Adobe Illustrator CS6 on your computer. 2. In the File menu, select New. 3. Name the file backgroundbox. 4. Set the height and width to 500 px. Then Click OK. Depending on the size of the section in your webpage, your height and width may need to be adjusted. 5 Illustrator file options The blank artboard is now displayed. Draw the background image Next we ll draw the graphic to be used in our web page. 1. In the Tools Panel, click and hold the mouse button down while pointing at the Rectangle Tool. 2. From the list that appears, select the Rounded Rectangle Tool. 3. Starting in the upper left of the artboard, click and drag down to the lower right to draw a rounded rectangle. 6 Different shape options This draws our shape, but it s pretty boring at the moment. Fortunately, Illustrator has different ways of displaying the brushstroke of the border of our shape. Change the brushstroke 1. On the Tool Panel, click the Selection Tool. 2. Click on the recently drawn rectangle. 3. In the Window menu, select Brush Libraries, then Vector Packs, then Hand Drawn Brushes vector pack. Alternately, you can choose any brush style you like. 4. Select a brush style for your shape. 5. Adjust the shape stroke width in the upper left of the screen if necessary. 6. Adjust the color in the upper right of the screen if necessary. 7 One of many brush libraries available in Illustrator 4 Computer Services, Temple University

6 This will be the background for our maincontent section of the web page. Now we just need to export it. Export the graphic 1. In the File menu, select Save for Web and Devices. 2. On the right side, select PNG-8 as the file type. There are many different file types to use for the graphic. The png-8 format makes it quite compact, while maintaining transparency levels and visual sharpness. 3. Click Save to export the file. Place it on the desktop so you can find it easily. 8 Several different image compression options are available in Illustrator Applying the Background Image in CSS Now that we ve created the image, it s time to go back to Dreamweaver and set it as the background image for our maincontent section. 1. Within Dreamweaver, open the format.css file. 2. In the #maincontent rule, click at the end of the font-weight:bold; rule, and press Enter. 3. Double-click the background-image option, then select Browse. 4. Browse to the location of the backgroundbox.png and select it. 5. Type a semi-colon at the end of the line. If you switch back to the web page, you ll notice that the graphic now appears as the background of our section, framing the content. You might also notice the image begins to repeat underneath the original image. We ll turn the repeat feature off. 6. Switch back to format.css. 7. Click at the end of the line you just entered, press Enter. 8. Double-click the background-repeat option, then select no-repeat. 9. Type a semi-colon at the end of the line. 9 CSS with the added code The image now appears only a single time behind the section. If necessary you can adjust the padding and margins of the section so the text fits in it perfectly. You now have a website with a visually striking graphic outlining your main content. Computer Services, Temple University 5