Dynamic 3D sphere in UI / Design Tutorial / Liquid

hi everyone so we had to make a dynamic sphere for one of our projects maybe some people would say that it takes away too much effort at the development stage so why bother wasting time actually we frequently hear these sorts of comments about how the poor developers will struggle to make this or that effect this challenge has never daunted us and if anything it adds great variety to the sort of routine work so many people are stuck with because they lack creativity making this effect required some prep work which we'll talk about later on we'll unpack all the details of the ui stage using blender in after effects so let's do this i'm adding an artboard of an iphone 11 pro x now i'm marking the primary screen elements the meter scale and the meter reading put simply this screen displays the level of the user's security based on in-application tests and surveys there are lots of varieties of tests that take into account how you use your smartphone which functions are turned on or off whether you download files from the web whether or not you can recognize phishing mailing lists and other details these tests provide the foundation for gathering stats to calculate your safe score i'm placing additional functional elements the second half of the screen will have the changing graphic score now i'm adding points at equal distances to achieve a better balanced graphic and adjusting line width i'm adding a timeline below placing the tab bar even lower down ux is all set based on the client's brief and our own research i've decided on a dark main theme for the application it makes the graphic elements really pop and the information is easy to read the primary font is poppins it's available at the google fonts library now i'm adjusting the colors and fonts let's add a gradient to the timeline to soften how it disappears beyond the screen boundary now i'll fill in the space above the graphic and make a light gradient that flows upward i'll show one of these active states of the ui when a specific month is selected and the value above corresponds with the active state let's shift over to the tab bar and mark it into five sections where the icons will be displayed next i'm drawing the icons in a chord with concepts i prepped beforehand [Music] in addition i always recheck myself with 100 zoom [Applause] [Music] [Music] [Music] [Music] [Music] [Music] [Music] with the first icon i'm showing the active state as a glow with the layer blur [Music] effect [Music] i'm returning to the start icon when you tap it you'll transition to the leader list while simultaneously polishing up various details initially we presented the client with a more classical variant of transitioning to the other screen but it was rejected the client was inspired by our creative work and especially the liquid swipe so they wanted that specific effect in their own application by the way we have an entire design course dedicated to that effect i'm straightening out all the icons and placing them at the right height from the bottom edge of the screen i'm checking that everything lines up and replacing the star icon with a more appropriate cube the client requested that the safe me score counter be replaced with particles now it's time to use the 3d tool blender i'm opening blender and with shift a we get the uv sphere i adjust the number of polygons the source of the particles is going to be the points of intersection on the sphere by adjusting the number and location i can control the animation let's increase the number of segments to 64. that way there will be enough space between the lines which are made from little particles let's also increase the number of rings to 200 so we get a more compact structure now i'm adding two emitters the first is responsible for the beginning of the animation and the second for its conclusion i'm setting the animation duration to 60 frames now i'm adjusting the segments so that they form a perfect loop of cyclical animations so i'll set the segment's lifetime to equal the animation duration of 60 frames for the animations beginning i set start on the negative 60 frame and the end at zero frame [Music] [Music] let's check and see the cyclical animation of segments they're all flying off somewhere but we need them to scatter in different directions i'm opening the field weights tab and putting gravity at zero for every emitter now the particles are dispersing from the emitter into multiple directions but they're still too random we want them to have an attractive and sequential pattern of appearance so let's go into the emission tab and in the source section let's replace the source to vertices and remove the check mark next to random order let's see what we got the standard spheres can be replaced with more complicated objects i'm making a straightforward icosphere by pressing shift a by pressing g i'm dragging it from the center of the sphere and making it smaller with the s key i'm hiding the object from the final render in each emitter in the render tab i set render as to object and select from the object section my ico icosphere that we made earlier now the emitter will take this object as the basis for the segments and i'll adjust it more later right now i really want to adjust the particle movement since they're just flying straight from the sphere with shift a i add to the force field turbulence and set flow to 1. in the emitter settings in the velocity section i put the initial speed to 0.5 now let's check the particles now have a wave like motion i'm enlarging the particle size to 14 000. it's time to set up the scene and place the camera in the corner from which i'll be rendering the animation in the view tab i open the align section and select align active camera to view i'm setting the frame size to 1024 by 1024 pixels now i make sure that at any moment during the animation all the particles are within the frame i'm going to make one more sphere that's made of glass with the number of rings at 64. by pressing the right mouse button on the sphere i select shade smooth so that the sphere will be smooth during rendering to prevent the emitter from blocking the glass sphere during rendering we have to open the render tab and remove the show emitter check mark let's shift over to adjusting our [Music] materials i find icosphere in the objects list which we use as our particle in the material tab i click new so that we can add material to the particles when you add it a standard material appears which i delete [Music] i'm pressing shift a adding particle info and two math nodes i'm duplicating math by pressing shift d the next material color ramp node is responsible for the particle color now emission and transparent bsdf which will make the particles become transparent and finally mix shader node which will mix glow and transparency let's set up the connection between the [Music] nodes [Music] the second math node value controls at which moment the particles will become transparent if we set the value at 1.1 then we can see in the render that the particles become transparent at the end of the wave and don't just disappear [Music] we can put several colors into color ramp and the particles will change color throughout the animation let's set the glow strength in the emission node to 10. i'm applying the glass material for our sphere and emitter after selecting it from the list of objects [Music] now i add standard material to it and in settings let's put transmission to 1 reduce roughness to approximately 0.14 and transmission roughness to 0.17 we don't see any changes in the viewpoint window since emitter is hidden in render i press render image or the f12 key let's see we get almost the exact image but the sphere is still too noisy this can be fixed by increasing the sample's amount to one thousand [Music] this is much better quality even though the render is taking a while for just one frame next i'll adjust the display for the animation and we'll use png without compression blender has one weird bug on the animation's final frame it doesn't display our particles that's why i'm adding one extra frame now i'm increasing the samples to 1500 and turning on the open image denoise mode to reduce noise let's press render animation the animation's all set and we can drag the file with the animation to after effects it'll immediately load as a sequence now we just have to add the color i'm adding the particle glow effect now also adding the particle sphere to the design thank you to give our sphere the right color let's select the color blending mode and apply the screen blending mode for the entire layer i'm approximating the size and evening out a few other elements let's add some glow to these particles i'm duplicating the layer and applying the layer blur effect the transparency is set to 50 our design is ready now with the aeux plug-in i'm transferring the design to after effects i make the background color solid so the blending mode works properly now we'll add the animation composition we made earlier in applying the screen blending mode final check the animation looks awesome [Music] this animation went on to development our developers tried a few options for how to implement it but almost all the versions hit performance snags on older devices in the end the best option turned out to be developing a png sequence we ended up with about 60 images for 24 frames per second to minimize the application size we opted out of adding separate sequences for every color of the animation we shifted the hue of the original image set to the necessary values that's how by using just one set of sequences we got all the colors we needed for our animation good luck working on sweet projects and until next time [Music] uh [Music] you

Channel: Cuberto Design

Views: 73,863

Keywords: Liquid, design, cuberto, web design, learn, ui ux, figma, after affect, ux design, ui design, graphic design, ui ux design, figma tutorial, ui tutorial, ui animation, ux, ui design tutorial for beginners, cuberto design, digital design, digital, course, after effects, after effects уроки, product design, after effects animation, liquid swipe after effects, uxd, liquid, ui design tutorial, figma уроки, figma web design, figma plugins

Id: TsGMAjyGeqk

Length: 24min 56sec (1496 seconds)

Published: Thu Apr 08 2021