New Assignment: Create A Graphic Based Website With Photoshop and Dreamweaver

Hello Students,

You newest assignment is to create a small website (based on your previous html project) using the "Photoshop to Dreamweaver" technique. This is your first graphic based website and will prove challenging. Use class time wisely, missing class time or wasting time will severely impact your ability to complete this project. Your Photoshop design should reflect the class time given for the work. Minimum effort will yield a minimized grade.

I will demonstrate this technique, take notes!

The Photoshop to Dreamweaver Process:

1. You will create a homepage template complete with your name at the top, photo banner and a graphic menu bar. Leave an area below to use for content.

2. Then you will use the "slice tool" to cut up and output an html file and compressed graphics ready to edit into a website with dreamweaver.

3. Add any extra formatting to your template in Dreamweaver, center your page and elements and begin programming your buttons into links. Do not stretch or move any of your image tiles or graphics, this can break up your tables.

4. Create copies of your template and rename into the appropriate file names for your menu navigation. Do not do this step until all programming and edits are made to the template page. Any errors will have to be fixed 4 or more times otherwise.

5. Edit each page for content, such as your home page, contact page, links, about me etc... each page should have unique content to test your navigation. 

PSD To Dreamweaver Project Details:

• You must use Photoshop to create your original design and Dreamweaver to insert the proper HTML tags.
• Each page must contain a simple menu at the top for navigation
• Must have a total of 4 pages, more is allowed for extra credit. Page titles can be "Home, About Me, Contact, Favorite Websites" or your choice.
• Include 1 image or photo on each page - IMPORTANT: You must resize your photo to be smaller than your content window or it will disrupt the layout of your tiles
• Include at least 3 links to external websites (for instance your blog, the class blog etc...).
• You must include your email address either on your contact page or in your menu.
• Create rollover buttons for your menu

Extra Credit:

- Create an animated Gif for your page banner

- Create a seamlessly tiled background for your page template

- Use one of the tutorial links below to create your website

Deadlines:

• 2 Days for Graphic Design and Photoshop Work
• 2 Days for Programming and Testing

Inspiration:

Check out these links for help with the PSD to DW technique or if you are looking for some website design inspiration

Workflow Video:

PSD- Dreamweaver Website Part 1 - How to "slice" up a design to prepare for coding

PSD - Dreamweaver Website Part 2 - How to code your sliced up PSD page

Tutorial Links:

Tutorial - Grungy Paper Texture Website Design

Tutorial - Highly Textured Website Design

Tutorial - Grungy Translucent Website Design

Tutorial - Unique Colorful Website Design

Have fun!

 - Mr.W

Long Term Project: Print Portfolio Development

Hello Students,

Having a polished and professional looking portfolio is key to your success in finding work after High School and moving on to developing a career. Download the ROP Portfolio Handbook to use as a guide for creating your own portfolio.

Examples of student portfolio's from a computer graphics course.

Remember that the best portfolio in class will be sent to the portfolio design competition that ROP has at the end of each school year, your portfolio will compete against other classes across the county and there certificates for finalists and a prize for the winner.

A judge evaluates print portfolio's from past entrants...

Portfolio Development Assignment:

• Your portfolio can be created with microsoft word or with Indesign
• The final file you turn in to me must be a PDF document
• Portfolio must meet the requirements in the ROP Portfolio Handbook
• Your portfolio cover, table of contents and all materials should look clean and consistent. Use consistent design style across all aspects of your portfolio. The more extensive your portfolio is the better, that includes writing about your projects to document your learning progres

Your Portfolio must contain in this order:

• Cover page with your name, class title, year. Spend some time on this, it should show good design skill and be reflective of your personality
• Table of contents
• Letter of Introduction
• Resume
• Handwritten Job Application 
• List of References
• Letter of Recommendation -  cannot be from your ROP teacher or a family member
• 3 or more work samples with written explanation about the work, why is it important to your career choice? What did the project entail, what were the challenges and difficulties? Give us details. 
• You are responsible for printing and binding your portfolio
• Sky is the limit, you can add your own style to the entire portfolio

How Your Portfolio Is Evaluated:

• Contains required content and format
• Well organized
• Free of grammar errors
• ROP related work samples
• Shows creativity
• Shows skill development
• Appropriate for use in job search
• Professional yet creative appearance

Use this as a rough guide to laying out your own portfolio...

Ok have fun!

- Mr.W

How To Write A Good Great Resume

Hello Students,

Having a solid resume is the cornerstone to your job future. A well written and well designed resume is what sets you apart from other job applicants. A perfectly written job application, a quality resume and a list of positive references is the job seekers trifecta. In this class we will teach you these skills and more. Below is a list of writing tips, read over it before finalizing your resume.

Link, right click to download: ROP PORTFOLIO HANDBOOK

Resume Writing Tips:

Have an objective:

Know the purpose of your resume and edit it for different job scenarios. Having a focused job objective listed on your resume will help you with attaining an interview and getting hired.

Back up your special skills with job experience:

List your skills but make sure your listed job experience, training or education reflects those skills. Are you really good at making websites? Let them know how and where you learned that skill.

