Showcase website: Projector Icons

I create the below SVG image in Illustrator for the projectors:


However, the graphic lost some of it’s impact when placed onto a deep red background, so I decided to add an outer glow to the image which improved the effect:


I next need to work on turning this into an animated gif  – it will be animated in the following ways:

  • Reels will rotate
  • Light will change from red to green
  • A projection of light will appear

Showcase site – Meeting 07/05/2014

Date: 30th April 2014

Location: Brighton City College

Present: Chris Webb, Nathaly Laurence, Simon Wilson


During this meeting, Nathaly updated the group with the results of her research into creating Cinemagraphs.  All agreed that she created some excellent results, particularly with the ‘stirring coffee’ image.   Nathaly then gave the rest of the team an excellent tutorial on the subject, which is summarised below:

  • Open I-Movie
  • Import Movie
  • Add begin & end markers by dragging out the required section of film in the Event area
  • Drag selected area to copy to the Project area
  • Share > Export movie
  • Choose most appropriate size
  • Open Photoshop
  • Open saved movie
  • Ensure Timeline window is open (window > timeline)
  • Select required portion (start and end)
  • Duplicate layer at frame to be ‘fixed’
  • Ensure Video layer is on top
  • Select bottom layer > Layer > Rasterize > Video
  • Select top layer (video) > Use polygon tool to select area to have movement
  • Add a mask
  • Ensure layers are not in a group (otherwise you may not be able to save as ‘looping’
  • Save for web > GIF > Looping = forever

We spent some time as a group taking sort films which Nathaly then used to create animated Cinemagraphs using the above method.

Below is one of the resulting Cinemagraphs – a tender moment!





Showcase Site – Meeting 30/04/2014

Date: 30th April 2014

Location: Brighton City College

Present: Chris Webb, Nathaly Laurence, Simon Wilson

Absent: Chris’s laptop



  • Distribution of duties discussed:

o   Nathaly : Logo design, research animated gifs and cinemagraphs

o   Simon: Costings and budget, research embedded video and animation

o   Chris: Build framework for overall site in html & css, create projector icons (SVG), research Javascript event handlers for projectors, gantt project chart

  • Chris informed the group that he was currently without a laptop and it was unlikely that he would be able to progress with the project over the coming week


Project schedule / distribution of duties:



SHowcase site: Initial idea sketches

Sketch for landing page and horizontal scroll to “Projectors” section:


Sketches and ideas for “Projectors” section:


Ideas and considerations for Projector icons:


Ideas for ‘revealing’ projection light beam:


Sketches around the idea of having projectors at an angle (I abandoned the idea for angles projectors as I felt that it would be too complex for me to create an animated gif image from these):




Showcase site – Initial Meeting 02/04/2014

Date:2nd April 2014

Location: Brighton City College

Present: Chris Webb, Nathaly Laurence, Simon Wilson


During this first meeting we discussed the project brief and reviewed some work by previous students.

Once we all felt that we understood the requirements of the project, we started to brain-storm ideas.  Nathaly contributed the idea of basing the overall concept of the site around an old fashioned ‘silent-movie’ style theme.

Brainstorm results around ‘silent-movies’ theme:

  • Classic ‘MGM’ iconography
  • Velvety, plush cinema colours, tones and textures
  • Subtitle Frames for speech
  • Scratchy film, vertical lines, speeded up movement
  • Piano soundtrack
  • Whirring projectors, projection light beam

Brainstorm results for movie themed names for fictional design company

  • Stuck In The Past
  • Old Timers
  • Silent Heroes
  • Black and White, But Colourful,
  • Colourful Black and White
  • Reel Design Agency
  • Reel Fine Design
  • Reel Web Design

In the end we decided on the name Reel Web Design, and discussed plans for building a site where 3 projectors would each project a short movie for each of us, which would end with a link to our individual showcase sites



Setting up an email generating form

All you need to do to set up an email generating form is a) create a form in your html page and b) create a separate php file to generate the email based on the data that has been input to the form.

First of all you need to create a form in your html page for users to input their details / message etc:


<form id = "contact_form" action = "php/sendmail.php" method = "POST">
 <p><label for="name">Name:</label><br/>
 <input type = "text" size = "40" id = "name" name = "name" /> </p>
 <p><label for="email">Email address: </label><br/>
 <input type = "text" size = "40" id = "email" name = "email" /></p>
 <p><label for="msg"> Message:</label><br/>
 <textarea id="message" name = "message" cols = "32" rows = "10"></textarea></p> 
 <button type = "submit" name = "submit" value = "send">Send Message</button>

Line one contains an ‘action’ to link to where you will store the php file necessary for generating the email – in this example you can see that it is located in a folder named “php” and the file is called “sendemail.php” (highlighted red above).

The “method = ‘POST'” command is important as this allows the data to be sent to the php file (highlighted green above)

Each field (name, email address, message etc) has been assigned a corresponding id name (highlighted blue) – these will allow the php script to read whatever has been input to these fields by the user.

Once you have finished the  code for the form on your html page, you need to create the php file that you have instructed it to link to.  To do this, open a blank page and save as (in this example’s case) sendemail.php in a folder called (for example) “php”.  You then need to populate the php file as follows:

(Note: although I have shown these as 2 colours to indicate php and html sections, it is one continuous piece of code in the php file):

//Start building the mail string
$msg = "Name: ".$_POST['name']."\n";
 $msg .="Email: ".$_POST['email']."\n";
 $msg .="Location: ".$_POST['location']."\n";
 $msg .="Message: ".$_POST['message']."\n";
//Set up the mail
 $recipient = "";
 $subject = "Message received from ".$_POST['name'];
 $mailheaders = "From: <> \n";
 $mailheaders .= "Reply to: ".$_POST['email'];
//send the mail
 mail($recipient, $subject, $msg, $mailheaders);
<!DOCTYPE html>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel = "stylesheet" type = "text/css" href = "../css/style.css"/>
 <link href='|Josefin+Sans|Monofett|Comfortaa|Gruppo' rel='stylesheet' type='text/css'>
<div id = "contact">
<div id = "wrapper">
<p> Many thanks for submitting your message </p>
<p> We will endeavor to get back to you a.s.a.p. </p>
<a href = ""> <h1> Click to return site </h1></a>

</div> <!-- end contact -->
</div> <!-- end Wrapper -->


The section highlighted green above is the php script (which opens with <?php and closes with ?>) This script is collecting the data that has been posted from the form and using it to generate an email.  The actual fields and format will obviously depend on the project, but in this case the subject line on the email received will read “Message from (then user’s name as per details input to form) and the email content will display the users email address as “Reply to: (then user’s email address as per details input to form) followed by the message that the user input.

The section highlighted blue comes after the php script has closed and it a standard html document – this creates the page that the user will see once they have submitted the form – so would usually acknowledge that the message had been sent and have some way of linking back to the main site.

Don’t forget, you won’t be able test this directly through your browser – for the php script to run you will have to upload to a server and then test.