Hayling Graphics News and Website Design / Graphic Design Tips.
TwitterFacebookGoogleLinkedIn

for websites

for animation / video

for illustration / print layout

New 3D Sales Animation

Posted on by Posted in Uncategorized

3D Sales Animation Frame

My goodness… it’s been months since my last blog. I’ve been busy on several projects including this 3D and 2D animation for Wartsila, a international engineering company specialising in power and marine systems.  This short movie required me to create a shipyard from scratch, add a model of a ship (which was bought in) and then animate a helicopter type view over the ship to focus on the stern of the vessel.  The next scene involved taking models of all the wartsila “tail shaft systems” and animating a build of the prop shaft.  The final scene was an animation of the ship at sea, panning from a view of the prop to a lovely view of a sunset.

All the 3D animation was created using Blender 3D and the 2D animation (e.g. titles, credits and some labelling and lighting effects) was added using Adobe After Effects.  The entire  one and a half minute video took around 3 weeks to complete.  As always, I would have liked a little more time to tweak bits and pieces but the animation was required for a sales exhibition at the start of December.

 

Ale-ing Fest Website Brush and Clean

Posted on by Posted in News

Ale-ing Fest LogoThe Hayling Island Beer Festivals “Ale-ing Fest” is fast approaching, and the website has had a tidy.  A new flash banner has been added with old logo having a bop (flash enabled browsers only)  whilst the short soundtrack from “The Washington Road Sessions” plays.

Also a paypal button has now been installed so you can all purchase advanced tickets online.

The Ale-ing Fest is always a great fun – whether you’re in front of or behind the bar!  So I expect we’ll see you there.

Theatre Flyer

Posted on by Posted in News

We’ve finished the latest flyer fTheatre Flyeror the station theatre which is now at the printers and should be ready for distribution soon.

Designing this flyer is always a compromise in which a large amount of information is squeezed into a small space and making sure to give equal billing for all events.  The other difficulty is not having control for all of the artwork and so a fair amount of photoshop work is required to reformat things to fit.

The flyer is produced entirely using Adobe software with photoshop and illustrator used to produce/tweak the artwork, and the final layout completed using indesign.  The flyer is an 8 page DL sized (1/3 of an A4 sheet) booklet which is light enough to send by mail as well as the right sized for tourist brochure envelopes.

To see a low res version of the completed theatre flyer in pdf format, please click here.  Depending upon your browser, you may not see the pdf correctly unless you download the file and view with the latest adobe reader.

Theatrical Posters

Posted on by Posted in News, Tips & Solutions

It’s time for the Station Theatre to advertise the next six months worth of shows, and so that means I’ve been busy getting the flyer together and also producing some posters….

Mother Goose

Mother Goose PosterThe first is for the Pantomime next year – Mother Goose.  The idea of a goose looking around an egg came from the director.  All I had to do was take the idea and run with it.  The design was sketched out and then created on the computer using Adobe Illustrator.  Using vector graphics means that the image can be enlarged to any size without degrading the image.  Initially I tried it as an all white poster but on the directors advice we went to green – a much more festive colour.  There are quite a few tweaks I can do to enhance it for the final poster design, but for the flyer (only 10cm square per event) it’s fine as is.

As with most of my posters, the final poster is produced using adobe indesign which is simply the best tool for combining images, artwork and text together and prepare the poster for final print.

Communicating Doors

Communicating Doors PosterThe other show needing a poster was communicating doors by Alan Ayckbourn.   Looking around the web for inspirations there were quite a few rather standard posters until I saw a great poster by Cygnet Theatre Company of a futuristic dominatrix in front of a green glowing doorway.   Unfortunately I couldn’t do something along this line because the show hadn’t been cast and the director didn’t want to disappoint the audience in case the actor who gets to play the part didn’t match the poster.  With the director’s idea to have a hand opening a door, I looked through stock images from the istock website and came up with two images – a door and a hands in handcuffs picture possibly reaching for a door handle and hey presto – with a bit of photoshop magic a poster was born.  The simple colour scheme was arranged around to complement black of the handcuffs.

Simple Poster Design Tip – Use Faces If Possible

As with any theatrical poster design, it’s best if you can excite the onlooker with images involving action or emotion.  For other shows which may not lend themselves to this style of poster, then the poster needs to be quirky – something that intrigues people to take a second look and come closer to read the small print.  One of the best images for any poster is to have photos of real people with interesting faces.  This gets an immediate response from the viewer and pulls them into the poster.

