FINAL SURVEY

Today is your final day in 4th Period Computers (Web Design).  Your final project is to complete a Final Survey.  Email me (askgriff@gmail.com) using the Subject "KHS 4th Your Name (i.e. "KHS 3rd John Smith") and answer the following questions:

1.)  If YOU were teaching Photoshop next year:

• What projects would you assign again?
• What projects would you NOT assign again?
• What projects would you assign that we didn't do this year?
• What ideas do you have for making this section better?

2.)  If YOU were teaching 3D Graphics (Bryce, Rhino, etc.) next year:

• What projects would you assign again?
• What projects would you NOT assign again?
• What projects would you assign that we didn't do this year?
• What ideas do you have for making this section better?

3.)  If YOU were teaching Multimedia (Flash) next year:

• What projects would you assign again?
• What projects would you NOT assign again?
• What projects would you assign that we didn't do this year?
• What ideas do you have for making this section better?

4.)  If YOU were teaching Video Editing next year:

• What projects would you assign again?
• What projects would you NOT assign again?
• What projects would you assign that we didn't do this year?
• What ideas do you have for making this section better?

5.)  If YOU were teaching Microsoft Office (Word, Excel, PowerPoint, etc.):

• What projects would you assign?
• What ideas do you have for making this section good?

(More questions below...)

---

Possible Outline for Next Year Includes:

• Internet Search Strategies
• Gmail
• Blogger
• Microsoft Word
• Microsoft Excel
• Microsoft PowerPoint
• Digital Photography
• Photo Editing (Online Editors and PhotoShop)
• Multimedia (Flash)
• Web Page Design (HTML and DreamWeaver)
• 3D Graphics (Bryce and Rhino)
• Sound Editing
• Video Editing (Windows Movie Maker)

6.)  What other types of software/technology would be cool to try next year?

• Suggestions have included (so far): music mixing, game modding, 3D home architect, fashion design (is there a program for that?), web page design, programming,

7.)  What other suggestions do you have for making the classes better next year?

• Suggestions have included (so far): slow down, more PhotoShop, less Rhino, more group projects, more interaction with students, more projects where the students decide what to do, 

8.)  Are you planning on taking any computer classes at KHS next year?  If so, which one(s)?

9.)  Do you have any other questions or comments for me?

Finish Flash and Video Editing Projects

Ladies and Gentlemen,

Unfortunately I had a death in my family and will be out on Friday [and probably Monday]. As I instructed today, we are finishing all Flash and video editing projects on Friday. I will be grading all portfolios (Photoshop, Bryce, Rhino, Flash, and video editing) next Wednesday (June 16th).

Remember, there is an extra credit project available to everybody: Create a "video tutorial" (10 minutes or less) using a video editor with titles, transitions, etc. about a specific topic. For example, a video showing how to customize a skateboard, change out the trucks and wheels, etc. Another idea might be a video demonstrating how to take plant cuttings and get them to root. You may take a camera to your science class to demonstrate how to do a dissection. The field is wide open.

If you have questions or concerns about your grade, please feel free to email me. I will be checking my email regularly over the next few days.

Please respect the substitute teacher.

Educational Software / Interactive Story

Today we will begin creating an Educational Software or Interactive Story.  I will show some examples in class and attach a template below:

• Interactive Book Template

Flash: Paper Doll / Mr. Potato Head

Today we are going to be building "draggable" movie clips that will make a "Paper Doll" or "Mr. Potato Head" sort of thing.  The ActionScript isn't that difficult, but it is very time-consuming so I am putting up two templates that we can use to get started.

• Paper Doll
• Mr. Potato Head

I am also attaching a paper doll that I built from the template above.  It has a lot more clothing, a background music track, a layer behind the model for accessories, a background layer, and more.  Download the source file here.  To get the model and begin the clothing, I Googled "Fashion Paper Dolls" and clicked on images.  I chose to use this image:

Also, this is another example of a more more complex "Paper Doll": [Click]

Once you have the template downloaded, either create your own model and clothing or look for good examples of paper dolls online.

Have fun!

Flash: Eyes that Follow the Mouse

