You to multiple controls I'll show you how to create this custom user name and the password fields show you how to create these icons add them with the same background as as the phone as you know it does not allow you to import the PNG images okay so I'll be showing you how to create that as well and this login button is also custom it does not have the rectangle you know like it has a curve in the corner so I'll show you how to create that as well and the watermark username and the password it does not come by default it's not available you have to customize them you to create them so I'll be showing you all these customization how to get them I'll show you the resources from where I got it so I'm gonna first close this I'll just.
Cancel this first walking you through these two sites where I normally download my you know like the icons that I need for my form so this is material dot IO you just need to click on the icon like this and then you can select format you want to download SVG or PNG similarly if you come here this icon Icom from here you can download all this icons you can search from here what sort of I can't see you need so let's get started I'm just closing this for now before beginning normally I collect all the requirements from the user quickly Google you know like if there are related interfaces that I can you know like replicate the color similar color and so on or similar layout so that you don't have to you know I put too much time to think about it depends.
On how much time you have and then I sketch up something in the paper so that you know like I know the limitations which are there within you know like Excel user form and I collect the materials like the icons for example and then keeping in mind you know the imitation and the time I have I you know like proceed so this is all the icons and background images that I've downloaded you can you can download it I'll leave a link in the video description you can feel free to download them for yourself the key that I was using here for for the password field is this for example this or this so what I did was I imported that to my powerpoint so in the PowerPoint I added.
For example I just created the blanks you know like a slide edit something like this I added the form color fill shape so something like this whatever is your form color you can you can assign the RGB color to your form so for example if you have to do that you can go and put in the exact color that you need for example you go here and you can specify 1 1 779 for example like this and then you'll have that so once you have whatever your form color is you can you can just drag you know those PNG images that you download it from the web site and leave them like this normally what I do I create a very small icon.
Want from you know like filling the shape again you can put the white color whatever color suits your interface you can add that once you're done with that for example you can you can add attacks from here itself then once you have that you color them as far your requirement it's better to keep the phone consistent for now I'm in my user form I'm using gelix gelix font and for the welcome back this part is gelix and this is our like the normal font stuff so I think that's all about the part how to you know like customize your icons so it has the same layout in the background as your form okay so now let's start creating the form I'll just try to recreate this form.
Exactly how from the beginning so that you have a better idea of how you know like I reached here first quickly looking at it once the form is loaded you can see like there is no close button nothing it comes up full screen and once you come here you can see the icon once you click here on the user name you know like you can put in the username for example for Pamai 20/20 once you come here you can put in the password and then the password is not shown you can see that password are all Asterix like it looks very professional and once you're here you can click Sign In once you cancel it closes the application entirely okay so that's what we're trying to do and the other thing I.
Want to say it's like once you click on sign in says if you have missed out any of these fields it will tell you to to fill in the username and password this is better in a sense that instead of popping out of message box that the user had to click again I think it's better to give a feedback here directly okay you you forgot to put in the password so we'll write a small code to add this sort of validation as well you're like totally new go to the Developer tab Visual Basic insert user phone here initially at first you can just leave it small user form like this slowly fine once you're here you'll see this toolbox so the toolbox will come from view and then you see this tool box when.
You click this you'll see this tool box here we need to text box so that are for taking the field names like the username and the password okay so take this username and the pass this to text box let's have the height setup now itself let's say it's 215 or you know whatever is default it's also fine you can drag and you know like make this small or big or you can size it from here the good thing about taking care of this from these properties if you don't see they'll just press f4 you'll see this yeah the good thing about setting here is like you are able to you know like take care of the small minor points um.
The text box to 132 okay and I'm gonna copy this and make two text box so once I have this I'm gonna create two labels I'm gonna make a copy of this as well again and once I have these labels I'll this right here is use your name and this will be password what I did was I place this on top of this like this okay like this do you have to visualize this in your mind how it's gonna appear.
Posts Related:
To the users basically what I did was I put it like this but then at the same time I made this text box there is no background for this the bag style is - Make Automate
Transparent and then there is no border border stylistic cell style border style none once we have this you can see like the dearest like the sunken effect you can take care of that by going down there then you can just leave it a flat like this so now you can't see so when you're designing maybe you can have the border style the single so you can see that there is your text box okay just to load this user phone press f5 and then you'll be able to see your user form is there yeah the other thing that we need here is if you just quickly toggle back.To this one now we need this a bigger label where we say welcome back and then there's another label down here we'll have to add these two icons okay so going back and then the sign-in button to add the sign-in button and these two icons for username and or we can use the image control this for all these controls you in order to add them to the user form you just need to click on the whatever you whatever controls you need for example let's say you want to add image you click one time just leave it anywhere within the user phone you can draw them bigger smaller like this for now I'm just going to leave it like this okay now I'm gonna add image to this I'm going to the picture and then I'm going to click on browse so this can be dynamically set as.
Well you can dynamically use the code to do that as well which also you in a moment for now we'll bring in this user user two icon which was created earlier and as you can see now it has border style single so said this to none so that there is no border and placing your cursor in the extreme corner like this once you see this cursor changes you double click on it like this so he recited to you know like really small once you have that you said it you know like you can even make it even smaller than this so that is up to you okay so once you have that will do the similar.
Thing here for the password icon this is a password icon I'll remove the border and then I'll bring this up here okay and once we have this I'm gonna just leave this part a little bit now and then we'll add the login button so do the same thing like we did for icons gonna bring my sign-in button like this okay so now it's not looking that create because we still have the background we'll have to take care of the background in just a moment and let's.
Add one more at the top here which will say welcome back and then you can take care of the font the size and everything so I use gelix for this so you could be bald regular can make it bigger okay now we have that once we have everything figured out we'll add will will add something else so now this text box will try to hide it attaboy it's gonna come in the front like this and then once we have all this figure out we'll add like the outer you know.
Manually
Like the custom borders this like this something like this the one that you see here we're gonna add that now and then so first let me add this label so this level is gonna be like the actual text box which would look like this you can just get rid of that label for it in this picture of that find them here as well or the text look for the tags or or the caption something like that oh here so if whatever you right here is gonna appear here I'm gonna just remove that for now and I'm gonna add the border for this one um the color.Will be something like this which is not so visible and then I'm gonna do the same thing here I'm gonna put it here like this once you have this you can send them back so right click select right click and then you can send them backwards so as you can see you'll have to do this multiple times okay I think that's all so once you have this you can take care of this text box you can take our remove the border no you cannot see but there is a text box so once you're done with this I think what there's one more label just take.
Care of we'll see if the user does not you know feeling body boxes will say or please input username and a password and then I'm gonna see the font color for this is gonna be red something like this maybe the brighter red because our background is gonna be just gonna leave it like that for now okay so once you're done with all this you can drag this to.
On top of the text box and then you can still take care of this and then maybe so if you are not able to you know I place them you know like where you want just use the top this one or left so if you put more of this let's say we make this 99 it's gonna look like that if you make this a 79 it'll go back or you can just align them using just right click on it align align to left you can do that as well okay for now I'm just doing that.
