Outline Of Summer Minuteman Web Design & Development Course

Week 1

Module 1: Basic Web Layouts With HTML5 & CSS3
-Videos 1 & 2 for layout
-commenting
-cheatsheets
http://creativenauts.me/2014/02/08/cheat-sheet-web-development-design/


Module 2: Website Planning & Concept Development
Proof of concept

Module 3: Modifying Layouts & Box Models
Layout planning-content design

Module 4:Creating A CSS Gallery
Image resizing
hover effects
image code

Module 5: Enhancing Layouts & Fonts With CSS3
opacity/shadow text/animation/

Week 2

Module 6: Web Graphics & Photoshop
-Introduction to Photoshop (Basic Photoshop Tuts.)
-Creating Web Banners & Graphics(Show examples and styles)
-Integration of color theory(can use hex colors to support color scheme)

Image Tutorials
-How to do selective coloring
-Adding borders and Text.
-Blurs and formats

Module: ??   HTML5 Web Graphics
Canvas Tag
Google Web Designer

Module 7: Web Forms & PHP/ Javascript Basics (contact form and image switcher)
-Outline the basics of programming languages.(variables,objects,method)
-Discuss security of the form.
-Introduction to Javascript and interactive pages.
http://www.quackit.com/html/codes/html_form_to_email.cfm


Module 8: Site Organization & Hosting
-Managing FTP
-Organizing the layout and links
-Organizing the file structure

Week 3

Module 9: Creating A One Page PHP Site(Instructional Webpage: Teach Us Something)

Module 10: Using JQuery For A Responsive Web App
-Use Basic Jquery Template for starting
http://jqueryui.com/draggable/

-

Easy Photoshop Basics 2: Adding Text & Layers (hex colors,moving layers,fonts)

In this tutorial the focus is on developing a better understanding of how to edit text, arrange it on the page and format it within a document. You are also shown how to create new layers and choose to have a background color,transparency or pattern. You are also show how to edit the names of layers and move them around in the layers palette. The move tool to arrange specific layers is also shown.

  3 Keys Provided:

1. Understanding the use of hex colors can greatly benefit your choice of colors. Use a color scheme designing web tool to assist with choosing hex colors for color harmony in projects.


2. Being able to adeptly adjust font styles and colors for projects will greatly enhance designs and layouts. Be sure to review all potential fonts and how their sizes could be used to create impact in a design.


3. Design with the end in mind. Using the appropriate fill layers when when beginning a project will help you envision as you move along. Don't be afraid to adjust the opacity or density of colors for impact. Also consistently use the arrangement of layers to review your layout.

Review The Video: 

Easy Photoshop Basics 1: Creating Document Size and Background Size/Elements

In this tutorial the creating of a variety of different sized documents and resolutions in Photoshop are covered. The video covers opening the Photoshop program and choosing the width and height of the document as well as determining how the document is sized in terms of pixels,mm,inches or other format.

3 Keys Provided:

1. Documents created in Photoshop can be designed for a variety of web,print or graphic display.
2. Documents can be measured in a variety of formats such as mm,picas,pixels or inches.
3. The backgrounds of documents can be determined right at the outset. This could be a white,transparent or background color.

Review The Video:

Selectively Coloring An Image In Photoshop The Easy Way- Less Than 5 Minutes!

Here is an easy way to selectively color an image in Photoshop to bring attention to those bright colors in a photograph. This is a great effect for the seasoned professional photographer,graphic artist or even just starting out.

Basic Steps & Video:
 1) In this tutorial it starts with opening an image and duplicating it in the layers palette. By doing this you have created two versions of the image.

2) The next step is to desaturate the image in the top layer so that the color is removed. You can also use the black and white feature but this will give you a separate option. You now have a black and white image over a colored one.

3) Now zoom into the image to focus on an are using either choosing either "view" the "zoom" or select "ctrl" or "command" and choose + or - to go in or out. Once zoomed in select the top black and white layer on the palette and then the "eraser" from the tool bar.

4) Accurately select the options for the eraser on the top bar of the screen and choose your choice of hardness or softness and anticipated brush styles. Slowly erase the portions you would like removed and reveal powerful colors from your black and white image.

5)  Be sure to save the final image as a .jpeg to compress the image into one layer.

View The Entire Tutorial Here: