HTML/CSS Workshop. 1 – Cheat Sheet

CSS, HTML, Programming, Workshop
Screen Shot 2014-10-23 at 11.27.56

Screenshot of what we went through in our workshop

In our first HTMl/ CSS workshop we went through some of the basics. Here is a list of things we learnt which will be beneficial when arriving to the second workshop.

<html></html> States that it’s a HTML document

<head></head> Keeps the information that isn’t displayed on the webpage itself

<body></body> Visible portion of the document

<title></title> Found in the head tags. What the document is called

<img src=”name”/> Adds an image. Self closing

<img class=”img-responsive/> Makes the image and document ‘responsive’ (Adjusts to screen size)

<div></div> Defines a section in a HTML document


AfterEffects Workshop. 2

Kinetic Typography, Motion Graphics, Task, Workshop

Today we had our second AfterEffects workshop. We were shown how to import a video into our composition. Before we started, we had to film a short piece of footage of ourselves in front of a large green piece of card. Once we imported this video into AfterEffects we were shown how to remove the green background and replace it with an image of our choice. I decided on an underwater theme and therefore imported a sea background. I was then taught how to mask the fish to place them in front of the video to get a 3D feel. Once we were happy with this we carried on exploring the different ways to animate our text. To improve this clip further I could try animating the fish to move, creating a more life like scenario.

A link to the video will be up shortly.

Photoshop- Animated GIF

Animation, Photoshop, Workshop

In this weeks workshop we started to look into motion picture creation in Photoshop. As this was an introduction we were given the necessary images to create this running man gif. The following seminar however, helped us draw each picture in a sequence, to which we then checked our work using a Praxinoscope. We were told to convert each layer into a frame slightly nudging the following image in order to create the illusion of the man walking. Here we could play around with delay time until we were happy with a smooth motion. To save as a gif I then clicked ‘save for web’. This workshop was very helpful as it targeted this week’s task of creating a gif. I hope to practice further by drawing and finding walk cycles online to improve this skill.

Processing Workshop. 2 – Cheat Sheet

Programming, Workshop
Screen Shot 2014-11-09 at 15.06.48

Code for generating random circles 

Basic Structure

void setup ( ) { //runs once only


void draw ( ) { //runs repeatedly during the execution.


Variable Types

Int, positive and negative integer variables

Float, floating point positive and negative variables

Boolean, variables that can be true or false

Basic Functions

println ( )

size (width, height), sets main window size

background (colour), sets window background colour






Conditional Structure

if (condition1) {

} else if (condition2) {

} else {


< less than

<= less than or equal to

== equal

> greater than

>= greater than or equal to

!= not equal

&& and

|| or

! not


For loop:

for (int i=0; i<10; i++){

//do whatever we want repeated



Fill/ Stroke

fill (colour); sets the colour used to fill shapes

noFill ( );

stroke (colour); sets the colour used to draw strokes around the shapes

noStroke ( );


Value scale foes from 0 to 255

colour (grayscale);

colour (grayscale, alpha);

colour (red, green, blue);

colour (red, green, blue, alpha);

ellipse (posx, posy, width, height);

rect (posx, posy, width, height);

My First Programming Experience

Programming, Workshop

Today was our second workshop, this was our introduction to programming and Java. We started off by learning keywords and some common misconceptions about programming to ease us in. We then moved on to a practice task where i leant about the syntax of Java and how every programming language follows a similar structure. We worked in a program called ‘Processing’ which also supports both Javascript and Python. Here is a screenshot of some basic programming from the workshop.

Screen Shot 2014-10-06 at 23.47.21

I hope to carry on and practice independently by looking at tutorials and examples on ‘’ to gain confidence and skill.