Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding basic web principles
- Adding content to a web page
- Linking to web sites and email addresses
- Styling content with CSS
- Creating a layout that fits multiple browsers and devices
- Building an HTML5 layout
- Inserting images and video
- Adding a menu bar
- Creating a contact form
- Integrating a Twitter feed
- Uploading and testing a web site
Skill Level Beginner
The first step in creating a website is to create the design and the graphics for the site, and that's why I'm starting off here in Photoshop, Photoshop CS6 to be exact. Now you, of course, can use a graphic program of your choice, whether it's Illustrator or Fireworks. As long as it can export out graphics in a web format, such as JPEG, PNG, or GIF, which is what I'm going to be doing, but first I want to start off with the design of this site. So if we take a look, let's take a look at the Image Size, you can see that the size of this is 1366 wide by about 1000 high, and that's a pretty good size, actually that's a good median size for most monitors.
You can go as low as 1024x768, know that all your critical information should probably fit within this area. I am picking the median size, as I showed a second ago, this is at 72 dpi, then I can begin designing. Now remember the height is 1000 pixels high, but really, the cut-off point with the most monitors is 768, so let's just cancel out of that, and if I show you really fast just my guides, I have this guide right here, and this is actually 768 pixels down I have all my critical information above that, and this is technically above the fold, I have contents spill below.
It's perfectly fine, and that's how this is all set up. So my Homepage looks pretty good, consistent nav, everything looks great! I can click on my About folder to turn that on and here's my About content, as you can see right here. I can take a look at my portfolio, so I turn on my portfolio content, and even the Contact page looks like this. So everything is designed in Photoshop in these handy little folders.
But what I need to do is I need to start exporting out these graphics, so exporting out the different backgrounds for each section, as well as this logo. Those are the main elements, because the other things I can actually do in Dreamweaver. So I'm going to export out the background. So I'll turn off the Navigation, because again, I can make that in Dreamweaver. I'll turn off to this Content folder, and this is what I want to export out. Now all I need to do is go to File > Save for Web.
If you're using Illustrator, you have that same functionality, and now I can go ahead and optimize this and save it appropriately. So notice right up here, the top, the upper right gives me all the different web file formats. This is going to be a JPEG, which is great for photos, there are some additional options, but I'm going to select JPEG and the Quality sliders, which you want to deal with the most. You just click and drag on that to bring it down, and it's a fine art of making it look good while still keeping the file size small as you can see in the lower left.
So it's still to looking good, let's take the Quality down some more, go down to about 30, about 30%. It's breaking up a little bit, but I like the file size. So I'm going to leave it at this quality, and I'm going to Save out this JPEG. I'm going to save it in my images folder, 03 Final, images folder, and really you just need to save it wherever you want just be aware of where you're saving these files.
And in this case, I'm going call this file bkgdHome.jpg, no spaces, nothing like that, saving out that graphic. Next up, my About page, looking good. Let's turn off that Content layer, this is the image, I want to export. Same process, I'm going to File > Save for Web, and now I can go ahead and save out this image, but I might want to adjust the quality, maybe increase it a little bit, because she's getting kind of broken up a lot.
But now as I increase the quality, this portion of the image appears much more smooth and the file size is pretty reasonable. Selecting Save, I'll save this as bkgdAbout.jpg, saving out that JPEG. Next up, the portfolio section, turning off that Content folder and going to Save for web. Now from here, I'd say the quality looks really good. In fact, let me drop that down because I don't like the file size.
I want to keep this under 100K, which is a good place to be. Still looks really good. Selecting Save, bkgdPort.jpg, saving that. And the last one I'm going to do is the Contact page. Turning off what I don't want to export and going to Save for web. Now in this case, I really like this one. I like the file size, so I'm just going to select Save and typing in bkgdContact.jpg. All right! This is my final of all my backgrounds, so I have four different backgrounds in there to using those different sections.
Those are all saved out, and now I need to go ahead and take a look at this page. And I realize that sure most of this content can be in HTML, but this graphic right here, this logo needs to be saved out as well. Well, I've isolated that logo, happens to be this logo.psd, and again, both of these files are in your Assets folder, in your images folder, if you have access to the assets.
If you don't, you can obviously use your own PSD files, but in this case for this PSD file, I want to turn off that background, that's just to show the design. And I am going to turn it off, because I want to export out these graphics with transparency. So when I do that, I can now the File > Save for Web, here I am, I can go ahead and save this out, but look, there is a white back there. It's not transparent, that's because JPEGs don't allow for transparency. Especially, varying levels of transparency that this has with the drop shadow.
So what I can do is I can change it to PNG-24. That's a 24-bit image, that's going to give me those varying levels of Transparency, exactly what I want. So now I can go ahead and save that out as logo.png just like that, saving that. So that's all you need to do is really just reference your design, determine what you need to export out as graphics, and from there I can start to implement these graphics on my first web page in Dreamweaver.