Skip to content

blog 123

see it looks like a little envelope now hit escape to get out of that - white that doesn't vote hit escape to get out of that let's make sure just is aligned properly we can double click in order to get back into the pin alright that looks good for these purposes shift select both command G to group even it up with this so that looks pretty good and now let's create the password just create perfect box by no fill border is white slight curve and then let's use our pin tool and create that little loop up here so I clicked now I'm going to click here and then keep holding click keep holding click keep holding left-click drag this across so it's like an even curve and then bring it back down here to white oh yeah forgot to make this too as well - it's not perfect but you know it's the justice so so a little bit over that was good also let's create a little bit of a like a keyhole make this perfectly looks perfectly centered within this little box here and now let's shift click all of these command G to group and it looks ok but let's make it wider I just want to make sure everything was symmetrical so that's why I made it a square but make a bit wider went to right there I believe this is now centered along with this icon at least is pretty close so you can see it looks pretty good right maybe you want to make this kind of right aligned with the icon above or left in line or you just want to make it like it just as wide as that but I'm going to leave it just like this what's good to me make sure I save it and now it's time to implement some of the images so let's implement these images I've already come over to splash comm unsplash unsplash comm and I typed in food and then taking some of these images all these are you can come over to unsplash comm no spots or anything I just like their stuff free high-resolution photos do whatever you want you click to see like essentially the licensing terms of surface type deal but we're not getting into that I already have them downloaded you just click and drag and since we're in that repeat grid we're good to go so since I selected three images and we're in the repeat grid this is how it lays out so and then it repeats itself and then I'll do so for example if I were to select right here you see the cheeseburger and then the pizza next so that's how that works let me take this up a little bit so you can see that's how the repeat grid works if you're importing images it's a huge time-saver it's awesome I don't know what this is called well it looks like a bun and ribeye or something ribeye let's just bone and ribeye that's not you so everybody this is I saw everybody hit escape to get out of that let's call this pizza whoops see what I did I enter instead of escape so let's come back let's go down backspace not right here scape alright good to go and as you can see right here these circles are still blank what do we want to do we want to come over here to these three face images that I chose drag them over they did the same exact thing as before so that's me I guess this can be cindy-lou who I don't know how it's spelled in dr. Seuss the Grinch but that's how we're going to spell it down here we have Captain John Smith you know came over to America but we don't need to let me again actually so we'll just keep that as it is obviously those aren't cheeseburger sliders but you get the idea and then let's go in for the record I'm going to go in and touch these up I'm just trying to go through it a little bit faster although this is kind of a long blog just so you guys can see how it's done but before I go and upload my actual designs and I design screens to the description box plus on creative market I'm going to make sure I go touch up everything just a little bit more to make it better but let's make this background black make it black you know all zeros drop the opacity to % and as you can see it changes all of them which is nice let's change these to white white white and let's create this make these dots white as well and let's take off the border of this now since we just have the image it looks good border takes off all those all these is white but also what I want to do it looks bad in the back so let's what I've realized is you need to have a background s be the same size of the back by is that the I guess it is I'm just making sure it's exactly see the borders let me send this to back so I think it's shift command left bracket yes and you can't see the B or the biscuit because those are white and this yeah C so what we're going to do is take this burger picture just come back over here burger and we're going to drag it right in there so that looks better right but we're also going to do background blur I'm just going to blur it out I'm going to blur it out a little bit let's good % we're also going to do is create another one I guess we could have duplicated it but I'm just going to create another one on top I'm going to send to back and then bring it forward one let's make it black just to actually know let's make it this color orange we're going to implement a background blur implement the orange a little bit maybe not that much let's change this I'm just going to play with this a little bit until I find what I like
so it's better but we can also do is coming over to these two let's click on that you can make this black and also drop this opacity down to not same thing with this so we're getting there you see it kind of looks a little bit better let's go in here take off the grid so you can see it better no it's not too shabby huh what we're also we're going to do is the same thing so what we're going to really do is object no it's view layers so just like any other Adobe programs software whatever you want to call it we have layers so this rectangle these rectangles are these backgrounds so let's shift and then we're going to copy I'm going to come over to content feed I'm going to paste so I pasted it in here while we have both select we're going to send both of them all the way to the back we're going to slide it all the way to the bottom not too shabby huh so that's going to be this design for now let's go over to prototype and then make this sign-in button come over to this screen and you can change you dissolve we're going to make it slide left duration for seconds is good and then this is the result so we have this let's click on sign-in now you can slide down you can kind of go to the feed and that's the design for now that's kind of how you take your sketch your your iOS a sketch design knowing that you know bohemian sketch over there's another software program that I'm currently not using although I have used it before but that's how you take your your own design and turn it into an Adobe XD file image whatever you wish to call it and with this we're also able to do is share a link so they're able to see the prototype see them nine leaf comments to see if they like it or not you know just say what they like about it so you can just send a link to a client they can see if they like it make the comments in the actual software they don't need Adobe XD or Adobe Creative Cloud they just need an adobe account which is free from the record alright guys that's it for this blog hope you enjoyed it remember the XD file is linked down description box below as well as the other file that has the rest of the screens for this whole entire mobile application that will be linked down below to my creative market account assuming I get accepted to it and make sure you follow me on the social medias the Instagram I'm making a Drupal ended Behance account that's where I will post the free XD file so follow me over there so you can you know have access to those and I think that's it for this blog so I hope you enjoyed I hope you learned a little bit and until next time have a good one

Back to main screen