Adobe XD Tutorials

Building an Awesome Landing Page Illustration with “Images 360” & Adobe XD

okay everyone Gary Simon of course Tatro so today we have an exciting one because we're gonna be creating a landing page in Adobe XD using a product called

images 360 from yellow images calm so let me show you what I'm talking about these are PNG images that are spinnable objects with perfect transparency so let's say for instance we want an asset

that's not based on food or something like that well we have 500 items actually came up for this and look at all of these results now what's really cool is some of these are low poly

versions of food like look at this hamburger and some are completely realistic looking when you click on it it will automatically load up all the different angles and you can choose

which angle you want based on your given project which could be like poster design print design eye or even for landing pages and then you just choose download if you download the items

without subscription there will be a watermark over this but if you want to join and get access to watermark free assets then use my promo code below and get a 50% discount on any type of

subscription also if you cannot find an item you need yellow images can produce it for you they also have object mock-ups which provide you with JP G's or PSD s for Photoshop which you can add

your own designs and also a creative store that has a massive amount of various graphic assets for different purposes and different projects also real quick another thing that you can

use is if you're using Photoshop you can download the free Photoshop add-on so that you can search through and also add in your images that way so this is what we're gonna be creating I'm going to be

creating I I'm not gonna show you right now so don't skip forward don't fast-forward through the video because I'm gonna create a really cool landing page based on using these assets alright

so let's go ahead and get started alright so I'm here in Adobe experience design which is what I'm going to use to create this eye little landing page section and I just have a web 1920

preset open obviously there's nothing on it so I was thinking just having some sort of isometric 3d buildings landscape sort of thing happening here I don't really know what for what purpose but

we'll find out shortly all right so I Here I am at yellow images we want to click on the images 360 in order to get access to these and I think they're just sorting

these based on recently added we have two thousand four hundred fifty six items quite a bit I'm just gonna type in building so let's see what we have here tons of buildings we have three pages of

buildings very very cool so I'm just going to pick one maybe this one it's as typical standard looking building and and now it's building out all of the the PNG images so that we can actually

rotate it around as if it were a 3d object very very cool so I think I like this one and it notice it has a camera angle of v2 in H 15 alright so a lot of these other buildings in order to get

them in the correct alignment with each other you can follow this sort of format just to make things consistent alright so at this point you could have to choose a transparent PNG or a JPEG I'm

just gonna do a transparent PNG here and then it's gonna save it to your computer and then I'll just drag it into the composition in Adobe XD alright so I'm gonna drag that over here and you're

gonna find that it is quite massive so if you hold alt and then your scroll wheel you can just get this over here hit shift and alt scale it down to a more reasonable size alright and we'll

make that bigger actually and I'll say something right around here we can always just die adjust these afterwards in terms of this scale and all that stuff so let's add another building

maybe one or two more so I'm gonna go back here to my editor or my browser if I can find it there we go and wide another one um let's see something that will fit in right with it

um how about this corner sort of building alright I think this is actually in the correct orientation as it is I yeah right there seems to be good if there if it's not we

can always just adjust it I think this is how I do want it to be it'll be like I've facing directly at us and so that other building will be right here so I'm going

to download that and get that in there as well nice it will fit perfectly obviously it's a little bit too big so we can just scale it down further it's kind of like half the height there we go

here's like a tiny section in between awesome I think I'll add one more and I saw a bank that was right next to it so right here we'll take this I think this is a good angle right here yeah now

obviously in this case we need to adjust the layer order so I'll right-click arrange send to back nice now it needs to be a little bit bigger let's see here it's get this positioned all right cool

I like that awesome awesome awesome all right so now let's try a few more assets here I think I want there to be a street here so I'm gonna design a street with my pen tool I trust me they're not gonna

have a street that's gonna fit exactly around these buildings so we're gonna use the dreaded pen tool to try to create a street that just kind of wraps around this and so it'll be important

that we we follow I you know the flow of the buildings here as best we can all right so we have kind of a little strange issue we have this this tiny little road section that's that's coming

there I think we're gonna move some things in just real quickly and I do actually like that so what we'll do is right-click we're going to arrange and send I to back and then because it was

overlapping right there and then we'll go ahead and give us a solid fill of a very light gray we don't really want it to be you know a focal you know something that we're gonna focus on too

much I just realized after screwing out this needs to come in just a bit and this will come in and then this will come in as well all

right that that's fine I'm not going to be too anal about this so I let's put a let's put a car here I think maybe we'll have somebody robbing the bank I if they have the assets that

allow us to do that all right maybe this would be like a security website of some sort all right so let's go back here and let's type in um cop car I don't know see if we get

something oh look at that we can use we can use these these people for sure there we go police car there we go and I think this is already in the orientation that we

would want it yeah it's pretty much going to work we'll have to adjust the road so that it's positioned properly there we go there we go just have to drag that out

slightly now let's put a car that like I don't know it's like a robbers car or something that um is being like ascertained by by the police car or like we'll put it right here all right so

