PSD to HTML 1.2) Examining the Designs

Previouse: Psd to Html 1.1) Introduction of the Course

Next: Psd to Html 2.1) Creating the index file

PSD to HTML Complete Course

Transcription of PSD to HTML 1.2) Examining the Designs

hello and welcome back to the PSD to HTML responsive portfolio build in this lesson we're going to take a look at the Photoshop files that we're going to be building from and you can find these in the project files folder that you can download with this course and we have two different Photoshop files called portfolio large portfolio of small and i wanna take a look at both of these it's important to understand how are your finals are constructed take a look at the layers in your Photoshop files to see what it's going to take to cut these files up in order to get all of the images that we need let's start by taking a look at the large version of a double-click on it to open it up inPhotoshop and again this is the large version this is what the site is gonna look like in a desktop browser that's expanding all the way someone to turn off my guides by hitting command a chore control it if using a Mac and then command one or control in to zoom into a hundred percent and also want to get rid of all this exterior paraphernalia so that we can see a little bit better someone had theF key twice so we just see the site itself and in turn off the rulers beheading command are they really have a nice clean screen so this is what our site is gonna look like in a full-size browser we have a navbar that's touching the top of the browser and it's extending all the way to the edges to the left and right edges and we have our header we have a featured icons section so when you hear me referring to the featured section that's what this is and says three sections and it and then expanding off to the left and right edges of the browser this dark green background color we also have a little paragraph section here we have for portfolio pieces and remember this is gonna be a responsive design so we're gonna do a lot to these portfolio pieces to make them change shape and size as we change the size of the browser then at the bottom we have another three column section four footer and then a little copyright section down here the bottom so before you get started fleshing out your HTML and CSS it's important to understand what you're building and take a look at your site and try to figure out how you're going to structure things so this again is what the full-size society is gonna look like F again to go back to the original Photoshop view and I'm also going to open up the small version to open that up and then again he commanded one to zoom into a hundred percent this is what our sites gonna look like any mobile browser so when we have a smaller narrower browser it's gonna look little bit different remember at the top of our large designed we could actually see the move tool here we can actually see our menu items here and our social icons at the top but if we go to our small version you'll see our menu is gone and we know to see this icon in the upper left-hand corner and that's probably familiar icon to you that's the icon you can use to click on to see your menu items and so will come at our menus can expand down and you'll notice that our feature section is a little different as well instead of having three columns here we now have these three sections stacked on top of each other and the background is set up a little differently here in the large version you can see her background is really just one image but in a smaller version are you using the same image for all three of these sections but they're just positioned a little bit differently so we're seeing different parts of the image but we're using the exact same image that we see in the large version so then as we scroll down we see things are arranged a little bit differently we have a paragraph herewhich is the same but our portfolio section is no longer in columns instead they're all just stacked on top of each otherand in the large version we saw that they were square shapes here but now they've kind of extended out to stretch to the entire width of the browser sothere are no more rectangular and their ago so then the from the blog sectionContact Us page for updates all of those the footer sections are no longer incolumns either there now stacked on top of each other so that's basically how itworks it's important to also take a look at your layers just don't understand howyour leaders are organized you'll see we have these nicely organized in folderswhich is very important when you're creating the Photoshop file because itreally helps us to to drill in in sea water layers are and it'll be easier tofind our leaders this way so again that's what our site looks like in as wemove forward we're going to start building this in HTML and once we getthat done we're going to jump into CSS and start making it look nice so thankyou for watching and we'll get started in the next video