Research and use the right keywords:

Every industry has its own language, research job offerings and pay attention to the keywords that are used. If you put your resume online with a job placement service they will often use certain keywords to search their database for potential hires.

Be descriptive with job experience:

A job title will communicate your role, but not the details of your work experience. List the duties, tasks, activities, skills and achievements that were part of your job.

Format your text:

Use bold text to start each section. Use bullets for lists. Make the document easy to quickly scan and read. Clarity of format is crucial, you have ten seconds before the employer will move on to another applicant.

List most recent job experience first:

This also goes for education, list the most recent first. If your still in High School you can say "future class of 2012", or "Currently attending HS".

List most important skills first:

When writing out your skill list make the most important skills the first ones on the list. If you are applying for a web design job, list your web skills first. Change and edit this for different industries/jobs.

Leave out the obvious:

It is not necessary to add "available for interview" or "references available upon request". References are standard and expected, and of course you are available for an interview. Thats the whole point!

Avoid negativity:

Don't trash talk past employers or state that you didn't like a past job. Simply state that you were looking for future opportunities.

Go with what you got:

If you haven't had work experience yet, just list any summer jobs, volunteer experience etc. If you have hobbies that are relevant to the job you can list those. If you don't have a diploma or degree then just list your estimated date for completion.

Proofread your resume:

Have your neighbor or classmate read your resume. Sometimes the spellchecker doesn't catch typos. The more eyeballs that see your resume before it gets in the hands of the employer the better.

Although these resumes contain similar information, styles do vary.

How To Write A Good Great List of References

It is incredibly important to develop a great list of references. These references will help you obtain jobs, college admission or acceptance into special programs.

Who makes a good reference?

• Teacher
• Coach
• Counseler
• Present or past employer
• Family friend
• Anyone that can speak highly of your abilities, skills and worth

References to avoid:

• Anyone under 18
• Personal friends
• family members
• Anyone who cannot speak highly of your abilities or skills

Important Tips:

The format of your references should match your resume exactly, same header, same fonts.

Do not include references on your resume

Include at least three references

All references should be responsible adults who know you well and can speak to your character and skills

Always ask whether or not someone is willing to be a reference before including them in your list

Verify the contact information before handing over to an employer

Format:

Use the following format for your references

Persons Name:   Bob Smith

Address:            123 Fake Street

                          Santa Cruz Ca, 95060

Phone #:             (831) 555-4321

Title and              Business Owner

work place:         Moland Spring Bottled Water

- Mr.W

Gif Animation Challenge

Hello Students,

Your newest assignment will challenge your animation and creativity skills to the max! Choose one of the challenges below to complete, but choose wisely!

Gif Animation Challenge:

Choose one of the subjects below to animate, BUT CHOOSE WISELY! :

• A cat with bird wings is flying over a city and shooting lasers out of it's eyes
• Godzilla is a DJ spinning records on a turntable in a dance club
• Find a short video clip of a sword fight and replace the swords with Light Sabers
• Create an animation of flappy bird with your own head on the bird

LASER CAT COMPELS YOU TO COMPLETE THE GIF CHALLENGE!

Good luck!

Previous Student Work Examples:

New Assignment: Making Animated Gifs

Hello Students,

Your new assignment is an introduction to making animated Gifs, and harnessing your skills to create a more elaborate animation or a cinemagraph style gif.

What is an animated Gif? A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frame. Unfortunately they can't have sound. You can do some really cool stuff with Gif's. Check out Fluxmachine for inspiration.

What is a Cinemagraph? A Cinemagraph is just a fancy digital photography term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema). Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...

This Cinemagraph was created by a photography student in Mr.Wilson's Digital Photography Class at SCHS

Gif Assignment:

Part A

• Create an animated gif, you can use photographs to make a timed slideshow, or a short animation with sequential drawings
• Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop
• This is just a quick project to get you used to creating gifs. The final gif must display on your blog full size in order for animation to work, so make sure the image size is small enough
• This Gif should have at least 10 frames of animation

Part B

• Create a longer animation this time that loops perfectly. Try creating a character and animating them, you can use photos or cartoons or draw your own with the brush tool in photoshop, just create individual frames of animation as layers, 1 layer per frame... then you can use the layers to frames option in the animation palette sub-menu.
• You can use photos. Use the Continuous Shooting mode on a camera for rapid fire shooting of frames. A Video camera on a tripod may also be used, photoshop can read some video files
• Try creating a Cinegraph style animation. Try to create an effect where just one part of the image is moving, such as eyes moving/blinking or the head turns and looks at the camera.
• Check out http://fernandojbaez.com/cinemagraph-tutorial/ for tips on making cinemagraph style images.

How to make an animated Gif with Photoshop CS5:

• Launch Photoshop
• FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
• Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers that you will turn into frames of animation. Im using some pictures I took of my dog.

• Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
• On your Animation Palette Sub-Menu select Make Frames From Layers
• If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
• You can now designate individual durations on each frame.
• Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.

• Open your Gif file in a web browser to test it. Here's my result:

Previous Student Work Samples: