Principles of Web Design

Instructor : Wilson Alvarez
Phone : 305-386- 6165
Email : info@wilsonalvarez.com

Week 02

This unit will introduce students into the legalities of sampling images from the web. It will summarize and clarify some copyright laws and show students where to obtain high-quality photo media legally. We will also give them a brief tour of the photoshop application and show them some basic image editing. We will introduce them to Cascading Style Sheets (CSS) for styling and layout.

SESSION 2A (Tuesday)

• ✖︎ Class Notes || (Updated with instructor’s notes)
• Box Sizing Demo
• Clearfix Demo
• Positioning Context
• List of CSS properties
• ✎ CSS Starter Page || (Updated with instructor’s notes)

SESSION 2B (Thursday)

Continuation from Week 2A

1. Basic Photo Editing for web
   
   There are many free online image editors that perform these basic tasks beautifully and cost you a penny. There are literally dozens of free applications out there. These are a few.
   • http://pixlr.com
     Online photo editor with many similar features to Adobe photoshop
   • http://www.sumopaint.com
     Available online or can be downloaded
   For the purpose of this demonstration we will be using photoshop. But these are simple exercises that you can do to edit and resize your photos. Keep in mind that there are many ways to accomplish any one image editing task in photoshop.

   • Editing pictures.
   • Resizing, resolution, saving multiples versions.
   • Entering text into a picture.
   • Removing backgrounds? Special effects.

      

2. Finding legal images and inspiration
   Searching for the perfect photo for a web project can be difficult. Most people run to the internet searching for photos, since those images are seemingly free. But many of those photos are copyrighted, and using them without permission can lead to an embarrassing legal confrontation.
   An easy way to avoid this is to select images from Creative Commons stock photography sites:

    

   • Library of Congress Digital Collections – http://www.loc.gov/library/libarch-digital.html
   • Creative Commons – http://search.creativecommons.org
   • EveryStockPhoto – http://www.everystockphoto.com 
   • WikiMedia – http://commons.wikimedia.org/wiki/Main_Page
   • Flickr Commons – http://www.flickr.com/creativecommons

      

3. Map your thoughts with MindManager, VISIO, Word/Excel,  Design Ideas.

   Exercise: Have the students discuss their individual web page needs, i.e. Have a student explain the department or business to the rest of the partners (the students) and grab individual ideas from all, formulate the menu structure based on your findings.

   • ✖︎ Class Notes || (Updated with instructor’s notes)
   • Download Picture
   • Cool CSS3 Text-Effects
   • 3D Text with CSS3
   • CSS3 Letterpress Effect

• ✎ CSS Layouts Continued || (Updated with instructor’s notes)