hi this is Bob tande welcome to Graphics Vidya science we have a plugin plugin sorry and we have first of all plugins guys just click it here and go to the Google okay and we have a Content we can go with a lot of it some okay lower if some plugin for Sigma so we can get the other some also as a plugin here right now and go to the signal so this is the excellent friends okay this is the dummy content where we create from Laura Wilson also okay this is the thing so let's take with uh some content
okay no need to take a frames also here that means we are creating here here A Auto layout frames okay so first of all let's after that we will create a frames click it uh or otherwise take a text and drag it here we can see uh the text and how many sentences you need I need two sentences okay I'll make it General sir like this we can generate the text okay so this is the long option plugin plugin come to the lower ipsum so if you need a three sentences select it and generate so like this we ca
n generate the text so select the dummy content lower mid sum okay select this one um like we have a fonts here good let's check with some parallel font and go to the list actual make it regular and or some medium and go to the the text should be the center excellent ellipse tool select the ellipse tool excellent and make it someone button the ellipse should be that 100 by 100 and it should be the 127 sorry 135 for 151 30. or select it and make it 130 by 40. okay and select this one make it um g
ood select this one and make it 35 pixels guys it looks good and select the three elements and make it some scaling select this one and make it centered okay and it's look good and make it with 10 pixels now it's looking good font yes select this one and make it um and take that text layer click it here and it's I'm just giving read more or something where I can view for download tab okay something I can give it now something I can give it like it's 12 pixels I'm just giving make it selective an
d make it Center and Center and those I would like to go with 10 pixels only just keep it 10 pixels and the both will be the common thing anything else select this one and make it sent it I didn't created any group and I can create these two things as a group okay the two object should be a single object that we call as a group okay I can keep the group in the down of the layer okay and select these three layers guys and select the three layers and what is the shortcut of Auto layer what is the
shortcut of Auto layout already I have given the shortcuts for you shift in so when you select this all the elements and make it shifting ah before that you have to give some image now here how can we create an image how can we get the image is there any plugin yes that is called unsplash control slash and make it is an easy way for quick actions so select this one and make it some models models just click in the model select the circle and click the model then automatically Type image will be i
nserted directly make it some this image it's nice or otherwise let's take with this image and it's looking good and select this one and go to the image crop select this one okay and I just inserted the image select this one and click it and if you want to scale it the size select this crop option okay and image I can select it here like this and I can scale it like this so like this I can do it so now the image has been we inserted the images and we given a text and we given a image like just d
ouble click and select the the field of layer and select the text of the layer make it some white this is good so select this all the things and go to auto layout and if you write it down shift a right that means okay shift a is the auto layer option okay so sir otherwise select this one right click make it add Auto layout so it has been Auto layout has been generated and go to the first of all the auto layout should be the center alignment and click it here make it Center okay and this one will
be 21 the distance between the vertically the vertically it has been in the 21 okay and the or you can go with 15 the size and I can give the 50th the size the layout size okay the frame size and I can give the frame size here the like a fill option like this do you understand again I can explain so come backward Ctrl Z Ctrl Z Ctrl Z conversion so this is the option so this is the option what we created guys the image the text and the button so select this one and go to the frame we have create
d and select the frame and this is the vertical between the lines the gap between the lines of the vertically and this is the horizontal padding and vertical padding so I'm just giving horizontal padding 15 to 20 or 15 to 20. so now you can see the frame so I have to give the color of the frame so again if you click it here you can see the frame color no so what happened here so I can give the select the frame and go to the take and fill option and make it some point now which looks good or you
can go for 20 also like 18 it is some more bigger like 20 with 20. the frame which looks good is there any option so select this one and make it here we have the variance select this one so we have created a auto layout guys this is the auto layer we have created but we didn't create it as a component now we didn't created any asset here okay let's take with the component how can we create a component this one select the frame and go to the create a component now automatically the assets will be
added okay this is the component we created here and when you created this component I would like to create one more variant one more variant mean the same component should be duplicated and come to the properties I am just taking the variant option okay so the variant has been added okay and select this the default and you can keep it share and take it one more duplicate alter drag so this is the variant two and this is the default so and I can so I just placed it here like this so select this
one guys frame it I would like to increase this component so I would like to increase the variant what the variant we have taken this variant I would like to increase some or bigger just please enlarge the area somewhere bigger and change the text font size like it's 15 or 14 just select the double click and select the rectangular box yes and selected it's 14 and give some bold so increase the image and select the frame and change the color of the red and change the text color if it is possible
and change the pattern color if it is possible like this we increased everything and text you can give it as a [Music] red just be given option that's it okay one is default one is variant two variants we have select the frame and change the property name that we call as open just we are just changing the name it says open and I would like to change the name of this default so here we have open the properties name select the frame and just open the name it's up open okay and the default which o
ne is the default this is the default you know select the default and I can change the name that is called false and I can select this one I can change the variant name it's a true okay just we rename it okay so in the open it is a true in the open it is a false now select the frame now we can go with prototype go to the select option go to interactions on click while forwarding none to change to open okay and go to the smart animate I'm just giving sum of 500 MS the smoothness okay select this
one now we just given an interaction here now select the frame take a frame here see here now we are working as completely a components only the component we created here the two components okay the one from the in one frame we created two components two variants one is default and one is uh some more variant like true or one one where it will be the false okay and two components we created now we are just taking a duplicate of this one variant and we just come to the design mode and just okay w
hat happened here you just duplicated this alter drag it and just you duplicate it one frame here okay and select this one and make it open the variant we created so this is the variant we created from here so select this one now you can place it into the frame Okay so sorry one second so delete this one so what we are working we are working completely the auto layout so you know first of all take a duplicate friends and after that just make it a frame here okay and select this one and make it r
ight click go to the auto layout of this Frame now select this Frame and place it here so automatically what the variant we have that will be open into the auto layout frame so now select this one and increase the frame or select this Frame and change the color of the frame the background it's not coming now so delete one second since it has been missed one second delete the frame so take the frame guys okay and make it auto layout select it and go to the right click make it auto layout and make
it Center okay make it Center when you take this one as a duplicate frame okay it is into the white only know the citizen to the white and select it and make it into the inside of the area it is into the center so select this one and make it some color and select this one make it white our colors are there no okay good so if you select this one also you can take it as a frame okay good but select this one and make it some a different color change yes we can take it this one for the variation ch
anges so select this Frame and make it open okay I'm just increasing this Frame increase the frame here like this and make it Ctrl D for duplication okay and select this one and make it how much does the frame select this Frame and make it how much the distance we have it's almost the between the Gap horizontal gap between the items will be 100 make it 30. okay and select this one okay and double click select this one and go to the unsplash plugin select the image and make it some models and sel
ect the image and click it share okay and select this one make it click it here and go to the image like this and I can increase the size like this and I have done the mistake guys here how many frames we have so many frames we have we have to keep it the same name only same name only okay don't give the other names this is completely the auto layout options for with prototype with horror animations is the good subject guys okay and if you click it and go to the unsplash control slash and go to
the models we have different models click it and and I can click it here like this so I can select this one and click on the image and I can place it here and I can decrease the size of the image okay and go to here and select this one go to the image click it um so select this one and make it modern just select this one and make it image click it share and make it some decrease the size and you can increase the size here and place it in it out guys so now select this one and if you open see it'
s nice now go to the frame click it the Prototype it's loading guys go to the however all right so this is the however animation we can use for corrosions okay we can use for the corrosions this is the animation we have done very perfectly sir this is good sir it should be some blur I need some blur of this part okay then what happened select this one click it the frame go to the effects I'm just giving the completely the effects for uh the frame come to here and make it layer blur now you can t
ake it the Prototype guys now it is applying completely select this one and make it remove this one select this one and make it effect it should be the layer blood not flame sorry you have to apply for this layers only the layer blur now you can check it and let's stick with this one yes it's applying all the things so no need to apply the layered Bloods one is the action already applied no so that's why so that's why it's saying select this one let's remove the labeler select it and make it imp
ortant how smoothness it is the concept guys okay and please practice the horror animation okay and tomorrow will go with the drop down menu of the Prototype also the linking of pro type also will check it and we'll work on it so okay sure and select this one this is the main concept guys this is the main layer and here we worked with component also we worked with component and we worked with variants the variance what we have the variance we created that variant okay and we duplicated that vari
ant select this one and make it and go to the this same component duplicating that's it but in this one Auto load frame we created a two variants one is default and one is some open yeah open and false that ruins also so when it's click taking this one and click it here and going this one how the smooth animation we got it here see how the smoother animation the same the Java the jQuery animation how it looks see the smooth animation we created here this is a good animation concept guys the hove
r animation see the mouse pointer is moving and again we are leaving the mouse pointer if you work this one it's take a lot of time with manually so that's why we use with auto layouts and components and we created some variants and we used the auto layout options perfectly the central element and giving with 30 spacings and giving up between the gaps between the everything and if you take this this one also you can click it sure and we can see that 21 the the frame uh variances say select this
one see this is the variant between the vertical the gap between the 21. the left padding the top paddings and the right paddings and the left and right paddings horizontal paddings and vertical paddings the top Android they are given very perfectly okay anything else so thank you guys and please have please do the Practical have an interestingly okay thank you guys this is vamshi tande as a senior graphic and UI which designer please contact 9030-913 and 914 or please visit our institution in A
merica friends okay
Comments