HTML WORKSHOP 1

Using the free software brackets, we did our very first little HTML workshop. HTML is the language that is used to create websites. Since I had never done anything HTML related before, I found it a bit confusing. But I am planning to work through some Lynda tutorials to get ahead of the workshops.

In this workshop, I learned some basics. For example that a HTML code always has a “head” and a “body” part. The first one is to display the websites title, the second one for the actual content. Also, the code always had to start with <!DOCTYPE html> and it has to be opened with <html> and closed with </html>. In the following you can see the basic structure.

<!DOCTYPE html>
 
<html>
 
<head>
	<title></title>
</head>
 
<body>
 
</body>
</html>
Advertisements

Animation with Photoshop: Task (Flower Part 3)

Experience in doing animation with Photoshop:

The animating itself was not as difficult as I originally thought. As soon as I understood the concept of frames and layers, I could easily animate given pictures. What I figured harder to do was the actual creating of the different sketches. Since they all have to be very similar and the missing of some, might make your animation look less smooth, I had to a lot of correcting afterwards. To compare the two different projects, the flower and the car, it has to be said that the flower took at least four times as long as the car. While creating the moving car, I was able to use the same sketch for every frame. The flower took longer, since I had to draw all the 42 frames in a different way.


ANIMATION WITH PHOTOSHOP: PRACTICE (FLOWER PART 1)

ANIMATION WITH PHOTOSHOP: PRACTICE (FLOWER PART 2)

Animation with Photoshop: Task (Flower Part 2)

Unbenannt-4

After I had done some research on how to animate with Photoshop and flower circles, I finally started my own bigger project. I used my Graphics Tablet to draw a lot of different frames of a flower, from slowly growing to be fully grown, following by the flowers death.

I chose the theme of a flower because it relates to the theme of a cycle we were given at uni. The grow and the death of the flower keep repeating. As soon as the old flower dies, a new flower grows.

Because I enjoyed animating something with Photoshop, I created another cycle themed animation. This time, I wanted to figure out, if it was possible to create a decent animation using only one single picture. I decided to quickly draw a car and by manipulating its positon in the canvas, it looks like it is actually moving.

Unbenannt-3


ANIMATION WITH PHOTOSHOP: PRACTICE (FLOWER PART 1)

ANIMATION WITH PHOTOSHOP: PRACTICE (FLOWER PART 3)

Animation with Photoshop: Task (Flower Part 1)

After the last workshop on animating with Photoshop, I could not wait to start my own little project. First I had to do a little more research on Photoshop animation and after that, I planned on finding some GIF’s to see what other people have done and to gain some inspiration.

So, I read through a tutorial to refresh the knowledge gained from the seminar. In my opinion, this one provided by adobe itself is the most helpful. It did not only explain how to create frames and set the timing, but also gave a lot of information about layers, which I struggle with sometimes.

Screenshot (105)

Since I then knew how to create an animation, I still did not know what to animate. First, I looked at more walking cycles, like the one we have created in our seminar. I found this one very interesting, since the focus is just on the walk cycle because there is no background or other component to distract.  Also the frames were drawn really easily so I thought I could simply copy that.

walking

I then tried to do my own short walking cycle as practice. In the process I realized that it was not at all as simple as I thought it would be. Whatever I was trying, I just could not get my little man to walk as smooth as the one I found online. I soon discovered that this was due to my sketches and that I was missing certain frames.

In the following you can see some of my frame sketches. Before I could finish adding the missing pieces, my laptop died and since I had not saved my project, I lost the cycle. Luckily I had taken a couple of screenshots.

Screenshot (36) Screenshot (37) Screenshot (40)

I then moved on from walk cycles, looking at other possible cycles.

References

No name, 2014. Photoshop Help: Creating frame animations [ONLINE]. United states: Adobe. Available from: http://helpx.adobe.com/photoshop/using/creating-frame-animations.html#. [Accessed 03 November 2014].

“Pack“, 2012. DoodlePack. 2014. DoodlePack [ONLINE]. No place. Available from: https://doodlepack.wordpress.com/2012/03/. [Accessed 03 November 2014].


ANIMATION WITH PHOTOSHOP: PRACTICE (FLOWER PART 2)

ANIMATION WITH PHOTOSHOP: PRACTICE (FLOWER PART 3)

TEMPORAL EXPRESSIONS: SHORT EXPOSURE (TASK 3)

I completed the third temporal expression task: short exposure photography.  I tried to use the camera of my smartphone to take the photos, since I did not really have easy access to a proper camera and taking a photo was harder than I expected. More than once, the picture ended up blurred and not frozen, the way I wanted it to be. Like this one:

FullSizeRender

After I realized that my camera just is not able to capture really fast movement, I decided to go for a slower moving motive. Also, my new motive did fit more to the given theme of circle, due to the round shape and the flow of the fluid. Even though, I was not happy that I could not freely choose my motive, I was quite satisfied with the outcome. Anyway, for the next task, want to try to find a proper camaera.

FullSizeRender (1)


TEMPORAL EXPRESSIONS: THE TASKS

TEMPORALEXPRESSIONS: JOINER IMAGE (TASK 1)

TEMPORAL EXPRESSIONS: LONG EXPOSURE (TASK 2)

TEMPORAL EXPRESSIONS: THE REFLECTION

Temporal Expressions: Joiner Image (TASK 1)

Screenshot (30)

I created my joiner image in the style of David Hockney using something I found at home, a cup from Subway. Since the theme of this task was “CIRCLE”, I thought the shape of my object might fit in very well. To get to the image you can see, I took more than 15 small pictures and then “puzzled” them together. It took longer than I expected because I had to be aware of different angles, lightning and the zoom I used. In the end, it was quite fun to create something big and working from different smaller things.

Next, I will have to complete the second task, a  creative photo-image which exploits long exposure.


TEMPORAL EXPRESSIONS: THE TASKS

TEMPORALEXPRESSIONS: JOINER IMAGE (TASK 1)

TEMPORAL EXPRESSIONS: LONG EXPOSURE (TASK 2)

TEMPORAL EXPRESSIONS: SHORT EXPOSURE (TASK 3)

TEMPORAL EXPRESSIONS: THE REFLECTION

ANIMATION: TASKS

To gain knowledge in animations and animating, we were given two tasks. Also, we had a workshop on how to animate with Photoshop and seminars on the history of animation.

The first task, we completed in our seminar. I was supposed to hand-draw a 12 frame picture sequence. I decided to go for a bouncy ball, since the shape stays the same most of the time and I was able to end my sequence right where I started. This way, the ball would look like it would be bouncing in a loop, which relates to the given theme CIRCLE, as well as the shape of the ball. To animate our drawings, we used a Praxinoscope, which is also called Spinner Scope. Since I did not have time to take pictures of the ball, I am going to do another animation project to complete my task.

Then, at home, I am going to digitalize thesequence by using Photoshop.

The second task is to create a short experimental sequence using my smartphone. Doing this task, I am going to explore the technique of stop-motion. That means I am going to take a range of pictures of not moving objects. It is important that those pictures show the same objects and that in all of the pictures the position of the objects slightly varies. By playing them in a sequence, I will create the illusion of the objects moving.


WORKSHOP: ANIMATION WITH PHOTOSHOP