IntroductionWelcome| 00:00 | Hi, welcome to the new video series
I'm calling Photo and Video Mashups.
| | 00:04 | I'm Dane Howard. Now photo and video
mashups are popular new trend in multimedia
| | 00:08 | creation authoring and sharing. If you
are a designer, photographer, teacher or
| | 00:13 | creative professional you are going to
benefit from this online lecture and training.
| | 00:18 | From bloggers to film professionals
to even photo journalists, I have been
| | 00:22 | absolutely amazed at how mashups
affect creativity and inspire others to have
| | 00:27 | creative products themselves. Here
are just a few things you can expect to
| | 00:30 | learn on this title. First you will
learn about popular tools and services used
| | 00:34 | for mashups. Second you will see
first hand how to use some powerful online
| | 00:38 | technique and tools to help you connect,
create and distribute your mashups.
| | 00:43 | These can be used on anything from a
portfolio, a multimedia presentation,
| | 00:47 | story or commercial work for a client.
| | 00:50 | Third and the most important you will
be presented a way of thinking that can
| | 00:53 | create a fresh perspective on how
can document and share your media,
| | 00:57 | tell stories and share them instantly
to a world wide audience. Let's get started.
| | Collapse this transcript |
|
|
1. Understanding MashupsWhat is a mashup?| 00:00 | So, I'm really excited talking to you a
little bit about mashup culture. What's
| | 00:03 | happening today and what we see
everywhere from TV, to culture, to music,
| | 00:09 | to the products we use. Let's first
start with TV. Whether it's sports or the
| | 00:14 | actual technology that's used to
cover sports, we see mashup culture everywhere.
| | 00:18 | Whether it's an interface that you
click on, that brings you the highlights of
| | 00:22 | the day or in fact a commercial that
you see. We have to talk about enhanced
| | 00:27 | experiences. I remember the first
time I saw the little yellow line on a
| | 00:31 | football game, it seemed to add drama
on every single play. Or how about the
| | 00:35 | commercial that you saw when you
plugged in your first iPod into your car?
| | 00:40 | Now you had infinite playlists inside
of a driving experience. Mashups are
| | 00:44 | happening with companies and with
products everyday, everywhere we look,
| | 00:48 | wherever you are in the world.
| | 00:50 | Or how about what we find in jazz?
What we found for years in jazz is this is
| | 00:54 | spirit of improvisation and this notion
of creative process working together as
| | 00:59 | musicians used the process of
inspiration and improvisation to bring music in a
| | 01:05 | way that makes them dynamically think.
It's happening in food, it's happening
| | 01:09 | on the shows that we watch about food,
the fusion of the self and where someone
| | 01:13 | comes from is ideal and important on
how a dish is delivered and how it tastes.
| | 01:19 | You can bring that part of yourself
into everything we are going to talk about
| | 01:22 | today. Let's talk a little bit about
mashups and how they are defined.
| | 01:26 | Well I pulled my definitions from a very
mashup itself. I pulled from Wikipedia.
| | 01:32 | Wikipedia is a collaboration of all
kinds of people around the world, who bring
| | 01:35 | their defined words and logic to this
word. I couldn't find it in a normal
| | 01:40 | dictionary. In fact I learned that It
actually came from music and from hiphop culture.
| | 01:45 | Well they characterize mashups as three
different kinds: consumer mashups, data
| | 01:50 | mashups and business mashups. Entire
companies are now built on the concept of
| | 01:54 | mashing up data and media to create a
company that does nothing but that.
| | 01:59 | It's a fascinating time for mashups. Today
we are going to talk about photos and video
| | 02:02 | mashups and we are going to take
disparate photos and video from a variety of
| | 02:07 | different places and we are going to
bring them together and we are going to
| | 02:09 | create and show examples
of new derivative works.
| | 02:12 | It's a very interesting time, whether
it be the collage of the past or the
| | 02:16 | mashup of the future, we are going to
talk about ways that you can affect and
| | 02:20 | change media and distribute it
instantly. These characteristics are like the
| | 02:25 | pillars of how creating a mashup
comes together. It involves intense
| | 02:29 | creativity, how you think outside the
box to bring your media and juxtapose it
| | 02:34 | against other media to
create an entirely new work.
| | 02:37 | It involves improvisation in a way
that you have to think on the fly and see
| | 02:41 | and make decisions. Heritage, yourself,
who you are, is going to be critical in how
| | 02:46 | you bring yourself into the piece and
give a lot of yourself to make those
| | 02:51 | decisions. There is also a social
responsibility. How are you going to use and
| | 02:55 | what you are going to use and how you
are going to juxtapose things together.
| | 02:58 | This is key editing principles. And how
you take responsibility for the piece
| | 03:03 | that you are creating.
| | 03:05 | In the very end is this enhanced
experience, it's something that you are making
| | 03:08 | better than what it started. Is it
just a disparate group of photographs or is
| | 03:12 | it a new body of work? A new enhanced
experience that you are distributing into
| | 03:17 | a website, into a blog or something
that is brand new. Let's use these
| | 03:22 | characteristics as we move forward to
define this mashup example. Let's get started.
| | 03:27 | So what about you? Who are you? Are
you an amateur photographer looking to
| | 03:31 | enhance your photography, or you are a
professional that's wanting to extend a
| | 03:34 | new service and add something to what
you can have as a differentiation to your world?
| | 03:39 | Are you a designer with a
portfolio that you would like to distribute
| | 03:43 | and showcase do you have an idea that
you want to previsualize into a moodboard
| | 03:47 | or storyboard and you want to get it
out there professionally and very quickly?
| | 03:52 | In all of this there seems to be a
teacher or an instructor waiting to teach or
| | 03:56 | communicate in a sequential way and I
think this tutorial has to do with anyone
| | 04:01 | that's a professional with a need to
visually communicate. Who are you and how
| | 04:06 | might you want to use this? This has a
lot to do about this concept about your
| | 04:09 | visual voice. How you shoot, how you
edit, how you publish and now in this
| | 04:14 | global world, how do you distribute,
instantaneously? We are going to talk about
| | 04:18 | all of these things. In fact let's
make something and let's make it now.
| | Collapse this transcript |
| Locating photos| 00:00 | Let's talk about locating your photos.
Let's talk about how you author, let's
| | 00:04 | talk about where you want to keep them,
and let's talk about how you want to
| | 00:06 | connect to them. These three
questions are going to be pivotal on your next
| | 00:11 | steps on how you behave around the
photographs and the videos that you want to
| | 00:16 | use in your mashups.
| | 00:17 | Are you carrying a mobile phone? Does
it take pictures? Well, are they staying
| | 00:21 | on your phone or you are connecting
them to the web? Are you sending them to an
| | 00:24 | email service? Are you sending them to
online service? What are you doing and
| | 00:28 | how you are authoring? Ask yourself
those important questions. Are you keeping
| | 00:32 | them on your computers or do you want
to send them to the internet? Well in
| | 00:34 | today's wireless world you could send
directly from your camera, WiFi to the
| | 00:40 | Internet, or you could send directly
using a program like ShoZu that shuttles
| | 00:44 | your photograph automatically without
you even thinking about it into your
| | 00:49 | online service.
| | 00:49 | Well let's think about that. Where
are they going to be, once they are at the
| | 00:53 | location where you want to keep them?
Are you using a program that helps you
| | 00:56 | organize them and edit them and are you
pulling together a gallery that allows you
| | 01:00 | to upload them directly to the web?
Where is that? On your Mac, PC? None of that
| | 01:05 | at the end of the day matters but the
part that we are going to start from is
| | 01:09 | going to be that online service. Now
let's look to the right there. Don't worry
| | 01:13 | if any of those services aren't that
you are working with. This is just a few.
| | 01:17 | Now let's take a look what this means.
| | 01:19 | Off to the left we are just kind of play
out some examples here. Maybe your keep
| | 01:23 | your photos on Flickr. Maybe you keep
them on Picasa, maybe you've uploaded them
| | 01:27 | to VUVOX already. But the idea of a
mashup is that you don't let the digital
| | 01:33 | shoebox be the digital shoebox; you put
that media to work. You are going to
| | 01:38 | offset it with other services like
YouTube or Photobucket and you are going to
| | 01:41 | use this in creative ways.
| | 01:43 | Now in the center is the mashup itself.
This is the core of what we are going
| | 01:47 | to be working on today. This can be a
service, could be a website. In fact we
| | 01:50 | are going to be using VUVOX as a way
to mashup photos, videos, text and music
| | 01:55 | and distribute it to one of those
places on the right. Those places can be
| | 01:59 | Facebook, MySpace, it could be your blog,
it could be a website, it could even
| | 02:03 | be a client's blog in itself.
| | 02:05 | This is going to be an exciting place,
right there that you are going to
| | 02:08 | distribute your media into the web in
ways you have never done before. So let's
| | 02:12 | take a moment and let's think about
that in a entirely new way. If you remove
| | 02:17 | all the other stuff, which can seem
confusing, at the center is the new core
| | 02:22 | creative tool. It's called the Mashup
tool and there are a series of them
| | 02:26 | that are starting to pop up, but it
pulls a lot of elements together and this
| | 02:29 | is where we are going to start today.
| | 02:31 | Once you have located your photos,
once you have thought about where they are
| | 02:35 | coming from, where you want to keep them,
and where you want to connect to, I want
| | 02:38 | you to think about two specific ideas.
One, establish two solid sources for
| | 02:44 | your photographs. One online, one on
your computer, I want it to be trusted,
| | 02:49 | immediate and accessible. Second, I
want you to plan for immediacy. If you
| | 02:53 | haven't already, listen. We are in a
24x7 world. I want you to thing about how
| | 02:57 | you can take a photograph with your
camera phone now and let someone in an
| | 03:01 | entirely different part of the world
see it and I want you think about how you
| | 03:05 | can distribute that instantly.
| | 03:06 | How you are going to set up, what photo
service allows you to do that, and with
| | 03:10 | those two things in place you are
going to totally explode in the next couple
| | 03:14 | of chapters. And let's get started.
| | Collapse this transcript |
| Locating video| 00:00 | We are going to talk about locating
video. Video is slightly different than
| | 00:04 | photographs because it seems like the
thing that we capture the least. We watch
| | 00:08 | it the most up on YouTube but we author
it or create it the least. Here are two
| | 00:13 | things to think about. When you are
taking your point and shoot into the field
| | 00:16 | and you're shooting things, shoot more
video and think about how it might be
| | 00:21 | used. It doesn't have to be professionally
shot. Think about the ambiance that
| | 00:25 | you are picking up. Think about the
audio and think about the video that you
| | 00:28 | are going to start to have.
| | 00:30 | Now think about YouTube and
these new services that are exist out there
| | 00:33 | and how you might use that as a
repository for your ideas to source and to
| | 00:37 | visualize. Here are some examples. On
the left is a visualization that uses
| | 00:42 | live RSS feed. That's going to be
located in the center here, visualized inside
| | 00:46 | of a cutout of a news stand. In the
background is a looping video shot
| | 00:50 | handheld. So what you have got here is
a visual RSS reader that changes every
| | 00:55 | time you see it because it pulls from
an actual RSS feed. This happens to be
| | 00:59 | pulling top stories from Yahoo. In the
background is that looping video, it's
| | 01:04 | an entirely new visualization. This is a mashup.
| | 01:08 | On the right hand side is a collage.
And the collage uses an environment to
| | 01:13 | bring in some ambient video and this
adds some texture. So here you have got
| | 01:16 | an environment, essentially a neighborhood,
near the tram and what it's doing is
| | 01:21 | it's using the environment as a way of
framing the video to give you an idea of
| | 01:25 | what might be happening in that
environment. These are two totally separate
| | 01:29 | examples. Here is another. What happens
if you take a looping video from YouTube
| | 01:33 | of some waves and you combine it with
a dynamic online photo gallery that
| | 01:38 | either comes with Flickr, Picasa or SmugMug?
| | 01:40 | Now I say dynamic because it's a
very important word. I could set this
| | 01:44 | presentation to always point to a
particular online album. That album can
| | 01:50 | change as much as I want it to
because I can control where I can send my
| | 01:54 | photographs. I can send my photographs
from my camera phone or my camera and
| | 01:58 | edit them and upload them directly.
So what you see here is a wave that's
| | 02:03 | composited over a dynamic photo gallery.
This is another example of a mashup in action.
| | Collapse this transcript |
| Thinking like a creator| 00:00 | Now it's time to think like a creator.
I'm going to use some examples as a way
| | 00:04 | to deconstruct how I have seen some
great creations that use mashup thinking.
| | 00:09 | Let's first start with Embed Obama.
Now Embed Obama was used as a way of
| | 00:15 | communicating during the primary
elections a mashup over a lot of different
| | 00:19 | types of content. This candidate met a
lot of people, went to lot of places and
| | 00:25 | produced a lot of media. Let's
take a look at some of that now.
| | 00:28 | (Barack Obama: I'm Barack Obama
and I approve this message.)
| | 00:31 | (Barack Obama: We want an end to
this war and we want diplomacy!)
| | 00:35 | The idea here is that it combines
all kinds of different visuals from
| | 00:40 | animation, to text, to hotspots
themselves and what you see here in this blog
| | 00:46 | is that this collage was used as a way
of framing a lot of this media. All this
| | 00:51 | media never existed in this new format
until this piece was created. From the
| | 00:56 | TV itself to the video that was created.
| | 01:02 | (Music plays.)
| | 01:11 | (Barack Obama and Man 1: It was a creed written into the
founding documents that declared the destiny of a nation.)
| | 01:19 | (Barack Obama: and Man 2: Yes, we can.)
| | 01:21 | (Barack Obama, Man 1, and Man 2: It was
whispered by slaves and abolitionists.)
| | 01:25 | Next we are going to show another
example from a band that been together for a
| | 01:29 | number of years. Now this band has like
3000 friends on MySpace and this is an
| | 01:34 | identity piece of who they are and why
they came together. Let's take a look.
| | 01:38 | (Man 3: Hi, you guys. We're A Night at the Pictures,
thanks for checking out our space here.)
| | 01:43 | (Man 3: This is sort of our world.)
| | 01:45 | So here is the world that they have
created, it's an environment that shows
| | 01:50 | where they practice, the music they
produce and the things that they actually
| | 01:55 | have. It's got the texture who they are,
they got their identities, even their music.
| | 02:02 | (Music plays.)
| | 02:16 | (Man singing: You got a perfect soul.)
| | 02:20 | Now the most amazing thing is that this
collage was not created by an artist, or
| | 02:23 | designer; this collage was created by
the very artist that you see in front of you.
| | 02:27 | These are guys that don't know
Photoshop, these are guys that don't know
| | 02:31 | multimedia or coding; they know music.
And as a self expression tool what's very
| | 02:36 | fastening about a mashup is the idea
that you can get the ideas on to the page
| | 02:40 | and into your world whether that be the
creativity of an interactive T-shirt or
| | 02:44 | selling your guitar online.
| | 02:47 | This becomes a brand new medium that
could be embedded and distributed inside
| | 02:51 | of their social network and shared
with their friends, their audience and the
| | 02:54 | people that actually come to their gigs.
| | 02:57 | As a part of this last example, I'm
going to show you how I created a virtual
| | 03:01 | gallery. Literally some paintings
that never hung in this environment.
| | 03:05 | This is a mashup of painting and
photographs, some of them for sale, some of
| | 03:10 | them hung in environments that never
existed in this context elsewhere and they
| | 03:14 | get to live on a portfolio site and
they need to be updated dynamically and one
| | 03:18 | of the things we are going to do
today is actually replicate and follow the
| | 03:22 | same steps to create a similar gallery.
| | 03:24 | So let's take the creativity, let's
take the ingenuity of this new tool and
| | 03:29 | this new way of thinking to re-identify
and recreate some new environments.
| | 03:35 | Let's get started now.
| | Collapse this transcript |
|
|
2. Creating a CollageCreating a new Collage| 00:00 | So let's get started and make one of
these things. So, creating a collage
| | 00:04 | following steps that I'm going to take
you through happens at a website VUVOX.
| | 00:07 | VUVOX collage is the place that you're
going to go to create one of these, and
| | 00:13 | please note that this is a website. So,
if the following user interface changes
| | 00:17 | a little bit, the steps won't. So
let me get you started with collage.
| | 00:21 | When you visit the website, you are
usually greeted with an introductory
| | 00:26 | collage. It gives you chance to check
out the features, the overview. But what
| | 00:31 | you'll want to do is go down, click
on Create A New Collage and this will
| | 00:36 | allow you to begin the process of
creating collage right away. You'll be asked
| | 00:40 | if you would like to start with an
example. If I click on this, you'll be
| | 00:43 | presented with three starter templates.
Those starter templates give you a
| | 00:47 | chance to just play with existing media.
If you'd select Back, you'll be back
| | 00:51 | at this initial screen.
| | 00:53 | To start from scratch, select that and
this gives you a chance to go ahead and
| | 00:57 | upload some images. This is
the beginning of your collage.
| | Collapse this transcript |
| Understanding the components of the stage| 00:00 | So let's look at the components of the
stage here. We represent with an Upload
| | 00:04 | Images. Select that right now. When you
select your media, you want to go ahead
| | 00:09 | and find the location, and I'm holding
down the Ctrl key while I select multiple
| | 00:14 | files. Go ahead and select Open, and your
media will be uploaded directly into the system.
| | 00:25 | Once your images are uploaded
correctly, you'll see the visual
| | 00:28 | feedback down below.
| | 00:30 | Let's take a look at some of the items
around the stage. One of the first things
| | 00:35 | you'll notice is that the images
themselves have been added. To add them
| | 00:38 | directly, you can either click or drag
and drop to the stage. Let's take a look
| | 00:42 | at what's going on. Up here in the
upper left we have the ability to give it a
| | 00:46 | title. This is where you can name
your collage. 'my first collage.' Second,
| | 00:52 | you'll notice that it's in the Draft
mode. This allows you to understand
| | 00:55 | between Draft mode and Public mode.
We'll talk a little bit about that in a little bit.
| | 00:59 | This is where you can preview your
collage and see how it's going to be viewed.
| | 01:04 | And then we'll get to Save and the
Publish controls. Down below, you have the
| | 01:08 | ability to zoom in and zoom out, and
the tabs themselves allow you to look at
| | 01:14 | the media that you've uploaded against
all the different libraries that you can
| | 01:17 | connect to.
| | 01:18 | So let's talk about a few other things
that will be growing into this area.
| | 01:22 | In the upper right here, you see a Text
tool. To the right of that, there is some
| | 01:25 | Help. Click on that to learn a little
bit more about what the tools can do.
| | 01:29 | The Zoom control allows you to zoom the
stage in and out to zoom in on your variety
| | 01:34 | of media, and then you can always
upload more files into the system itself.
| | 01:39 | The following tabs down below allow
you to connect your online accounts.
| | 01:43 | We're going to do that in the next movie.
| | Collapse this transcript |
| Connecting to an online account| 00:00 | Next, we're going to connect to some
online accounts. Now let's first connect
| | 00:04 | to SmugMug to see what that would
connect to. Just to give you an idea of what
| | 00:07 | this experience should be like.
Enter in your e-mail address that you've
| | 00:11 | connected to SmugMug. Pressing
Connect once you enter your credentials will
| | 00:15 | connect you securely to your
account. What you'll notice is that the
| | 00:19 | environment itself starts to replicate
the same gallery structures you have on
| | 00:24 | that other account.
| | 00:26 | Here I have got a variety of galleries
I have set up. Let's go ahead and look
| | 00:29 | at Recent trip to the East Coast. What
this begins to do is talk directly with
| | 00:34 | SmugMug and allows my media to be
referenced. Again, I can drag and drop to the
| | 00:39 | stage at anytime.
| | 00:41 | Next, let's connect to Flickr. If
you've got a Flickr account, you want to
| | 00:45 | scroll down and go ahead and select
Connect. If you go ahead and get a security
| | 00:49 | warning, don't worry. This is to your
benefit. You'll actually want to click
| | 00:53 | through this because you're making a
secure connection only to your account.
| | 00:58 | This will redirect you to a Flickr
login page. Let's start to login now.
| | 01:03 | Once you've entered your credentials,
go ahead and sign in. Again, if you get a
| | 01:07 | security warning, don't worry. Go
ahead and click through it and select OK.
| | 01:11 | You'll be redirected back to the
collage and you'll be connected to your media.
| | 01:16 | This is what you should see except
this should be your account, with your
| | 01:20 | photostream, with your images. You've
securely connected to your Flickr account
| | 01:25 | and you should be
looking at your specific media.
| | 01:28 | Let's go ahead and add another image,
just by clicking. The Picasa account is
| | 01:34 | the next thing we'll connect to. Go
ahead and click on the Picasa tab. If you
| | 01:38 | have a Picasa account, you can access
it via your user name. Your user name is
| | 01:42 | usually the name before the @ symbol
if you register using the gmail account.
| | 01:48 | Go ahead and connect now. A successful
connection will allow to see your media,
| | 01:53 | right on front of you.
| | 01:55 | Start to look at the tabs and you'll
start to see all of your online albums
| | 01:59 | directly set in front of you. What's
amazing about what we've just done is
| | 02:03 | we've connected remotely to a
completely different photo service. This allows
| | 02:08 | you to leverage all of the media
that you've added directly from these
| | 02:12 | different accounts.
| | 02:13 | Now don't worry if you don't have a
Picasa, Flickr account or SmugMug account.
| | 02:18 | You can create those at anytime and begin
uploading and you don't have to use all of them.
| | 02:23 | The last tab is a tab called the
Library. Now Library is something that VUVOX
| | 02:28 | is working on. It's a public gallery
of cutouts and a variety of media that
| | 02:32 | allow you to use, in a free form way.
And all of the creators have opted into
| | 02:37 | this environment. And these are a
variety of different collections. So they may
| | 02:41 | range from outdoor, indoor or
transitions but all of these are free items that
| | 02:46 | you can use increasingly in your collages.
| | 02:49 | That's a little bit of a summary of
connecting to online accounts. If there are
| | 02:54 | additional tabs down here with
additional services, take a look at them at that
| | 02:58 | time as this interface may change.
Now that you've uploaded some media or
| | 03:03 | connected to an online account, this
is a great time to start your collage.
| | 03:06 | We're going to do that in the next movie.
| | Collapse this transcript |
| Adding media to the stage| 00:00 | Now that we've successfully uploaded
some media and connected to some online
| | 00:03 | accounts, this is time to build your
collage. Well with these media examples
| | 00:08 | what I'm going to be doing is building
a room. In my camera, I've roughly put
| | 00:13 | together some panoramic shots. And by
clicking I'm just going to add them to
| | 00:17 | the stage here.
| | 00:19 | In this next sequence, I'm going to
illustrate how you maneuver the media
| | 00:22 | around the stage. Everything on the
stage is interactive. So you can click on
| | 00:26 | any object and resize it, position it,
rotate it by clicking and dragging. And
| | 00:35 | even remove something from the stage.
Now note, this does not remove the item
| | 00:40 | from disc, it only removes
it from the stage itself.
| | 00:42 | Let's try that again. Clicking an item,
locating on stage and removing it. By
| | 00:50 | adding a piece of media, you can go
ahead and select it, and everything will be
| | 00:55 | added to the end of the last item on
the stage. If you wanted to click and
| | 01:00 | drag, you'll see the little indicator
that's located on the left side of the
| | 01:04 | image. This gives you a better detail
of how you're going to add the media
| | 01:08 | directly to the stage. Many times you
may want to insert media. If you want to
| | 01:13 | insert something between two objects,
you'll hover over the scene and then
| | 01:17 | release. This will insert a
piece of media between two others.
| | 01:21 | Let's give you some organizational
tools. Here, I can move an item to the
| | 01:27 | right. I can click and drag an
item to the left. But as you can see,
| | 01:33 | positioning media might be a little
difficult. A helpful tip is to actually use
| | 01:38 | the Nudge control. Nudge control is
used by using the arrow keys. To do this,
| | 01:42 | select the image, then use your arrow
keys. I'm going to use my right arrow
| | 01:46 | key. And as I click each time on the
arrow key, it will nudge the file up, over
| | 01:53 | or to the right,
corresponding to the respective arrow.
| | 01:57 | Now that I have things well positioned,
I want to close the gap. See how the
| | 02:01 | gap is over here to the left. To close
the gap, we've designed the Slide tool.
| | 02:07 | To do this, select the furthest left
image and you'll see a icon with a hand on
| | 02:13 | it. When you hover over it, it'll give
you a Slide tool. Click and drag back to
| | 02:17 | the left. Notice how everything to the
right allows you to close the gap. You
| | 02:23 | can use this to open up gaps or to
close them down. And it's very helpful, once
| | 02:27 | you've already positioned
media within your collage.
| | 02:31 | Next, as I build up my room here, I'm
going to resize my elements and position
| | 02:36 | them just the way I want so that I can
begin to go to the next step, which is
| | 02:42 | start to lay items to the right and
on the top of this room. It's about
| | 02:46 | complete but this is a good time to
save my work. We're going to do that next.
| | Collapse this transcript |
| Saving your Collage the first time| 00:00 | We're now at the point where we're
going to save our collage. Now to do this
| | 00:03 | remember, we have not signed in or
created an account. So for the first time,
| | 00:07 | while you're essentially playing,
you'll be able to save and to login. This is
| | 00:11 | super-helpful because it allows you to
play with the Collage tool before you've
| | 00:15 | create an account or login. And it
remembers everything you've done to date.
| | 00:19 | So, let's go ahead and enter in an
account. To do that, enter an e-mail
| | 00:24 | address. As you fill up the form,
notice how the user name will check for the
| | 00:33 | availability to allow you to
register with a unique user name. Creating a
| | 00:38 | unique password will be important
because you'll want to refer to it later. The
| | 00:41 | next step is to click Register. This
allows you to register an account and save
| | 00:45 | all at the same time. You'll receive
feedback directly on the left-hand-side
| | 00:50 | and on the right that you've successfully
created an account and signed in correctly.
| | 00:55 | As I follow up with the Save command
you will want to save often. But I also
| | 00:58 | want to point out the Save As command.
Because you may want to work on multiple
| | 01:01 | copies of a file. Click on the Save
As button. When you do that, your last
| | 01:06 | saved title will come up with a number
2 next to it. Just call this my demo 2.
| | 01:12 | When you save, it'll create a new
instance of that collage and preserve all the
| | 01:17 | links and all the arrangements of the demo.
| | 01:19 | Referring to your collages is easy to
do. Go up to My Collages, locate it in
| | 01:25 | the myVox tab. This allows you at
anytime, to see the work that you've been
| | 01:29 | creating. You should have something
that looks like this. We've now created two
| | 01:34 | draft collages of the same thing. And
we're going to go back in and edit that
| | 01:39 | in a second. But before I do, I want
to show you what your accounts are going
| | 01:43 | to look like as you build and create more work.
| | Collapse this transcript |
|
|
3. Working with Your MediaAdding a link hotspot| 00:00 | We're on the myVox page, looking at my
collages indicated by this particular
| | 00:05 | page here. Next, we're actually going
to jump-start the process a little bit by
| | 00:10 | cross dissolving into an
account that has a lot more media.
| | 00:13 | I'm going to do this because I want to
show you what an account looks like when
| | 00:17 | it has a lot more collages and a lot more media.
| | 00:20 | Now, I'm in a much more featured account, something
that you'll have down the road once you've had the
| | 00:25 | chance to build out some more
collages and upload some additional media.
| | 00:29 | The first thing you'll notice is the
difference between a gray icon, which is
| | 00:33 | known as by a Draft account, and a green
icon which is known as by Public. We'll
| | 00:38 | speak to that in a little bit, as it
regards to both public and unlisted or
| | 00:42 | draft pieces.
| | 00:44 | Here I've got an exhibit, similar to
the piece that we just started we called
| | 00:47 | virtual exhibit2. To re-edit a piece,
go ahead and click Edit. This will take
| | 00:53 | you back into the Edit mode of the
collage, and the Media will come up. We've
| | 00:58 | left off where we had
started where we built the room.
| | 01:01 | Next, what we're going to start to do
is create a hotspot inside of the
| | 01:05 | collage itself. In order to do this,
let's hang a piece of artwork inside of
| | 01:09 | this room. I'm going to jump over to my
Picasa tab, and I'm going to log me in.
| | 01:15 | From there, let's go down to a gallery.
I'm going to refer to some artwork that
| | 01:21 | one of my children did. Let's go
ahead and drag and drop the item onto the
| | 01:28 | stage. There is the photograph.
Next thing I want to do is resize it.
| | 01:34 | I'm just going to rotate it a little bit.
| | 01:36 | Next, I want to refer to this and link
off to something else. So I'm going to
| | 01:41 | click on this, and let's refer to the
Hotspot icon. The Hotspot icon allows you
| | 01:47 | to click and refer to additional
editorial context. To do this, you'll get a
| | 01:52 | blue box. This blue box becomes the
thumbnail when it gets written out. You can
| | 01:57 | give it a title, you can give it a
description, you can add additional
| | 02:02 | multimedia. In some cases, you can
even link it for sale and give it a price.
| | 02:08 | Right now, we are just going to link it
to an additional web-page. To do this,
| | 02:12 | go ahead and click on the icon with
the Link button, and give it a title. And
| | 02:16 | I'm going to say, See more artwork.
| | 02:20 | Next, you want to either paste in the
URL or type it in. In this case, I have
| | 02:25 | it already on my clipboard. So I just
paste it in there and I hit Save.
| | 02:30 | I've now created a hotspot that
will link to another website.
| | 02:33 | Let's go ahead and preview to see
what this is going to look like.
| | 02:37 | As our collage moves along here, and as I
mouse over, you can see that my title shows
| | 02:42 | up, See more artwork. When I click,
it will open up a new tab and take me
| | 02:46 | directly to that web-page with
additional artwork. You've just successfully
| | 02:51 | created another hyperlink.
| | 02:52 | Let's go back to the Edit mode
where we continue to make our collage.
| | Collapse this transcript |
| Adding a media hotspot| 00:00 | Another type of hotspot that can be
created is a multimedia hotspot. So let's
| | 00:04 | talk about this hotspot that we had it.
Now note that the hotspot will come
| | 00:09 | along with the media itself. So if I
decide to move this particular piece of
| | 00:14 | artwork, the hotspot I've
created will come with it.
| | 00:16 | What we're going to do now, I'm going
to delete the hotspot that I just created
| | 00:21 | and remember I'm using the Hotspot
icon, and I select it with a media that I
| | 00:27 | wanted to associate it with.
| | 00:27 | So let's add that and I'm going to
drag it in the location that I want.
| | 00:32 | But instead of adding a link type,
I'm going to add additional multimedia.
| | 00:37 | This will allow me to open up a window and
put additional multimedia into this media
| | 00:42 | detail. So it's giving me two choices
here. I can upload media or images or a
| | 00:47 | video directly into this hotspot.You
can see below, I'm going to pull from my
| | 00:51 | library down below.
| | 00:53 | What I'm going to do is I'm going to
start to locate my media and drag and
| | 00:56 | drop directly into the collage itself
with the media hotspot that contains a
| | 01:01 | slideshow. Add one more. And then what
I have here is the ability to reorder
| | 01:08 | the slideshow. So I'm creating a new
asset from media that's from my Picasa
| | 01:13 | account, and it's creating a new
slideshow. Once I'm happy with the media
| | 01:18 | inside, I'll go ahead and hit Save.
| | 01:20 | It's going to save out a brand new link.
Let's hit Preview and it's going to
| | 01:25 | refer to those images and you can
notice here that the highlight says Click for
| | 01:29 | more, and it's giving me the Multimedia
icon. When I click, the slideshow will open,
| | 01:34 | and it'll give me more information
about what I just had. This is
| | 01:40 | incredibly powerful if you want to add
video to it, text, music, whatever you'd
| | 01:45 | like. Go ahead and close it out. And
this is another time that it's good to save.
| | Collapse this transcript |
| Adding a link description| 00:00 | So now we've successfully saved our
work and we're in Preview mode. You can
| | 00:04 | always tell that you're in Preview
mode because you are locked out of your
| | 00:07 | media right here and you want to go
back and hit Edit. This will give you
| | 00:12 | control back over your space. This
gives me another chance to talk a little bit
| | 00:16 | about the additional media
hotspot details that you can add.
| | 00:20 | So at first, we added a link, next,
we add it some multimedia, third, we're
| | 00:24 | going to add a title and description.
To add a title, go ahead and click inside
| | 00:29 | of the window there. Now, I can add a
title, 'See more artwork.' If you're happy
| | 00:34 | with the title, go ahead and hit
Enter on the keyboard. To add a text
| | 00:38 | description, click on the Text
Description icon. What this does, it will bring
| | 00:42 | up your slideshow and any additional
link that you've created. And click right
| | 00:46 | inside of the Detail box. Now, I
add a description down. Once you've
| | 00:51 | successfully entered the
description, go ahead and save it out.
| | 00:54 | Once you save it out, it'll be saved
and preserved, but it hasn't been saved to
| | 00:58 | diskette. To save it to disk online,
go ahead and select Save and you'll see
| | 01:02 | the feedback that all of your
work in hotspots has been preserved.
| | Collapse this transcript |
| Creating cut-out objects| 00:00 | The next thing we are going to do
is talk about a powerful tool called
| | 00:02 | Cutouts. Now, so far we have been
working with just entire objects. You can
| | 00:07 | see here as I'm moving around the
image, I have been positioning, layering
| | 00:11 | images, all as they originally existed.
But the Collage tool allows you to
| | 00:15 | cutout an image. Let's go ahead and find
an image that we want to work with next.
| | 00:19 | I go down here to the Paginator and I
will find a piece of artwork that I want
| | 00:23 | to add to my stage. By clicking and
dragging, I can go ahead and position this
| | 00:29 | new piece of artwork here. But the
artwork I want to position inside there is
| | 00:33 | not this one. With it selected, what
I'm going to do is I'm going to select the
| | 00:37 | Cut-out tool. I can do this by
selecting the Scissors icon. What this would do
| | 00:42 | is place an image right in
the middle of the screen.
| | 00:45 | By clicking on the Cut-out tool, you
will be taken directly to an in-browser
| | 00:50 | Cut-out tool. This mimics a lot of
the type of functionality that you would
| | 00:53 | find in Photoshop to create cutouts,
masks, and powerful ways of creating holes
| | 00:59 | inside of objects.
| | 01:00 | Let's take a look at some of the
features it gives us. The Cut-out tool
| | 01:03 | consists of Polygon Selections,
Rectangle Selections, a Full Scale Eraser, and
| | 01:10 | Restore Brush. Let's start
with the Polygon selection.
| | 01:15 | Polygon Selection gives you a Softness
control and an Opacity control, with the
| | 01:19 | ability to erase or restore the image
at anytime. You will know that you are in
| | 01:24 | the Polygon tool when you are
given the individual crosshairs.
| | 01:27 | When you begin to click, you are
given specific points. If you click
| | 01:33 | successfully in sequence, you begin to
create a selection. While the selection
| | 01:39 | is hot you will be able to
drag the points directly.
| | 01:43 | To close the selection itself, find
the yellow dot that you stared with.
| | 01:48 | This will cutout your individual cutout.
| | 01:50 | Note that you can edit the
selection directly while it's still hot.
| | 01:55 | To the right you will find different
Preview Modes. Here I can preview against
| | 01:59 | a light background, a dark background,
or the original image itself. This is
| | 02:04 | helpful when you want to arrange
specific detail against your cutout itself.
| | 02:08 | If you would like to zoom in, you
can do so at anytime by zooming into a
| | 02:12 | particular corner and then selecting
the Polygon tool out to make sure that
| | 02:17 | your selection is aligned with what you want.
| | 02:20 | Once you are finished and happy with
your selection, go down to the Save icon,
| | 02:24 | which will create a new asset
that will be saved to the stage.
| | 02:28 | Back at the stage, your image now has
a cutout denoted by the hole inside of the image.
| | 02:35 | Next, we are going to place a new
piece of artwork into this selection.
| | Collapse this transcript |
| Advanced cutting and masking techniques| 00:00 | Now that I have a saved selection, I
just want to show you a little about what
| | 00:03 | just happened. So we have been
looking at artwork inside of my Picasa.
| | 00:08 | I haven't re-saved or hurt the original
asset. If you look over to my uploaded
| | 00:12 | media and then my cutouts, you will
see that I have generated a new cutout.
| | 00:17 | This is the new artwork. So this starts
to become a library of things that you
| | 00:21 | have created over time and you
can certainly refer to it later.
| | 00:24 | Let's go back to the Picasa account and
find a piece of artwork that we want to
| | 00:28 | place there. I like this one right here.
Click and drag directly to the stage.
| | 00:34 | Notice it comes in full size. I'm going
to use the Resize button, I'm going to
| | 00:37 | position it, but it's in front of it.
To put it behind I'm going to select the
| | 00:43 | Move Backwards button. What this is
going to do is allow me to manipulate the
| | 00:48 | image directly behind the cutout I just created.
| | 00:52 | Now, if I wanted to clean up this edge
or do additional work, I could do so at
| | 00:57 | any time by selecting the cutout
and going back into the Cut-out tool.
| | 01:01 | Let's use this as an opportunity to
use the Cut-out tool and create some more
| | 01:05 | advanced cutouts.
| | 01:08 | Back at the Cut-out tool what I want
to do is focus on the small edge down
| | 01:12 | here. Let's start by zooming in to
that specific area. This will give me a
| | 01:17 | chance to give you a tour of
some of the additional tools.
| | 01:20 | Well, I select an Eraser. The
eraser gives me an ability to control the
| | 01:24 | Softness and the Brush Size. Brush size
itself is denoted by the circle right here.
| | 01:31 | If I adjust the size by using the slider,
you will notice that the size of the
| | 01:35 | brush is reflected. If I click and
hold my mouse I can now begin to paint out
| | 01:41 | this specific area.
| | 01:42 | This also works in reverse. If I go up
to the Restore Brush, I will give you a
| | 01:47 | little trick. If I go down to the
Opacity, I may not want to paint everything
| | 01:51 | back in at 100% Opacity. I may want
to have a little bit more control.
| | 01:55 | Let's say I bring this back to 29%,
let's say, and now I'm going to start to
| | 02:00 | pull in some of this original image
by painting it back in. I use this
| | 02:05 | technique a lot when I want to
have more control over my images.
| | 02:09 | You can see here some of the original
images starting to come back into place.
| | 02:14 | If I go over my work even further, I
will increase that mask by a factor of
| | 02:18 | two, by laying in one more layer of 29%.
Let's zoom out to see what we have got so far.
| | 02:25 | Now I have got the original artwork
with some opacity that I painted back in.
| | 02:30 | This is really helpful if you want to
paint out a window or show some opacity
| | 02:34 | or some specular highlight.
Let's go ahead and save that out.
| | 02:38 | But notice, a new button has showed up.
I can save over this existing version or
| | 02:43 | I can save a copy.
| | 02:44 | If I save a copy, I will create a copy
of this existing mask. I don't want to
| | 02:50 | do that right now, but let's go ahead
and save this out and take a look at what
| | 02:53 | we have just done.
| | 02:55 | Notice how my artwork now is showing
and compositing with this original that I
| | 03:00 | had before. If I resize it, my mask is
clearly shown with the opacity that I
| | 03:06 | have just done.
| | 03:07 | The cut-out tool can be used to create
some pretty amazing effects. I'm going to
| | 03:11 | get into more detail in a little bit
as we combine that with video, text, and
| | 03:15 | some other great techniques. Let's
continue with making our collage.
| | Collapse this transcript |
| Adding and positioning text| 00:00 | This is a great opportunity to talk
about text. The Text tool is designed to
| | 00:03 | give you control over the narrative
to be able to position and edit text
| | 00:08 | anywhere in your collage.
| | 00:10 | To add text, go to the upper-right,
click and drag or just click on the icon
| | 00:14 | that says Add Text. This gives me a
button that I can release anywhere on the
| | 00:19 | stage. I'll just type in, 'my text.'
When I edit my text, I can click on the
| | 00:24 | arrow icon at any time to drag my text
anywhere I want. When it turns yellow,
| | 00:30 | I can rotate position or treat it like
a normal layer elsewhere on the stage.
| | 00:34 | Let's go ahead and resize it.
| | 00:36 | If I double-click on the text itself,
I'm given some additional controls. I can
| | 00:40 | adjust the size of the box, or I can
add more text. I can adjust the color,
| | 00:45 | I can give things like Italic or Bold or
see what other options are available,
| | 00:49 | click on More. This will flip out the
Text Attributes box. Here, I have a lot
| | 00:56 | more controls. Changing the font, size,
the effects, drop shadow, and even the
| | 01:01 | opacity. You can play with these to
your delight to give the type of effect
| | 01:05 | that you want.
| | 01:06 | Let me illustrate a little bit about
the background box selection. By default,
| | 01:11 | it's set to none. If you want to set
it to rectangle, it will be set with a
| | 01:15 | particular color. You can change that
color at anytime. I'll change it to a
| | 01:20 | dark red. Now, I have got text as a
background. I can independently adjust the
| | 01:26 | opacity of that background with the
opacity of the text. This gives me a finite
| | 01:30 | number of control over my text and how
it appears. You can position the text,
| | 01:35 | adjust the settings and get the
text exactly the way you want.
| | 01:39 | Another way to add text while the text-
box is open is to drag the box itself
| | 01:44 | directly to the stage. You can
continue to do this to add multiple layers of
| | 01:48 | text. As you enter your text, you can
begin to author pieces and position them
| | 01:53 | anywhere you want. Here I'm going to
add a little bit of text just to this painting.
| | 02:02 | Getting things just the way
you want is going to be important for you
| | 02:05 | as you lay out the composition of your piece.
| | Collapse this transcript |
| Getting more help| 00:00 | If you want to review any of the help
items that we've done so far, click on
| | 00:03 | the Help icon. This will deploy a
series of things that might be helpful for
| | 00:07 | you to review. Keyboard shortcuts,
series of tools including the Hotspot, the
| | 00:13 | Cut-out tool, the Slide tool, which is
used to move multiple items at once,
| | 00:18 | our Depth tool which will move things
forward and backward, Rotate, and Scale.
| | 00:23 | If you want to learn more and follow
along by other videos, go ahead and click
| | 00:27 | on other links to videos here. And of
course, if you run into a bug or anything
| | 00:32 | else, you can click on the Give Us
Feedback, which will go directly to
| | 00:36 | VUVOX. And you can get feedback or
file a bug on anything that you see here.
| | Collapse this transcript |
|
|
4. Adding Video and AudioWorking with video| 00:00 | Now, we're going to use the
opportunity to work with video. First thing to do
| | 00:04 | is to locate the video that you've
uploaded. To do so, go to your Uploaded
| | 00:08 | Media tab and select the pulldown for
Video. What this does is it'll begin to
| | 00:13 | show you all the video that you've uploaded.
| | 00:15 | Now if you've uploaded a QuickTime
movie or an AVI, you may get a thumbnail
| | 00:20 | that says, Media not available yet.
If that's the case, it's encoding and it
| | 00:24 | will show up once it's finished. Normal
video, if it's ready to be added, will
| | 00:27 | have a regular thumbnail associated with it.
Videos is added the same way images are.
| | 00:32 | You can click or drag
and drop to the stage itself.
| | 00:36 | The video will come in at the size
that it was encoded. If I select the video
| | 00:41 | itself, I can start to denote what is
an image and what is video by the Play
| | 00:45 | button. If I select a particular video,
I immediately give it a Play button. Let's
| | 00:50 | click and see what this video is all about.
| | 00:52 | (Background noise, traffic, inaudible voices.)
| | 01:02 | Rather stationary piece of video, but
what I have here, is the ability to have
| | 01:06 | some options set to it. Let's take a
look at that now. By clicking on the
| | 01:11 | Playback options, I have a series of
things in front of me. I can tell this
| | 01:15 | video to automatically play. Once I
select that box, I can play on rollover,
| | 01:20 | which tells it only to play when the
user rolls over that space. I can also
| | 01:24 | decide to hide the controls and I'll
tell you that if you want to layer your
| | 01:28 | video, this is going to be super-helpful.
| | 01:31 | Let's go ahead and do that now. I want
this to play on rollover, and I want to
| | 01:34 | hide the controls. I can also tell
to loop if I want, which means when it
| | 01:38 | reaches the end of the video, it will
automatically loop back to the front. In
| | 01:42 | that audio that you heard, I may not
need. So this is essentially muting the
| | 01:46 | video just by unchecking this box here.
| | 01:49 | Now, that my options are set, I'm going
to resize it and I'm going to position
| | 01:52 | it under this other cut-out that we
had before, and remember to hit the send
| | 01:56 | backwards button. You can see our mask
is in play there. What I'm going to do,
| | 02:00 | I'm going to go ahead and preview this.
You'll see how it'll work with video.
| | 02:04 | In the Preview mode, my video was set
to replay on rollover. Notice that when
| | 02:09 | my Mouse moves into the space, my
video begins to play. There are issues with
| | 02:14 | your playback if your video may not
be fully cached in your browser. This
| | 02:18 | starts to become a really interesting
effect when you start to combine the
| | 02:21 | layering with the Cut-out tools that we
mentioned before. Let's go back to Edit mode.
| | 02:25 | You can use video in a variety of
different ways to allow you to layer,
| | 02:30 | position and treat it as a first class citizen
on the stage. Let's add another video now.
| | 02:37 | Notice how it's larger than the size
that was originally set for stage. To give
| | 02:42 | some additional control, let me zoom
out to see what's going on here.
| | 02:45 | I'll select the video and I'll resize it
to fit the size of the stage. Once I've
| | 02:50 | resized it, I'll go ahead and
select my options. I don't want this to
| | 02:54 | automatically play, but I want to play
the sound. Let's go ahead and see what
| | 02:57 | this looks like.
| | 02:59 | Now, when I rollover, I get a Play
button. This allows your audience to be able
| | 03:03 | to cache the video while they are
beginning to preview the collage. When they
| | 03:07 | roll into the video itself, they can choose to
play it or not. Let's go ahead and press Play.
| | 03:12 | (Woof! Woof! Dogs barking.)
| | 03:22 | Notice how the controls were left open.
This might be a nice option that you
| | 03:26 | give your users to be able to scrub
through the video and play it back on their
| | 03:29 | own. As an author, this is the type
of control that you give. Notice the
| | 03:33 | difference between the video to the
left which plays only on rollover and is
| | 03:37 | used as a visual effect versus this
video which maintains controls and the audio.
| | 03:44 | (Street music plays.)
| | 03:46 | (Woof! Woof! Dogs barking.)
| | 03:49 | That's a little bit about video, very
creative. You can do some amazing things
| | 03:53 | with layering it, positioning it and
create some rich collage mash-ups with it.
| | Collapse this transcript |
| Advanced video techniques| 00:00 | Next, I'm going to talk about some
advanced video techniques. This has more to
| | 00:04 | do with how you conceive of the video
and the visual relationship of video and
| | 00:09 | the photograph. Let me create some
space here. I'm going to use the Slide tool
| | 00:15 | to create some additional space for myself.
Let's go ahead and move this out of the way.
| | 00:19 | Next, I'm going to add a video to the
stage. This video is just an ambient
| | 00:24 | video of some students walking by.
Let's take a look.
| | 00:28 | (Background noise, inaudible voices, laughter.)
| | 00:39 | In this sense, there's not a whole lot super-
special about this video, except just the movement
| | 00:43 | itself. If I wanted to combine the
movement of this video with a photograph,
| | 00:48 | that's what we're going to do next.
| | 00:50 | I'm going to add a cut-out that I had
done earlier using the Cut-out tool.
| | 00:55 | Notice, how the windows themselves are
cut-out of this library. By positioning
| | 01:01 | video behind the image and setting the
options appropriately. I'm going to set
| | 01:06 | the play to auto-play. Set it to
rollover and I'm going to hide the controls.
| | 01:10 | I want it to loop, but in this case, I
don't want to play the audio. Let's go
| | 01:14 | ahead and mute it.
| | 01:15 | Next, let's preview it to see the
effect we just created. What we're after is a
| | 01:21 | reflective mirror showing the video
of the students walking by. In Preview
| | 01:26 | mode, now I have just created a little
cookie here. It's a visual nugget that
| | 01:30 | allows my users see something that's
somewhat unexpected. The additional motion
| | 01:35 | adds to the piece. This technique can
be used time and time again as you start
| | 01:39 | to create your collage to create some
really interesting visual relationships
| | 01:43 | between a photograph and a little part
of the photograph that you may want to come alive.
| | 01:46 | There are other advanced techniques.
A lot of them include using video in
| | 01:51 | creative ways, combining a photo,
a video and some of the creative options
| | 01:56 | that I have given you with the video.
| | Collapse this transcript |
| Adding background audio to a Collage| 00:00 | The next thing that I'm going to talk
about is adding audio to the collage.
| | 00:04 | Now audio can come from a variety of
different places. But most likely it will
| | 00:08 | come from an audio mp3 file that
you've uploaded. Where do you find it? Go to
| | 00:12 | your Uploaded Media tab, go down here
to Show My > Audio. You can see I have 10
| | 00:17 | pieces of audio that I've uploaded.
| | 00:19 | These are denoted by Audio icons here.
They're all MP3 files. When you upload
| | 00:24 | audio, you can only upload MP3s. These
are the only types of audio that will be
| | 00:29 | seen. Once it's uploaded, it will look
like this. You can click or drag a file
| | 00:35 | directly to the stage. Notice how the
hotspot shows up. If I release, then I'm
| | 00:40 | immediately adding a
background track to the stage itself.
| | 00:43 | Notice the new icon that's appeared here.
This is the playlist essentially for
| | 00:47 | your collage. I can begin to add
multiple items via the drag hit target here,
| | 00:53 | or I can add them directly to the
Playlist area here. This allows you to play,
| | 00:57 | set the volume or even remove
items from the playlist itself.
| | 01:01 | Let's take a look at some of
the options. Let's hit Play.
| | 01:05 | (Music plays.)
| | 01:15 | An ambient audio track is playing in the background.
I can tell it to loop, shuffle or even show
| | 01:21 | the soundtrack controller when I hit
Playback. Let's take a look at the overall
| | 01:26 | volume. This is like setting the levels
of the entire piece. So if I want it to
| | 01:30 | be about half of the levels it is
now, I can go ahead and do that.
| | 01:34 | When I go and preview my collage, this
is when I'll be able to hear the audio
| | 01:39 | itself. Notice the Audio icon down
below. By clicking on it, I'm able to see
| | 01:44 | the full playlist, and I give the user
the ability to select which track they
| | 01:49 | want to play. They even have control
over setting the volume itself. Muting the
| | 01:53 | audio is easily done, just by selecting
the icon. Let's go back to Edit mode.
| | Collapse this transcript |
|
|
5. Publishing Your CollagePublishing a Collage| 00:00 | Next we're going to talk about
publishing a collage. Now, in an online
| | 00:03 | environment inside of a browser,
everything has been online. We've saved our
| | 00:08 | material and sometimes I've said save
it to disk. Let me be clear about that.
| | 00:12 | So far you've saved everything to a
server. Essentially you are saving it not to
| | 00:15 | your disk, but to an online disk, and
you either saved it as a draft or as a
| | 00:20 | public status. Let's talk about what that means.
| | 00:23 | At the top of the collage in the Edit
mode here you'll see the Status is set to
| | 00:27 | either Public or Draft. You can go
ahead and click on this at any time just to
| | 00:32 | take a look at it. When you do this,
you can move between a Public Mode or a
| | 00:36 | Draft Mode. This is like the ability
to have other people see it or have
| | 00:40 | it be a draft or essentially unlisted.
You can move a Public back to Draft Mode
| | 00:45 | or a default that all collages are Draft.
Then you can go ahead and make them Public.
| | 00:49 | Once you select the radio button, go
ahead and OK. This will give you the
| | 00:53 | status automatically. We've worked
with the Preview button before and we've
| | 00:57 | talked about saving. When you all are
ready to publish, let's talk about what
| | 01:01 | that means. By selecting Publish, it
will invite you to select the Public
| | 01:06 | button. Now don't fear; you don't have
to have everyone see at the moment that
| | 01:10 | you hit Publish. You can leave it
as a Draft and you can view it and even
| | 01:14 | embed it, even if it's in Draft mode.
| | 01:17 | Let's go ahead and leave it in Draft
mode and select OK. Watch would happens.
| | 01:22 | The feedback will save the piece and
redirect you to its appropriate detail
| | 01:27 | page. Now the detail page looks a
little bit different than Edit Mode.
| | 01:31 | Here's why. In the upper left you'll see
your title; you will also see two buttons,
| | 01:35 | Edit and Delete. Well, this piece is
published, which means it has its own
| | 01:39 | permanent link, but only you can see it.
When you're logged in, you'll be able to see it.
| | 01:44 | Let's talk a little bit about the Share
controls. The Share button is designed
| | 01:49 | to allow you to email friends or
family. You can do that directly from the
| | 01:54 | player. The Embed controls allow you
to embed this piece in another website or
| | 02:00 | blog. Just by copying the code, it
allows you to paste that code into another
| | 02:04 | website or blog. We'll talk
about that in a little bit.
| | 02:08 | The last part is to actually access
to the link itself. Sometimes, this is
| | 02:12 | referred to as a permanent link or a
permanent location where your piece will
| | 02:15 | be referred to. This location does not
change, whether it's in Draft mode or in
| | 02:20 | Public mode. So you can be confident
that the moment that you want to share
| | 02:23 | this link, even it's with a smaller
group of friends or colleagues, and then
| | 02:27 | you want to make it into a public
status, this link will remain the same.
| | 02:32 | If you want to share it, you can copy
that URL, paste into an instant message or
| | 02:36 | an email and share it along that way.
| | 02:39 | Next we'll talk a little bit about
distributing your work and listing out in
| | 02:42 | the social networks like Facebook.
| | Collapse this transcript |
| Syndicating into Facebook| 00:00 | In this next movie, we're going to
talk about distributing your work into
| | 00:02 | social networks like Facebook in
particular. So there are couple of ways to do that.
| | 00:07 | Now the collage itself is a large
collection of photos, videos, text and
| | 00:13 | audio, as we've done in our demo. I
can distribute this entire link into
| | 00:17 | Facebook itself. I can do so just
by clicking on List On Facebook.
| | 00:22 | Another choice I have is to actually
syndicate just the hotspots or one of
| | 00:27 | them into Facebook, and that's denoted
just by this little icon here. This is
| | 00:32 | done because each little hotspot has
its own permanent link, which is really
| | 00:37 | handy because you may want to single
out one part of your collage and send to
| | 00:41 | one part of your friends and single
out a different part of the collage
| | 00:44 | altogether and syndicate
that into a blog or a website.
| | 00:48 | All things point back to the collage,
but more specifically, they'll point back
| | 00:52 | to that area that you syndicated out.
All of the steps take you through the
| | 00:56 | same process. Let's go ahead and
list this entire piece on Facebook.
| | 01:00 | Now you need a Facebook account in
order to do this. It will, most likely, ask
| | 01:04 | you to log in if you're not logged
in already. Go ahead and say, List On
| | 01:08 | Facebook. This will redirect you to
Facebook itself. It will also capture the
| | 01:13 | thumbnail if you want it to and invite
you to contextualize what you're putting
| | 01:18 | onto your profile or sending to a friend.
| | 01:21 | Now we're in the Facebook world. Just
capturing these context, I'll go ahead
| | 01:25 | and say, my virtual exhibit2
demonstration. What will come along with it is
| | 01:30 | the URL and I can even add a comment.
I can add this to my profile or send a
| | 01:35 | message specifically to a friend. In
this example, I'm just going to post to
| | 01:39 | a profile. I can decide to add the
picture or subtract the picture. You can see
| | 01:44 | how that would look. I usually like
to do it with the picture, because that
| | 01:46 | usually draws people in.
| | 01:47 | I'll go ahead and say Post.
It's now been posted to my profile.
| | 01:52 | To double-check your work, go ahead and
click on your own profile. It'll show up
| | 01:56 | in two places: first place would be in
your Posted Items. This is actually a
| | 02:01 | place where people can go and see
which you can post in. The second place is
| | 02:05 | your Feed. In Facebook, this allows you
to syndicate places where you've been.
| | 02:09 | I'm going to go ahead and reload the
page, and it'll show me specifically the
| | 02:13 | thumbnails and the piece itself. You
can see there, there is the specific piece
| | 02:19 | and when it shows up in your Feed,
people would be able to see what you've
| | 02:22 | done. They can click on it and they're
taken directly to your collage itself.
| | 02:28 | That is how you syndicate your work
into a social network, like Facebook.
| | Collapse this transcript |
| Embedding a Collage in a blog or a web page| 00:00 | In the next movie I'm going to do a
little tutorial on embedding your collage
| | 00:03 | inside of a website, blog, or any
HTML environment that you want. This is
| | 00:09 | pretty straightforward. You just have
to follow along and understand the basic
| | 00:12 | concepts of embedding.
| | 00:14 | To do this, I will bring your
attention to the Embed controls. The Embed
| | 00:17 | controls can always be found inside
the menu. Inside here you are given three
| | 00:21 | specific options: ranging from some
HTML thumbnail, to just grab the
| | 00:25 | thumbnail. A mid-sized window, and I
say mid-size because it controls the width
| | 00:30 | and the height, or a full screen option,
which will basically fill the space
| | 00:34 | that you paste into.
| | 00:36 | First I'm going to use this one. What
I'm going to do is I'm going to select Full.
| | 00:38 | I have the Include menu selected,
which means that the navigation
| | 00:43 | controls and the menu itself allows
other people to embed and use those
| | 00:48 | controls, and embed it
even further off of your site.
| | 00:51 | If you want more privacy you can uncheck that
and it will adapt and adjust the Embed Code.
| | 00:56 | Let me go ahead and copy the code.
I'm going to go over to my blog. This
| | 01:00 | happens to be a Blogger site,
but the same principles will apply.
| | 01:03 | On my blog you can see here I have an
existing collage located at the top of
| | 01:08 | the page. I'm going to replace this
with the new one that we just copied in
| | 01:13 | there. To do that, I'm going
to go to my Customize tools.
| | 01:16 | Now, these are unique to Blogger. If
you are working on WordPress or if you
| | 01:20 | have another type of blog, you may
have a slightly different interface than this.
| | 01:24 | What you see here is that top banner
that I have called Visual Experiments.
| | 01:28 | I'm going to go ahead and select Edit.
When I do that I'm presented a place where I
| | 01:32 | can paste in that new code. I'm going
to do that now. I'm going to select that
| | 01:37 | area and I'm going to hold down Ctrl+V
or paste in that new code that was on my clipboard.
| | 01:42 | Notice some of the things that are
happening here. I have 100% width, with a
| | 01:46 | height of 400 and it's referring to the
collage with a specific identification
| | 01:52 | number. These are the most important
pieces; the Height, the Width, and the
| | 01:56 | Identification Number.
| | 01:58 | If you find yourself replacing new
collages with old ones, you really just need
| | 02:02 | to refer to the new number. That
code is now in place and I have some
| | 02:07 | adjustments that I will do later, but
I want to show you what it looks like.
| | 02:10 | I will go ahead and save the changes
and let me view the blog. This is a
| | 02:18 | fantastic way to go out and refer to a
piece that you are working on and show
| | 02:22 | it in the context that you want to display it.
| | 02:24 | Now that it's at the top of my blog,
it's ready for editing, even though it's
| | 02:28 | in Draft Mode. Now, I will remind you,
any piece can be referred to or embedded
| | 02:33 | as long as you have the Embed
Code and you want to play with it.
| | 02:38 | Next, I'm going to show some little
bit more advanced techniques and explain
| | 02:42 | how you can remotely edit your piece
even without having to repeat these steps
| | 02:46 | that I just did.
| | Collapse this transcript |
| Embedding a smaller version of a Collage| 00:00 | I'm going to talk real quick about
embedding a piece inside of a blog entry.
| | 00:05 | Many times you may want to showcase
your piece by embedding it on a very large
| | 00:10 | portion of your site, but you may
not have that option all the time.
| | 00:13 | I'm going to scroll down to the portion
of the blog that actually has a smaller
| | 00:18 | space allocated to it. What I'm going
to do is I'm going to go add a new entry
| | 00:23 | and you are going to see how I'm going
to create a new post with the smaller
| | 00:27 | allocation of that space.
| | 00:29 | So I'm going to create a new entry here
on my Blogger website and I'm going to
| | 00:33 | give it a demo title. I have
titled it the 'demo title of embedding.'
| | 00:40 | Next, I'm going to paste in the code
that was on my clipboard; this is the
| | 00:45 | exact same code of the previous example,
but I'm going to do something little
| | 00:49 | different. I'm going to give it a width
of only 250 pixels wide and a height of
| | 00:56 | 200 pixels high.
| | 00:58 | Next, I'm going to adjust the height
in this bottom part as well to the same
| | 01:03 | values; 250 width and 200 high. I'm
going to go ahead and save that out.
| | 01:09 | Next, I'm going to preview
it to see what it looks like.
| | 01:12 | Notice it looks a little bit different now.
Now that it's smaller, it's slightly
| | 01:17 | different and it has taken on a
different value. Anything that's below 300
| | 01:22 | pixels essentially takes
on a new viewing display.
| | 01:26 | Notice that the collage itself would
be really hard to view at that size. So
| | 01:30 | what this has done is added the
full screen capability as a thumbnail
| | 01:35 | click-through. So now when I click on
it, it goes immediately to full screen
| | 01:39 | and your user has a nice full screen experience.
| | 01:42 | This is really helpful if you want to
add it to a blog entry or you want to
| | 01:46 | paste in the Embed Code into a smaller
space. If I just hit Escape, it takes me
| | 01:51 | back to the original piece and now I
have a much smaller representation that I
| | 01:56 | can embed inside my blog.
| | 01:58 | Let's go ahead and publish this post.
Let's take a look at it in context.
| | 02:02 | I'm going to view my blog and
take a look at them side by side.
| | 02:07 | On the top you see the entire piece
that was embedded using the 100% Embed Tag.
| | 02:12 | Here you can see it's a full, almost
banner, showcases my collage. Down below
| | 02:19 | it's treated more as an entry. Here I
give my viewer's the opportunity to click
| | 02:24 | into it as an entry, but I still don't
compromise the experience. I allow them
| | 02:28 | to go full screen and see the
collage that I have created.
| | 02:31 | You can use this in a really powerful
way as you begin to publish your pieces
| | 02:35 | into any environment that you want.
Have fun with this because this is going
| | 02:39 | to be a lot of fun as you begin to
create your pieces and publish them and
| | 02:42 | embed them throughout the web.
| | Collapse this transcript |
| Ongoing updates| 00:00 | Now that we successfully embedded and
syndicated this presentation into my
| | 00:04 | blog or a website, I'm going to show
you how you can seamlessly edit and change
| | 00:08 | this piece in a real and real time way.
| | 00:11 | I'm going to go back to VUVOX, to the
page where my collage existed. I'm going
| | 00:17 | to click on Edit. When I edit the piece
I'm going back into the collage itself.
| | 00:24 | What I'm going to do is I'm going to
make a simple edit change. Remember those
| | 00:28 | images that we had before, I'm going
to go and refer to them again. I'm going
| | 00:31 | to connect to my Picasa account and
connect down to the specific media, Kids Artwork.
| | 00:38 | I'm going to now pick out a new piece
of artwork that I'm going to place in the
| | 00:41 | first part of the collage. I'm going
to drag it to the stage, resize it, and
| | 00:48 | position it. I'm going to remove the
hot-spot and the old artwork, and I'm
| | 00:52 | going to hang a new piece of artwork.
This is my latest painting. I have
| | 00:57 | positioned it, I have resized it, now
I'm going to save it. I have just updated
| | 01:03 | my collage.
| | 01:04 | Now, I'm going to tab back over to my
blog and I'm going to hit Refresh. Just
| | 01:10 | by refreshing the page it goes on and
refers to the latest version, and voila!
| | 01:16 | My piece has been updated with the new artwork.
| | 01:19 | This is incredibly powerful. This
allows you a powerful publishing platform
| | 01:24 | that you can syndicate your work across
the web into your blog seamlessly with
| | 01:29 | minimal work and effort. You can use
this concept to begin to explore and
| | 01:35 | extend your visual expression in a
way that you never thought possible.
| | 01:38 | Not only did it affect the top embed,
but it also affected the smaller version.
| | 01:42 | So I can go in and I can click Full
Screen and the piece that I had referred to
| | 01:47 | is updated as well.
| | 01:49 | Very powerful concept. That's how you
create an ongoing extension of embedding
| | 01:54 | and editing your content.
| | Collapse this transcript |
|
|
6. Advanced TechniquesDynamic content and feeds| 00:00 | Next I'm going to talk about a series
of advanced techniques that I'm really
| | 00:03 | excited to share with you, because
these are super cool and really epitomize
| | 00:07 | the qualities of a mash-up.
| | 00:09 | So far we have been pulling images that
are explicit into these areas from our
| | 00:13 | Picasa album, but one of the great
parts of the web is the dynamic nature of
| | 00:17 | the web itself. So I'm going to connect
to my most recent Flickr stream. To do
| | 00:22 | this I'm going to pull in a image
that's representative of the latest work that
| | 00:26 | I'm shooting. I'm going to
position it and rotate it into place.
| | 00:30 | Next, I'm going to change the text
located underneath it. Instead of this
| | 00:33 | referring to a recent painting, I'm
going to call this my photostream.
| | 00:39 | By calling this my photostream I'm going
to now refer to a hotspot that goes out
| | 00:44 | and grabs another presentation. First
I'm going to create the hotspot and then
| | 00:48 | I'm going to create the presentation.
| | 00:49 | Let's go ahead and click on Add
Multimedia. Instead of creating an explicit
| | 00:55 | slideshow I'm going to link
to an existing presentation.
| | 00:58 | Well, VUVOX allows you to create a
number of different types of presentations.
| | 01:02 | We have mainly been
focused on collage in this title.
| | 01:05 | Next, I'm going to show you a different
type of tool that allows you to create
| | 01:08 | a dynamic presentation. What you see
here is the homepage of VUVOX. Inside the
| | 01:14 | Create menu itself you will see Collage,
Express, Studio, and Cutout. In this
| | 01:20 | example we are going to
create an Express presentation.
| | 01:23 | Now, Express is designed to connect
you with your media stream. You can see
| | 01:28 | here its indicative of some of the
things that we have seen before. Flickr can
| | 01:32 | be a dynamic source.
| | 01:33 | Next, I'm going to give my username
and enter it in here. So I'm going to
| | 01:38 | connect to my photos. Now, this goes
out and refers to anything that you have
| | 01:43 | publicly. So VUVOX Express
only connects to public galleries.
| | 01:48 | Here my photostream shows up. Notice
that it connects to the stream to a
| | 01:52 | particular style, and then I can choose
which variation I want to show. In this
| | 01:57 | case I'm just going to connect
to this particular example here.
| | 02:00 | You can see that my most recent imagery
is starting to show up, and in fact its
| | 02:05 | going to refer to the latest
and greatest of my photostream.
| | 02:08 | Once I give it a title, we call this
VUVOX photostream, I will hit I'm Done.
| | 02:15 | What this is going to do is create an
explicit connection to that gallery with
| | 02:19 | that style, and its going to write
it out. There is the presentation.
| | 02:23 | Now, this is a presentation that's
different than the collage. It has its own
| | 02:27 | URL and its own qualities. I
could even share this if I wanted.
| | 02:31 | What I'm after is the URL, specifically
the location of where it exists. Let me
| | 02:36 | go ahead and copy that to my clipboard.
| | 02:39 | Now, I'm going to tab back over to
the place where I had open before with
| | 02:43 | collage and paste in the link directly
into that textbox. When I Save it, I now
| | 02:49 | have an explicit connection to the preview
that I just created. Let's check it out.
| | 02:54 | In Preview mode, now my text says my
photostream and there's a link directly
| | 02:58 | into the multimedia. Guess what? It's
referring to that presentation I just
| | 03:03 | created. Now you have created a media
detail that is dynamic and different
| | 03:09 | every time that you update it. This way
I can be on my cellphone or I could be
| | 03:14 | using my camera in unique ways and
just blogging my photos directly into my
| | 03:19 | Flickr account. Those photos are now
syndicated into your presentation, into
| | 03:24 | your blog.
| | 03:25 | I'm going to hit Save now, saving all
of those changes inside of my collage.
| | 03:30 | Now remember, we have a specific blog
right here. I'm going to go ahead and
| | 03:35 | reload the page, and I have just
syndicated this content that refers to my
| | 03:40 | Flickr account, and all my
changes are made automatically.
| | 03:43 | Here is my blog, here is my updated
change, whammo! There's my dynamic Flickr set.
| | 03:49 | That is cool, that is an advanced
technique, it pulls a lot of these
| | 03:54 | things together, but you can do the same.
| | Collapse this transcript |
| Listing items for sale| 00:00 | In this next example I'm going to
illustrate a way of creating a virtual
| | 00:03 | gallery to showcase your artwork,
your photographs, even paintings. This in
| | 00:07 | itself is going to be a pretty cool
project, but I'm going to take it one step
| | 00:12 | further and actually show you how you
can connect that media to be for sale.
| | 00:16 | Let's take a look at it now.
| | 00:17 | Now, these are photographs taken from
a real gallery. I have used the Cutout
| | 00:22 | tool to cutout the images
themselves and to create empty frames. I have
| | 00:26 | arranged them on the stage to
create essentially a new gallery.
| | 00:29 | Next thing I'm going to do, I'm just
going to start adding my artwork. To do
| | 00:32 | this I'm going to start dragging and
dropping directly to the stage. This
| | 00:36 | allows me to resize, position, and
layer the media using all the tools that we
| | 00:40 | have learned thus far.
| | 00:41 | I can clean up the collage
specifically by removing the text, positioning and
| | 00:45 | exactly getting what I wanted.
I will do that a couple of times.
| | 00:52 | You can use this technique on photos,
video, and just about any other image
| | 00:56 | that you want to showcase
inside of your virtual gallery.
| | 01:00 | These are just text objects here that
you can use to replace and add additional
| | 01:04 | media. Let me go ahead and add this
piece now. Position and send to back.
| | 01:11 | Next, I'm going to add a specific
hotspot. We talked about them earlier, but
| | 01:16 | now I'm going to add a hotspot and
list the items specifically for sale.
| | 01:20 | To do this I want to go ahead and
select the Link to Sale button. What this
| | 01:26 | allows me to do is generate a new
listing or connect to any existing listing
| | 01:30 | currently on eBay. To do that you
can copy and paste in the existing URL
| | 01:36 | something that you have for sale, or
you can connect to a specific username.
| | 01:40 | Go in and enter in your username here.
Once you have done, that select Go. It will
| | 01:45 | go out and speak to the eBay website
and retrieve all of the listings under
| | 01:49 | that username. Those can be
chosen in the pulldown below.
| | 01:53 | Look for the specific item that you
want to have for sale and select it from
| | 01:58 | the list. Once you have done so, go
ahead and save it out. Notice how the icon
| | 02:03 | is now changed to a For Sale ticket.
When that's previewed you will be able to
| | 02:08 | list any details that are currently up
on the eBay site. More specifically, you
| | 02:13 | can link to that item directly
wherever it might be throughout the Internet.
| | 02:18 | This is going to be incredibly helpful
and useful whether you are linking to
| | 02:21 | eBay or any e-commerce site. Whether
you are showcasing product or showcasing
| | 02:26 | your own work, create your own
galleries, showcases, and environments in this
| | 02:31 | powerful new way, in this powerful technique.
| | Collapse this transcript |
|
|
7. Collage BreakdownsCreative uses of the Cut-Out tool| 00:00 | So in this chapter I'm going to
deconstruct some collages that have already
| | 00:03 | been created, but we are going to do
it in such a way so that you learn from
| | 00:07 | the techniques used to do it.
| | 00:08 | What you are looking at here is a
series of collages that have been put
| | 00:13 | together. I'm going to go ahead and
edit some of them. This one is more of like
| | 00:17 | a promotional collage
that shows what VUVOX can do.
| | 00:20 | What you see here is a series of layers
that come loading in dynamically; they
| | 00:26 | contain photos and videos. I'm going
to go through and highlight some key
| | 00:30 | points of how I created certain parts.
| | 00:33 | The first part is this label. So let's
take a look at the original asset.
| | 00:38 | To look at the original asset, you can
select the item itself and going to the
| | 00:41 | Cut-out tool. If I reset the image, it
will take it back to its original state.
| | 00:46 | So all I did was create this in
Photoshop and this is what I exported. It had
| | 00:51 | no Alpha, it had nothing,
it was just straight JPEG.
| | 00:54 | Well, the first thing I did was
select the Polygon tool. I'm going to very
| | 00:58 | quickly go in and select this label.
I complete that and it cuts it out.
| | 01:04 | Well, one thing that we wanted to do is
invert the cutout, and this will invert
| | 01:08 | anything that's currently on the stage.
It's a quick way to invert what you just did.
| | 01:13 | Well, remember the Preview tool. Here I
can preview against a light background,
| | 01:17 | a dark background, or the original image itself.
| | 01:20 | Well, then what I did, since the
shadow shape was already gone, I went to the
| | 01:25 | Restore Brush and I adjusted the
Opacity and the Softness on my specific brush
| | 01:31 | itself; adjust the Size, and let me
bring the Softness up just a bit. Now I
| | 01:37 | have got a brush that is going to
restore the actual Alpha information. I'm
| | 01:42 | going to use the preview
against the image as a guide.
| | 01:46 | So let me begin to paint this in
carefully. I'm going to go over this very
| | 01:55 | carefully, and I will preview against
the light. You can see that I just have a
| | 02:00 | little bit of light
Opacity that I had added here.
| | 02:03 | Now I'm going to go to the Erase side
and just clean this up just a bit. Now I
| | 02:12 | have a label with a shadow. Let me go
ahead and Save a copy, that creates a new
| | 02:17 | asset, and now I have got something
that transparently goes over my image. So
| | 02:24 | that's one technique I used.
| | 02:26 | The second technique is to actually
use Transition Objects. You can see here
| | 02:30 | that the visual transition between
this image and this other one here is
| | 02:35 | somewhat striking. So I used an object
that I knew that might create a visual
| | 02:39 | bridge, and to do that let's
look at the original image.
| | 02:43 | If I Reset, you can see this is the
original image here. All I did was used the
| | 02:49 | Polygon tool to trace the object and
get the rough shape that I was looking
| | 02:54 | for. Now remember, the default is to
cut the material out. What you will want
| | 02:59 | to do is invert the cutout and
now you have a nice, clean object.
| | 03:03 | Let me go ahead and save a copy here.
The new object comes in and now I have an
| | 03:08 | object on my stage that I can
manipulate and edit, its a nice transition
| | 03:12 | object. That's another technique.
| | 03:15 | As I move through the collage you can
start to see the items that are created
| | 03:20 | using the technique here. Here I have
got another transition object with the
| | 03:24 | painting overlaid. In addition, you
can see that I have got some polaroids.
| | 03:30 | Well, look, the polaroids are used as
frames. I have used video to layer and
| | 03:35 | photos to repeat a series of frames.
So let's take a look at this original piece here.
| | 03:42 | All I did for the original image was
I googled an image of polaroid, and I
| | 03:46 | found this really nice version. Well,
I knew I was going to use it, so I
| | 03:51 | grabbed the Polygon tool again and
just cut out the inside. What this gave me
| | 03:57 | was a nice frame that I could refer to later.
| | 04:00 | Let's go ahead and create that and I'm
going to Save a copy. Let's go refer to
| | 04:06 | where all my cutouts have been going.
You can see in this demonstration I have
| | 04:10 | added the Label, a copy of the pole,
and now I have added the polaroid. Well,
| | 04:15 | here is the copy of the polaroid and
you can see here that I have just gone in
| | 04:20 | and I have created and
added this a multiple times.
| | 04:24 | So to do so, let me just show you. I
can use multiple instances of a particular
| | 04:29 | frame if I want. This is exactly
what I used to pull in the images and to
| | 04:34 | create the exact effect that I wanted.
| | 04:37 | This time I'm going to add the flower
from the earlier demonstration. I'm going
| | 04:41 | to resize it and I'm going to put it
behind the frame. Voila! Now I have used a
| | 04:47 | polaroid to essentially create
additional parts of my collage.
| | 04:51 | So the last little technique notable
inside of this collage is how you might
| | 04:55 | want to take objects or images that look
like buttons. This is exactly what I did.
| | 04:59 | If I look at the original image,
I'm going to see its pretty large here,
| | 05:04 | somewhat JPEGed. This is a tiny little
button. All I did was take it off of a
| | 05:09 | screenshot from something else, and I
traced using the collage Cut-out tool, and
| | 05:14 | then I saved it.
| | 05:14 | Well, the next thing I did is I took a
hotspot here. I took the hotspot itself,
| | 05:20 | and I knew that I wanted to direct
people into a link, and I wanted it to feel
| | 05:26 | and behave like a button, so I clicked
on the Link button and then I said,
| | 05:31 | 'try VUVOX free for 60 days.' Then wherever
this collage was going to end up I could
| | 05:38 | direct them to any URL I
wanted. That's exactly what I did.
| | 05:42 | So now when this is previewed, I
will go to that part and it looks like a
| | 05:47 | button. I can go ahead and roll over
it. It gives me the tool tip, and sure
| | 05:51 | enough, when I click on it, it takes me directly
to that URL I just specified. Pretty cool!
| | 05:56 | So that's how I use some of the
techniques in this collage. Let's go to another
| | 06:01 | collage and see what kind of
techniques were used there.
| | Collapse this transcript |
| Visual bridges and connections| 00:00 | In this next collage, I'm going to try
to illustrate some of the things that
| | 00:03 | happen accidentally, but I'm going
to communicate some of the wonderful
| | 00:07 | visual connections and visual bridges
that happen between images. So, in this
| | 00:12 | collage, this happens to be a series of
family walks that took place over time.
| | 00:18 | What happened was a series of themes,
visual themes, themes that visually
| | 00:22 | connected one part of the collage to
the next. So, as you can see, as I'm
| | 00:26 | zoomed out here, you get an
overview of visually how these things are
| | 00:30 | connected. Next, I will go in and I
will zoom in on some of these ways that
| | 00:34 | wonderful accidents happened.
| | 00:36 | So, when we started this, most of the
walks happen with our dog, Heather, and so
| | 00:41 | this particular shot here is
overlaid onto the sky. The sky is used as a
| | 00:46 | continuum from this portrait into the
laying down of this scooter which is a
| | 00:51 | ongoing theme. I accidentally found
this visual relationship between the end of
| | 00:56 | the scooter and this line, which
created a beautiful relationship between the images.
| | 01:03 | When I preview here, you can kind of
see it cleaned up a little bit. I have a
| | 01:07 | nice little bit of text that refers to,
if you want to see more where you can go.
| | 01:12 | I then did a hard line transition
into this part of the walk where we run
| | 01:18 | on the track, play on the track and
use some visual cadence to go from a
| | 01:22 | close-up to something far away. And
then when I take some shots and sequence,
| | 01:27 | I just, I'm okay with this seam here,
but all of the colors just cohere. So, I
| | 01:32 | played with this idea of just arranging the
visual, so that things would work together.
| | 01:37 | And you can see how this works in real-
time, how you really start to see the
| | 01:41 | relationship of the photographs together.
As you can reposition and resize, you
| | 01:46 | start to see it all come together.
Visually what happens is when you lay
| | 01:50 | typography over one of these themes,
it starts to stitch it together. So,
| | 01:55 | that's what I try to do and also set
up a on your marks, get set, go, which
| | 02:01 | naturally creates a three-
step narrative if you will.
| | 02:05 | Then you can see here, we are moving
into this part of the track where we play
| | 02:09 | a lot on these blue pads and these
started to be really fun and so, I used my
| | 02:14 | daughter as these bookends as a way of
saying, oh, she had a lot of fun doing it.
| | 02:18 | This was like one of those accidental,
lovely, little visual nuggets, it is
| | 02:23 | that my son is sitting here pushing it
and then I visually aligned it with this
| | 02:26 | part of the photograph and it just
works. So, it's just this really nice
| | 02:31 | relationship as they compete and how
fun and tumble on these blue things.
| | 02:35 | Visually, I have
something really interesting here.
| | 02:38 | And then this one just I picked out as
a transition, so we often stop by this
| | 02:43 | bakery and the bakery allows us to
take a break and eat some snacks. So, this
| | 02:48 | is that little scene right here. And
then it always ends up at this one school
| | 02:53 | where we play. So, I used some of the
vertical bar as a way to transition into
| | 02:57 | that environment.
| | 02:58 | And then a very rough panoramic stitched
together visually with no Photoshoping or
| | 03:03 | anything allows me to start to take some
items and visually place them where I want.
| | 03:08 | So, you can see here this is
kind of what's going on. Again, I'm using
| | 03:13 | the technique of putting my daughter
over the scene so that the eyes are
| | 03:17 | tricked into hiding some of the
irregularities. So, I'm trading off visual
| | 03:22 | effectiveness for time So, it's a lot
easier and more efficient for me to do
| | 03:27 | this in this tool.
| | 03:28 | So, then we move from again a farther-
off shot to something a little bit more
| | 03:32 | intimate and close up and then tie it
together with a little bit of text that
| | 03:36 | helps me visually stitch together and
then I end up with something just kind of
| | 03:41 | compositional, the changing of the
season, the moving in the spring and then we
| | 03:46 | are brought into this sequence of shots
of my son that's start to provisionally
| | 03:50 | pull it altogether.
| | 03:51 | So, in essence, just some photo
editing and some techniques used to visually
| | 03:56 | stitch to bring some movement
throughout the piece. Hope you enjoyed it.
| | Collapse this transcript |
| Creative uses of video| 00:00 | Here is an example of something I want
to first put in context. What you see
| | 00:04 | here is a collage on the front of the
homepage of VUVOX. Let's take a look at
| | 00:07 | some of the video.
| | 00:09 | (Man 1: Let the bloody experience of
Vietnam... Is this to end in a stalemate?)
| | 00:14 | It establishes the past, the present
of multimedia and authoring...
| | 00:19 | (Background noise, music, inaudible children's voices.)
| | 00:22 | Denoted by the era of YouTube videos,
and to what we are seeing is coming soon.
| | 00:27 | So, each one of these is a creative use
of video inside of a custom frame, all
| | 00:32 | of which was created inside of the
collage. Finally ending with a custom frame
| | 00:37 | of some video that was
specifically put inside of an iPhone.
| | 00:40 | So let's kind of deconstruct what it
took to put this together. So here is that
| | 00:45 | collage as it comes on the screen here.
What I'm going to do is show the little
| | 00:49 | bit of the pieces. I have got some
text that we have added. We have got a TV
| | 00:54 | that was found on the web and resized.
We have got a video; a video was found
| | 01:01 | on YouTube of Walter Cronkite and we
basically set it to auto-play, play on
| | 01:05 | rollover, make sure to hide those
controls and play that sound, and that's how
| | 01:11 | that piece was specifically laid out.
| | 01:13 | Next, we went over to the video clip
itself and again we found a piece off of
| | 01:18 | YouTube, we set the controls to auto-
play; make sure you play on rollover.
| | 01:23 | Next, we found this really quintessential
frame. So we Googled it, found a part that
| | 01:29 | was just reminiscent of the graphic
user interface of the day. When it all
| | 01:33 | comes together, essentially we have
the frame aligned in front of the video
| | 01:38 | itself, so it looks authentic to the
frame itself, but they are two separate pieces.
| | 01:44 | The graphic is a little tiny JPEG that
we brought in and pulled into our world
| | 01:50 | here. It allows us to position. Then
we had a background image that has a
| | 01:54 | slight gradient on it, you can't
really see it probably in this digitalized
| | 01:59 | version, but it was something
that we added, a little effect.
| | 02:03 | Next, you will see this item here.
This is just a flat panel display that we
| | 02:08 | use the cutout, and then we used
Camtasia as a way of doing a screen grab of
| | 02:14 | the tool itself, and it gave us a
chance to pull a lot of these pieces
| | 02:18 | together. So you can see this is
actually a demonstration of a demonstration,
| | 02:23 | if you will, to show that you can
resize and position items on the screen.
| | 02:27 | Then we put all that in context by putting
that as a video clip inside of the cutout LCD.
| | 02:35 | Next, we did the same technique. We
took an iPhone and we cut a hole in the
| | 02:40 | center of it. Then we used Camtasia
once again and set the options to don't
| | 02:45 | auto-play but allow user to press play.
Once they did, then the video would
| | 02:51 | actually do a digitized version of
what it's like to navigate the screen and
| | 02:55 | simulate an experience that
has been planned for the iPhone.
| | 02:59 | So this is a completely different way
of collaging. Then we finish it up with
| | 03:03 | some text, a logo, we put a hotspot on
the logo that has a specific link. Then
| | 03:09 | we took one of the photographs that was
originally used and we gave some photo
| | 03:14 | credit here to our friend, Red Rigos
at Strangerbeat, and provided a link to
| | 03:19 | his website. Then was able to save the
whole thing out, and whatever changes we
| | 03:24 | make in real time happen to the front
page and you will see exactly what that
| | 03:30 | looks like, again, all in context.
| | 03:33 | So again, we have got the collage,
comes up with the video, all the pieces, and
| | 03:39 | the finished piece can be edited without
any XML or changes and the designer can
| | 03:44 | make the change to the homepage as
often or frequently as they want to.
| | 03:48 | So another example of how this can
be used to syndicate into a real world
| | 03:52 | environment; in this case the homepage of VUVOX.
| | Collapse this transcript |
| Recreating an environment via Collage| 00:00 | In this example I wanted to show how
an environment could be used, in this case,
| | 00:06 | real estate. So let me deconstruct
some of the elements of this collage.
| | 00:10 | Here you have got a property that's
for sale in Northern Marin. You can see
| | 00:14 | how just the elements are being used
pretty constructively to leverage the
| | 00:20 | elements inside of the world. Here you
have got the sky. This is not so much to
| | 00:25 | show the exactness of what maybe a
floor plan could be, but to give a sense
| | 00:31 | the feel and the texture and what it's
like to maybe go up the stairs and the
| | 00:35 | transitions that happen in this house.
| | 00:38 | You can see that this object here was
photographed and just used as a visual
| | 00:42 | transition to take you from outside,
inside. So what you are showing to the
| | 00:47 | people here is that a lot of the red
columns are used on the exterior to create
| | 00:52 | a transition into the house.
| | 00:54 | Inside of the house is yellow. You get
a good sense of the wood and the grain,
| | 00:59 | the things that are going on, the light
quality as you move around that floor.
| | 01:04 | Some of the details and what that looks
like in the environment. So you can see
| | 01:08 | here artfully what this means when you
start to have this type of element and
| | 01:12 | move it inside of the environment.
| | 01:14 | You are almost interior decorating on
the fly here as you take the photographs
| | 01:20 | and reinterpret them into a sense.
| | 01:23 | Now literally, the distance between
the kitchen and the bathroom isn't exact,
| | 01:27 | but it does show that its on the same
floor and that there's a change of light
| | 01:31 | between the yellow
environment to the purple environment.
| | 01:34 | So this is a way that someone, even the
realtor, can take a particular area and
| | 01:39 | speak to it in the form of audio or add
an additional video or media detail to
| | 01:43 | speak about some of the
subtleties and nuances of the home.
| | 01:47 | As you get to the edge, you can start
to see that there is a change into the
| | 01:50 | outside here; what the door might look
like. As you kind of move through the
| | 01:55 | bedroom area, what the bedrooms might
look like, and even this tiny collage
| | 01:59 | here uses some of the techniques
to illustrate some of the details.
| | 02:03 | So we will go through and pick some of
those out just to illustrate some of the
| | 02:08 | key nuances of what's going on here.
So you can see how this was used.
| | 02:14 | When you photograph something like this
you almost shuffle sideways or strafe,
| | 02:19 | if you will, and you move past columns
and you move past things in a way that
| | 02:24 | when you see it in camera it might
look kind of silly, but when you see it in
| | 02:27 | context, a shutter or a door represents
a really important visual element that
| | 02:32 | you want to put into your piece.
| | 02:33 | As you move into the children's bedroom
here, it's a really nice overview.
| | 02:38 | You can see how we move past the door jamb,
go into the room. You get a good sense
| | 02:43 | of what this room looks like, feels
like, in just a couple of photographs.
| | 02:47 | Then look how we transition into this
little detail of the bed and bring some
| | 02:51 | quaintness into the environment.
| | 02:53 | Then a simple photograph of the actual
window used with the Transparency tool
| | 02:59 | allows some of this nice moving
from indoor to outdoor to occur.
| | 03:03 | Let me show you what happened there.
Here is the original image you can see
| | 03:08 | here. What I'm after is some of the
transparency. So let's remove some of the
| | 03:14 | material first. The first thing I want
to do is select the Rectangle tool and
| | 03:18 | just cut that out right off the bat.
| | 03:20 | Next, I want to select the Polygon tool,
but I want to remove at a particular
| | 03:25 | Opacity. First, I'm going to set this
to about 50%, just to illustrate how you
| | 03:30 | can achieve some semi-transparency on
the Polygon tool as you are creating it.
| | 03:34 | So I will create that, and then I will
go in and I will create the second pane.
| | 03:41 | Before you know it, I'm going to
have a series of glass windows that are
| | 03:44 | semi-transparent.
| | 03:44 | I will repeat this a couple of times
until I have exactly what I want.
| | 03:51 | Whether you are going clockwise or
counterclockwise, it doesn't matter at all.
| | 03:57 | To give you an idea of what can also
happen, I can use the Cutout Rectangular
| | 04:02 | tool the same way. Notice how the
value is retained. I can just select this
| | 04:07 | little area and I can remove media
even at that specific Opacity level.
| | 04:12 | The last thing I will do is I will just
finish up these items here, and we are
| | 04:21 | going to have ourselves a semi-
transparent window before you know it.
| | 04:25 | Last little bit, and voila! In
about two minutes we have a window.
| | 04:34 | What I'm going to do is I'm going to grab
the last little bit here. I'm going to cut
| | 04:41 | that right out of there,
and I'm going to save a copy.
| | 04:47 | Now watch, right before your eyes
I just created a brand new window,
| | 04:52 | replicating exactly what
you just saw. Isn't that cool?
| | 04:55 | Now, in Photoshop that would take a
little bit longer to do. So now we move
| | 05:00 | through these elements here. Again, I
reuse that visual transition. We move
| | 05:06 | back out into the side yard, and
up the side, and we begin to exit.
| | 05:13 | I began with the 8 and ended with the 8,
and we have some really nice visual
| | 05:16 | bookends here.
| | 05:18 | So in essence, we have created a very
interesting and different interpretation
| | 05:22 | of this residence that was for sale in
Northern Marin. Hope you enjoyed it.
| | Collapse this transcript |
| Building a band Collage| 00:00 | In this example I wanted to show how
a band or any artist may express their
| | 00:06 | world. In this example this entire
piece was created and started by the band
| | 00:13 | members themselves. So these are
artists that know music and they know MySpace
| | 00:20 | and they know Facebook and they also
know who they are. They are probably the
| | 00:25 | best suited to communicate who they are.
| | 00:28 | So when they put together some media...
This is a video that they put together.
| | 00:34 | And then some of their friends would say,
I didn't know that that was a video.
| | 00:38 | And so they dropped in the text that
would say, hey, this is a video. Roll into it.
| | 00:42 | So what they did is they set the
video option to play on rollover and
| | 00:48 | that's what gives you this effect, that
when you first get to the piece you can
| | 00:53 | roll in it and it immediately plays.
| | 00:56 | (Man 1: Hi, you guys. We're A Night At the Pictures.
Thanks for checking out our space here.)
| | 01:01 | So the space that they are referring
to is their MySpace page, which has like
| | 01:05 | 3,000 friends and a lot of visitors. As
they begin to show where they practice
| | 01:11 | a lot, it gives a texture and a
little bit of a world that is theirs.
| | 01:16 | Another thing that they are always
doing is uploading new music they are
| | 01:20 | recording and so this represents an
image, but a place where you can get the
| | 01:25 | latest and greatest audio. Let's take a listen.
| | 01:32 | (Music plays.)
| | 01:46 | (Man singing: You got a perfect soul.)
| | 01:51 | (Man singing: Seen it shine through.)
| | 01:53 | So this becomes a portfolio piece for
them, a place where people can come,
| | 01:58 | they can listen, they can update it
remotely, and how they change, how their
| | 02:03 | haircuts change, how their fashion
changes, they can insert new images and new
| | 02:07 | items that really affect their environment.
| | 02:09 | AS I got to know this group of guys,
they told me a little bit about their
| | 02:14 | world. In fact, they told me about
their very first guitar and when they
| | 02:18 | discovered the ability to sell it. You
can see how a link off to something like
| | 02:23 | eBay for something kind of nostalgic.
Even the t-shirt idea, got creative here on
| | 02:30 | how they cut out the area of the
t-shirt to create their own video t-shirt.
| | 02:36 | The creativity and the communication
of that creativity comes from them.
| | 02:40 | This is a really important concept of how
identity and self-expression transcends
| | 02:44 | not only their music, but brings them
into their whole social network of who they are.
| | 02:48 | Certainly, the latest recordings
represent a link into other places where they
| | 02:53 | are, as they diversify into, not
only new media, but social networks.
| | 02:59 | So I thought this was a neat example of
how you can take an identity and extend
| | 03:04 | it into this medium.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | So once again, I'm Dane Howard.
I wanted to thank you for the opportunity to
| | 00:03 | talk to you about this mashup
culture and this small portion of the VUVOX
| | 00:08 | website. Now remember, this is a Web
2.0 website and so it's something that
| | 00:12 | could change all the time. I wanted
to invite you into other creation tools
| | 00:17 | that VUVOX creates, but you can
always find it on the Create page.
| | 00:20 | Here's to you and your future
creations and thanks for spending the time.
| | Collapse this transcript |
|
|
