arch 610 logoHome linkOverview linkSyllabusStudents linkSelected Works linkResources linkStaff link
Assignment Two Header graphicWeek Two linkAssignment Two Description link

 

 

Small Assignment Two Illustration 1. Starting point
Download Assignment 2 template : [assignment02.zip]. Uncompress these files with Stuffit Expander on Microsoft Windows or Stuffit Lite on Macs. Both utilities are available on the Duckware CD-ROM from the Computing Center.  Note that homework assignments MUST be named assignment01.html, assignment02.html, etc. in an arch610 folder to show up on our class web page and be graded.

"Expanding your website with new assignments"
-view tutorial | download movie: [Expanding_Assignments.zip]

2. Idea and Concept.

How do we read visual information? We perceive a visual scene by the simplest overall impression given by all the evident pieces, or its gestalt.  Your task is manipulate the reading of architectural images in two ways: by enriching it with context and to trace over essential aspects. First, recontextualize an architectural model or perspective image by collaging it into a new setting. By composing a building view with new background and foreground images, you influence how the viewer reads the building and reacts emotionally. Second, create diagrams by tracing over orthogonal views with colored shapes and manipulating transparency.  Option III students can create diagrams of precedent buildings for the design studio.  The subject for the two exercises can be the same or different. 

Using an artist or designer as a guide, create at least 3 variations of the collage and the perspective by manipulating position, contrast, lighting, shape or color, etc.  Present your favorite perspective at a larger scale 400 x 600 pixel image with 133 x 200 pixel alternates and diagrams.  Include a thumbnail image or link to the inspiration work.  

3. Look carefully at inspiration images
Identify an artist, designer, illustrator or photographer whose work you admire.  How does the person use viewpoint, proportion, and lighting to compose an image? How are shapes and colors to evoke mood and maximize impact?

4. Collect & prepare components
Your photocollage requires photos with lighting and perspective viewpoints that match. Take photos of an existing cardboard or wood model to match a context background photo. If your background images are at least 1200 pixels wide, you will be able to print the final image very crisply at 6" wide (200 pixels per inch) and okay at 8" (150 pixels per inch).

To create the diagrams, you can start with a site plan, aerial photo or building plan, section or elevation base drawing. Scan it in so that it is at least 600 pixels wide

5. Enhance your the images in Photoshop.
The collage components should have appropriate brightness, contrast and color cast. You might want to enhance the photos by changing contrast and brightness with Levels, deleting any unwanted shadows, sharpening, etc.

 

6. Format the collage in Photoshop.
Open Photoshop and under file select "new." Create a new file that measures 800 x 1200 pixels @ 150 dpi (5.3" x 8") with contents set to white. This is your "canvas" to create your graphic images. This file size is large enough to print out your work in inch size in good color quality. You will reduce it later for the web.

 

7. Copy, paste and arrange the collage.
Paste the images into the file, adjusting position. Every time you paste a new object into your master file, Photoshop will automatically open a new layer for you. This helps you to be able to move and manipulate (resize, flip,..) the objects separately. This is the most exciting part of the exercise -- the part where you actually create your collage. Take the opportunity and go back and forth between sketchbook and computer to explore and develop design options.

Create 3 variations of the collage - such as changing of the color scheme, changing the emphasis by enlarging certain objects,...

Note: Use "save as" commands to record provisional results while exploring your design idea and collaging with photoshop.

8. Image to diagrams

Open the diagram's base image. Clean up the image by Image menu > Adjustment > Levels and with the Filter menu > Noise > Dust & Scratches.

Create a new layer. Create highlight areas by selecting important areas and filling with color or changing brightness & contrast.  Trace important lines with the Pen or Shape tools. Adjust the transparency of the base layer and the overlays to adjust the graphic image. See how well you can convey an idea with a minimum of geometric shapes. Study how retaining a ghosted underlay can be clarifying or confusing.

9. Saving.
Save your Photoshop files (.psd) -- this is your working file and will save all of your layer information etc... You will be able to re-open this file and edit it. You can also use "save as" to create an exact duplicate of this file giving it a different name, i.e. collage1a.psd, collage1b.psd. Do this if you want to save your file as it is, but want to continue editing a copy. When you are ready to post your images to the web, save your Photoshop file under a new name, then Image menu > Image Size. Use Photoshop's "save for web" command to create a JPEG or GIF file. (Description of file types.)

 

10. Composing the Page & Writing Reflections
Place your finished web-sized images into the assignment_images folder of assignment2. Open the "assignment02.html" template in GoLive and place the images. Analyze, assess and briefly describe your visual experiments in a brief text narrative that accompanies the images.

Create more pages if needed. Then upload the new assignment to your arch610 site.

11. Send E-mail.
Send an e-mail to your GTF telling them when your project is completed.

 

References:
Photoshop Manual and Tutorials
Communication Arts Design Annuals - AAA Library, non-circulating.
Models in real world (Quick tutorial on collaging in Photoshop).
Shortcuts and tips in Photoshop (A guide created by Phil Jones).
Demo on Photoshop (by Nancy Cheng)
Video on vanishing point
Website for school design awards with standard colored plan diagrams.
List of useful skills and items in Photoshop from Thursdays tutorials.



arch 610 footer