Web Images and Positioning : Illustrated Poem
On this page:
- Assignment Overview
- Getting Started
- The poem
- Brainstorming and layout sketching
- Translating to code
- Assignment Requirements
- Assignment Resources
This assignment is will present students with both design and technical challenges. The aesthetic design goals are to choose an existing poem (minimum of two stanzas although more might be ideal) and visually convey the theme, meaning, and/or feeling of the poem through imagery, color, and movement. The technical objectives for the assignment are so that the student will gain experience and a good understanding of how web images are prepared and used in a webpage, as well as learning how to manipulate css positioning of elements on the page using floats and the “position” property.
Start with the poem.
You must select a poem to use (not a song!). The poem can be yours or one that is already published. Feel free to find a poem from a MiraCosta Tidepools publication if you wish. The poem must have a t least two stanzas.
Here is a link to a recent Tidepools publication in pdf format. Poetry can be found on the following pages: 16, 20, 29, 32, 40, 41, 45, 52, 74, 77, 78, 81, 82, 84, 86, 88, 89, 94, 95, 96, 97, 103, 104.
After you select the poem you want to use, do some brainstorming about how the poem makes you feel, what kinds of imagery it conjures, and what you think the impact of the poem is supposed to be. Use as many single words as possible.
Collecting samples and sketching
Based on your brainstorming, create a couple of possible color palettes using a color palette tool. Think also of the types of images you would consider using to create your design; be sure to expand your options to images that are texture-based as well as photographic. Collect imagery samples; the following are some resources:
- http://google.com (1. search, 2. filter for “images”, filter under “Search Tools” for size)
Consider the following:
- how color can illustrate characteristics of objects, spaces, or figures (hot, cold, warm, cool, anxious, calm, stable, etc.). Also consider how changing expected colors of familiar things can unsettle viewers.
- how color schemes can also communicate mood (analogous can be subtle, complimentary can “pop” for conflict or excitement, etc.)
- how varying the scale of elements in the composition can affect the audience’s perception of space, hierarchy, and reality
- about line placement and line quality, especially when painting with brushes. People have fairly predictable reactions to certain line styles. You can communicate feelings via line manipulation in images. Some standard associations are as follows:
- diagonal : dynamic, movement
- spiral : depression, confusion, anxiety, off-balance
- crossed lines : fear, anger, frustration, impact
- vertical : hope, uplifting, peaceful motion
- horizontal : calmness, stability
- zig-zag, squiggles : erratic, energy, commotion
- making the composition more dynamic by moving design components partially off the picture plane/frame to keep the viewers’ eyes moving in and out of the composition.
- compositing images to give a sense of dramatic spacial perspective. Common ways to communicate space in 2-D art is through employing overlapping shapes, using positive/negative shapes, and value difference, and varying objects’ scales.
Questions about any of the terminology above? Find it on the art vocabulary list.
Using pen/cil and paper, start making some different basic sketches of how you could create a layout . Consider how you could use positioning to make some elements overlap, move or stay fixed with scrolling or viewport scaling, and so forth. Do at least three sketch ideas so that you have some options.
Prepare your images for use.
Using Photoshop, Pixlr Editor, or other image editing tool, prepare your images for use in the web assignment. Remember that all 1) images should be 72ppi, 2) that full-screen images need to be at least ~1800px wide to maintain image integrity on large screens, and 3) that images that are intended to be small should be resized for file size optimization.
Select typography options.
Now that you have gotten a basic idea of color, imagery, and tone, you should go to Google Fonts to find at least two compatible fonts to use together in your layout.
Translating to code.
Think about positioning of various elements. Draw basic boxes around main elements in the page using a pencil. Decide if what you want to do with them will require pulling any element(s) out of the document flow. Start labelling their basic placement behaviors with your pencil. For instance, if items are supposed to float, make a note of it; if you need to use the “position” property to fix something to part of the screen without scrolling, label it as ‘fixed”; if you need to place something in an exact location so that it can scroll or be contained within a moving “relative” parent, label it as “absolute.”
***Then, start coding to try to achieve the results you want.***
WATCH THE DEMO
You can watch a resource video playlist to help you see a workflow and learn to use Photoshop to create interesting transparent graphics for layering. It walks you through how to create a layered type of layout using positioning, layered transparency graphics, and how to use Photoshop to create the images: A3 Demo Layout Video Playlist
- The poem: You must select a poem to use (not a song!). The poem can be yours or one that is already published. Feel free to find a poem from a MiraCosta Tidepools publication if you wish. The poem must have a t least two stanzas.
- HTML and CSS: All HTML must be written using an HTML5 doctype and use only one external CSS stylesheet (no embedded or inline css allowed).
- Semantic HTML: All HTML markup must be semantically written, with exception to elements that only offer strategic presentation advantages.
- Position property: Students are required to use the following four “position” property values in their css: static (default), relative, absolute, fixed.
- Float property: Using the “float” property is optional in this assignment.
- Images: Students must use at least three images in their work. At least one must be placed in the css as a background value, and at least one must be placed in the HTML using the <img> tag.
- Author’s name: You must provide the author’s name on the page for attribution (credit), and the name must link out to an online bio somewhere on web.
- Tags: You must use an h1 tag (likely the title of the poem) and an h2 tag (likely the name of the author). Stanzas can be formatted sing <p> with line breaks, or you can also use the reformatted <pre> tag, which will read all white space (including tabs) inside the enclosed HTML <pre> tag.
- CSS3: You must include at least two CSS3 styles. Some to consider: text-shadow, box-shadow, mix-blend-mode, transition.
- Typography: Use at least two compatible Google Fonts in your layout.
Class Lecture Review
- Watch Web Image Preparation Lecture
- CSS Positioning Introduction / Demo (3 videos total)
- MORE FORTHCOMING
Textbook Reading Reference
Read pp.105-132 AND pp.507-555 of required text, Learning Web Design (Robbins)
- “Web Graphics Basics” – Chapter 21
- “Lean and Mean Web Graphics” – Chapter 22
From instructor website:
CSS3 Design Tools
Here are some good CSS3 resources to help you design quickly.
- Eric Meyer’s reset code file
- http://html5css3box.com/rgba/ ***This one is awesome and links to a lot of other tools, too!
Understanding CSS Properties
- CSS Properties Compilation
- Font Shorthand Order
- CSS3 Transitions
- CSS3 mix-blend-mode property
- CSS3 text-shadow property
- CSS3 box-shadow property
- CSS3 transition property
- Vertically centering stuff in the viewport
- Using multiple text-shadows for depth or kooky effects
Free Web Fonts
Background Image Patterns:
Free Stock Images (great for textures, etc.):
…(upon getting Google search results, use “Search Tools” button to then filter by “Size” to get only large images or ones with open “Usage Rights.”
Awesome Color Palette Tool
http://paletton.com/ ***This site will generate hexadecimal values for you for all color samples.
Student Example Work:
- I Don’t Miss It
- One Inch Tall
- A Dream Within a Dream
- Army Song
- All the World’s a Stage
- O Captain! My Captain!
- Don’t Quit
- Gold Dust Woman