COMPUTER APPLICATIONS : James O'Brien : Art Institutes International : Fall 2006 |
|
Assignment 10: WebsiteHere we are, at our final assignment: a website created using Dreamweaver. We will also discuss how Photoshop and Illustrator play a role in your site creation. Click here to view the assignment sheet. Description: for this assignment, you will create a multi-page website
using Dreamweaver. Each page must include at least one image and a descriptive
paragraph. It must also be linked to other pages within your site. Process: a site generally consists of two parts: a collection of files
on a local computer (the local site), and a location on a remote web
server that you upload the files to when you're ready to make them publicly
available (the remote site). Steps to follow when creating a website are typically: 1. Plan and prepare (how many pages to create, what content appears on each page, what the page layouts should look like, how the pages are connected together (linked). 2. Create pages, adjust their layout, and add content. 3. Link pages together. 4. Preview and publish (upload) your site. To begin this project, complete the following steps: 1. Create a new folder for your website (for now, place it on the student drive. When you are finished, make sure you copy it to your jump drive). Within this folder, create a folder titled Images. 2. In Dreamweaver, define this folder as your local folder. 3. Open a new HTML page. 4. Save this file titled as index.html. This will be your first page. The index name is necessary, it indicates the starting page for the site. Additional pages can have different file names (ex: page2.html). 5. Follow the in-class instructions for adding content to and linking your HTML pages. What is due: a copy of your local folder, due Wednesday, December 13.
InDesign: Packaging (adapted from Adobe Help)You can gather the files you've used, including fonts and linked graphics, for easy handoff to a service provider. When you package a file, you create a folder that contains the InDesign document, any necessary fonts, linked graphics, text files, and a customized report. This report, which is saved as a text file, includes the information in the Printing Instructions dialog box; a list of all used fonts, links, and inks required to print the document; and print settings. You don't need to perform a final preflight check before packaging. InDesign performs an up-to-date preflight check. If problem areas are detected, a dialog box appears. 1. Save your file 2. In the File menu, choose Package 3. If an error message appears, click on View Info and check the error. Choose Package if it is an RBG issue. If InDesign is having trouble locating a linked image, choose Cancel and locate the image. 4. You can skip the Instructions, click the Continue tab. 5. Save your folder to your own personal storage medium. This folder will contain a copy of your document plus copies of the images and fonts you used. 6. To hand in this assignment, place a copy of your folder onto our Graphic Design server (the OBRIEN folder). Make sure your name is a part of the folder title (ex: obrien-indesign).
Indesign: auto page numberingYou can tell InDesign to automatically number your pages by using a Master Page. (adapted from Adobe Help) 1. On the Master Page, position the Type tool where you want a page number to be added, then drag to create a new text frame large enough to hold the longest page number and any text you want to appear next to the page number, such as the section marker or document name. 2. With the insertion point positioned in the new text frame, type any text that you want to accompany the page number, such as the document name. 3. Choose Type > Insert Special Character > Auto Page Number. If the automatic page number is on a master page, it displays the master page prefix (for example, A). On a document page, the automatic page number displays the page number. 4. If needed, you can go back to the Master Page and reformat or reposition the text and auto page number.
InDesign: placing and formatting textPlacing and formatting text: (adapted from adobe help) 1. Import text. With your InDesign document open, choose File > Place. Locate and double-click the text file you want to place (a Word document for example). Click OK. A loaded text icon appears. Click or drag to flow text. (You'll learn how to flow text in the next step.) You can also enter text by creating a text frame and entering text. You can create a text frame by clicking a dragging with the type tool (capital T). Note: If some or all of the imported text appears in InDesign with pink highlighting, the font was missing and a different font was substituted. Choose Type > Find Fonts to locate the missing font. 2. Flow text into frames. To create new text frames, click the loaded text icon on the page, or drag across the area where you want the text frame to appear. If a plus sign appears in the frameā(tm)s out port, it means that not all the text fits in the frame. To place the rest of this overset text, select the frame using the Selection tool (black arrow), click the out port, and then create another text frame. 3. Move and resize text frames. To move a text frame, click on it with the Selection tool (black arrow) and drag the frame to move it, or drag any edge or corner of the frame to resize it. When you resize a text frame, the type size doesn't change (unless you use the Scale tool). 4. Change text frame options. Select the text frame, or place the insertion point inside the text frame, and then choose Object > Text Frame Options. Change the number of columns, the vertical alignment of text within the frame, or the amount of inset spacing between the text and the frame. 5. Experiment with text formatting. To change paragraph formatting options, select text or place the insertion point in the paragraph, and then click the Paragraph Formatting Controls icon (backwards P) on the left side of the Control palette. To change character formatting options, select the text you want to format, and then click the Character Formatting Controls icon (capital A) on the left side of the Control palette. Additional options appear when you click the palette menu icon.
Assignment 9: Page layout using InDesignUsing Adobe InDesign, you will create a four-page newsletter. Your newsletter can be about anything: community bulletin, school news, etc. Each page of your newsletter needs to include text and image on each page, text can be placeholder text (will discuss). Images should be original or copyright free (you can use your Corbis account or Adobe Stock Photo comps). Feel free to create more than four pages or create a different type of multi-page document such as a menu or brochure. Preview the work area: Create a new document: Placing and formatting text: Packaged InDesign file folder including fonts and placed images (will discuss). Due date to be discussed.
Assignment 8: Illustrator image assignmentFor this next illustrator assignment, we will recreate a photograph using paths. First, using your Corbis account, find a portrait or other photograph and Place it into a new Illustrator file. Follow the in-class setup procedure. Use the photograph as a reference when making your paths. Your final image will consist only of paths and will not include the original photograph.
Masks!Great project everybody. I hope I didn't print some of them too big and that you got some use out of them tonight.
Photoshop setupHere are some Photoshop setup essentials that we covered in the previous two assignments. - use the new command to create a new, blank image. if you've copied a selection to the clipboard, the image dimensions and resolution are automatically based on that image data. - choose file > new. if desired, type a name for the image, and set the width and height. to match the width and height of the new image to that of any open image, choose a file name from the bottom section of the windows menu. - set the resolution and mode. - select an option for the contents of the background layer of the image: - white fills the background or first layer with white, the default background color. - background color fills the background or first layer with the current background color. - transparent makes the first layer transparent, with no color values. the resulting document has a single, transparent layer as its contents. - under advanced, choose a color profile, or choose don't color manage this document. for pixel aspect ratio, choose square unless you're using the image for video. in that case, choose another option to use non-square pixels. - when you finish, you can save the settings as a preset by clicking save preset, or you can click ok to open the new file. - photoshop uses the foreground color to paint, fill, and stroke selections and the background color to make gradient fills and fill in the erased areas of an image. the foreground and background colors are also used by some special effects filters. - you can designate a new foreground or background color using the eyedropper tool, the color palette, the swatches palette, or the adobe color picker. - the default foreground color is black, and the default background color is white. - the current foreground color appears in the upper color selection box in the toolbox; the current background color appears in the lower box. - to change the foreground color, click the upper color selection box in the toolbox, and then choose a color in the adobe color picker. - to change the background color, click the lower color selection box in the toolbox, and then choose a color in the adobe color picker. - to reverse the foreground and background colors, click the switch colors icon in the toolbox. - to restore the default foreground and background colors, click the default colors icon in the toolbox. photoshop lets you choose a color mode for each document. the color mode determines what color method is used to display and print the image you're working on. by selecting a particular color mode, you are choosing to work with particular color model (a numerical method for describing color). photoshop bases its color modes on the color models that are useful for images used in publishing. you can choose from rgb (red, green, blue), cmyk (cyan, magenta, yellow, black), lab color (based on cie l* a* b*), and grayscale. photoshop also includes modes for specialized color output such as indexed color and duotone. color modes determine the number of colors, the number of channels, and the file size of an image. choosing a color mode also determines which tools and file formats are available. photoshop's rgb color mode uses the rgb model, assigning an intensity value to each pixel. in 8-bits-perchannel images, the intensity values range from 0 (black) to 255 (white) for each of the rgb (red, green, blue) components in a color image. for example, a bright red color might have an r value of 246, a g value of 20, and a b value of 50. when the values of all three components are equal, the result is a shade of neutral gray. when the values of all components are 255, the result is pure white; when the values are 0, pure black. rgb images use three colors, or channels, to reproduce colors on-screen. in 8-bits-per-channel images, the three channels translate to 24 (8 bits x 3 channels) bits of color information per pixel. with 24-bit images, up to 16.7 million colors can be reproduced. with 48-bit (16-bits-per-channel) and 96-bit (32- bits-per-channel) images, even more colors can be reproduced. in addition to being the default mode for new photoshop images, the rgb model is used by computer monitors to display colors. this means that when working in color modes other than rgb, such as cmyk, photoshop interpolates the cmyk image to rgb for display on-screen. although rgb is a standard color model, the exact range of colors represented can vary, depending on the application or display device. photoshop's rgb color mode varies according to the working space setting that you specify in the color settings dialog box. in the cmyk mode, each pixel is assigned a percentage value for each of the process inks. the lightest (highlight) colors are assigned small percentages of process ink colors; the darker (shadow) colors higher percentages. for example, a bright red might contain 2% cyan, 93% magenta, 90% yellow, and 0% black. in cmyk images, pure white is generated when all four components have values of 0%. use the cmyk mode when preparing an image to be printed using process colors. converting an rgb image into cmyk creates a color separation. if you start with an rgb image, it's best to edit first in rgb and then convert to cmyk at the end of your process. in rgb mode, you can use the proof setup commands to simulate the effects of a cmyk conversion without changing the actual image data. you can also use cmyk mode to work directly with cmyk images scanned or imported from high-end systems. although cmyk is a standard color model, the exact range of colors represented can vary, depending on the press and printing conditions. photoshop's cmyk color mode varies according to the working space setting that you specify in the color settings dialog box. grayscale mode uses different shades of gray in an image. in 8-bit images, there can be up to 256 shades of gray. every pixel of a grayscale image has a brightness value ranging from 0 (black) to 255 (white). in 16 and 32-bit images, the number of shades in an image is much greater than in 8-bit images. grayscale values can also be measured as percentages of black ink coverage (0% is equal to white, 100% to black). images produced using black-and-white or grayscale scanners typically are displayed in grayscale mode. although grayscale is a standard color model, the exact range of grays represented can vary, depending on the printing conditions. in photoshop, grayscale mode uses the range defined by the working space setting that you specify in the color settings dialog box. these guidelines apply to converting images to and from grayscale mode: - you can convert both bitmap mode and color images to grayscale. - to convert a color image to a high-quality grayscale image, photoshop discards all color information in the original image. the gray levels (shades) of the converted pixels represent the luminosity of the original pixels. - you can mix information from the color channels to create a custom grayscale channel by using the channel mixer command. - when converting from grayscale to rgb, the color values for a pixel are based on its previous gray value. - a grayscale image can also be converted to a cmyk image (for creating process-color quadtones without converting to duotone mode) or to a lab color image. bitmap mode uses one of two color values (black or white) to represent the pixels in an image. images in bitmap mode are called bitmapped 1-bit images because they have a bit depth of 1.
Assignment 7: Illustrator patternUsing Adobe Illustrator, you will create a repeating pattern design. Follow the below steps and the in-class demonstration. - Choose View > Snap To Point. - Draw a bounding box using the rectangle tool. - Draw a texture or design with the objects or lines that intersect only the left side of the bounding rectangle. - Using the Direct Selection tool, select the texture and the rectangle, and place the pointer on the lower left corner of the rectangle. - Drag the rectangle to the right; then press Option+Shift to create a copy and to constrain the move. - When the upper left corner point of the copy snaps to the upper right corner point of the bounding box, release the mouse button, and then release the keys. - Click outside the rectangle to deselect it. - Select the right rectangle, and delete it. - Continue drawing your texture with only the objects or lines that intersect the top side of the rectangle. - When you finish with the top side only, select all of the lines or objects crossing the top side and the bounding box; then press Option+Shift and drag downward to create a copy and to constrain the move. - Draw texture on top side of bounding box (left), and then copy texture and rectangle (right). - When the upper left corner point of the copy snaps to the lower left corner point of the rectangle, release the mouse button and then the keys. - Deselect everything. - Select the lower rectangle and any objects that don't cross the top rectangle, and delete them. - Using the Pencil tool, fill the middle of the rectangle with your texture. Be careful not to intersect any of the rectangle edges. Paint the texture. - Copy the original rectangle and paste it on top of itself (Apple+F). Fill this box with a color that fits your design. - Choose the original rectangle and make sure it has no fill or stroke and that it is below all of the other design elements. - Select all and save as a pattern swatch (Edit>Define Pattern). - To test your pattern, create a large rectangle and fill it with your new pattern. Due date: To be discussed in class.
Scary mask need not be scary......so feel free to make a funny mask or weird mask or even a beautiful mask. Think of this as an image as well as a mask. You can make eyes where the eye-holes will be and then cut them out when creating the mask. Also, if you like, I will demonstrate how to create dashed lines in Illustrator and place them onto your mask. You can use these dashes for eye-hole borders and for a border around the entire mask. You can also create small hole dots where the string should be attached. Most of all, have fun with this project and create a great image as well as a great mask!
Assignment 6: Photoshop artFor this Photoshop assignment, you will create a piece of art. The technique you use can "feel" like painting, collage, or drawing, or even a combination of all three. I will demonstrate different methods for creating and adjusting pixels to create an original piece of art. Your concept for this assignment is a Scary mask. Feel free to research and find reference to use. I will show you how to place a photo or sketch in your file to use as reference. Set up your Photoshop file using the following setting: 13"x 19" landscape orientation 150 pixels per inch RGB color mode Save this file with your last name and the assignment number. We will print and review your work next week.
|