well we'll come back to our browser we'll get we could just use this car here this is the right orientation so I'm just gonna hit download oh this is fun look it's already coming together oh

it's like a toy car it's pulling over no we should probably make it around the same size of course we'll make it slightly smaller sweet I think that'll work let's uh let's add a couple other

things I yeah the cop obviously or the police officer whatever you want to call them let's see let's do let's do this one now this one wait what is that oh it's an animated one that's pretty cool

well I didn't want that one that's not gonna work in Adobe XD so we're gonna wait for this one the low and we'll put them on in the correct position maybe like facing this way yeah

like that yes I got that's so funny you can just screw around with the the size of these people and make it look really different really crazy I maybe I will do that and then we'll let's see if they

have like a money or cash or something or a safe for something safe there we go we got us safe your luck in out here um let's let it for for it to load for a second I think that's the angle let

download alright we can like I don't know put it over here you know what let's just put it on top let's put it on top of the car this dudes like a bodybuilder inside and he was able to

get the safe on top there we go alright I like that let's finish this off I weakened by adding some like street lamps or not like a maybe red lights or something let's try that real quick

let's get that into size position still way too large maybe something like here's a more realistic we'll duplicate it with ctrl D I don't know try to put one over there does that make sense yeah

we'll do it anyhow duplicate it we'll put one right there this is too fun we're building a city basically we'll put one right here yeah and then we'll put my arm right there look at that

awesome I'm going to do one final thing just because this is so much fun I'm going to I we're gonna get a another light in here maybe like that one right there for the kind of like an

intersection area that we have going okay that's fine alright I think it's it's it's complex enough people understand exactly what's happening okay so that's I that's our

little illustration now let's make kind of I within Adobe XD will make the the building and different layers of what's happening maybe we'll create three different groups and we'll make

them fall in through Adobe's new auto animate feature alright so what I will do is well before we do that though let's go ahead and we're gonna just add a real quick headline in sub-headline

for this so I'll type in so now I if we want these to animate and fall in let's go ahead and create will do three different groups I guess so first we'll have our buildings all right

so here's building one two and three so if we get out our layers and I hit ctrl G and I type in building will have that all right so how about the next one what else would we do actually for now

we'll just hide this hide all right cool and then also we'll take let's see here all the lamp things for for now and of course we'll have to reposition things after this this is just going to be

Street stuff we can hide this and now we're just left with the other three or four rather group that will call this people awesome so people should be at the top and let's say let's let's bring

these two back and there we go awesome so they're in the right order and the right layer stacks and all that I just one more final adjustment on this we're gonna take all three of them and just

put a pasady let's see we'll do well push it up so because it's going to come from the top and we'll say the opacity is zero now we're gonna duplicate it because

this is where it's gonna start at right so the first thing that will come in I guess will be the street lamps the street stuff so we'll go in here we have street stuff as I so

eloquently put 100 percent move it down I'd say yeah right around there all right so that's the first change that we're gonna make and then we're gonna duplicate this and then we will get our

layers back out here next part will be the building's I mean it could be the people but I'm just choosing to make it the building's 100% push it here that's good then what we'll do duplicate this

again and then the final element which is up here somewhere is people okay and then we'll bring this back here only we don't want to hide it we're gonna take it up there we go and then down awesome

awesome we're ready all right we're ready to prototype this so this is what you should be left with now I'm and we go to prototype we're going to click on this

we're gonna drag this artboard to the second artboard the trigger is gonna be a time trigger and we'll have like a let's see a point seven second delay before the starts so initially you're

just going to see the blank area for 0.7 seconds and then just going to be Auto animate for the action type and then for the duration let's try 0.8 seconds and we'll leave it

at ease out let's just try that and give it a shot I actually I like I like that awesome so now let's decide go ahead we'll do the same thing here it's going to

remember the previous settings so we just do this one more time oh one thing we have to adjust is I don't want to delay on this part so these have to be a zero delay

okay there we go and then same thing with this as well play look at that and of course we could so easily I replicate this with HTML CSS I make this just fall in naturally exactly as you see it in

this prototype version so let's check that out one more time how awesome alright so hopefully you enjoyed that please check out yellow images calm in the promo link here in the description

in YouTube and I will see you in a new video very shortly alright good bye [Music] [Music]

http://yellowimages.com — Use my promo “DSGNCRS” to get a 50% discount on PNG Images 360!

— Today, I’m going to show you how easy it is to create an awesome landing page illustration using a service called Images 360. They provide you with thousands of assets that allow you to rotate them in 3D space to get the perfect angle based on your needs.

If you’re using Photoshop, they provide you with a free plugin so that you can use the system without leaving the app.

They also offer a Creative Store which has thousands of assets:
https://yellowimages.com/all/store/

And Object Mockups, which provides you with thousands of items that you can apply your designs to:
https://yellowimages.com/all/objects/

Whether you’re into web design, print design or graphic design in general, YellowImages is a great resource.

Check them out!

Note: While this is a sponsored post, I do not accept sponsorships from companies that I don’t believe in. I’m very impressed with YellowImages as a great resource for designers!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!