Tuesday, May 27, 2014

GDL 2 - Scratch Games

Complete the basic "Getting Started" tutorial for Scratch - http://scratch.mit.edu/projects/editor/?tip_bar=getStarted.  Create an account to save your work.

Scratch is a free game engine made by MIT.  It is designed as an introduction to coding.  The thought process is the same, but it utilizes puzzle pieces that only fit in certain ways, so you can focus on the concepts instead of syntax.

Create your own games in groups of up to 4.  Utilize the skills you have gained this semester to create game characters and backgrounds.  Be sure to visit the "Explore" link at the top of the Scratch homepage.  You may remix an existing game, but all visuals must be original work

Grading Objectives

  • Characters created in Adobe Illustrator
  • Background created in Adobe Illustrator
  • Complete game


GDL 1 - Vintage Poster

DUE: Friday, May 30th


Create a vintage poster with your favorite event or party, like graduation.  The tutorial uses a go kart, but you may choose any subject and pull an image from google.  You may choose any paper texture, try lostandtaken.com.  Follow the Chris Spooner tutorial here.

This tutorial will be a demonstration of the combined power of Photoshop and Illustrator.

File >> Save for Web...  and upload your finished project to your blogger for grading.

GRADE ELEMENTS:


  • Page layout built with Shapes and Pathfinder
  • Text layout
  • Proper page proportions (ie Portrait)
  • Adding texture with Opacity Blend Modes
  • Photo cutting and editing


GRADING:
Students will be graded on the quality of lines and the ability to utilize the tutorial tools.

LINKS:
http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-retro-style-race-poster-in-photoshop

Monday, May 19, 2014

GDL 2 - Portfolio Website

Use TextEdit to create a webpage to display your artwork.  Use the following markup as your template.  Change the variable 'page_url' to match your blogger address.  Make sure you keep the quotation marks.

Setup your Google Drive to host your website: https://support.google.com/drive/answer/2881970?hl=en

Be sure to save your html files with as .html and stylesheets as .css

Create a logo, header and footer sections with a separate color, a background color, and a font from google web fonts.

REQUIRED ELEMENTS:

  • Valid HTML - http://validator.w3.org/
  • <DIV> tags for all of the following:
    • Header
    • Footer
    • Content
    • Navigation/Sidebar
  • At least 3 images
  • Use of at least 3 different HEX colors - http://colorschemedesigner.com/
  • At least 3 of the following tags
    • <p>
    • <ul>
    • <ol>
    • <h1> ... <h6>
    • <a>
    • <br>
    • <b>
  • Valid CSS including at least 3 of the following:
    • border
    • background
    • color
    • width
    • height
    • float
    • box-shadow


RESOURCES:
https://www.google.com/fonts
http://www.w3schools.com/html/default.asp
https://support.google.com/drive/answer/2881970?hl=en

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
// CHANGE THIS TO YOUR SITE URL
var page_url = "http://learngdl.blogspot.com";



// START - DON'T CHANGE THIS CODE!!!
        $('#gallery').load("http://crispycatfish.com/school/imageScrapper.php?_url=" + page_url );
    }); //document.ready
    // END - DON'T CHANGE THIS CODE!!!
</script>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>

GDL 2 - HTML+ CSS Quiz

Complete this QUIZ

Answer all questions.  If you don't know an answer, guess.  Once you hit submit, your quiz is recorded.  You will not have the opportunity to change answers.

https://docs.google.com/forms/d/1OyxlwGN7uaUvAnPLEhu_N1G1qEYE6WW9gpPY-ylFm54/viewform?usp=send_form

Wednesday, May 7, 2014

GDL 2 - HTML

DUE: Monday, May 12th

Web design is one of the larger segments of the graphic design field.  It is a good idea for all designers to understand at least the basics of web design, since their work will most likely end up online.  Additionally, most designers use online portfolios to show off their talents and self promote.

Pair up in groups of 2.  No groups of 3.  Only 1 computer should be on for each group to ensure the internet connections are fast enough.  Let me know immediately if you are having an issue with your connection.  This will not be an excuse for lack of project completion.  No late work will be accepted.


Sign up for an account at codecademy.com.  Work together to complete the HTML & CSS course.  When you have completed it, show me the results page.  On Monday, I will be grading you and your partner based on the completion of the course .  If the results page shows that you have completed 68%, your grade will both receive 68% for the assignment.  This assignment is worth 50 points.  If you need to work on this outside of school, do it.

GRADING:

  • 50 points
  • Percentage of course completion = grade


LINKS:
codecademy.com


Tuesday, May 6, 2014

GDL 2 - Web Design Wireframing

Read through the linked material to learn about wireframing.  The basic idea of wireframing is to create a website design plan focusing on the structure without being distracted by color.

Blogger has a basic setup that you will likely not want to change too much.  However, you still have option for logo design and placement, how pictures will flow on the page, and where to put your navigation.

Create a 3 paper wireframes of your new site design.  Circle your favorite and create it on Illustrator at 960px W * 768px H.  Then choose at least 2 color schemes and create 3 color site mockups.  Notate each artboard with your reason for choosing your colors.  Finish your design with a new logo.

Your Illustrator file should include (on separate artboards)....

  • 1 B&W wireframe mockup
  • At least 2 color schemes
  • 3 or more color site mockups
  • Artboard notation
  • New logo
LINKS:

GDL 1 - Fox Illustration

DUE: Thursday, May 8th

Use a variety of simple shapes combined with warping effects to create a cartoon fox.  Be sure to complete the tutorial including strawberries, flowers and dotted background.

Grading Objectives

  • Use of shapes
  • Use of Warp Effects
  • Completion of all tutorial elements
LINKS:

Monday, May 5, 2014

GIT 1 - Writing an Article

Look through the links to learn about how to write an article for a magazine.  Here is a suggested outline from Scholastic...
The Basic Story OutlineThe best way to structure a newspaper article is to first write an outline.
Review your research and notes. Then jot down ideas for the following six sections. Remember, this is just a foundation upon which to build your story!
I. Lead sentenceGrab and hook your reader right away!
II. IntroductionWhich facts and figures will ground your story? You have to tell your readers where and when this story is happening.
III. Opening quotation What will give the reader a sense of the people involved and what they are thinking?
IV. Main bodyWhat is at the heart of your story?
V. Closing quotationFind something that sums the article up in a few words.
VI. Conclusion (optional—the closing quote may do the job)
What is a memorable way to end your story? The end quote is a good way to sum things up. That doesn’t always work. If you are quoting more than one person with different points of view in your story, you cannot end with a quote from just one of them. Giving one of your interviewees the last word can tilt the story in their favor.

LINKS:
http://www.scholastic.com/teachers/article/writing-your-article
http://www.dailywritingtips.com/writing-for-magazines/
http://www.thepenmagazine.net/20-steps-to-write-a-good-article/
http://business.tutsplus.com/articles/the-15-step-freelance-writers-guide-to-writing-for-magazines--fsw-28445