Skybox Tutorial Photoshop | Create Custom Skybox For Unity With Photoshop

Ryann McCorkell

Subscribe Here

Likes

206

Views

9,744

Create Custom Skybox For Unity With Photoshop

Transcript:

hey what’s up guys this is Ryan and today I’m gonna walk you through creating your own custom skybox in Photoshop for unity so we’ll get started I press create new time okay so the first thing you want to do is create a panorama that’s the easiest way to create a skybox and you want it to be equally rectangular which basically means that it is twice as long as it is high so in this case the width of the image I’m creating is gonna be six thousand pixels the height is going to be three thousand I’m going to be at the display resolution of 72 pixels per inch RGB color is fine and I want to be transparent it’s gonna press create and this is quite a big image so I’m gonna go down to 20 just so I can see it all and the first thing I’m gonna do is pick a color for the sky and I think it’ll be in the yellow somewhere and so Kay and fill the back it’s okay so let’s go look here this is how 40 inches okay so what the skybox what it does is it creates a cube map we’re gonna create a cube map out of this so there’s gonna be a cube at the top here so this is gonna be like the part of the sky that is directly above your head and down here it’s gonna be the part of the sky that’s below your feet while about the 50% line is you know where the horizon would be in your skybox so the white I keep the top because I’m what happens is the create thing that we use to convert this will kind of pinch the texture together at the top it kind of it’s almost like a sphere point you’ll see what I talked about in a little bit but so I’m gonna leave the way in the background I’m going to add a layer on top and I’m just gonna make it like brown or like an earth color and go to filter blur well actually I have to guess I should fill the color in first huh there I go select deselect filter blur Gaussian blur and you know what temps okay I don’t mind that okay so now I’m just gonna move this line out of the way so most of our color is gonna be above this line put it in between so I’m gonna insert another layer and at this time let’s go with this pink I want it to be a little bit warm red I think around here I grab a brush sure that’s good I’m gonna hold shift and then click and then drag this line across and go filter Gaussian blur filter how would I cranked up the Gaussian so I have to go back to the blur Gaussian blur change this to 20 50 50 is better I’m gonna try changing this to overlay maybe multiply there we go so now it’s gonna kind of lay its color on top of the white color here actually gonna track it below this time I’m gonna pick like an orange and again I’m gonna make it much wider it looks pretty good kind of layering enough that pink a little and again filter blur Gaussian blur [Music] go I change it to multiply as well move it down a little bit pink and play with these a little bit like anything else better there we go lean your burden looks good alright and then I’m gonna take some light pink actually know what what goes right into the right into the sky blue and again with my brush wrap this one up again thunder is pretty good here and filter blur Gaussian blur I’m not actually it’s not bad change it multiply and I’m gonna tuck it down under the orange a little bit blend those two together and I think that is about that now I could draw some clouds and stuff in here but I just kind of want to demonstrate kind of how the skybox is gonna work so I’m gonna go to save and just save it on my desktop okay so now I’m gonna go to Chrome and I want you to Google search panorama to cubemap and choose the first item that comes up this is a github implementation of someone’s web-based tool so you’re gonna convert a 360 panorama to six acute faces and you’re gonna choose an image and then it says the image should be 4 under with equal we rectangular projection image should have an aspect ratio two to one so with twice light okay so you’re gonna choose you choose my sample sky press open there are a couple different parameters here you can play with I’m just gonna leave it on the default one but it basically has generated six cube maps for you and you can see here P white and it’s positive Y positive on the zi- on the X pile it on the X negative on the C and negative on the Y so what I’m gonna do is I’m gonna click on each of these and it’s gonna automatically download them for me and I’m gonna go into my downloads folder I’m gonna create a new folder and I’m gonna call it sample sky and we’re gonna go into unity I’ve got a project open already so the first thing I want to do is you look at your main camera and you can see that the cameras using a skybox if we go into window rendering lighting settings under the environment scene environment drop down here you can see skybox material is the default skybox so that’s what we’re looking at here with the grey and the light blue horizon so it’s looking for a material so we’re gonna create a material but first go into our assets folder top level right click create a new folder I’m going to call it textures and I’m going to double click to open it and then I’m going to open up my downloads folder here’s like my sample sky folder and I’m going to move it here there we go so it created a copy of the sample sky folder inside my textures folder in the assets area and now for each of these and I’m gonna hold try and hold shift and change them all at the same time so I’ve shift and click them all I’m going to change the wrap mode from repeat to clamp and press apply so now if I just kind of thumb through them they should all be set the clamp which is excellent let me go back to my assets folder I’m going to right-click and choose create and I’m going to create a folder first and call it materials and then I’m going to create another folder inside and call it skybox and then inside the material skywalk spoiler I’m going to press create again and this time I’m actually going to create a material and they call it sample sky and with my sample sky texture selected or material selected you can see in the inspector it’s details here gonna change its shader to skybox 6-sided and that’s gonna open up a panel here with a bunch of image selectors so if you look at them front back left right up down so the easiest thing I can do is I know my up is gonna be the white texture and my down is gonna be the brown texture so I’m gonna press down first and there you go in down- Y and now up positive Y cool and then let’s see here we are right but it’s negative so I want negative X that one and again positive X here so we’re going to choose px and then we’re gonna choose back so back as a negative Z so it’s NZ and the front is positive Z so PZ for positive Z ok so we’ve saved our sample sky and you can see the icons updated here I’m gonna go back into window rendering lighting settings check out our default skybox I’m gonna grab this material and drag it on there and now if we look at our scene you have created our own custom slide skybox so it’s really simple and you can really kind of play around with you know how it’s gonna work for you but you can see the the horizon line there’s actually pretty close not too bad I mean you could gradate this as well like if you went from I actually should have been a good idea normally things that are in the distance are lighter and things that are closer to or darker so actually you could probably throw a gradient down the bottom here from out lighter or hello down to their although you know it may be covered up by whatever your mash island is at the time but you know it’s if you’re using it’s a working space then they may be able to create the illusion of land as well so that is it for creating a custom skybox in Photoshop community if you have any questions or comments feel free to leave them in the comment section and thanks everyone I hope you learned something today and have a good one see you next time