Introduction & Setting Up / Working with Photoshop & Dreamweaver
Subtitles of the Movie
As I say, there's many different ways to work with Dreamweaver and Photoshop. Let's talk about one such way. What I've done here is, I went ahead and launched Dreamweaver and if you have Dreamweaver installed on your computer go ahead and launch him as well and you know, if you don't have Dreamweaver follow along anyway because a lot of the different things that we're going to be talking about are possible inside other Web design applications. Now what I'm going to do is I want to establish Photoshop as Dreamweaver's Image Editor. Now I don't know if that makes a whole lot of sense or not, but essentially what I want to do is I want to tell Dreamweaver that when I go and edit images I want to use Photoshop as the Editor. So check this out. I'm going to go into Dreamweaver's Preferences. Now if you're on the Windows side head to your Edit Menu, Mac users head up to your Dreamweaver Menu and then down to Preferences. Now inside Dreamweaver's Preferences head down to File Types/Editors, this guy right here. We're going to be getting into this in just a little while, but there are three main graphic file formats that we can use in Web design: PNG, GIF and jpeg and of course, you'll see those three extensions inside the list of Extensions there on the left-hand side of the dialog box, so what I want to do is I want to establish Photoshop as the Editor for each extension, so we're going to have to do this three times. So I'll start with PNG and then over in the Editors box, just above the Editors box, that is, I'm going to click on the Add button. Go ahead and click on that guy. Now it's going to be a little bit different on the Windows side. On the Windows side you want to head into your C drive and then into Program Files and you want to look for Photoshop. I think you have to go into the Adobe folder first and then Photoshop. Here on the Mac I'm inside my Applications folder on my Macintosh hard drive and I'm going to go and look for Adobe Photoshop. I have Photoshop CS3 and CS4 installed, so I'm going to go after CS4 and what I want to do is on the Mac side it's the actual Application file that we're after, the actual Adobe Photoshop CS4 Application. On the Windows side it would be the photoshop.exe file that you're after - that's the actual program on the Windows side, right. Go ahead and select him and then click on Open. And what that does is that essentially sets Photoshop as the primary Editor for the selected file format, or file extension, right. So as I say, we're going to have to go and do this two more times. So I just highlighted GIF there on the left-hand side. I'll click on Plus just above Editors and I'll go and find Adobe Photoshop once again. There he is, Photoshop CS4 and let's see, I have to scroll up a bit here, there he is. Click on Open. Alright. So now Photoshop is set for GIF as well. Let's do this one more time and then I'll show you how it actually works here in Dreamweaver, so go ahead and highlight JPG, click on the Plus, into your Program Files folder, or on the Mac into Applications, go ahead and find Photoshop and then once again it's the actual Application, or the .exe that you're after. Photoshop is now locked in as the PNG, GIF and JPG Editor. Wonderful. Go ahead and click on OK. Now what I've done here and this is just sort of for illustrative purposes, is I dropped a photograph, one of our sample files here, into a brand new blank page here inside Dreamweaver because I want to show you this. I'm going to select this guy, just single-click on him and then down on the Properties Inspector below I have an Edit button that looks like the Photoshop logo. So if I click on that guy then what happens is Photoshop springs to life and opens up the photo, right. Awesome. What's really cool here now is whatever changes I make to the photo - maybe I resize him, or maybe I apply a filter, or I do some color correction, or whatever it is - I just make my change here inside Photoshop, save the file and then he'll automatically update back inside Dreamweaver.
Tutorial Information
| Course: | Adobe Photoshop CS4 for the Web |
| Author: | Geoff Blake |
| SKU: | 34089 |
| ISBN: | 1-936334-01-1 |
| Release Date: | 2010-02-25 |
| Duration: | 7 hrs / 105 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 