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:

Image

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.

 

Image

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….

screenshot

Showcase project: Projection light

Next I needed to create a beam of light coming from the projector towards the screen, which will be part of the animated ‘projector’ gif.

First, I looked for some existing images of these types of beams to get some ideas from, and found this one which was a good starting point:

Image

In Photoshop I set about trying to recreate this type of image, and produced the following:

Image

The red background is temporary to see how the light beam will look in context.  The actual image will be added to the existing projector gif which has a transparent background.  

Below is the beam shown in context with the projector:

Image

 

I feel that the fading of the light should start further toward the light source and will possible start a-fresh at a later date if I get time.

 

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:

Image

 

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:

Image

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

Image

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:

Image

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:

Image

Image

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:

Image

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>
<head>
<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>
<script>
document.getElementById("button_chris").onclick=function(){display_image()};
function display_image()
{
document.getElementById("image_chris").style.display = 'block';
}
</script>


<style>
 #projector {
 float:left;
 cursor:pointer;
 }
 #my_image_container img{
 display:none;
 }
 
</style>

</head>

<body>

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

</body>
</html>