Over the last ten or so weeks, Kyle (workshop tutor) has been teaching us how to create a website from scratch. This post contains a compilation of screenshots from each step in the process with highlights over the new content added to each stage. (This is mostly here for my reference to go over what we covered but it is still relevant to the unit).
For the first official workshop of the D4DME unit, Kyle (workshop tutor) got us to set up an example project folder to use as a starting point for any website project.
The layout was fairly straightforward, as we had setup a similar folder for our dummy website in the past series of workshops. The only new element to the above example was the addition of the templates folder, which allows for cleaner HTML/PHP files (as you can make separate files such as a ‘navigation’ to be included at the top of every file rather than having the same code on every page).
In our third Processing lecture we were shown a different type of loop. A ‘for loop’ only takes up one line of code and is a much more efficient way of repeating content.
We were then introduced to arrays and how we could use them in our projects.
The mini task that we were given was to fill a rectangle with a random colour from our colour array.
To help us with our new task, our workshop was based around animating simple gifs in Photoshop today. Kyle gave us a set of images to animate into a walk-cycle.
Having created my cinemagraph in a similar fashion, I found this process easy to do. Each frame of the animation had to be placed on it’s own layer, which would then in turn become visible/invisible when necessary. As I found this easy to do, I decided to draw my own walk-cycle based on the templates above.
I drew some basic sprites in Photoshop with a flat background and played around with them.
I added a shadow that moved beneath the figure as he walked to make the motion seem more dynamic. I then wondered if it would look better to have the character walking in a static position whilst the background scrolled past.
I personally prefered the second option, as this is usually how movement works in video games; the main character/sprite is almost always positioned at the centre of the screen whilst the world moved around them.
In our second Processing workshop we were introduced to ‘while loops’, which are used if certain conditions are required for a function to run. We also learnt about the ‘random’ function and how it can be used to select random hues.
Our mini task for today was to create 10 random sized circles filled with 10 random colours every time the mouse clicked.
Above is a screen shot of part of the work I created today. I understand the basic syntax of Java and how easy it can be to understand, though I am fully aware that it is going to get a lot more complex as we progress. Most of the functions that we used today were called ‘booleans’ and relied on either a true or false outcome in order to perform.
I intend to watch the tutorials on http://www.processing.org/ in order to develop my Java knowledge in my spare time.
Fry, B. and Reas, C., 2001. Processing [online]. Available from: http://www.processing.org/ [2nd October 2014]
For our first workshop, we focused on non-destructive editing using Photoshop and Bridge. Bridge has an option called ‘Photo RAW’ which allows you to make drastic changed to an image without ruining the original file, as you can remove these changes at any point. We were also shown how to create effective layer masks in Photoshop that we could use to create our Alphabet Photography collage if we needed to.
My knowledge of Photoshop stems from an artistic background rather than a photographic one, so my editing skills are a little bit rusty. I found the lecture helpful, as I’ve never really been that great with layer masks.