How to make online dynamic design —— How to make a mobile phone h5 dynamic page with ppt thinking

How to use AE as UI to design 3D dynamic effect 1?

Design process?

Sequela?

1. Create a transition effect in the work.

2. Create a display effect in another composition.

3. export? To modify (a picture or photograph) with a computer.

4. Optimize GIF images

Background picture

A perspective effect template?

First, capital construction?

Create a transition effect composition?

Open AE and synthesize >; New composition (Cmd+N), size 640* 1 136, frame number 29, lasting for 6s.

Import the background image, throw the image into the composition 1, and resize the background image to fit the canvas.

Create 3 blue boxes (using the shape layer) that will fall from the top of the screen to the bottom of the screen with widths of 2 13, 2 14 and 2 13px. The width of the box above the three boxes is 640px. Enter the corresponding text.

Draw a hollow cloud circle and 6 snowflakes with pen and ink.

Step five?

Save it, and you can do some simple dynamic effects, even if you don't. Because the ui is not very dynamic. You often play mobile phones and computers, too. Look at the dynamic effects on web pages and mobile phones, which are very basic things. You can learn more than 90% dynamic effects in three days at most, but it may take more time to become proficient.

How to use AE to make simple UI dynamic effects on Dribbble and Behance? You may have seen many UI works that use Gif to express design concepts. Many people want to know how to make it and how to express their ideas better and more efficiently. Obviously, dynamic presentation is more vivid than static presentation. In this article, I will teach you how to "dynamically" design your own works.

Dynamic GIF displays UI works, which has the following advantages:

1. shows the actual workflow.

2. Use transitions to show the effect of applying different states.

3. It is convenient for network sharing.

tool

after effects SCS 6 orcc

PhotoshopCS6orCC

design cycle

consequence

1. Create a transition effect in the work.

2. Create a display effect in another composition.

export

To modify (a picture or photograph) with a computer.

4. Optimize GIF images

source

A background map of London

A mobile phone perspective effect template

I. Capital construction

Create a transition effect composition

Step 1

Open AE and synthesize >; New composition (Cmd+N), size 640* 1 136, frame number 29, lasting for 6s.

Step two.

Import the London background image, throw the image into the composition 1, and resize the background image to fit the canvas.

Third step

Create 3 blue boxes (using the shape layer) that will fall from the top of the screen to the bottom of the screen with widths of 2 13, 2 14 and 2 13px. The width of the box above the three boxes is 640px. Enter the corresponding text.

Fourth step

Draw a hollow cloud circle and 6 snowflakes with pen and ink (the outline is slightly watery, please forgive me)

Step five

Save it.

Display synthesis

Step 1

Writing composition 2

Size 1280x720 frame number 29, time 6s.

Step two. Import and resize the iPhone background.

Third step

Drag composition 1 into composition 2, so that composition 2 should look like this: (P.S. I added a background layer).

Step four.

Select the composition 1, the effect >; Twist > Corner positioning, so that the four corners of the compound 1 are aligned with the four corners of the screen in the template.

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Second, the production of dynamic effects.

Next, let's break down the animation:

1.3 The blue box becomes longer and drops at different times.

2. The transparent frame moves upward from the bottom, and the width remains unchanged.

3.4 After the box arrives at its destination, words begin to appear. The text in the blue box is enlarged+opaque to transparent, and the text in the transparent box is opaque to transparent.

4. Cloud icon with snowflakes.

5. Snowflakes appear.

In the shape layer, the controllable attributes are scale, position, opacity, stroke, etc. In the dynamic effect of this paper, we make full use of the changes of these attributes with time to create animation effects.

Treatment process

First of all, I recommend two script plug-ins Easeandwizz and RepostionAnchorPoint.

One is convenient for making motion curves, and the other is convenient for setting anchor position.

Three blue boxes

Open composite 1, select three blue boxes and set them as follows.

Remarks:

1. The leftmost and rightmost blue box anchors are located at the top (set by the anchor plug-in).

2. From 0- 100%

3. Using Easeandwizz to select key frames can easily adjust the motion curve.

Transparent frame

The movement of the transparent frame begins to move most of the displacement at a fast speed, then slows down and slowly moves to the original position. These settings are as follows

Note: The effect of setting Quad+out in EaseandWizz is smoother.

Bottom text

Remarks:

1. Three blue boxes. When the blue box touches the bottom, the text pops up quickly, and the opacity changes from 0->; 100%, with a ratio of 0->; 100%

2. The text in the transparent frame moves with the transparent frame (refer to the transparent frame for position setting), but the text on the left is in front and the text on the right is after -4 degrees. Please pay attention to the settings in the timeline.

cloud cluster

When the text of the transparent box begins to appear, a cloud will appear. First, the transparency ranges from 0- 100%.

The proportion is 60% at first, and when the transparency reaches 100%, it will change from 60%->; 100%

Xue Huadian

When the cloud effect was completed, Xue Huadian began to appear one by one.

Remarks:

1. Note that the dot will randomly move to the right, and then bounce back, and pay attention to the adjustment of the moving order.

2. Quad+Out is also recommended this time.

