heatherjlawton-blog

[heatherjlawton-blog]

Finished Website

Below are a few images of some of the pages from my website:

[heatherjlawton-blog]

Showreel

Here is my finished showreel with some of my work in it. 

[heatherjlawton-blog]

Website - HTML

Below is the coding for one page of my website. Once I had created one page I was able to copy and paste the code into a new page and change the images, text and links. 

This is what the page looks after finishing the coding.

I’m really happy with how my website turned out as it has all of the images I wanted on there with my logo and everything links together perfectly. I’m glad that I was able to follow all of the tutorials and produce a website. 

[heatherjlawton-blog]

After Effects Video

Below is the finished video using the After Effects tutorials.

[heatherjlawton-blog]

After Effects

Using After Effects we were given some new footage which we used to edit together with Illustrator files. We got the footage that we were given and placed the Illustrator file on top of it which was a logo.  

After doing this we pressed the track camera button which analyses the video clip for tracking points. I was then able to click on the points that I wanted the logo to track and After Effects put it all together. 

After doing this, we went to the time remapping button which allowed us to slow down or speed up the footage. Because the footage we were using was someone jumping, we were able to speed up the person running and then slow it down when he jumped. 

Once we did this, we were able to place a video inside the logo by using the Alpha Channel of a Layer to make it transparent so other visuals appear through that Layer image. We were then able to press the button under the “TrkMat” to select “Alpha Matte”. This meant that the video played under the logo.

 I think this is a really cool trick which could come in useful for the Kidscan project.

[heatherjlawton-blog]

This is the final colour edited video.

[heatherjlawton-blog]

Colour Editing

After getting our clips edited together we were shown how to edit the colour of the clips to make them lighter as they were quite dark when they were filmed. I think the outcome of this looks really good as the clips look better and more professional when they are lighter than when they were darker.

I used the ‘lumetri color’ option on premier pro to change the individual colours to make sure they were all balanced. This meant I could look at what colours wherein each shot and how much of them. The Lumetri Scopes allow you to change colours by seeing a graph of all the colours in the shot. 

The first scope is the Luma Waveform Scope, which shows brightness levels for all colours from the left side of the image to the right side of the image. You want the black levels and the white levels to be maximised between 0 and 100. 

The second scope is the RGB Parade, which shows brightness levels for individual colours from the left side of the image to the right side of the image. The three (RGB) colours in the scope should be balanced so that they have a similar shape (unless you want a specific colour cast).

Because we were editing colour with people in the shots, we were told to set flesh tones to between 60 and 80 on the Luma Waveform Scope. To make sure the flesh tones where correct we selected the Vectorscope YUV and deselected Parade (RGB). The line extending NW to SE on the Vectorscope is the flesh tone line and we had to make sure the trace extend 1/4 to 1/3 along the flesh tone line. 

We could add points on the Hue Saturation Curves wheel to saturate specific colours so it fixes the flesh colours. 

[heatherjlawton-blog]

Video Editing

To start the video editing, we opened Premier Pro and imported the footage that Kevin gave us. This was so that it would be easier to learn from if the whole class had the same footage. After doing this, he took us through what all the buttons did and how they would affect different footage in different ways. After this, we were able to play around with the footage and use the buttons that he was talking about.

 I think that after using it for a little bit, it started to get easier as it did what you wanted it to do.

[heatherjlawton-blog]

Practise Website

Below is the finished practise website using boxes to put all the images into. I have used images I found online as it is just a template for when I make my actual website. 

The first image is the home page which has a welcome image and then images with titles and colours. It also has a navigation on the right side. 

The second image is the second page which has three images with headings and posted on date underneath.

Lastly, the last page just has two images on it.

[heatherjlawton-blog]

HTML 2

Below is the coding for my starting website. It is a basic start which I can use as a template for my actual website.

Below is the first version of my practise website which has the same colours as the website from the post before. I used images from online and then used the same colours as the first website to make it easy to do.

I think that this is a good starting point to start changing my website to see what else I can do before I start on my real website.

[heatherjlawton-blog]

HTML

Below is the website I have created following the tutorials given by Rod. 

After this, we added images to our website and was able to change things around like box sizes and colours. We could also add a navigation bar at the top. Below is the coding I created with images and changed colours

[heatherjlawton-blog]

CSS

After creating my HTML document, we were asked to create a CSS document to put all our styles into. To do this I created a new document and saved it as style.css. After doing this I could place all my styles from my HTML file into the CSS file. Below is the CSS file. 

[heatherjlawton-blog]

Starting HTML

To start the HTML file I opened a new file in Brackets. I then had to save the file as index.html otherwise Brackets wouldn't know that it was an HTML file. After this, I started to write out tags that I would then put other tags inside them. I started with <html> tag and made sure to add the closing </html> tag at the end so that I can put everything inside it. Next i added the <head> tag and the <body> tag and their closing tags too.

Once I had started my HTML, I could start to add things like colour and images. To do this I typed <style> then added all the things I wanted to colour or change the font too. For example, I added font-family: Arial and background: yellow. 

Below is the HTML document with all of the fonts, colours and styles I have added. 

In the HTML document, I have also added a class which I have used to be able to change something easily. For my class tag, I have used article header .men and article header.women. I have then added <header class=“women”> and <header class= “men”> to the document at the point I want something to be the colour or style I have chosen. For mine, my men tag is a blue colour and my women tag is a pink colour.  

[heatherjlawton-blog]

HTML

HTML - hyper text markup language 

<tag> content </tag>

HTML5 has built in tags and you can also create your own. 

CSS - cascading style sheet

<title class =“impact”> welcome </title>

- impact {color: #ff0000; font-weight: bold;}

Front-end Frameworks - bootstrap or Foundation3 

Semantic elements clearly describe that type of content:

<table>

<video>

<img>

Non-semantic elements contain any kind of content:

<div>

<span>

[heatherjlawton-blog]

New Adelphi

During our safety session at the new Adelphi, we were shown different equipment that we could use and what we could do with them. We were also shown how to use the lazer cutter and the engraver. 

During our session, we were shown how to prepare the document to send it to the lazer cutter and how to change the document so that the same machine could engrave it. We used wood that was specifically designed for the engraving/ lazer cutter machine and then used thicker wood for the snowflake that was lazer cut. 

Doing this session made it so that we knew what we could do with the lazer cutter for our future projects. I think it was really useful for future projects. 

[heatherjlawton-blog]

Semester Two

[heatherjlawton-blog]

Extended Task

3d interactive walk around installation