Creating Animated Logo Designs in HTML5 Easily


Look at this article, In this article users are shown easy ways to animated Logo design, using the power of Creative Cloud, along with Illustrator CC, Muse CC and Animate CC, which works well on all browsers and devices.

Our daily life is dominated by brands which are present all around us. Our outlook is considerably impacted by them. Resonance and humility are the qualities that differentiate some brands from others, as they appear to be more humane and dynamic in their approach.

The brands which keep on modifying themselves with time are the most successful. Rather than abandoning any brand completely, we like to see it evolving according to our changing needs.

Dynamic Branding is a term that emerged some years ago and is commonly used by specialists of branding like Moving Brands, which is a global company. As almost everyone ahs some type of digital device, considering this fact we modify our design approach and make our brands capable of evolving as per the personality they are expected to adopt.

Introduced here is the Adobe Edge Animate CC, which has the potential to stand along with the market leaders in the file of design software.

Among the many significant features of Edge Animate CC is its ability to lets the users create experiences compatible with various browsers and mobile devices. It means that any person can view your design at any time, exactly the way you desire.

Mentioned here is a project, which will introduce you to the process of designing a logo for some fictional agency, called MAD or Ming Altering Design. It can be then animated and applied to your website with the help of Muse CC by Adobe.


Just like any other project, start with scribbling. A good way to do this is to first figure out the style of the logo in your sketchbook. This will help you generate some good ideas and you can easily reach a final concept by creating a few designs.

Animation of Sketching

In this stage you need to sketch out the way various elements will be animated, as well as plan a few interactive movements. It should be done early in your project, instead of just jumping into Edge Animate CC. You need to plan so that the animation of the logo can be done just right.

Transfer to Illustrator CC

You can start working on the dots first after transferring it into Illustrator CC. in case the design is complicated then you can import the sketch in Illustrator first. For simplistic design, doing it in Illustrator directly is better.

Structure of Logo

Once the grid has been formed, you can move onto the next part where circular elements should be subtracted for creating MAD logo structure. You can start by doing it in grayscale, as it will give you an idea if your concept is properly working, before you add a colour palette.

Selecting Colour Palette

Here we are using subtle colours for aligning with five elements which form the letters of the logo. In case you are unable to decide colour palette, then Adobe Kuler can prove helpful, either as an app or website. Your palette can be synced across Illustrator CC and Kuler.

Applying Palette

Once the colours have been selected, you can start applying them to your logo while maintaining the consistency of every letter. When using Kuler, Kuler panel can be opened up in the Illustrator CC for adding colours from there directly. It is an ideal way for getting inspired from real world elements and incorporating them in your work.

Artboard for Assets

Now you should get the assets prepared for animating in Edge Animate CC. For doing this, each shape should be set up with a particular artboard, making it easier to be exported individually. It can be done by using Artboard tool. Create artboards and save every artboard separately.

Saving in Right Format

Many options are available when you create Edge Animate CC assets. Most popular options are present in Save for Web option in File menu. You can choose among GIF, PNG and JPEG, depending on which better suits your project.

SVG Advantages

Edge Animate CC is also integrated with the ability of reading XML based file format SVG, which is a prominent vector format famous due to its minimal file size. When working on a totally vector based project, it is better to save the assets in the format available in File and Save As, and choosing SVG.

Now to Edge Animate CC

It is time to start animating now. Once you open Edge Animate CC, the very first thing you are required to work on is setting the size’s stage. The size you select will depend on the requirements of your particular project.

Importing the Assets

For importing the assets in Edge, go to Import option in File menu and make a selection of assets which are already created. Ensure that the names of the assets are correct and these are placed in labelled folders. By doing this it will become easy for you to look for them in case you need them again.

Laying Foundations

As mentioned earlier, planning your animation is important before starting with the next part. Due to this, first asset you can start with can be the JPEG of final composition of logo, while keeping the opacity to minimum. This will act as guide when creating the animation’s building blocks.

Staging of Animation

When you bring first circular assets in, with the help of Import command, then they get placed right outside staging area, thus, making it easy to drop them down. Similar to Illustrator, InDesign or After Effects, pasteboard can be used for holding the graphic elements, prior to animating them.

Getting It All Synced

As first cycle has been placed and animation started, you can bring in the other elements and lay them out in sync with JPEG guide. In case your would like to resize any of the graphics which have not been sized correctly in the Illustrator CC, then you can do this in the Edge Animate, with the help of Free Transform tools.

Getting Stock to Timeline

Timeline is a platform, for making your work appear amazing, especially when you have selected Auto Keyframe 1 and Auto Transition 2 modes. Just like in Flash you have tweening option; the gaps will be filled alongside when you work. Edge Animate CC performs this task in the same way as After Effects CC, allowing you to present the graphic elements on timeline visually. If you are aware about this, then you are ahead already.

3228 3 Views Today