How To Convert PSD To HTML Using Brackets

what's going on guys my name is J and in this video we're gonna convert a PSD file to HTML and as you can see I'm here inside Photoshop I have a very basic design of a website right here and something very important my layers are very organized they are renamed and everything so make sure you organize your photoshop file ok so you can see I have here a folder named hero image is this right here if you open that we have the PSD to HTML title and we have a beautiful photo my my friend Michael I'm gonna post a link of Michael's Instagram and you can see his beautiful photos if you want to use one of his photos folder for your project please ask him first okay now that my PSD Photoshop file is organized and I'm happy with everything I'm gonna use this app called brackets it's a free text editor is open source by Adobe the same people that created Photoshop I'm gonna post this link as you can go there you can read about it and you can download the app for free now after we have the app we're going to open the app and you can see that I have here are some HTML elements with some CSS before we get started you need to know HTML and CSS so you can follow everything that I'm doing you don't have to be an expert but you need to know the basics now after we are here you can see that I only have reset CSS that I have right here don't worry I'm gonna post this whole project on the description so you can go and download it you don't have to now go in and search for the reset CSS and all that and I have a style CSS this is empty there's nothing there okay now I'm gonna use a tool called extract you can find that tool right here on your top right you can click there and now all your files inside your Creative Cloud are going to be available for you right here and I already have a folder called PSD to HTML I'm going to click there and I have already my PSD file but you can drag and drop your file right here remember you're going to need a Creative Cloud account to have access to these files I'm going to click there alright and you can see here that my PSD is right here looking beautiful looking perfect all my layers are here with all my files and you can see if you click for example this background image they are giving us the width they hide the position the X&Y position and you can change it to percentage that's super useful if you hold your shift key and click let's say for example this tile they are giving us you know like the space between that element and the top and the bottom right and left so it's super super useful alright I'm going to start creating my container so let's create a div with a class of container and everything is going to be inside this container I'm going to first create this title with this beautiful background image so let's say let's create a div with a class of hero image okay and inside that hero image we're going to have an h1 title you can be h2 whatever or whatever you want really and I can click here and copy the text so I'm going to do that and I'm going to paste it right here and that's it so save our HTML let's go to our style CSS and the first thing we're going to do I'm going to create a container class the width of this container is going to be the same width of this big image so I'm going to click there I'm going to start typing what and you can see that they are giving us the width of that image right there so you can just click there and that's it you have the width I want to Center this container so let's do margin:0 automatic all right I'm good with that let's add a background color let's say something like this so we can see some color right there alright let's save it let's see how it looks let's go here to my page let's reload and there we have it we have the container with that gray color as you can see some of the middle is centered and our title is right there now I need to add some style to that title and add this background photo and everything so we need to create this class of I'm going to copy this and paste it right here hero image all right so I'm gonna click on the image make sure you click on the image and I'm going to add a background and here you can see that they're giving us the option to use the image that background image I'm gonna click there and they're telling us that you know they're going to create a folder and everything is going to be extracted from this from this file and actually you can change it to whatever you want here so I'm going to change it to this format you can choose to PP and G if you want to or whatever you want really and that's it you can click enter look they created an images folder because that's what we did right here and inside there we have the the photo now we need to add some space between the title so I'm gonna click on the photo and shift-click on the title and we have a hundred and fifty five pixels from the top to the title and we have almost the same thing I think it's like one pixel difference well I'm going to use 155 pixels so let's add some padding 155 pixels and 0 we're gonna align the text to the center so let's do that the background actually the background sighs I'm going to change it to cover let's save that let's see how is how it looks and look at that our beautiful images right there the titles here that we are going to style right now but everything is looking awesome let's go h1 all right we have the h1 inside the hero image so we're gonna do dot hero image oops sorry your image h1 and now I'm going to click on that text so font size it's say that is 72 pixels and I click there font family it said that is Roboto click there and the color it says that is white so perfect so everything is provided for us let's see how it looks look at that so beautiful and it was super quick let's go back to brackets and let's scroll down a little bit here and the next thing we need to create is this block with this text okay so let's go to the index.html all right let's create a div with a class of sorry div with a class of text block or whatever you want and here we can add a paragraph tag and we need to add the text right here so I'm going to click on the text I'm just from Jinna I'm just gonna click here on copy text and paste it right there perfect all right now we need to add some style to it so let's create this class let's go to the style.css let's go here all right click on your text and the same thing let's say font size it say that is 16 pixels fun family set that is of Erica what else the line height say that is 24 pixels the color of the text is this one right here and of course we need we need to Center that text because it is right there in the center so let's do that and we need to add some padding because you see that we have some padding right here and right here so let's click and we have 78 pixels top and a bottom we have a little bit but I'm gonna just choose 78 for top and bottom and we have 133 pixels left and right so let's do that I'm sorry that I don't have you know perfect numbers top and bottom and but don't worry because we can fix that on the code so it's going to be 78 pixels top and bottom and 133 pixels left and right background color alright is this one right here it's like a gray and I think we are good we have all we need so let's save that lets save to the HTML - lets see what we have alright looking perfect the only thing that we need is a little bit of margin because I noticed that we have you know this margin so let's see what what we have all right we have 30 pixels from here to here we have 30 pixels so I'm going to add some margins go to the CSS here so margin 30 pixels bottom and top and 0 left and right now let's see all right of course we need to remove that background now container we have grey background you can change it to white or you can just remove that to save it look at that we have the perfect 30 pixels margin that we have right here on the PSD file I think we are done with that now let's go and create this copyright thingy let's scroll down here let's create a div class with copyright and we could create a paragraph let's click there let's copy the text just paste it okay awesome and we need to create this class let's go here right let's click there and fun family is all very car of course I'm repeating this fun family it's not a good practice but I'm just doing it for the video but if you're repeating again and again something you can do it in one class and you don't have to repeat it all over again but I'm just showing you how easy it is to get information from PSD to code we got the phone family now we need a font size okay we need to Center the image so text align Center the image okay the color is white and the background background color is oops sorry I need to click on this one right here and now we have the background color and we need to add some padding too so let's see how much is the padding is 29 pixels let's do it 30 30 pixels so padding 30 pixels and 0 left and right so let's save that and let's save the HTML and let's see how it looks perfect all right and we are done with that landing page I know it's very basic and in the code for example you can fix on stuff like the width you can do it something like with 100% and then here you can add like max a max width of this so things like this you can do it so easy so it can be responsive and looks good on phones and tablets but for this video I just wanted to show you how easy it is to get you know the details and information from your PSD file and put it on your code this is how I convert my PSD files to HTML very very quickly alright so that's it for this video I hope it helps you know if you have questions comment below send me an email send me a tweet thank you so much for watching this video if you want to learn more subscribe I'm uploading one video every week so see you next week bye bye

Channel: iEatWebsites

Views: 569,774

Keywords: psd to html, photoshop to html, convert, psd, html, brackets, convert psd to html, css, adobe brackets, adobe creative cloud, creative cloud, html5, convert photoshop to html, how to convert photoshop to html, how to convert psd to html

Id: d_llyPvEBrU

Length: 15min 20sec (920 seconds)

Published: Sun Oct 16 2016