Pixel-Style Globe Animation- part 2

We are going to continue working with Illustrator to create a 3d-styled lighting affect on a 2d pixel-styled graphic. I'm still using a globe, but it doesn't really matter what you are using. This video is a bit short in concept, but hopefully you are starting to get the idea how this could be done.

Watch on YouTube:
Part 2 of Pixel-style Globe Animation with Illustrator & Photoshop

Intro to Presenting: part 1- What NOT to do!

We aren't going to spend much time looking at presenting software, as the vast majority of people already know it. The real issue isn't the software, but rather how it is used. So, in this series of lessons, we are going to look at how it is used; good, bad, and terribad. Let's start with the worst.

As you begin creating your own presentations, make sure you are adjusting your presentations accordingly.

Watch on YouTube:
Intro to Presenting - p1: What NOT to do.

CSS: Box Practice: p1- Quesadilla

Understanding the Box Model is important when it comes to front-end web design with CSS. Being able to stylize and place div-tags and other elements is also important. You've learned quite a few basics of CSS so far, but lets really get some practice in now. We are going to move through a series of exercises to really get good at styling div tags. This will help as you begin to create and design your own websites utilizing CSS for all the design work.

We are going to start pretty simple.

We are going to make a quesadilla in a box with div tags.
Learn CSS - Box Exercise 1: Quesadilla in a Box

Animating Pixel Graphics: 3D lighting with Illustrator

We are going to begin a new animation today. We are starting pretty similarly to the previous exercise, but this time, make sure your design is in a circular shape. We are going to take a flat pixel-styled graphic of the earth (or I am, you can do whatever as long as its circular), and create a 3D lighting effect as an animation. We'll hit a few speed bumps, but thats ok, as they are jsut learning opportunities.

Watch part 1 on YouTube:
Part 1 of Pixel-style Globe Animation with Illustrator & Photoshop

Intro to DreamWeaver: Planning a Site

When you guys finish the midterm, you can get started thinking about what you want your first website to be about, and what you might want it to look like. Watch this video for more on planning a website. It's a bit simplistic, but it's enough for this course. If you're really interested in Web Design, consider taking it next year.

Continuing CSS: Working with Lists

If you have the old link for the first animation with CSS tutorial, be aware the new link is here: Learn CSS: Basic Animated Buttons...

New video:
Learn CSS: Refresher on Lists + a bit of CSS
Animating with CSS isn't really that important, but it is neat. Lists on the other hand, have become pretty important through the use of CSS. Most websites now use lists to create their menus. If you are new to CSS, you probably haven't done much with lists, as they are pretty ugly in base html. In this first video, get a little refresher before we press into creating menus with lists.

Don't forget, your final is already online. If you haven't looked at it yet... you probably should start. It's due by the end of this week.

Continuing with CSS

I've re-uploaded the video working with Brackets, as there were a couple little issues with the encoding. It should run better now for the few who had issues. See it on YouTube.

The CSS video on lists is almost ready. I've uploaded the incomplete version to our campus archive; you can get started on it there if you're on campus today. The completed video should be ready tomorrow.