Another nice new feature in Expression Web is the ability to import Photoshop PSD files directly into the program. Expression Web makes it possible for you to create ping, gif, or jpeg files from a PSD file as you insert them into the page. Let me show you how that works. I will just create a new basic HTML page and it is a good practice to save the page as soon as you create it. So let us just save it and call it PSD. We are testing the PSD features.
In the images folder here, I have a banner that is a PSD file. Again, if you do not have the sample files, do not worry, just keep watching. All I am doing here is trying to give you a feel for how these new features work. If you have a PSD file, you can simply click and drag it into the page. And when you do, Expression Web will bring up this new import Adobe Photoshop dialog.
Now you have a number of options here, for example you can import all the layers or just select the layers. The selected layers option is particularly useful if for example you have a button that you use several different times in the page and you have different text on that button. And you want to say that once with one layer of text and another time with a different layer of text, you can go through and specify which layers you want.
If you are working with a banner like the one I have created here and you want all of the layers, you can simply choose all layers. You can specify gif, jpeg, or ping. Now you would not find all of the optimization settings you maybe used to in a program like Photoshop and I do have to say I still find that you get much better control and many more options when you optimize images if you use a dedicated image program.
But if you are just trying to create a quick set of buttons or banner like this, being able to use this import option is a nice time saver. And if you are using jpeg, you can at least change the quality settings and see in real time the estimated download time. We can also choose the name of the file down here. You can specify the name and by clicking on this little dot, dot, dot; by the way anytime you see that like on an Expression Web, it is basically a clue that this is a browse button if you click on that, you can choose where you want to save this file. So we can save it at the top level of the site here or we can save it in the images folder. So let us call this banner, image PSD. It will add the .jpeg for me as it imports the file.
Now anytime you add an image in Expression Web, you are going to be prompted for the accessibility properties of alternate text.
You can turn this dialog off by clicking on this Check button. But I actually encourage you to keep it on because it is a very good practice to always include some kind of alternative text description behind every image you place on the page. That serves multiple purposes. It can help you with search engine optimization and it is especially important for accessibility.
So in this case, I might just type a description or the same text that appears on my banner. And you see, Expression Web has automatically optimized that image, turned it into a jpeg which you can now see here in the folder list and insert it into the page. Now again, you may notice a little pixelization here, I can optimize this little better in a program like Photoshop. But it is a nice handy feature and the real time saving of this feature is that now you can right-click, choose Edit Source.
And if I open this file in Photoshop now and make any changes to it, I will be working with the original PSD file. But when I saved that file, Expression Web will automatically update this image. So if you are doing a lot of changes back and forth between Photoshop and Expression Web, this can be a real time saver. You will only find this feature by the way to edit source if you have inserted a PSD file into the page like this. So let us close this page now that we are done with that feature.
Transcription by:
Scribe4you Transcription Services