Digital Media 9 / 10

Welcome to Digital Media 9 / 10 
 
General course Access information
to map a drive (access your student folder) 
Go from the menu bar and select bottom item titled "connect to server" 
smb://125-v02-001
Drop box block two 10.125.80.16 (dropbox stuff - folder name) 
type in: 10.125.80.16 
then when ict9-2 comes up LEAVE IT and 
then type in kindred

125-
password 
kindred
Drop Box 10.125.80.16 (dropbox stuff - folder name) 
Access code:
Grade site: schoology 
Please select sign up tab as a student and type in the access code below!
CJNX7-QJR6C (Block one)

8QJRD-T293F (Block two)

Welcome to the course Digital Media 9 / 10! We will be using this web site portal extensively throughout the course as both a teaching aid but also as a way to clearly guide students through the various learning modules. This web site will provide helpful video clips, 'how to' PDF tutorials, links to lessons and other tutorials and guides.  If you are away for any reason please be sure to check here often as updates are posted here daily. 
This is intended to provide a high degree of depth and breath in all aspects of digital media; everything from graphic design, to Photoshop, to intensive web development skills and introductory programming skills. This foundational course will provide students with a wide variety of sophisticated digital media skills; one of the essential 'tool kits' for any career or educational focus you may choose in the future.  

This web site is set up sequentially with all units of study and lessons clearly labelled. Some lessons may have several parts to them depending on the area of study. Be sure to read ALL instructions clearly and to complete all parts. 
Marking criteria for Photoshop project work: 
- did you successfully complete all the steps in the tutorial 50 %
- is your project / lesson thoughtfully composed and showed good attention to detail (e.g.. quality masking, good colour scheme, good use of filters) 40 % 
- have you added a creative element to design (so as to distinguish yours from others) - anything original? 10 % 


Please note: December 5th (field trip to Sony Image-works)
7:50 am return by 1 pm. Permission form to go Monday, Nov. 20th!

Assignment # 10 - Becoming a professional editor - Adobe in-design (due: Nov. 20th) If finished early new work will be posted!

A) By means of an introduction, you will be asked to create a magazine cover, a book cover and one written page
of content that incorporates a fresh graphic design concep(please mix / match from various Internet sources). This design sheet should be a total compilation you. Your interests, your passions or even an expression of technology in your life. 
The written portion will incorporate excellence in type text and graphic letter work which should incorporate some of the following: 
  • - Some interesting aspects of you (could include passions, interests, thoughts, hobbies, favourite quotes from athletes or scientists or authors or ...)
(*)Note: the magazine cover and the content DO NOT need to match! 
 
B) Create a magazine cover and one content page (example)   
(1) this link   (2) this link    (3) or this link   
C) Design your own book cover (front and back)                    

Please follow this link for further instructions (to resize pages)
Examples of good desktop publishing / Help Tips
  • two sided book cover with dynamic graphics and images 
  • a magazine cover with that incorporates gradient backgrounds images - (at least two) and a creative and original layout design that blends images with text type. 
  • Write at least one full page using the T tool in in-design. You may type it directly on to this document and experiment with the text wrapping features. 
Assignment # 9  - Scripting a web site from Scratch  - Dreamweaver CS6 (Tuesday - Nov 7th)

In this course segment, we'll be providing you with a look at the programming side of web design. Since this is a massive topic, and much of it is beyond the scope of this course, we'll work through an introductory tutorial on the subject. If there is time, we'll try to work through the scripting using a text editor. 
To get a start please sign up for your own account in Code Academy and then start work on the course titled 
"Make a web site" . This will get you started learning about HTML and CSS web site coding structures. If you manage to get through this module, please see me as I'll offer you a comprehensive project to complete! 

(Shift + Command + 3) (Shift + Command + 4) 

AND / OR

If you have a good basic working knowledge of HTML and basic CSS structures then you are invited to start creating a project using the software Dreamweaver CS6 (a member of the Adobe Suite of programs) . 
Please follow this link for instructions on how to download the learning project assets titled "Baystreet Beat" 

The instructions for creating this site are located about half way down the page and start with 
Define the local site folder for the Bayside Beat site....

A modern text based coding application - Brackets 


To Host your newly minted web site for free please go to link below and select 000webhost 
Please set up your files this way (home page MUST BE titled index.html)




# 8 Web site Design elements - Topics in computer science - Due Tuesday October 31th

(Block one)        Please copy your web site URL and place it here to hand in
(Block two)        Please copy and paste your web site URL here to hand in

In this next segment of the course, we will be learning about effective web site design. What makes a web site great versus making a web site average or uninspiring?  In this first segment of web design you will be learning about the elements of great design, using some of your Photoshop skills and researching about an area of computer science that interests you.

