How to Build a Web Site in Photoshop

Video Transcript

"Let's learn how we go about setting up a website in Photoshop. I am just going to go through the extreme basics of this and I am not really going to put any creativity into it so if you look for that you may be disappointed but I will show you the very important aspects of starting to design a website in Photoshop. So we have got a new Photoshop and Photoshop has a lot of websites for the web and we probably want to make sure web is selected. We have a lot of screen sizes here and we are going to go 1024 X 768, that's a nice pretty stock standard size for a website. Make sure the resolution is set to 72 and click o'kay and we get our basic document for our website. Now make sure you have your rulers showing so you make sure you have got the view rules and we want to make sure everything is kind of nice and measured out so we don't have stuff going all over the shop and basically you want to set up an area for your header at the top here and we generally have another spot where we are going to put our menu in and lastly well not lastly but let's have our text area and our main content area for our website and down at the bottom have a little foot area. So basically you can go about touring into these areas with whatever it is you need, you know if you want to set graphics or text or color or whatever it is and I am just going to fill these with color right now, just so you can see these different layers for each one in case you need to edit them later. You don't want to put everything on one layer, keep the middle part black, boarder down the bottom here, let's do that. Then we can go up here and start typing out our menu whatever it is, chuck whatever it is you want in your menu and you can change the font size and make it a little bit bigger and your bottom is going to chuck a few shapes in there you can and use your shape tool and make little arrows and use your creativity to make the website and anyway let's just say you have gone ahead and finished designing your website. Now there is a really cool thing you can all Photoshop that and it does a lot of the hard work for you. What you want to do is use this slice tool this tool over here which is like a scalpel and because you have already got it measured out it should make it easy to cut everything out and let's drag that one out, drag the menu, cut out the content bang and your footer down at the bottom here. Now you have cut out the areas of the website that you want and now we have got file and go to save for web and it should show you your slices on here and you can preset it to a jpeg or a gif and click save and you want to save as html images so you pull up website, desktop and save and it is saving right now. Basically you will go to your desktop and here it is right here as you can see. I will double click website and there you go it has all been done. Then you can import that to your editor and add it at the bottom and whatnot."