Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating graphics for web sites

From: Creating a First Web Site with Dreamweaver CS6

Video: Creating graphics for web sites

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.

Creating graphics for web sites

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.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS6
Creating a First Web Site with Dreamweaver CS6

30 video lessons · 40439 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Dreamweaver CS6.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.