Please sign up for a student account link another version student account link using the password slip provided to you by Mr. Linburg. You will be then have the opportunity to change the password to something familiar to you (note: only you will have a record of your password change) . Familiarize yourself with the structure of the web site and how you will add pictures and link content. 

Part B - Design a quality web site 

Read these introductory articles on trends in web design. You will need to incorporate at least FOUR of these into your project. 
web site trends  / ten crucial web site trends . What are some of the most important trends in web design? How can you make your web site "stand out from the crowd"? Part B- Create your own web site profiling an exciting topic of computer science 
Now that you have a site started you will do the following: 

Step One
Choose a topic in the area of Computer Science that interests you. It could be one of these of of this list or you may search up your own topic. 

Please describe how at least ONE of these future orientated technologies actually works. (You could use point form) 
Secondly, explain in your opinion how one of these technologies will change the world we live in.  What are the potential ramifications (both good and bad) for these technologies. 
Please include diagrams / videos / explanations about how the technology actually works.  You are expected to explain the various aspects of these technologies in your own words where possible. You will learn absolutely nothing by cutting and pasting! 
(*)Note: please add in ONE tab for a student related digital portfolio

Step two
Next you will create a Banner and a logo in Photoshop that you will use in this project. 

Step three 
Logo making design

....once you have finished making this site you will now be ready for PART learning about some web site programming fundamentals and how to code a basic web site. 
Please let Mr. Linburg know when you're done and I'll post the next section! 
Specific web site criteria 
five links (one link needs to be a "student portfolio" - for student projects / a banner or a artistic image modified on Photoshop / a stylized logo that represents you in some way / good design structure (see link that discusses this) / a description of an emerging technology and its current and future uses / express a detailed opinion that speaks to the potential societal impacts (good and bad) of this technology / diagrams / pictures / video ....anything else that might help your project to stand out! 

Part A - locate the three best and the three worst in web design on the web (Tuesday October 24)
In this introductory activity you are tasked with "surfing" the web to locate the absolutely best and worst in design. What exactly makes a web site good or bad (this link will provide you with a specific way to describe web site attributes and characteristics. 
Please add a link and screen shot (Shift + Command + 3) (Shift + Command + 4) pages OR keynote and write a clear technical description about what aspects make it good or poor! Have fun with this (and please do more than google "worst or best in web design"...search harder! ) 
You will be, in a future class, sharing your findings with a few other classmates

Assignment # 7 - Make an animated short (stick man or another animation of your own creative design)  Thursday Oct19 th cut off ! 

Having fun with animation! In this culminating activity you will be creating a simple cartoon animation a.k.a - stick-man style animation short.  
You may repeat sections on your timeline (copy and paste) and use other shortcuts where helpful. (run time approx:  15 seconds!) 
General project guidelines 
multiple animation layers 
15 second run time (approx) 
story line 
several scenes or backgrounds 
use of at least three of these common animation tools (bone tool / onion skinning / motion / shape tweens) 
Some original character drawings incorporated 

Sample animation projects

Stick-man inspired flash projects! Take a look :) 


Project resource section

To change a background color     flash please follow these steps
To add a sound effect:                  Instructions  Free sound effect download sites ( ZapSplat / sound bible / Sound cloud)
To add a button to Flash               instructions 
To add a moving background       Video instructions on how to make your background loop

Stick-man inspired step by step guide                         to create a stick man like animation sequence (Open in Internet Explorer) 
To make your stick-man walk in a natural way            follow this step-by-step guide
How to make a figure "Transformational"                        Step by step transformation guide
Using the "bone tool" to link parts of an animation     Bone Tool

Follow these steps to import a sound into your library
1. Create a new Flash document and choose File→Import→Import to Library.
Browse and choose an .mp3, .wav, or .aiff file from your hard drive and click Open (Windows) or Choose (Mac).
Choose Window→Library to launch the Library panel.

How to use Actionscript 2.0 to create an executable button (follow this procedure for other action script actions)
Actionscript introduction - create a button Actionscript 3.0 instructions (they are different)


Assignment # 6 - Introduction to common animation techniques - # 2 The bone tool - big head - little body! 5 sec (Thursday October 6th) 

Assignment Description
In this assignment you will be creating two files. In the first one, you will FOLLOW THIS TUTORIAL EXACTLY (just the rectangle AND the tail) - (*) the monkey is just an example( see zip file at the bottom of this page)

For your second file, you are asked to create a character with a "small body but a large head" and then use the bone tool to link all the layers and then create a funny movement sequence :) 
    Picture (There is a completed example in the attachment section of this page (monkey_files.zip) 


Assignment # 5 - Introduction to common animation techniques - # 1 Onion Skinning (Due: October 3rd) 

Essentially, Onion skinning is....
 " a 2D computer graphics term for a technique used in creating animated cartoons and editing movies to see several frames at once. 
This way, the animator or editor can make decisions on how to create or change an image based on the previous image in the sequence...."
Visual examples:           

Assignment description: 

Part I 
Try to use onion skinning mode on a simple shape and see if you can make it move smoothly. 
Here is an example of what we're hoping that you can do. 
A short video clip shows onion skinning application on a face

Part II 
In this assignment you will be designing and create an original cartoon character that you will use to practice your onion skinning techniques. This character should have legs and arms of some kind (not necessarily human) and each part (legs and arms should be located on their own layers). 
You are asked to create a five second walk sequence with a hand drawn character. Please read the links below for more information! 
Follow these instructions (scroll down to onion skinning) 

Other helpful project related links and resources


Other links that describe onion skinning and various techniques
Please follow the tutorial link to learn how to a a stick man move with more realistic elements!           



Assignment # 4 - Introduction to Flash Animation - key frames / make a ball bounce (Due: October 3rd)  
As way of an introduction for animation, we are first of all going to make a ball bounce around the screen. Once you have had success with this, I ask you to add another FIVE layers and try to add more coloured balls (see if you can do this second part by memory) . 

All you ever want to know about flash animation!             How to make shape and motion tweens and so much more! 
Reference guides                                                                        All you need to know about animation 
                                                                                                            add in shape and motion tweens

(*) you need to do both part A and B since they are different types of animation! 

Part A - Make a ball bounce! - Motion tween 

(use this one) 

Ball bouncing              A version with a shadow effect (*) Please note that you need to   add in key frames and then move the symbol! ) 