Today we are going to be drawing an eye (facing left), converting it to a movie clip, dragging an instance to the desktop, naming your instances, adding some ActionScript, and testing it.  The result?  Eyes that follow the mouse pointer, obviously.  :)

Here's the ActionScript:

------------------------------ Frame 1 -------------
a = eye1._y-_ymouse;
b = eye1._x-_xmouse;
angleA = Math.atan2(a, b);
degrees = angleA/(Math.PI/180);
setProperty("eye1", _rotation, degrees);
a2 = eye2._y-_ymouse;
b2 = eye2._x-_xmouse;
angleA2 = Math.atan2(a2, b2);
degrees2 = angleA2/(Math.PI/180);
setProperty("eye2", _rotation, degrees2);
----------------------------- Frame 2 ------------
gotoAndPlay(1);

Below is a Video Tutorial which will help explain the process:

Flash Project #11 -- Step-By-Step

We have some requests for step-by-step instructions for Flash Project #11.  I'll do my best, although a video tutorial would probably work better.

1. Open Adobe Flash

2. Create a new document: FILE > NEW > Flash File (ActionScript 2.0)

3. Create 3 Layers:  Pointer, Buttons, and Background

4. On the background layer, draw a background

5. On the pointer layer, draw a pointer

6. Select the pointer background layer (it will select the pointer)

7. Click Modify > Convert to Symbol > Movie Clip (name it Pointer)

8. Right-click the pointer symbol and select "Actions"

9. Enter the following ActionScript:

     onClipEvent (load) {

     Mouse.hide();

     startDrag(this, true);

     }

     onClipEvent(mouseMove){

     updateAfterEvent();

     }

10. Press CTRL+ENTER to test your movie

11. Draw a button

12. Convert the button to a symbol (a button, obviously)

13. Go out to Frame 10 and add a keyframe for each layer.

14. Draw a new "scene" on Frame 10

15. Right-click the first keyframe on any layer (black dot) and choose Actions

16. Enter the following ActionScript:  stop();

17. Right-click any layers last keyframe and choose Actions

18. Enter the following ActionScript:  stop();

19. Right-click the button and enter the following ActionScript:

     on (release) {

        gotoAndPlay(10);

     }

20. Test your movie (CTRL+ENTER)

Once your movie is working (i.e. It opens and stays until you click the button -- and then it goes to the next section and stays) you can begin adding some flair.  Add sound effects, improve your mouse pointer, insert some music, insert pictures, etc.

Flash Project #11: Interactive Scene

Today we are going to begin putting all of the different techniques together into an Interactive Scene or a Multimedia Greeting Card.  You should include the following:

• A custom mouse pointer
• An opening "scene" which stops at a specific keyframe
• A button which will advance the viewer to the next "scene"
• A "stop" on the next scene so users can view everything
• A button which will allow users to start over from the first scene
• Sound and/or music

Some of the Actionscript you will need includes:

/*  Custom Mouse Pointer Code  */
onClipEvent (load) {
Mouse.hide();
startDrag(this, true);
}
onClipEvent(mouseMove){
updateAfterEvent();
}

/*  Stop Code  */
stop();

/*  Button 'Go To' Code  */
on (release) {
gotoAndPlay(10);
}

My Flash Projects (Example)

Flash #01: Draw a Picture

http://megaswf.com/view/11b401cc8926516d60ce8350ecf7a3c5.html


Flash #02: Trace a Photo
http://megaswf.com/view/11b401cc8926516d60ce8350ecf7a3c5.html

Flash #03: Frame by Frame Animation
http://megaswf.com/view/11b401cc8926516d60ce8350ecf7a3c5.html

Flash Project #08: Animated Movie Clip

Today we are creating an animated Movie Clip. We will begin just as we did with the Graphic Symbol and the Button -- by drawing a picture and converting it to a Symbol. So draw your picture, go to MODIFY > CONVERT TO SYMBOL > MOVIE CLIP, and click OK. Now [just as we did with the buttons] double-click your new Symbol. You can now create some sort of animation [either frame-by-frame, shape tween, etc.]. When finished, click back on "Scene 1" to return to your stage. You will notice that even though you have an animation, you are still on the first frame of your movie. This allows you to animate an object (a car, person, alien, etc.) and modify the size or location of the object without having to change every frame.

