Part 5 - iPhone Breathalyzer - HTML Part 1

Key Takeaways

hello gary simon of designcourse.com today is january 29th with our 29th video of the year and today we're going to initially work in photoshop and go ahead and cut out our images and export them for use in html and css and then we're just going to go ahead and get our html document ready to go so tomorrow we'll actually start writing out all the code and then the day after that we'll focus on css and finishing it up all right so as always at designcourse.com check that out also subscribe here on youtube and if you need access to the project files they are available for free in the description of this video or on the video page on designcourse.com all right let's get started all right so the first thing we need to consider is what can we create uh through css and what will have to be images so before we get to any html we're gonna have to save out these images and so basically let's just get started from the top and down basically the the logo is almost always going to be an image even though we kind of have a type logo we're just going to assume you know it can't be so this will be an image in and of itself the background here like these these blurred out wine of course that will have to be an image as well but i want to make an adjustment so i'm going to zoom out real quick i'm going to take my move tool with auto select layer on just click anywhere so it selects it and i'm going to take the eraser tool pretty large maybe not that large 367 and i'm just going to blur out the sides so that we really don't want any clipping if somebody expands the browser and they see the end of this then it's going to look you know crappy so and then it's going to go down a little bit smaller just to be sure and come out on this edge hold shift left click hold shift all right and then um also of course this is going to be its own image a transparent uh png this right here we can achieve through css alone these two images obviously will be saved as well and then the face and then this so i think it comes out to like seven images all right so the first thing to do is select our logo and it's currently it's a it's a type um usually it would be rastered so we'll just do that just right click and raster type and then we want to go to hit ctrl a and then control c so we'll go to file new hit ok and also when you go to file new make sure background contents is transparent ctrl v to paste in and then file save for web and i'm going to use the hotkey for this for now on and then we're going to save it as a png 8 and make sure transparency is selected and all these other options there it's only actually you know what png24 never mind that uh it's almost 1kb which is obviously pretty low so um transparency is on we'll hit save and it's in the wrong damn directory one sec all right i've found where i want to be so i'm going to create a new folder for the whole html or the website project so create a new folder called html and then inside of it we'll create two more folders one for our css in the future and then another one for images and then we'll go in there we'll call this logo hit enter alright so we'll go back to our document here and the background we're going to tackle that last i just want to get all this ready to go here and uh so we're going to save this image here next all right so make sure you click on it and we do have two layers this baxter isn't combined so select both of those hickory and that will merge them all right so this one is a little bit tricky um let me zoom up 100 if we were to take this image and save it as a png 24 bit let me just show you real quickly we'll take um we'll go to just ctrl a and then ctrl c that copies everything go to file new hit okay ctrl v to paste all right so it looks like it would work perfectly right and it would but if we go to save for web and we leave transparency on and we look at the the file size is 30 kb so that's kind of large and that's usually what would happen for a 24 bit so if you wanted to go to down to an 8 bit you it would cut the file size in half but there are when it comes to the edges you would see white pixels outlining it and it would look like absolute crap especially against the dark background which is kind of what we have with that wine thing so we have to save this differently we have to copy the selection rather differently and so here's what we need to do so we'll take the lasso tool hit ctrl d to deselect and we'll just click on the outside anywhere so it's selecting everything except for this so we just have to go to select actually first before we do that uncheck anti-alias that's very important so now do it okay so now we go to uh actually it's ctrl shift i um select inverse and now we go to edit copy merge now what copy merge does is instead of just copying everything on this layer like it would if you hit ctrl c it would not basically get the background as well those little tiny background pixels and because the background is pretty much you know kind of a dark type of color and it's not going to move much this image even even when we're responsive we can get away with copying those those pixels right there so we'll go to file new control v to paste so now if we zoom up here we can see that the background was was copied with that whereas we zoom up here it was not and again that's fine if you want a large image in terms of file size then it would work on any background but this we know it's going to work there and we're going to get away with when we save for web that we can change this to a png-8 it's only 13kb we cut down the size big time all right so i know that was a little bit complex of an explanation but it's worth worth noting so this is going to be called phone dash top and we'll come back here ctrl d i'll zoom out just to see what's going on and we might as well go ahead and just uh save that background image right now so what we need to do is take with auto select layer and move tool we'll select everything up here and we'll come down we will hold ctrl left click these two and what we can do is just to see you know which layers that we've selected we can turn those all off and now we just have our selection in view all right now if these were already on one layer those two we wouldn't have had to do that we could just select the layer and select this and control c but there was two layers down there so edit copy merged file new hit okay can save for web which is uh control shift alt n s change this one to a like for example 153 k is huge if we change it to a jpg even at 92 even at high quality at 92 percent we're only at 92k which is a lot less so for these type of images uh jpegs are a lot better to use and we can also get away with really taking down the quality down to like 44 or 45 and you still can't tell any type of uh distortions too much and we're at 24 kb so i think i'm going to leave around 55. we'll save and we will call this bg all right and if we want we can get all those layers back just a couple more here all right so we have this image in that image so basically if we take this and ctrl a and then ctrl c it and ctrl n for new in the header paste it in save for web go back to png8 now it's okay to use png8 even though we kind of just hit ctrl c instead of copy merged and that's because it's going on an absolute white background uh if you were to try to take this image that we save and show it on a black background you would see white pixels but we know what's going on white so it's okay so we're only at 6.8k and we'll save this as um why do we keep on calling it a phone it is not a phone i've done this throughout the whole series breathalyzer there we go breathalyzer versus breath our eyes are good yeah because that was like the green or whatever and then we just come back over here select i think it's layer copy two yeah select on that just hit ctrl c because we already have the selection i can hide this and then just paste that in save for web and this is going to be breathalyzer bad okay all right so we have a decision to make uh let's just select one of these basically if we select on here the we have a border that goes around this and we could either choose to save that a part of the image or we can go ahead and do this with css um i think just to avoid uh going into too much detail for this tutorial i mean this is basically a beginner for website design we're just going to include it as a part of the image so what we would do is just take both of these layers holding shift and hit ctrl e and now they are you know basically on their own image and base for this one i'm just going to use uh a jpg and i'm not going to make it transparent we know it's just this is the only area that is going to be the only background color that's going to be on so we just take this roughly around there and edit copy merged ctrl shift n hit ok we'll save that for web save it as jpg take the quality up maybe around 80. we're only at 5k so that's good and we'll save this as person and then we just have one more down here this is going to be a jpeg as well and i'm not going to make it transparent or anything i think it's fine as is but if we select it real quick with auto suck layer and then take the uh lasso tool we can see how far this thing actually goes you would think it may end here but sometimes when you would cut it out right there you would see when you put it on the site that there's actually you could see a faint like line that cuts it off so there's a couple ways of going about this we could um take the eraser tool and just kind of make it even kind of extend it out further there and now if we do the lasso tool it's a little bit more even i'm going to bring this one in a tad bit we kind of want it to be even on both sides in terms of the width so ctrl d that's better okay so um all i have to do is just click on the outside go to select inverse and we'll take the square marquee tool and we'll hold shift and then left click and drag right around there edit copy merge ctrl shift n henner and save that for web and at 63 percent we can get away with no visible distortions uh and it's only seven kb so we'll hit save call this phone dash side oops i called that sid by accident all right so that is it for cutting out the images so next i want to get out my html editor and i use something called sublime text and i'm going to get out the website real quick and i you know you can download it i think there's a trial um but it does cost money 70 dollars you don't need to buy this you don't need to use this i'm just letting you know what i use if you don't have any money for anything that costs money you can use notepad you can use any type of text editor to do what we're going to do in the next couple days and complete this so let me just get that out and that is right here um basically this is our folder that i opened up so we have html with css nothing in these and then we have our images right here so i before i get to that part i want to get back up that browser window and right here this is a framework um a front-end framework kind of like bootstrap if you're familiar with that at all um that 1140 pixel grid that i use the 12 grid that i use is actually from this site and so in the future i will do a bootstrap tutorial but um if you go to 1140px.com or i'm going to make this also available in the project files you can download the source so if you click that i've already downloaded a few times so once it's downloaded you open it up in any type of zip application yeah you go to css this is the file that we want to basically save to the css folder that we created and so i just did that off screen and we can close this stuff out or minimize it and now we see our css file is in here if you have no clue what this any of this means don't worry we'll kind of get to that here tomorrow and the next day so now what i want to do is create a new file and you can do all this you know remember you know in a different html editor or notepad you don't have to use this app um and so this is going to be our um actual html file so if i go to control s to save we're going to save this just inside the html we'll call this index.html or html whatever all right so uh real quickly we are going to write out some html but we're not going to get into the actual body of it yet we're just going to get the head stuff done so basically the first tag that we use is html class equals though js and lang equals en if you don't know what that means don't worry uh so now we have our head tag and i'm just going to come down just to close it and then we're going to focus uh on them in the middle so we have a variety of things to do um html this is our first opening tag so you know it's opened and it's not closed because we don't have this down here yet but we're gonna have some other things in here so inside the html tag goes all of the html of course so the first tag that we usually use is head and that will contain a variety of things which we'll focus on today and then inside after head comes the body so we just do body for now and then body here all right so this is a very basic structure of kind of how html file is structured so we have a variety of things up here and usually i'll just copy and paste this stuff i wouldn't be sitting here typing each one hand by hand but it's worth doing uh just for this tutorial so char set equals utf-8 and i'm going to uh include this this very basic um file right here in the project file so you don't have to type this out i'm just doing this just on screen i'm going i am going to copy this bit off screen and these are all necessary for our response it's done and uh we also have the title this is basically on every every site you need this is whatever shows up in the browser title obviously so we'll just call this iphone breathalyzer close the title tag man i'm screwing up all right so then we have other meta tags you know i'll just put these all together up here meta equals uh name equals robots which are basically uh search engine spiders you can put nofollow if you don't want it to be showing up in search engines and let's see if there's anything else that we want yes one thing that's absolutely crucial is the viewport content equals width equals device whip initial dash scale equals 1.0 and close that and that is you know if you don't include that the responsive nature of the design won't work all right and so then we have uh to link up our css file so the html for that is link href equals css forward slash and i think it was 11 40. yeah okay css and let's see here rel equals stylesheet type equals text css and we are going to use a google web font so let me get up up the uh browser here and if i just type in uh google web fonts we'll go here to this just google.com fonts type in source because that's the name of it source sans pro right here and wow they're being loud down there all right um click on it you can click on over here for quick use so you click on that and then it allows you to specify the different widths or wait wait it's not width but wait uh for the font that you want to use now remember the more you include the longer load time because this will actually require a download uh so i believe if we switch back to photoshop here uh we used the light here i think we used light there i don't think we used extra light anywhere usually i would include i mean for this we could actually get away with just one weight i believe so if need be we can come back and just add it to so if we need a bold version which i don't think we do so let's go back here to uh yeah here we're just changes to light and automatically based on what you select this code will update so we need to take this copy it and then we'll go back to our editor and just paste that in right there okay and then let's see that i believe is pretty much it and so now in here is basically where we're going to start with our html tomorrow so if we save this and you know i open that containing folder open that with our browser we can see what it looks like right now which is basically nothing and we just have our title over here so tomorrow we'll go ahead and start writing out the html and i'll be able to explain uh basically you know how we're going to use this css to structure the layout and there we go all right so check out designcourse.com if you haven't yet if you haven't yet subscribed here on youtube please do so and i will see you tomorrow you