However, for most posters that I have done for Hayling Islands Station Theatre, faces have not been allowed unless the show has been cast. This has good sides – I get to do all the artwork from scratch (which can be fun) – and bad sides – sometimes I think the posters lack the impact that they could have had with good quality photos.

…and so, the flyer is almost ready to go to print – I’ll let you see it when it’s checked!

 

 

 

 

Clay Pigeon Shooting For Common Leys Farm

Posted on by Posted in News
Clay Pigeon Shooting

Clay Pigeon Shooting

Just updated Common Leys Farm website with a Clay Pigeon Shooting Club page.  Not much info for it yet but they wanted the dates for the upcoming shoots listed as quickly as possible.

This site was designed to be mobile friendly, with the menu system kept as clear and as simple as possible.  The templates were developed with Adobe Dreamweaver using it’s fluid layout feature. This means the page elements move around as the screen size changes so that it always looks good but did require some extra JavaScripting change the way the sliders look for different formats.

So, in summary, if you’re looking for a great place to do some clay pigeon shooting – or for a fantastic B&B/Restaurant/Campsite in sunny Oxfordshire, then visit Common Leys Farm…. They’re GREEEAAATTT!

Dance Show Programme Cover

Posted on by Posted in News
Keep Calm Poster

Poster Design

Haylings resident dance school, Island Dance Fusion, have their dance show in this weekend – Keep Calm and Carry on Dancing – at the Station Theatre, Hayling Island.
I’ve seen some of the rehearsals and it’s going to be a great evening with fantastic music and brilliant dancing. It’s on Friday (12th) and two shows on Saturday (13th) so go and give your support.
After doing the simple poster design, I’ve just done a layout for the programme cover – all for the cost of a quickly thrown together advert for Hayling Graphics.

Good lu…. , ooops! Or should I say “break a leg” to all the dancers!

Programme Cover

Programme Cover

How to add two or more Adobe Edge Animations to a web page

Posted on by Posted in Tips & Solutions

If you add two (or more) edge animations onto a single page you need to modify the code slightly so that the two animations can run together.

Firstly place all the edge JavaScript files into the same folder as the web page.

Then add the code for both animations into the page as normal… e.g. in the header put:

<!--Adobe Edge Runtime-->
   <script type="text/javascript" charset="utf-8" src="animation1_edgePreload.js"></script> 
    <style>
        .edgeLoad-EDGE-310884 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

<!--Adobe Edge Runtime-->
   <script type="text/javascript" charset="utf-8" src="animation2_edgePreload.js"></script>
   <style>
      .edgeLoad-EDGE-313368888 { visibility:hidden; }
   </style>
<!--Adobe Edge Runtime End-->

Then in the body where you want the animations to appear:

<div id="Stage" class="EDGE-310884"></div>
<div id="Stage" class="EDGE-313368888"></div>

You then need to change the stage name for at least one of the animations to prevent clashes.  Simply change the id of one or both of the animation divs as follows:

<div id="Stage1" class="EDGE-310884"></div>
<div id="Stage2" class="EDGE-313368888"></div>

When I did this, the animations began running fine until one of them froze during an action.
By debugging the animation I found that the error was:

TypeError: jQuery.easing[jQuery.easing.def] is not a function in jquery.easing.1.3.js;46

After trying several different ways around this problem, the simplest was to comment out a few lines in the jquery.easing.1.3.js JavaScript file located in the edge_includes folder.  Take the first few lines of code….

def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},

And commenting them out thus….

//	def: 'easeOutQuad',
//	swing: function (x, t, b, c, d) {
//		//alert(jQuery.easing.default);
//		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
//	},

This fixed the problem for my animations with no degradation in performance.

Hayling Billy 50 Weekend Celebrations

Posted on by Posted in News
Hayling Billy 50 Weekend Poster

HB50 Events List Poster by Hayling Graphics

 

This weekend (6th and 7th july) is the 50th Anniversary of the last train to Hayling Island, and we’ve been helping out with designing the HB50 logo and also doing some print layouts such as this events list – information poster.  The HB50 train logo was originally designed to be used to produce enamel badges, but when the plans changed HB50 decided to keep the logo as is.

It looks like the weather on hayling  is going to be gorgeous, so lets hope everyone enjoys the sunshine and the HB50 events.

If you want to see the poster, find out more or join the HB50 project, then why not visit the HB50 website and find out what it’s all about.