3. Attention points appear one by one, so the transparency changes should be set in turn on the time axis.

Snowflake text effect

Here, the mask movement is used to create an effect, that is, the snow text gradually appears. Note that the opacity of the snow scene will also change (the opacity change of the mask is unnecessary, please don't imitate it).

Effect:

The original author's practice:

Effect:

Results:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Third, export.

Methods 1:AE+PS.

1. After saving, synthesize in AE >: add to the rendering queue.

After setting, point rendering.

2. Open the rendered. Mov (file >; Import > video frame to layer)

3.Cmd+Shift+S or file >；; Save as Network Available Format

Remarks:

1. Always loop option selection

2. You can set the image size.

3. Pay attention to choose Gif format

Method 2:LiceCap

If you don't want to use PS, you can adjust the canvas size in AE first, and then use LiceCap, a small software that records the screen as Gif, which is very convenient and can be called the best GIF recording software. (There is a multi-platform version)

Recording effect:

CocoaChina is the world's largest Chinese community for apple development. The official WeChat regularly pushes various wonderful R&D tutorial resources and tools every day, introducing the experience of app promotion and marketing, the latest recruitment outsourcing information of enterprises, the latest trends and training information of Cocos2d engine and CocosStudio development kit. Pay attention to WeChat and get to know the latest product and service trends for the first time. Wechat is in hand, I have it all over the world!

How to make a mobile phone h5 dynamic page with ppt thinking HTML5 page making tools can be roughly divided into two categories: website tools based on HTML5 and mobile APP tools (of course, there are some others, such as those based on WeChat official account, which will be introduced below).

Let me talk about my personal feelings first.

1. Tool website based on HTML5: powerful, with strong operability of a single page, which can complete various page interaction effects; However, sometimes the operation "fails", such as uploading pictures, clicking Save, generating and so on. You know why ~

2. Mobile phone tool APP: Compared with the tool website, it is relatively smooth, and a large number of templates are applied, making it simple and fast; However, sticking to the existing templates, a single page won't have much room for operation, so the interactive effect of DIY can't be realized.

Let's talk about every used tool.

HTML5-based tool website:

Rabbit exhibition

Advantages: The DIY degree of the page is high, the dynamic effect is simple and convenient to realize, and a more willful H5 page can be made.

Disadvantages: the screen interface size cannot be adjusted, and the uploaded map will be out of proportion; After generation, there will be various sizes of stretching on the screen page.

(This picture is intended to show that the size of the uploaded picture is the default size of the website itself, not the size of the picture itself, which is not conducive to user adjustment. )

Can be edited in detail, and the single page has strong operability. There are two editing modes: novice (with template) and advanced (without template). The effect of turning pages is more than that of rabbit exhibition, and the template is more powerful.

Highly interactive periodicals

Advantages: One of the easiest tools to use, follow the prompts to add it step by step, with a total of 4 steps, and finally generate micro-magazines. Compared with other online tools, it is more stable.

Disadvantages: At present, we haven't tried to make interactive effects on a single page, and we haven't found the entrance to open the pro function.

animator

Advantages: Like the online version of flash, it is powerful and can make HTML5 animations. Suitable for people with animation foundation to make presentations.

Disadvantages: animation foundation is needed; Long response time of working interface; It seems that only twitter, Facebook, google+ and tumblr can share.

iSpring7

Shantou is a tool to convert PPT into HTML5, which is perfectly compatible with PPT and can make Html5 mobile courseware.

But at present, I can only connect to VPN and then open the website link with Safari.

Hidezo

Advantages: simple layout, fast production speed and stable broadband.

Disadvantages: the display of pictures and words on various screens is not suitable; You cannot adjust the position of text editing in the template.

Mobile tool application:

At the beginning of this page

Advantages: high template quality, high template editing efficiency, simple and quick operation, and outstanding effect and experience in the APP tool for making H5 pages.

Disadvantages: the operability of a single page is low, and only templates can be applied.

Quick invitation, quick invitation.

Advantages: easy to use, time-saving and efficient, and convenient for statistics.

Disadvantages: the page is simple, and you can only choose the inherent template to create text and add pictures.

Yi Qixiu's Mobile Scene Marketing Manager for SMEs

Advantages: the template is applied and quickly created for enterprise introduction and product recommendation. It has powerful promotion statistics and customer management functions. Well, here's a compliment.

Disadvantages: only templates can be used, and the degree of DIY is low; The accuracy of statistical data needs further confirmation. At present, there may be a phenomenon of missing data (in a small-scale test, the number of statistics is less than it should be).

Micro-posts: Create an H5 page through WeChat official account.

Advantages: Just create a page directly in the official account of mobile phone WeChat, and you can create it according to the prompts. It is brainless, convenient and fast.

abstract

The H5 page made by the tool website pays more attention to the self-defined interaction scheme of a single page, which has a high degree of DIY, takes a long time and is limited by bandwidth factors, so it affects the operation.

H5 pages made by tool APP pay more attention to efficiency. At present, templates are applied, and the DIY degree of a single page is low, and the interaction effect is limited.