Portfolio sites

I spent a great deal of time last year researching Portfolio sites when putting my own together www.onebigegg.com.

I found that the hardest part was the wording for advertising my services.  In the end I settled on :

A well designed website is now a fundamental starting point for any brand or business.
At One Big Egg, we’ll work with you to fully understand your business and customers, then design and build you a modern, stylish website that is eye-catching and highly functional to transform your online presence.
Whether it's a redesign of your existing site that you require, or a site built from scratch, One Big Egg can a provide fast and cost effective service.
We also offer graphic design services - business cards, posters, leaflets, printed DVD / CD's and more.
If you have a project you'd like to kickstart - please contact us to discuss - we would love to hear from you.

Having viewed numerous other sites for inspiration, I decided to follow a common trend by breaking down my services into three categories “Small / Medium / Large” – though I’m taking a punt with “Large” at the moment given that I’ve not yet actually developed an e-commerce site!

I have decided to offer Responsive as a standard across all three packages as I do believe that all sites should now be designed to look good and be functional across all devices given that such a large portion of web consumers are now viewing sites on handheld devices.

I have also spent time this week redesigning my business cards for One Big Egg, and have started work on developing a design-oriented CV (I had not actually thought of creating a CV specifically for the design side of my career – to date I have just made slight amendments to the opening passage of my finance accounts-based CV.

I frequently view websites of local and other specific web design agencies to see what vacancies they have.  Ideally, I am looking to relocate back to Swindon so have been concentrating my search there.  Once my CV is ready, I plan to contact as many design agencies in Swindon, and ask them which recruitment sites / agencies they advertise their vacancies with, and at the same time show them my CV with the hope of opening a dialogue with them and sell my skills…..

I also plan to focus my job search on Bristol as this city is commutable from Swindon and has a reputation of being a digital hub,


Showcase Project – trouble with unwanted border on transparent gifs

I’ve been getting this really annoying white border around my transparent gifs:


Thankfully I found the tutorial at http://www.mediacollege.com/adobe/photoshop/transparent/matte.html which is explained that the issue can be resolved by specifying the colour of the background that it is being placed against in the “matte” field when saving.  And it works!  Hurrah.



The only problem with this is that it affects the transparent gradients on the beams of light, so its back to the drawing board with regards to that element….


Animating the projectors

The next stage in the project for me is to animate the projectors – this will be my first foray into creating an animated file!

First of all, I copied my SVG image from Illustrator to Photoshop:



I duplicated the layer, then with the duplicated layer selected I used the Quick Selection tool to select the whole of the left-hand reel, and then rotated it 5 degrees (Edit > Transform > Rotation) – to ensure accuracy input the value ‘5’ into the “Set Rotation” box:


I then duplicated this layer and performed the same action, progressively adding layers until the image had rotated a total of 40degrees.


Then I went back to the original layer and selected the right-hand reel and performed the same actions throughout the layers.  The only difference this time is that I had to add 5 to the value that I was rotating by (as the starting position for each layer was the original layer’s position) – to enable me to keep track of the required rotation I first renamed the layers to reflect the rotation angle value:


I created a duplicate of the original layer as I intend for the lights on the projector to switch from red to green as the machine starts running.  To do this, I selected the green light on the opening frame/layer and added ‘darkness’ to the green light.  I then did the same on the red light for the remaining layers:



So now I have all my individual frames required ready for applying animation to.

I set out the sequence & timing of frames as follows – as you can see, the green light comes on first, then the reels start turning:


I saved this as an animated gif and the resulting image is starting to look good – http://www.onebigegg.com/college/projector_animated.gif .  However, I am now a little stuck as I need to loop the sequence from the point that the reels start turning only (layer “+5” to “+40”) bit can’t work out how to achieve this, and research online has proved fruitless so far…..


Javascript – Event Handler

This evening I researched Javascript Event Handlers and managed to construct a piece of script that successfully ‘reveals’ an image when a completely separate image, link, button or div is clicked.  This means that I can now apply this method to the project website so that the animated gif file is ‘revealed’ on the ‘screen’ once a projector icon is clicked.  I have no idea at this stage whether a) the gif will start at the beginning of the sequence once revealed, or b) whether the soundtrack will only be audible once the gif has been ‘revealed’ – as it is imperitive that the animation and soundtrack sequences only start once ‘revealed’ (i.e. display changed through javascript from ‘none’ to ‘block’).

The small bit of script I developed to achieve this is as follows. In this example, clicking on the button, image or div reveals an image:

The resulting demo can be viewed at http://www.onebigegg.com/college/reel.html


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test example - javascript event handler</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
function display_image()
document.getElementById("image_chris").style.display = 'block';

 #projector {
 #my_image_container img{



<div id = "projector">
 <img src = "images/projector.png" onclick = "display_image()"/> </a>
 <button id = "button_chris" onclick = "display_image()"> Click for Film </button>
<div id = "my_image_container">
 <img src = "images/Chris_Simon2.gif" id = "image_chris" alt = "short film" />


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!