Next we will drag out different "Instances" of your movie clip and resize, reposition, and recolor each one.

Flash Project #07: Basic Buttons

Today we will begin creating buttons using Adobe Flash. Buttons are created much like graphic symbols -- you draw your button shape, select it, then go to MODIFY > CONVERT TO SYMBOL > BUTTON. Once your basic button is created, you simply double-click the new symbol which will allow you to edit your button.

Buttons have 4 "states" -- UP, OVER, DOWN, and HIT. UP is the state where nothing is happening [if you look at a button on a machine it's in the UP state]. OVER is the state where you are moving your mouse pointer over the button [sometimes people will have a button highlighted when someone is over it]. DOWN is the state where the button is being pressed/clicked. The HIT state is simply the area that you are able to click on [Generally it's the exact same size as the visible button].

I am attaching a YouTube tutorial video below if you need some extra help.

Flash Project #06: Motion Tween

Okay, today we're going to learn another "tween" technique -- but this one involves a "Motion Tween".  If you draw a picture, select it, then go to MODIFY > CONVERT TO SYMBOL > GRAPHIC [we'll deal with Movie Clip and Button later].  Now you can add keyframes, change the position of your new symbol, and add your "Motion Tween".  It's one of the ways you can move things smoothly in Flash without having to draw things frame-by-frame.

Flash Project #05: Shape Tween

Todays project uses a function of Flash called "Shape Tweening".  To begin you draw a picture on a keyframe (1 for example).  Next you add a keyframe further out in the movie -- 20, 30, or 40 frames out and draw another picture.  Right-click anywhere between those two keyframes and select "Create Shape Tween".  When you play your movie, you will see the shape morph from one image into the other.

You can view the video tutorial from a couple days before which includes help on Shape Tweening.

Flash Project #04: Add Sound and/or Music

Today we're going to be adding sound and/or music to our animation. This works similar to importing a picture. Simply go to FILE > IMPORT > IMPORT TO LIBRARY and select a WAV or MP3 file. To see what's in your Library, select CTRL+L and it will open in the bottom-right corner of your window. Next you just need to click on the frame that you want sound, then drag the sound clip from the Library to your Stage.

Flash Project #03: Frame by Frame Animation

Today we are doing frame-by-frame animation. Much like a flip-book, frame-by-frame animation entails drawing one frome, adding a new page [we call it a keyframe] and then drawing a new picture. When flipping through the images one-by-one, the images appear to move. This is the same method used to create the Disney cartoons. Todays animators use computers in a process similar to what we're doing here.

Flash Project #02: Trace a Photo

Today we're taking an image (such as a photo or clip art) and tracing it using the Flash tools. Choose FILE > IMPORT > IMPORT TO STAGE and then select your image. Create a new layer (above the image) and use your paintbrush, line tools, and pencil to trace the image.

Flash Project #1: Basic Drawing

For the first project I simply want you to draw a picture.  Try to use a variety of tools and techniques.  Put different pieces of your picture on different layers -- for example, the sky on one layer, sun on another layer, clouds on a layer, etc.  It's helpful to have objects on different layers when we get ready to begin animation.

