Web Fundamentals

Unit:  Photoshop, Branding, Design Basics

Materials.  Web resources and articles, Adobe Photoshop and Microsoft FrontPage.

Overview.  Adobe Photoshop is the industry standard for image development and manipulation.  We will use Photoshop to create and manipulate images for web sites and as a prototyping tool to create web user interfaces.

Pacing:  This unit  is paced to take approximately 6.0 weeks (30 class days).  This includes time for students to work on the Lab Exercises during class.

Objectives:  To create web design elements in Photoshop including animation, buttons, color, design, drawing, photo effects, text effects, textures, and photo manipulation.

Grading Standards:  Students' work  will be evaluated on the following

• Completeness of the Assignment, Creativity, Was the work done on time, Is it as good as or better than the sample project
   

Class Rules

How to Hand In Your Work.

Save all work to my drop box in the format LastName-ProjectName.  Any work not saved in this format will not be graded.

Student Deliverables (What You Need To Do):

» PhotoShop toolbox overview

» PhotoShop toolbox tutorial

Wed Jan 4. Photoshop Basics

Friday Jan 7. Photoshop Basics Continued

• Red Ball with the Airbrush
  
  

Mon Jan 9. Photoshop Basics Continued

• Working with the Pen tool
  
  

Tue Jan 10. Photoshop Basics - Web Elements

• Creating Web Buttons Part 1
• 
  

Wed Jan 11, Thu Jan 12. Photoshop Basics - Web Elements

• Creating Web Buttons Part 2
  
  

Fri Jan 13. Photoshop Basics - Distortions and Opacity

• Sunglasses
  

End grading group 1

Tue Jan 17. Photoshop Basics - Pen Tool, Geometry and the swirl filter

• Spiral

Wed Jan 18. Photoshop Basics - Photo Composition, using the lasso tool

• Snowflake
• Moon Scene

Thu/Fri Jan 19/20. Photoshop Basics - Textures and Noise

• Bulletin Board

Mon Jan 23. to Wed. Jan 25. Photoshop Basics - Extractions

• Six Extraction Techniques

Thu Jan 26. to Tue. Jan 31. Photoshop Basics - Movie Poster Project

• It is your job to design a movie poster for the sequel to your favorite movie. You will need all of the PS skills you have learned. Visit this site to see some samples of movie poster design

Wed Feb 1 to Fri Feb 3.  Photoshop Basics - Transform effects & 3D product box design

• This time out, I would like you to design a product box.  It can take the form of a box that software, cereal or any product is stuffed into.  You will work with the transform and perspective controls. Visit this site to see some samples of how product boxes are made.

Mon Feb 6 to Tues Feb 7.  Photoshop Basics - Creating Wallpapers

• Let's work on some desktop wallpaper techniques.  The first is a sunflower and the second is a watercolor wallpaper.  Put your own spin on the graphics and use your own style.

Wed Feb 8 to Fri Feb 10.  Photoshop Basics - Madden Cover Simulation

• In this tutorial we’re going to explore how to recreate awesome video cover art with just a couple of photos.  We do not have access to the splatter brushes, so you will need to use a little creativity.  Feel free to use any character for the cover.  Here is the tutorial.

Mon Feb 13 to Tues Feb 14.  Photoshop Basics - CD Cover

• Today we are going to design a retro CD cover in Photoshop. We will photo-manipulate a sunset scene, then we will combine other elements like textures and vector resources to finalize the composition. At the end, we will apply the final design to a CD case mock-up template. Feel free to ad-lib at any point for the cover.  Here is the tutorial.

Wed Feb 15 to Thu Feb 16.  Photoshop - Working with Light

• For a designer that is just starting out, understanding the concept and benefit of using light in your artwork can be a bit daunting. Light can create depth and add a touch of realism to your work. IT can also set a mood or tone for your piece. It’s important that you consider different methods for utilizing light in your designs. In the tutorial below, we will look at a few of those methods to help give you a stronger grasp on how lighting can be utilized in Photoshop.  Here is the tutorial.

Mon Feb 27 to Tue Feb 28.  Photoshop - Retro Coupon

• In this tutorial we will go through the process of creating vintage coupon in Photoshop. We combine basic shapes, textures, filters and stock images to achieve the final design. Read on to see how to make this vintage coupon from scratch.

Wed Feb 29 to Mon Mar 1.  Photoshop - Sports Site Prototype

• In this tutorial, we will be designing a blog-magazine style layout, perfect for an on-line football (soccer)/sport community. This kind of websites generally are focused on the content because they should provide a lot of information to the readers and in this case I’ve chosen to bring out all the contents (the articles) giving more relevance to images and headings.

Mon Mar 19.  Photoshop - Watercolor Portrait

• A 3 step process that ends in a nice effect that works on just about any portrait.  Click here.

Tue Mar 21 to Friday Mar 23.  Photoshop - Prototyping

• Design the front page of a web site of your own creation in Photoshop.  Your concept and theme must be pre-approved.  You also must find a web site of the same type for inspiration.  Click here to browse web site designs.