Ball bouncing video -  A simplified version of the classic ball bouncing introduction 
Ball bouncing              Another guide if you find the first one confusing 


 (*) To add a squish effect to you bouncing ball, please use this link    making a ball bounce 

Part B - Create a Shape tween (try to create a "starburst" or a collection of shape animations working together) 

A SHAPE TWEEN IN 8 EASY STEPS                                                                  FOLLOW THIS LINK TO HELP YOU GET STARTED


  A shape tween example on several layers! Be creative and original if you can! 
Assignment # 3 - Photoshop project work (Final submission date: Thursday 21st) - If done early then please see page link below for creating a "cinema-graph" . 
Congratulations! You now have your "Photoshop" driver's licence. Now you can embark on a creative personally meaningful 
project of your own. Please choose from one of dozens of project choices off of this link. However, I have added a few "recommended" projects that you might want to try. 
You may substitute your own image for any one in these tutorials. However, be sure use a source image that is as a HIGH RESOLUTION as possible. As well, it is recommended that you read through the entire tutorial before embarking on a project. 

You may choose a project of your liking off of the following link: 

Photoshop - digital arts (note: you may substitute HIGH QUALITY images of your own so that your project truly speaks to you)


Assignment # 2  Photoshop introduction Part II - Photo manipulation (noise filter / smart objects / Gaussian blur tool / elliptical marquee tool...)  (Due: Friday Sept 15th) 

Please work on creating a "stary night" . This is an excellent introduction to incorporating basic effects into a shot. 

This gives you a chance to work more thoroughly with layer effects!

Please locate your own city night photo in order to add a star filled night sky with moonlight! 

Assignment # 1   Photoshop introduction Part I  working with "layers" - (ALL four in one folder)  


Photoshop is a powerful design tool to help you to create unique and dynamic images. However, in order to get started, we need to learn about the core essentials of the program.  
Reference guide that explains layers very well!                        Please take a look! 
The first introduction covered  the topic of "layers"

PART A - Beginner use of layers introduction (Due: Fri. Sept. 15)

1 A) Complete this intro tutorial on working with layers      
               please complete this tutorial 
                Rectangular marque tool explained here

1 B) Now that you have learned the absolute basics about how the layering system works in Photoshop, now you are going to try and create a multi-layered colourful picture using ONLY geometric shapes. Please use FIVE layers and experiment with some different effects and fill colour or hues. 

1 C)               How to replace an image colour (use the google search function to find a high quality image and then "place it" in Photoshop - then follow this link to replace the colours in the image)


PART B - Introduction to Cool effects (Due: Friday Sept 15)

2) Alter any image to create a splatter effect   
     Photoshop Dispersion splatter effect (choose your own picture - high resolution please)
If you are having some difficulty in cutting out your picture please take a look at these extra instructions to help guide you (use either the lasso tool or the "magic wand tool"
3) Choose ONE or TWO of these Photoshop effects off of this list

4) You may, of course, substitute any source image you'd like. What is important here is that you are able to learn how to create clipping masks.
ĉ
Terry Linburg,
20 Sep 2017, 19:14
ĉ
Terry Linburg,
5 Sep 2017, 21:57
ċ
monkey_files.zip
(1176k)
Terry Linburg,
25 Sep 2017, 15:48
Comments