EDP 116

Graphics for Web Design

Class One

Discussing a Wireframe.
Download pdf: http://livianieves.com/116/wireframe.pdf
Online Wireframe: http://livianieves.com/116/semantics/clean-wireframe.html
Quick Photoshop Review
Transparency for the web: PNG format

Class Exercise:
Creating a simple background image for the header area of a web page.

Example page
[ View page source and copy the code and Image ]

Web Page Example: [ Click image to enlarge ]

Example taken from:
http://webdesignledger.com/inspiration/a-showcase-of-clean-white-web-designs

Homework:
Provide three web addresses of clean website styles you like:
http://stylesinspiration.com/category/clean/

Introduction to Dreamweaver basics:
http://www.youtube.com/watch?v=_hYTcFA-I50

Search in YouTube: Adobe Photoshop Transparency

Class Two

[ DOWNLOAD PHOTOSHOP BRUSHES - SM FILE] [ LG FILE ]

[ DOWNLOAD PHOTOSHOP WEB PAGE DESIGNS ]

[ VIEW SAMPLE PAGE AND SOURCE ]

Class Three [ DOWNLOAD CLASS 3]

* Note: We are meeting at 7:50pm on Class 6 on October 25. We will discuss in class how we will make up the time.

[ Updated* VIEW SAMPLE PAGE AND SOURCE ]

Part 1: 7:35 - 8:30
Reviewing and editing your Photoshop Layout

Part 2:

Generating multiple background images as transparent pngs and applying them with CSS3.

CODE: Multiple Background Images Using CSS3
http://www.abeautifulsite.net/blog/2007/06/multiple-background-images-using-css3/

Ultimate CSS Gradient Generator
A powerful Photoshop-like CSS gradient editor from ColorZilla.
http://www.colorzilla.com/gradient-editor/

My customized example page:
http://livianieves.com/221/multiple-bg-prac/multiple-bg1.html

Resources:

Multiple Backgrounds: Left Half and Right Half
http://css-tricks.com/multiple-backgrounds-left-half-and-right-half/

The web + images + Color + inspiration:

Build a Color Scheme: The Fundamentals
http://tympanus.net/codrops/2012/09/17/build-a-color-scheme-the-fundamentals/

Whether we're ready or not, the future of the web is going to be in High Definition
http://medialoot.com/blog/high-resolution-web/

All Web styles inspiration resource with drop menu to pick style:
http://stylesinspiration.com/?cat=-1

Responsive Examples: http://mediaqueri.es/

Design Style:
Clean, Simple and Minimalist Examples: http://webdesignledger.com/inspiration/a-showcase-of-clean-white-web-designs

HTML5 Capabilities review:
http://www.html5rocks.com/en/
Our class is particularly interested in HTML5 [Semantics]
Along the way, we’ll see that HTML5 semantics are carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content. We’ll also see that semantic markup is not “nice to have,” but is rather a cornerstone of Web development, because it is what enhances accessibility, searchability, internationalization and interoperability. http://coding.smashingmagazine.com/2011/11/18/html5-semantics/

Using SEMANTICS for your page LAYOUT:

The OLD style to create a layout with HTML:
http://w3schools.com/html/html_layout.asp

New layout with HTML5 using Semantics Writing a valid html5 document:
http://html5laboratory.com/writing-a-valid-html5-document.php

Class Four

Reviewing your Page Layout created in Photoshop

Creating and saving slices in Photoshop - Optimizing your graphics for your page

Updated class project: web page

[ DOWNLOAD ] project code

[ Download ] My photoshop file in case you dindn't bring yours

Class Five

Adding your images to the class web project page.
We will use the folder we downloaded last class
Saving images using slices in Photoshop

Optional:

Adding page corners to your page:

Wrapped corners (Free PSD)

http://designmoo.com/5817/wrapped-corners-free-psd/

Class Six

Adding your images to the class web project page.
Updating your navigation tool
Adding page corners to a page:

Wrapped corners (Free PSD)

http://designmoo.com/5817/wrapped-corners-free-psd/

Class Seven

Finishing the web page/website project

Class Eight

Class Nine

CSS3 background-size Property: [Please read information on "COVER"]
http://www.w3schools.com/cssref/css3_pr_background-size.asp
SOME LARGE PHOTOS TO USE:
http://livianieves.com/116/images/2011-mayBarrioArt-vega.jpg
http://livianieves.com/116/images/2012april-bxzoo-frog.jpg
http://livianieves.com/116/images/bridge-south-seaport-jun20121.jpg
http://livianieves.com/116/images/bronx-zoo.jpg
Class Exercise:
http://livianieves.com/116/fullscreen-background/
Full package
Resource Article:
Quick Tip – Make a Full Screen Image Background With a Line of CSS:
http://tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds/
Lightbox2

by Lokesh Dhakar

Class Ten

Making the images of your site responsive using a plug-in and customizing the images in photoshop.

Original Article:
jQuery Picture
A jQuery plugin to help ease the transition to responsive images
http://jquerypicture.com/
My testing page:
http://livianieves.com/116/responsive-img-testing/demo/
Download Package
Customizing/rezing your images in Photoshop
Adding the proper code to your images

Resources:

Testing for Ipad online
http://ipadpeek.com/

10 Fantastic and Creative Web Design Styles
http://inspectelement.com/articles/10-fantastic-and-creative-web-design-styles/

All Web styles with drop menu to pick style from:
http://stylesinspiration.com/?cat=-1

Responsive Examples: http://mediaqueri.es/

IN INSPIRATION
A Showcase of Clean White Web Designs
http://webdesignledger.com/inspiration/a-showcase-of-clean-white-web-designs

Contact:

livnieves at gmail

Class One

Class Two

Class Three [ DOWNLOAD CLASS 3]

Class Four

Class Five

Wrapped corners (Free PSD)

Class Six

Wrapped corners (Free PSD)

Class Seven

Class Eight

Class Nine

Lightbox2

Class Ten

Resources:

Contact: