Projects Archives - Design Bytes

May 28, 2024May 28, 2024

Example animated Gifs created using Adobe Animate | Samples

Here are some of my example animated gifs created using Adobe Animate – the successor to Flash.

Whether you pronounce it ‘JIF’ or ‘GIF’ ( I’m in camp GIF, with a ‘G’ by the way!) the humble .gif format has been around for decades. It’s simple, fun and universal. Gifs are great, and you can use Adobe Animate to create them.

For the sake of show and tell, I wanted to share some of my smaller animated projects. A batch of animated Gifs I made using Adobe Animate CC and its predecessor Adobe Flash.

I have already shared other types of example projects created using Adobe Animate. Such as what you can make using Adobe Animate ( formerly Flash ).

Adobe Animate, or when it was called ‘Flash’, was the 2D animation software of choice in its heyday. I’ve used Adobe Animate for making web components, animations, small games, and various other forms of multimedia before it lost its popularity. Adobe Animate still has plenty to offer in my professional opinion. From creating 2D animations to very simple games, videos, and general multi-media in the form of HTML5.

Another benefit of Adobe Animate – it comes as part of the Adobe Creative Suite ( Creative Cloud ). So if you are already a license holder, this is another tool in your arsenal.

A distinction that I like in the way Adobe Animates works for motion graphics, is its granular approach to frame-by-frame animation.

It adheres more closely to traditional methods of frame-by-frame animation.

Example Gifs created in Adobe Animate – My Animations

My example animated gifs created in Adobe Animate.

Example animated gifs created using Adobe Animate - Thunder cloud animated gif

Example animated gifs created using Adobe Animate - Chip

My history with Adobe Animate

After studying for an HND in Graphic Design, I decided to embark on another course that built upon my knowledge of working with Adobe Animate – Multi-media design and digital animation.

I still use Adobe Animate for ‘small-scale’ animation projects from time to time, as it is well-suited to creating frame-by-frame animations and small-scale projects.

But, it is no longer my default motion tool for making multi-media applications and animations.

Example GIFS created in Adobe Animate – Shorthand overview of the process

To create the example animated GIFs (or gif) as shown in this post, I did the following:

Mocked up some very rough ideas on paper to help brainstorm and visualise my ideas.
Created the vector illustrations in Adobe Illustrator.
Imported the Illustrator artwork into Adobe Animate.
Created the animations through a mix of frame-by-frame animation and ‘tweens’.
Exported the GIFs from Adobe Animate – ready to be distributed.

In the paragraphs below, I go to more exact detail of what of what I did in each paragraph.

Drawing the artwork in Adobe Illustrator

I didn’t illustrate the artwork in Adobe Animate. These examples shown in this post were created in Adobe Illustrator first and then imported into the project library in Adobe Animate.

In the early stages, I created the drawings the way I wanted. I then drew them in such a way that parts of the illustrations could be pieced together and broken apart according to how I wanted the animations to work.

Why not just do it all in Adobe Animate?

Because I find it easier to illustrate and draw in Adobe Illustrator using my Wacom Tablet. Adobe Illustrator is made for drawing.

I can do some basic drawing in Animate, but Illustrator is a lot more capable as far as I’m concerned for drawing, and fortunately, these 2 applications are good bedfellows now they are part of the Adobe Creative Suite. This has not always been the case.

I have written a bit more here, on the merits of drawing with Wacom Tablet, and why I used Adobe Illustrator when drawing on a computer.

Example GIFs created in Adobe Animated | The ‘importing’ stage

Adobe Illustrator enabled me to have greater control of how I wanted the artwork to look. Gradient shading on the artwork, bold highlights, crisp lines etc.

Once I had created the initial illustrations, I then exported these from Adobe Illustrator – some pieces of artwork were direct imports from either single or multiple artboards.

I then got animating the artwork.

Creating the animations on the main root timeline

Importing complete, assets ready.

This is a similar process I have been using since I was taught how to use Adobe Flash ( Now Animate ) back in 2007. Although the process has changed to some degree and I have streamlined it substantially, the essence of this is more or less the same.

Before using Adobe Animate, I used it to draw it all in Animate – Formerly Flash.

Working on one animation at a time, I pull the components of individual drawings onto the main stage. The white background. I then commence the process of creating animations via a combination of tweens, keyframes, and incorporating simple effects.

When creating the . GIF animations, I try to stay conscious of their intents and purposes. To be used on websites as loops and to be multi-purpose.

I then ‘Exported’ the gifs from Adobe Animate, doing a certain amount of testing and measuring, and tweaking as and when needed.

Caveats – don’t bury in sub animations

Note to self and a lesson to the reader.

Don’t insert the animations into animations. Eg, from the main timeline.
And don’t create an animated clip inside another animated Movie Clip.

These don’t tend to work correctly when exporting from Adobe Animate in most cases.

A strong USP ( Unique Selling Point ) for Adobe Animate

The ability to create frame-by-frame animation is one of the best and most unique selling points when it comes to using Adobe Animate. For me, this is also incidental, as Animate, which was formerly “Flash”, comes as part of the Abobe Creative Suite. No need for extra or new licenses for 2D animation.

Thank you for taking the time to read my post on example gifs created in Adobe Animate and taking the time to watch my animations. Animate, in my opinion, was and still is a great little program for creating animated gifs or 2D animation in general. If you know how to use it.

If you would like any help in creating animated gifs be it for a website or something else, then please do get in touch.

Other websites

– My brochure and portfolio website & services – jimmsdesign

External Project Website ( takes you away from this website )

Part of my project samples – Example gifs created using Adobe Animate – Copyright Jimmsdesgn

December 8, 2023December 8, 2023

My Adventure Creator Project | Lockdown Foray

My Adventure Creator project…

For those of you who don’t already know, at the start of the lockdown, I set myself the task of creating a graphic adventure game! Or, I should say, I started to learn how to make a graphic adventure game in Unity.

There was a time in Lockdown – what can I say!

For those of you who don’t know me, I studied Multimedia Design and Digital Animation as a follow-up course to my HND in Graphic Design at university. All those years ago! I also have a yellow belt cert in Unity too.

My Adventure Creator Project character sprite

In the early days of the 2000s, Adobe Flash was king, ( Check this blog post out on why to avoid Flash player on another website ) and I used to make a lot of multimedia applications, both personal and commercial. Most of these early projects were micro games or small interactive animations – all of this stuff was pre-smartphone.

My first project on this sort of scale, where I had to try and create my own project, was at University. I set about making an e-learning game for children, which was all built in Flash. Sadly, with the demise of Flash Player, this is tricky to play now although I may still have a projector for the game somewhere.

Here is a picture of it.

Adobe Animate adventure - Adventure Creator Project — Adventure Creator Project – My first project of this scale was in Flash.

From a game creation perspective, In hindsight, really it was a narrative game with educational elements to it. You may also be interested to see in theory how to make a story game in Adobe Animate.

But now to the crunch.

Adventure Creator Project.

Adventure Creator Project | Fools Errand

A name for a game that exists solely as a learning exercise – it could have been called anything really, as I had no intention of monetizing it. The game was based on classic 2D point-and-click graphic adventures that you could buy in the 90’s – the humble point and click game.

You point… and you click.

I created this game a greybox prototype to see how Adventure Creator works. It was something to learn during the Lockdown.

The brief – Learn AC.

My Adventure Creator Project — More can be read on this post on this website – game-gunk.com. Is Adventure Creator good for 2D games?

If you are interested, you can play the game on itch.io. It is free to play with bugs and all. ( however, it should be noted that you can’t save it via the browser version )

My Adventure Creator Project - The tools + GUI

Do I think Adventure Creator with Unity is good?

‘I’ think it is great.

Actually, saying AC ( Adventure Creator ) is good is a massive understatement. It is excellent, I have never been able to assemble a graphic adventure game in the most time and cost-effective way until I used AC. The standard that Adventure Creator offers is just excellent compared to some of the game engines or tool sets I have used in the past.

I have written a post about it on this website – is Adventure Creator good for 2D games on game-gunk.com.

What is my Adventure Creator Project about?

I called it Lost Hat, AKA Fools Errand. The title leaves very little to the imagination of what you need to do.

Who knows where the hat got to?

Or who could be wearing it!

Oh, the trifles of life.

You will need to use your wits to get through this 3 level game to find your hat. Perhaps if I see enough people play it, I might write up a shot hints and tips guide. But I have largely moved on to other things.

Mock up application icon

In-game background – my Adventure Creator Project

The components of the project – AC ( What was involved )

For a personal development project – more than I would care to admit.

This project has a of artwork, basic 2D animation created in Photoshop, some rough and ready characters, Sprites and sprite sheets, sound effects, dialogue, conversations, and logic, and I’ve even decided on a small video clip at the end of the project to see how that would work too. And, of course, Adventure Creator. To summerise it is best to mention it this way.

NPC character sprites
Player character sprites + and custom animations spites
Background artwork
Scene and item artwork ( such as coins )
UI design
End scene video animation ( video )
The AC logo for every object and item that can be interacted with in the game
The Icon artwork
Writing all the dialogue for the game
SFX

Adventure Creator Project | Sprites

The sprites, or the characters, however you’d prefer to see them, comprise of all NPCs, the animals, the main player, and various other bits and pieces that were used in the environment. If it moved or was animated, it was probably a sprite.

To quickly paint these characters in various states of animation, I used Photoshop to sketch and brush in the black and white ‘wash’.

The main player in particular has a 4-way direction and various other obscure animations in its repertoire!

The main player was the most time-consuming to create, even as a rough sketch. 8-direction would have taken more time still.

Adventure Creator Project | The Scenes

I don’t wish to spoil too much of the game just in case you do decide to play it, as there are only three levels. But in each level, there was a background image that was quickly drawn in Photoshop and then imported as an asset to my project.

Adventure Creator Project - background artwork for indie game - grey box black and white

Adventure Creator Project | Motion & Animation

I gave very little time to the motion graphics and animation sadly.

After all, I needed to think about the project as a whole and produce this game it quickly. I was invested more in the learning of Adventure Creator than the actual product itself. However, creating some basic frame-by-frame animations was still essential for making the sprites.

To create basic in-game animations, I used Photoshop and painted a couple of layers with my Wacom Tablet as if I were to make a GIF before exporting out the layers as frames.

How did I feel about the project?

As a semi-personal project learning experience, I feel pretty good about it. This was never going to be a polished game for the whole world to play. I created it so I could learn and share. It was undertaken during the Lockdowns. It was a grey boxing experiment.

The project as a whole, taught me more about AC and how I could potentially create a bigger and bolder game in the future using Adventure Creator.

You can play the game here on Itch.io if interested. Warts and bugs included ( you can’t save via the browser version ). It should be noted that the browser version of the game won’t allow you to save! Enjoy. Or you may find some information on this website interesting if you are at game projects.

You may also find this subject on game-gunk interesting: is Adventure Creator good for 2D?

Without divulging too much. I’m currently remaking an old project in Adventure Creator.

Adventure Creator Project - live in game action — Adventure Creator Project – actual gameplay screenshot.

Adventure Creator Project – Other subjects around making games

September 11, 2023October 3, 2024

Okay Aardman! Wallace & Gromit Project

Aardman Wallace & Gromit Project – flex those Adobe Illustrator muscles. I have a new post to share… kindly, the team over at Paper Engine has now said that I can share and discuss my part in creating some of the packaging concepts for a new range of Wallace & Gromit themed products.

The artwork shown in this post was used to pitch to Aardman for a new range of British designed card products, otherwise known as – Build Your Own, For Paper Engine.

Aardman Wallace & Gromit Project Wrong trousers

Aardman Project | The Brief

The Brief | I was commissioned by Paper Engine to help create the core design for the packaging concepts for a new range of of Wallace and Gromit themed paper products.

Aardman had set up an agreement with Paper Engine for them to come up with a range of products, themed around Wallace & Gromit.

If you don’t know Aardman, they are the animation studio behind Wallace & Gromit, Chicken Run, Arthur Christmas, and Shaun the Sheep to name a few.

Paper Engine got in touch with me and asked for assistance in coming up with the core packaging concept to pitch to Aardman.

I won’t lie, I was excited and honoured.

Under a strict NDA, I was called in to help come up with some of the core concepts for the new eye-catching packaging.

The NDA has been relaxed now, as the products have been released onto the market. So don’t worry. And I asked the crew over at Paper Engine and they were happy to allow me to show my my part!

(All artwork on this page is the intellectual property of Aardman and Paper Engine. Do not copy, save, or download any of this content for commercial use ).

Packaging For Paper Engine… Which was actually for Aardman

To spill the beans on the projects.

Here is a bit of extra information on the project process. Once Paper Engine had sent the brief across to me, and we did all the admin, the project was set in motion!

Aardman Wallace & Gromit Project | The design process involved…

Coming up with some very early ideas for speech bubbles, titles, typography, backgrounds, and other accents and parts for the project.
Creating a variety of packaging front ideas for both products.
Developing rough designs into polished designs.
These were presented to Aardman ( gulp ).

It should also be said that this project was quite particular and that there were 2 companies involved in the approval process. Nonetheless, it still allowed room for design creativity.

Aardman Wallace & Gromit Project Typography

Aardman Wallace & Gromit Project | Developing The Design

While I was allowed to work conceptually and creatively, I also had to adhere to 2 sets brand guidelines! One set was supplied by Paper Engine for Paper Engine and, the other was for Aardman!

Aardman Wallace & Gromit Project - 2 rockets

Aardman Wallace & Gromit Project | The Delivery

After working on the polished designs, Paper Engine pitched the artwork to Aardman. I was told on the grapevine that they were pleased with the project – with very few changes to the pitch!

Thank you Paper Engine, it was an honour! From there the look and feel for the range was set. It was an awesome project.

How I approached the project

When creating the packaging, I tried to create artwork that was exciting and matched the tone of Wallace & Gromit. I also tried to create packaging concepts that would excite both children and adults if they saw them on the shelf!

‘wow look at that!’

type of thinking with the hopes somebody would pick the product up and purchase it. The product did most of the selling in all fairness, these are very cool products.

Aardman Wallace & Gromit Project | Paper Engine Testimonial

‘We worked with Jimm on some early packaging concepts for our collaboration with Aardman on three Build Your Own kits. He delivered some superb designs which enabled us to get ahead of the curve by keeping the client on board with approvals and saved us some valuable in-house studio hours. We would definitely work with Jimm again in the future when the occasion arises. Top marks. 5 stars.’

Geff – Creative Director, Paper Engine Ltd.

Aardman Wallace & Gromit Project | You may be interested in some of the following

Retail packaging projects
Stem Project samples
Snakes & Ladders type board game
Board game playtesting post

Why not read more on my playtesting post?

3^rd Party

Jimmsdesign Services

Dragon Bone Games ( Board game website )

March 8, 2023March 8, 2023

Proof Of Concept Project | Wimbledon Brewery UI

Wimbledon Brewery UI – This project was carried out through a local agency based in Wimbledon. After some initial meetings and discussions with the agency Director, I was commissioned to come up with an early proof of concept for a new website idea for Wimbledon Brewery. It was to pitch a new idea.

I was commissioned for only the ideas and visualisation stages of the project. My part was to come up with a new UI ( user interface ).

In this post, I wanted to share both my involvement, and some of the processes to create for this project.

Gathering Research | Working With The Brief

At first, I went over the brief with my client and discussed the limitations or any important criteria that would affect the project.

After collecting together all of the information for the project, I then set about gathering some additional research and ideas. This could range anything from looking at recommended drinks companies, looking at competitor websites to seeing what we could learn. And browsing Pinterest to name a few.

What was important – was that the brand image of the company was sustained. The UI design needs to stand on its own two feet with the brand being seamlessly integrated.

Roughing Out Ideas

Once some of the initial research was collected together, I then set about putting together the low-fidelity visuals and ideas to share and discuss.

Initial Design & UI Kit Pieces

Bit by bit, I started to put together some initial designs for the various components on the page. For example boilerplates, brand accents, information cards, and the main navigation amongst other important pieces of content.

The design process and the idea generation were created modularly. Key components were examined in close detail before committing them to a polished design and compiled into pages in their entirety.

Proof Of Concept | ( POC )

After the various stages of discussion and mutual brainstorming with the client. I then started to put together some complete and polished visuals for the early proof of concept for a new website.

Other Projects – Wimbledon Brewery UI

– Website Design | The Living Centre
– UI design Projects
– Making an interactive museum
– STEM / E-learning Computer Game
– Jimmsdesign – Website Design Wimbledon
– Vector Illustration
– Creative Direction

Jimmsdesign 2023

December 1, 2021March 15, 2024

Graphic Design Project For A Party Board Game | The London Pub Crawl

I have a project I would like to share!

It’s called The London Pub Crawl.

The London Pub Crawl was a project where I was able to offer my conceptual design skills to help bring a prototype board game to the table.

You can read more about my commercial services here:- Board Game Design Services.

Or if you would like to see what this project was about, read on!

The Project | Graphic Design Project For A Party Board Game

Graphic Design Project For A Party Board Game. From the get-go, this project was a fun commission. I really enjoyed working with the client and the project offered plenty of room for ideas and scope. It was a topic that suited me and my interests.

I’m glad for the day that message came into my inbox!

My Role In The Project

My part – my role, in the project involved working closely with the client to design, illustrate and conceptualise a board game prototype – product design in effect.

The client had already established the core game mechanics and had already written the phrases for the cards and how the game should be played. In later stages of development, they found playtesters for the prototype to see how the game really played too!

( It is always good to test on people that have never played or heard of your game! ( links to external website )

I formatted the artwork and guided the creation of the prototype with the client.

Once the core artwork stages had passed, the client needed to find a proofreader and editor for the project.

I’m not a proofreader or editor. In case you were wondering! Read this post for long enough, and you will see for yourself.

Below are some of the detailed design steps for the board game creation.

Idea Generation – Concept

So, I had a general idea for the tone of the game from the outset based on early emails & conversations.

I spoke to the client and asked a bit about the target market and who it was for. I carried out some research of my own and started to come up with some very rough and ready ideas and sketches for what we could do with the game.

This helped to get the old design juices flowing!

These were then presented to the client for consideration. I and the client then decided what would work best for the project.

We came to a conclusion!

Brief drawing for project | board game design

Design, Illustration & Art Direction

Once we were both suitably even more excited about the project, I got to it. I started to draw some of the early ‘look and feel’ for the cover art, the cards typography and other elements of the game.

I wanted this project to do well for my client as I like my loyal clients to do well.

In terms of the design.

I tried to make it so that the project not only pleased the client but the design and illustration for the project to please the brief! And ultimately, pleases the customer…

And.

In turn.

ALSO pleases the client and fulfills a brief. Hopefully a win-win all around.

( Whoever said design was easy?)

Design & Prototype

Typically, my main part in board game design is in the visual design, concept, and in the creation of the ‘art’ for a game. A lot of this comes from my background in marketing and design and product creation for big retailers. (The old days! )

Generally, in the back of my head, I’m abiding by what the big retailers like to see and sell when they look at a box. This is based on years of feedback from sales pitches and remarks across a range of products in my former employment.

While I’m keeping this in mind. I am also trying to make an independent and unique game for my client.

It is a narrow line to walk.

** If you are interested in seeing how I created a prototype for another client you may find this project interesting to read.

Product photo of game — *Photography was supplied by the client

Putting the Prototype Together

Varying from brief to brief, I have, on a few projects helped to get a prototype printed for a client.

This involved formatting the artwork according to the printer or factory requirements. In other words, the dielines were either pre-existing or supplied by the factory.

I then put the artwork together according to what was asked.

This is typically an additional process for me that comes after or during designing the initial look and feel for a game – if requested.

When working on a prototype – once the core artwork is made. It can be a case where I will need to adjust the size to fit the spec of the printer/machine for the manufacturer.

It is also noting that the manufacturer or client may wish to change parts on a project such as this. This can be due to what the client requires…. and costs!

I would also suggest that concentrating money and energy into the design look, feel and messaging and getting people to want to pick up your game should be the priority.

I obsess less on where it is made or by who. My part is trying to create something that somebody remembers and thinks they would like to play.

The software was my tool for the job, like a mason has a chisel and a plumber has a wrench! Adobe Software is my toolkit, as it is with most graphic or digital designers of the modern profession.

For those that are less familiar with graphic design jargon.

How it was all done

The vector illustrations, cover work, core look and feel were predominately created in Adobe Illustrator.

Once these had been created, based on the template files downloaded/supplied, I dropped the semi-polished artwork into them in either Indesign or Adobe Illustrator. ( I didn’t create the die lines remember )

That was pretty much it for the tools. OR in other words.

Tools :-

Pencil
Paper
Video Call Software
Open Office Word
Adobe Illustrator
Adobe Indesign

I think a big part of what helped this project was the collaboration and the working relationship between myself and the client.

Without that…

The rest is just stuff!

Project Challenges | board game creation

London Pub Crawl was not without challenges – many things worth making will come with a challenge. And many journeys to creating something new will be unique.

You are creating something from nothing.

The creative path is not set and is not certain, it is not a commodity either so it can be tricky to weigh and measure.

For me, this was a very enjoyable design journey.

Graphic Design Project For A Party Board Game journey

A lot of the process is an exploration in getting something that fulfils the brief – or at least that is my approach.

From my clients’ standpoint, as is often the case, I would say a quiet challenge can be the rules. Rules often increase the more they playtest the game. And as the rules expand and increase more needs to be added.

In this case, this went from being a single sheet of paper to a small booklet because that is what the rules ultimately needed to work properly.

But I would say in the grand scheme of things – this was a good thing. Selling a game with weak rules or broken mechanics is a very bad move with board game creators.

A game where the visual design or theme disguises or distracts the player from poorly written rules is a negative experience for both the player and creator.

Not saying that my client’s rules were badly written!

They were good! But as you playtest a game it often becomes apparent that the rules need to evolve.

I have played games – or attempted to play, where the rules are just unintelligible! These ruined an otherwise excellent ‘looking’ game.

Pay attention to the rules and be prepared to offer them the TLC they deserve!

** If you don’t do this, you are begging for backlash later on. **

A negative for the board game developer in the long run.

MVP | Game & The Rules!

Don’t go with the ‘just ship it’ approach or minimum viable product on the rules. You need to write rules so that players can understand how the game works. Add a FAQ to the game rules too if you can. Although, this may not come until later editions.

The more established the rules are earlier on. The easier it is to establish how much will be involved in designing the rules and putting the content together.

Write as much as you can from the get-go before commissioning artists or designers – if you can!

*My client also asked me to add that they were thankful that I helped on the budget and managed expectations – they were very welcome!

A Complete Prototype | Graphic Design Project For A Party Board Game

Going further than just offering graphic design for party board games, I want myself and my client to create a good thing. I can say with comfort that The London Pub Crawl is something I am proud to have been a part of.

And my client should be proud in believing that they have created something that others will get laughs from and will enjoy. And not just enjoy looking at ( I hope they like looking at it too )

It’s about the whole experience.

I playtested the game – we all enjoyed it! The reaction you get from others when you hand them a polished game and watch them get all excited does give you a warm buzz.

Where will they take it?

Maybe to retail, but for now ( at the time of writing ) they are hoping to create a crowdfunding campaign ( link to their FB page!) and get it out there on Kickstarter.

I should say this too!

I’m not an ambassador for my client.

What they may or may not do is down to the client but you may wish to take a look and see what may come about in the future.

I enjoyed working on this project and I enjoyed helping to design a Kickstarter story to go along with it. I wish them all the best in the campaign!

For more information on this project, you can visit their ( website ).

If you would like me to design a cover, cards or the main artwork for a board game prototype. Feel free to get in touch.

Testimonial From Mad Dawg Games LTD – Graphic Design Project For A Party Board Game

“The creative effort put in by Jimm was above and beyond what I would have expected when I was looking for a designer.

Throughout the project, Jimm was very professional in that he was open and honest about the deliverables, the project timeline, and the budget as it developed.

Without Jimm, I wouldn’t have the amazing artwork, but I wouldn’t have had his creative contributions to the project which has had a major impact in shaping the game from its original core ideas into a conceptually and visually awesome-looking board game!”
Mad Dawg Games LTD

Project Posts | Graphic Design Project For A Party Board Game

Other Posts around board game design projects

Design Services | Graphic Design Project For A Party Board Game

External Website Links

Jimmsdesign Blog | Graphic Design Project For A Party Board Game