Dotnet MAUI App Icon Correct Way

hey everyone in this video we'll be learning about.net Maui app icons the correct way so we'll be using some type of app icons and we'll be changing the background color too and we'll be putting some type of spaces uh in between over here too so that our app icon will look same as like in Android and iOS so uh this tutorial is applicable for visual Studio for Windows 2 and the Mac 2. so let's get started what I'll do is like we'll just search for spaceship uh and then PNG so don't forget to add that PNG and go to the image section so here in the image section uh what we are going to do is like we can get a list of images as a PNG format so don't forget to do that okay so or will be first of all searching the image so here I have a filter uh filter named as license uh free to share and use free to modify uh like or use so we can use any type of images let us suppose we are taking this image as an app icon okay so you can see there is a black and white pattern that means it's a PNG format we can just uh save it okay so I'll just put that image to the uh like I'll just give the name and save it or download it it might be either in your Windows machine too just download that image which is a PNG format image now what we'll do is like inside the resources folder of images uh that is our app icon okay we'll just have two files in our.net Maui uh Windows project or the Mac project we'll just reveal it in the folder that means we'll just go to that specific folder where we'll just see that there are two files right so what we will actually need to do is we'll just go and search for photop.com this is a free uh online website we can use other uh editor too but it's free right now and you can use Photoshop too so the same thing goes over here so what we are actually going to use do is like we are just going to drag and drop or open the file so you can see the app icon the an app icon config.sp is there right so first of all we'll just modify this one okay so this uh this file basically is the background so you need to understand this is the background okay so what we actually need to do over here is we'll just create a new layer okay and then we'll just create a new layer and then what we are going to actually do is like print a bucket and we'll just fill it with white color okay so let let us suppose I'm just uh uh painting it to a white color I'm selecting here the layer one okay so uh like we have already painted it now here you can see if I click on Save okay it will ask me to save file and here you can see it has automatically been changed uh to Apple icon.spg as a white image okay so make a note of that and then we'll just close this project and again drag and drop another file this is actual icon Okay so what we actually need to do is like we have to put some spaces in middle so that uh the app icon comes to the middle uh of the whole uh this rectangle frame so here what I'm going to do is like we can just remove all the uh layers okay and the final one it won't allow me to create a new layer so I'll just create a new layer layer one okay and I'll just remove the existing layer and this layer one what we are going to do is the file that we have downloaded this is the app icon that I have recently downloaded right so now what we actually need to do is like uh we need to some put some spaces okay so that it uh it gets optimized so make some type of spaces so that uh the app icon comes in Mill okay so so this is how I have like uh made it so if you have lost the uh this thing then again uh like uh what you need to do is like edit free transform okay and you will just get this thing uh like a uh all the like audio you can just modify the different type of save corners from image transform from edit free transform okay so it is applicable in both um Photoshop 2 and photo P2 and now what I'm going to do is like again I'm going to click on file save okay so save changes yep so what we actually uh means now we have already uh like we overridden the uh files that we have and if you don't believe me then I'll just show it to you okay that is it so we got our app icon app icon config.spg that's it okay so now I'll just run the project and you will see the application uh displayed over here so let's wait for some time let it build so it is getting built that is like a basic.net Maui uh new project so let's wait for some time so our application has successfully built here I'll just close the project and then see how we got our app icon and now there is some spaces over here to analytics it's looking nice now what we'll just see is uh on our Android project 2 whether uh it gives us actual output on it so I have a Android uh simulator emulator too and we'll just see whether it gives us a correct output or not so here uh I'll just run the project I say I like Android uh uh simulator and here you can see our app icon has come and it looks nice right so that is it so in our next tutorial we'll be learning about the splash screen the correct way so that's all for this tutorial now thank you guys thanks for watching keep in touch for our next tutorials

Channel: Xamarin Guy

Views: 12,554

Keywords:

Id: iigquyjXlM0

Length: 5min 53sec (353 seconds)

Published: Mon Feb 27 2023