When you are finished with your Flash project, save it to your Thawspace -- it will save with a .FLA extension.  I recommend copying it to a thumb drive and/or emailing a copy to yourself.  You can also open the shared folder on my computer (file://khslab_584/ and then open the "Student Work" folder... then he period... and then your name) and drag your finished files in there.

Begin exploring Adobe Flash

Flash is used by artists, web designers, cartoonists, and video producers around the world.

Some examples of Flash:

• Stick Figure Cartoons:  Olympics
• Information:  International Space Station
• Games:  Orisinal

I will have many more examples to show in class [if the computer is working], but you get the general idea.

Next we will be doing some Flash drawing basics, exploring various tools, and start our first drawing.  Begin by downloading the following file (Right-click and Save As... to your Desktop):  FLASH FILE

I strongly suggest that you get [and bring regularly] a USB/Flash Drive.  You can get an inexpensive Flash Drive at K-Mart, Wal-Mart, or even a grocery store.  Having your own flash drive (on a keychain, around your neck, in your purse, or whever) will keep your projects from getting wiped out by other students.  I am working on getting our shared folders working, but they seem to be a little unstable at the moment.

As with Photoshop and 3D, we will have many small projects and a few larger ones.  Don't fall behind -- the skills you learn in the beginning are the foundation that we will be building on in later assignments.

Welcome Back!

Welcome back!  I hope you had a great Spring Break.  Mine was very busy but also a nice break.  This week we are going to begin working on Adobe Flash -- which was previously owned by Macromedia.  Flash is the industry-standard program for doing animation, games and video on the web.  In fact, YouTube videos are saved in .FLV format which is Flash Video.

Today, however, I want to give you some time to make sure all grades are correct and to finish up any projects that might need finished.  Check your grade on the PowerSchool site and make sure all assignments are graded.

I will be finalizing grades today so if you have questions or concerns, please come and see me today.

Ending 3rd Quarter

Okay, we're into the home stretch -- at least for the 3rd quarter.  Friday, April 2nd (two days from now) is the end of the 3rd quarter and all projects are due.  We're working on the second week of our "3D Room Design" and I am amazed at some of the attention to detail that students are putting into this project.  Remember, the 3D Room is worth 100 points so it is crucial that you stay focused.

When we return from Spring Break [on Monday, April 12th] we will begin a new unit -- probably Multimedia with Macromedia Flash MX 2004.  Flash [now owned by Adobe] is the industry standard for web animation.  We will be learning basic vector drawing, beginning 2D animation, interactive applications, and some basic ActionScript [programming].

Important: I will be grading all 3rd quarter projects over Spring Break and then we will be moving forward -- I will not be accepting late assignments after Friday.

Work on 3D Room

Today we have the following:

• First, work on your 3D room.  You should be well underway with this project by now.  If you are nearly finished, please continue to add detail (books, pictures, pens/pencils, clock, electrical cords, etc.).  The more detail and effort that goes into your room, the better.
• We have a Guest Speaker from Academy of Art University coming tomorrow (Tuesday).  They have courses in Art, Architecture, Fashion, Game Design, Motion Pictures, Multimedia, Music, Photography, and Web Design.  
• Finally, a brief word about "Guest Speaker Etiquette".  I am grateful when a guest speaker is willing to come all the way to Lake County to visit our school.  Although I am pretty easy-going on a regular day, I expect polite, respectful behavior when I have a guest speaker

• Keep computers off.
• Do not make random or off-topic comments.
• Do not ask random or off-topic questions.
• Be quiet when he/she is speaking or presenting material.
• Be interested -- or at least act like you are.
• Failure to follow these rules will result in a lower grade and a loss of privileges.

Complete 3D Projects

Today is your day to catch up (if you are behind). Check out the 3D Assignments and make sure they are all on your portfolio for grading. I will be grading projects this evening and will have grades available tomorrow. This week is your last chance to get late work turned in.

Your Homework: Measure your bedroom [or another room in your house] to be modeled next week. Measure length, width, and ceiling height. Measure windows and doors. Measure things like your bed, your desk, your television, your phone, etc. You might want to make some sketches of the items you will model so you can get them done accurately. Remember to include little details like power buttons, power cords, etc.

We will be spending next week getting the scene built (accurately) with as much detail as possible. If you have a digital camera, you might try taking a picture of your carpet or wallpaper or bedspread to use as a texture for your final render.

Rhino: Rubber Duck (Self-Guided Tutorial)

Today we're going to try something a little different -- you're going to work through a book tutorial to create a Rubber Duck. The Training Manuals are online (see previous post) and today you'll be using Rhino Training Manual Level 1 [pages 156-169].  Following a tutorial from a book [particularly an online book] can be difficult, so I will work through this one with you as well.

Rhino Level 1 and 2 Training Manuals

The following links open the Rhino Level 1 Training Manual and the Rhino Level 2 Training Manual.  We will be doing some projects out of these books.

LEVEL 1  /  LEVEL 2 

Rhino Project #4: Box Model a Vehicle Body

In this project we will learn about turning on "Control Points" so you can stretch a shape (like a cube or a sphere) into other shapes -- in this case, a vehicle body of some sort.  We begin by building a block -- generally large and rectangular in shape.  Then we "explode" the shape, "rebuild" it, and turn on Control Points (F10).  Finally we drag the control points to create new positions to build our new shape.

Complete Projects / Work on Portfolio

Hi Everybody! Unfortunately my illness finally got the better of me and I am home sick today. I expect my students to treat my substitutes with respect.  I don't want to hear a bad report from Ms. Pilqer.

What I would like you to do today is complete any unfinished Rhino projects, render them, and add them to your portfolio. If you would like to create additional pieces for your portfolio, please feel free. I hope to be grading projects / portfolios this weekend [hopefully the gradebook is operational again] so make sure you have everything uploaded that you would like credit for.

Rhino Project #3: Table with Carved Legs & Beveled Top

Today we are going learn a few new tools to build a decorative table with an inlaid top and carved legs. We will be beveling the edges of a block using the "SOLID > FILLET EDGE" tool. We will create the "carved legs" look by starting with a "Truncated Cone" and then creating a "Spiral Curve", adding a "Pipe", and then doing a "Boolean Difference".

Rhino Project #2: Create a Funky Coffee Table

Today we will be using the "Extrude" command to turn a line/curve into a 3D shape -- in this case, a "ribbon". Next we will "Cap" the holes to make it a "solid shape". Then we will use truncated cones to create legs for the table.

The next piece of the project is to put some items on the table -- perhaps a coffee mug, a plate, a vase, etc.

Finally, create a floor under the table and put a spotlight (or 2 or 3) on your table.

Note: If you double-click the "Examples" folder on your desktop, you should now be able to view the 3D Resources folder which has TONS of textures, bumpmaps, models, etc. Check them out.

Rhino Project #1: Vase or Goblet Using Revolve

Today we are building a 3D shape such as a goblet or vase by drawing the profile of the shape, then using the "Revolve" command to make it a 360˚ object.

Use the "Curve" tool (either "control point curve" or "sketch") to draw the shape in the "Front" or "Right" viewport -- use the red "base line" as a "floor".

1. Press ESC to get out of the "curve" menu.
2. Click on your new line.
3. Type "Revolve" in the "Command:" line.
4. Draw the "Axis" (use Shift to keep the line straight) and press Enter.
5. Type "360" at the "Revolution Angle" prompt and press Enter.
6. Press "Delete" to remove the original curve that you drew.
7. Shade the Perspective viewport and view your object from different angles.

Begin 3D Modeling: Rhino 4.0

Today we begin using a program called Rhinoceros 4.0 -- a 3d modeling program which is used in a variety of industries around the world.  Rhino is used in automotive design, marine design, jewelry design, shoe design, etc.

You can download a trial version (which is limited to 25 saves) here: http://download.rhino3d.com/rhino/4.0/eval/

Check out a gallery of designs made with Rhino here: http://gallery.rhino3d.com/Default.asp?language=&g=1

Update Your Portfolio

Use today to finish up your Bryce projects and get the rendered images on your Portfolio. Once your Bryce scene is fully rendered, go to the top of the screen to choose FILE > SAME IMAGE AS > name.jpg. Then in your blog, click NEW POST and upload your image. You might want to give a little bit of detail about each project to make your portfolio more interesting.

The following projects were assigned since January:

• PhotoShop: Gondola *
• PhotoShop: Collage *
• PhotoShop: Colorize a Black & White Image *
• PhotoShop: Project Frankenstein *
• PhotoShop: Fool the Eye (Photo Editing) *
• PhotoShop: Restore a Damaged Photo *
• PhotoShop: Cereal Box
• PhotoShop: Magazine Cover
• Bryce: Island
• Bryce: River Valley
• Bryce: Forest
• Bryce: Desert
• Bryce: City
• Bryce: Outer Space
• Bryce: Animation

* = Not required for 3rd Quarter (although having them helps your portfolio and helps to pad your grade).

Bryce Project #9: Animation 2

Today we will begin working with the camera in our 3D animation work. It's a little more complicated because we'll be having the camera follow an object that is moving, but it's still definitely doable. :)

I am once again including a video tutorial below should you need it.

Bryce Project #8: Basic Animation

Today and tomorrow we are going to explore basic 3D animation.  Obviously you can tell by the picture on the right, we aren't going to be doing very complex animations, but it will help you understand the concepts of 3D Animation.

Again, I am including a video tutorial below.

Bryce Project #7: 3D Logo

Today we're going to experiment with using Bryce Symmetrical Lattice to make a 3D logo.  On the right you can see the finished YouTube logo in 3D, while on the left (below) you can see the original.  I applied the logo to the Symmetrical Lattice.

I am also attaching a tutorial video for those who would like to try this at home.

Bryce Project #6: Outer Space

Todays project is really the absence of terrain... and sky... and haze.  It's space.  In this instance we will be creating a moon, stars, a comet or two, and [if you want] some sort of space craft.

I am also including a video tutorial below if you need the extra help.

Bryce Project #5: The City

Today we are going to be using both PhotoShop and Bryce.  We will create a grayscale image in PhotoShop (size 512 x 512 pixels) with several shapes (mostly rectangles) which we will use to apply to our mountain (terrain editor).  This will effectively allow us to create a city in Bryce using a single mountain.

An example of the grayscale image is seen on the left.  The brightest (white) colors will be the tallest points and the darkest (black) colors will be the lowest points.  Obviously the different shades of gray will be mid-size buildings.

I am also including a video tutorial below if you shoud want to watch this tutorial again. [Or if your family or friends would like to create something like this.]

Bryce Project #4: The Desert

Today we are going to use our Terrain Editor, the sky editor, and some haze to make a scene that appears to be a desert.

I will also be including a video tutorial below for those who need to review the in-class lesson [or those who are absent during the demonstration]. 

Bryce Project #3: The Forest

Today we will be using the Bryce Terrain Editor to think a little bit out of the box.  We will be creating a forest.  We will be using a terrain for the ground, a terrain for the trees, some fog, and [of course] an effective sky.

I am also including a "video tutorial" below if you need to go over this again in the future.

Bryce Project #2: The River Valley

Today we will use the Terrain Editor to build a river valley / canyon.  It will be similar in setup to the Island project from yesterday -- you will have a mountain (terrain), water, and a good sky texture.  Remember to start out with FILE > NEW DOCUMENT > STANDARD > 800x600.

Beginning Bryce / Bryce Project #1: Island

Today we begin using the Bryce 5.5 program which is designed to allow users to create virtual landscapes (both realistic and fantastic).  In November of 2009 Daz Productions released Bryce 5.5 as a free program.  You can now download and install it on your home computer.  (Get it here)

We will be creating several projects in Bryce using a variety of techniques. 

We will be using Bryce to create some landscapes as backdrops for our upcoming multimedia projects using Adobe Flash, Movie Maker, etc. 

I am also including a tutorial video below (if you can view YouTube) to help get you started:

Changing Gears...

After completing our unit in basic HTML, the overwhelming majority of students have asked to try other technologies not directly related to web design.  We're going to take a temporary aside and play with some 3D graphics (beginning with Bryce 5.5).  We will be moving back into web-related technologies with Adobe Flash following our 3D Graphics unit.

Some of your projects from January & February...

As I graded projects and portfolios this weekend I captured some of the projects students in my classes have created over January and February. I hope you enjoy them as much as I did.

Student Portfolio Gallery

Burke, Aubrie: http://aubrie13.blogspot.com

Cimina, Reyes: http://istacku-b-z.blogspot.com / http://beatboxmasta91.blogspot.com/

Cruz, Pedro: 

Galindo, Vicente: http://v-cente-a7x.blogspot.com

Holt, Zachary: http://ziggy-zachsblog.blogspot.com

Huber, Corey: http://koreykrazykorean11.blogspot.com

Huerta, Juan: http://juan-portfolio.blogspot.com

Ingersol, Daniel: http://daniels-portfolio.blogspot.com

Lehmer, Thaddeus: http://frowgboy.blogspot.com

Lozano, Edgar: http://edgarmyblogs.blogspot.com / http://thecremecheese.blogspot.com/ 

Maitland, Kyle: http://maitlandkyle.blogspot.com/ 

Marshall, Trevor: http://pandamuerto-portfolio.blogspot.com

Mynatt, Anthony: http://zombiedusts.blogspot.com

Navarro, Esteban: http://sites.google.com/site/animehqinc

Ortiz, Javier: http://javierx0210-portfoliotest1.blogspot.com

Pelzel, Onnivin: http://onnivin.blogspot.com

Perez, Allan: http://tacocreations.blogspot.com 

Rivera, Dustin: http://jahmunk.blogspot.com

Scott, Marcus: http://marcusscott-portfolio.blogspot.com

Sherman, Melissa: http://melissacoww.blogspot.com

Tillman, Jimmie: http://jimswebdesignblog22.blogspot.com

White, Giovanni: http://koda-kodrahmun.blogspot.com

Young, Zackery: http://zackypo.blogspot.com

Business Web Page Project (Due Friday 2/19)

Begin with the basic files (index.html and mybusiness.css).  The files already include H1 and H2 tags as well as a FOOTER and other formatting CSS.

Create a business web page for a business of your choice (fictitious is okay as long as it is school appropriate).  Today you should just get the business details entered (name of business, address, phone number, type of business, etc.) and update the "bulleted list".  Tomorrow we will begin adding graphics to the page.

Thursday we will add additional pages [that link to the same CSS file].

Friday we will finish up our business web pages for the first graded web assignment.

Continue Business Web Design

Download these files to a "mybusiness" folder.

1. http://www.mendoclass.com/~griff 

Building a Basic Business Web Site

Today we will begin exploring some more advanced features and functions of HTML and XML -- which, when used together, are XHTML.  There is a standard layout that you should begin every web page with, but rather than type it up every single time, I suggest having a template to start with and modify.  I'm including a file here (right-click and save this file to your desktop) that you can begin with.

We will begin a basic web site which you will need to save and continue to work on.  You can save it to ThawSpace but I strongly recomment saving them to a USB drive or even a floppy disk.  You can also email your document(s) to yourself as a backup.  We will be adding to this site for several days so you don't want to start over if your files get deleted.

Today we will also discuss Site Maps, Page Layouts, and main pages.

Beginning HTML

Today we began with the basics HTML.   

You can click on the image to the right to view a sample HTML document.

We also began using a free program called Notepad++ (available free here) which is far superior to the Notepad that comes with Microsoft Windows.  It's free to download, easy to install, and worth checking out.

Finally, I am embedding a "video tutorial" below to help cover the basics of HTML.  This will [hopefully] be useful for students who need a refresher, those who need to pause and work at their own speed, or those who were absent during the original lecture.

Quick Project: Making a Seamless Tile

Today we are going to use PhotoShop to create a seamless tile.  To begin with, download one of the images below [or use your own].  Open the image in PhotoShop.

Choose FILTER > OTHER > OFFSET > enter a horizontal and vertical number (i.e. 100)

Use your clone stamp tool, soft brushes, etc. and smooth out any hard edges or obvious spots which will make the tile more obvious. 

Save the image and test your tiled image as a web page background or as your system desktop.

Create a Magazine Cover

You will be using PhotoShop to create a realistic magazine cover. Your magazine can be an existing publication (People, Newsweek, etc.) or a made-up magazine (Kelseyville, Knights, Lake Sports, etc.) -- but keep them school appropriate.

I recommend beginning with a Google search for "magazine cover" and then clicking "Show Options" and then specifying "Large". (Here's an example.)  You can use a large image as a layout guide to try and match your title font, see where to place page components (UPC symbol, pricing, date, etc.), or to help you place images.  You can also use the image to help you select the proper colors (simply use the "eye dropper" tool).

Finally, I recommend saving the actual PSD file for this project so you can easily create another magazine cover in the future as a gift, a joke, a report cover, etc.

Create a New Cereal Box

Today we will begin using PhotoShop to create a new product -- in this case, a box of cereal.  We will be creating the box in 2D (flat on a page) as a foldable model to be constructed in 3D.  For example, your model may look like the "Pops" box (on the right) in 2D.  To begin with, download this cereal box template and begin blocking in your box.  Look at examples of cereal boxes [I have a few in the classroom] and think about what common components exist on this type of packaging.  Are the colors bright or muted?  Are they multi-colored or monochromatic?  Is the title large?  Bold?  Colorful?  Does it have an outline?  Is there a picture of the cereal on the box? 

Remember when you are looking for photographic components (i.e. cereal, bowls, spoon, cartoon animals, or whatever) that you look for large images.  It's much easier to reduce the size of an image without distortion than it is to increase it.  As you have found, expanding an image makes it blurry or grainy.

Next, think about cereal names:

• ______ Loops
• ______ O's
• ______ Nuggets
• ______ Smacks
• ______ Puffs
• ______ Crunch

Also, consider types of cereal flavors:

• Honey ________
• Sugar _________
• Crunchy ________
• Apple ________
• Spam _______
  

Is your new cereal based on your favorite movie?  Rock band?  TV show?

If you are interested in going the extra mile and trying a fancy cereal box font, check out this tutorial:  http://www.dzyneo.com/sugarpuffs.php

When you are finished, save a full-sized (4-panel) cereal box, but also save a copy of the cereal box cover that we can print for the wall.  If you don't have a USB drive to save your work, I suggest getting one ASAP.  I can loan you one of the USB drives we have for the class, but we're running low on these.  Remember, you can also email PSD's to yourself as a backup.  It's your responsibility to make sure you are saving your work -- especially now that we're ready to start Semester Two and you will be graded on projects [or lack thereof].

Have fun!

---

Also, this image was in the iStock.com "Free Image of the Week" gallery:

---

Recently Adobe (the makers of PhotoShop) did a contest asking graphic design students to create an "Adobe Cereal".  Here are some examples of what was created (I don't expect your boxes to be anywhere near this professional!):

Restore a Damaged Photo

Select one of the attached damaged photos to repair and restore [or use your own].  Remember to save the original to include in your portfolio as a "before and after".

Click on an image to view it full-size, then Right-click and Save As to your computer.

Using Text, Layer Styles, & Online Editors

Today we're practicing using the Text tool to add text (obviously) to an image. We will be using this technique for projects such as the magazine cover, the movie poster, etc.

Next we used Layer Styles to add drop shadows, a stroke, bevel & emboss, etc. Those effects make the text appear much more dynamic, 3-dimensional, and professional.

Finally we worked with some online graphic editors:

1. FotoFlexer (www.fotoflexer.com): A free online graphic editor that will allow you to easily create some PhotoShop-like effects.
2. CoolText (www.cooltext.com): A free title & button creator.
3. FlamingText (www.flamingtext.com): A free title & button creator.

Begin "Fool The Eye" Project...

Today we will look at examples of PhotoShop photo manipulations where things were added to [or removed from] photographs -- sometimes for advertising, sometimes for "news", and sometimes to show a different "history".

This is a good example of a photo manipulation done for this photo from two different newspapers:

Next we will begin creating our own "Fool The Eye" images.  Put elements from different photographs into the same image without making the photo manipulation too obvious.  Some ideas include adding people or vehicles, removing something (person, power line, mailbox, etc.), changing the colors of objects or clothing, or changing the background.  Remember to consider things like lighting, film grain, and color when considering the changes.

Have fun!

Finish PhotoShop Projects & Work on Portfolio

Okay, we have worked on the following PhotoShop projects:

• Gondola Beautification
• Theme Collage
• Colorized Photo
• Project Frankenstein

Work on getting those projects finished up and saved as JPG images.

Next you can play with the "Replace Color" tool.  Click on one of the sample images below and then copy [or Save As...] the image and open them in PhotoShop. 

• Go to IMAGE > ADJUSTMENTS > REPLACE COLOR
• Use the dropper tool to click on one of the bright colors
• Hold shift and select other shades of that color
• Drag the "HUE" slider left or right to adjust the color

Finally, log into your portfolio blog and post your finished projects.  Simply click on "New Post" and insert a picture.  It really helps to show the "before & after" if you do modifications (i.e. the Gondola or the Colorize).

Have fun!