(photo by: roxinasz via www.sxc.hu )
Want to share your image with the world? To save an image for the web, choose File > Save for Web & Devices… , choose the file type, set the quality level, set the image size and save it. Your image will look great and it won’t slow down your website.
Labels: how to, Photoshop, save, tip, tip of the week, trevor, trevor adobe, trevor payne, Web, web optimized
Categories:photoshop, trevor tip
While Dreamweaver has some rudimentary tools for photo editing, if you want to do some real image editing, you’re better advised to take the image to a photo editor to do so.
From Dreamweaver you can send an image to Photoshop by right clicking it and choosing Edit With > and choose the image editor to use from the list. If Photoshop is not in the list you can browse to find it, if desired.
However, it’s better still to add Photoshop permanently to the list and to do this, choose Edit > Preferences > File Types/Editors and in the Extensions list, select the file extension to set the external editor for. In most cases you will be choosing .jpg .jpe .jpeg.
In the Editors box, click the plus (+) symbol above the box and browse to find the executable file for your version of Photoshop (or another program if desired). In most cases this will be in your C:\Program Files or C:\Program Files (x86) folder.
You can make an editor the primary one by selecting it in the list and choose Make Primary and then click Ok.
Next time you choose Edit With, you’ll be able to choose Photoshop and the image will be passed from Dreamweaver to Photoshop – if Photoshop isn’t open it will be opened automatically for you.
Labels: Dreamweaver, dreamweaver to photoshop, editing, Helen Bradley, how to, images, images of the web, photo editing, Photoshop, web optimized
Categories:photoshop
If you don’t pre-prepare your images before adding them to a page in Dreamweaver, you’ll need to resize them in the program.
If you click an image and check the Properties panel, you’ll encounter your first problem. The selectors that let you adjust the Width and Height of the image do not do so proportionally so it’s perilously easy to skew your images out of alignment.
One alternative for resizing an image is to click the image and use the sizing handles to resize it. Hold the Shift key as you do this to scale the image in proportion.
There is also another way and that is to click the image and choose Commands > Optimize Image. This is the same dialog as you get if you click the image and click the Edit Image settings button in the Properties tab (it’s just difficult to work out what button this is because it is so tiny). This opens the Image Preview window.
Click the File tab and you can scale the image to a fixed percentage or check the Constrain checkbox and adjust either the width or the height and both will be adjusted automatically in proportion.
Under the image are tools for moving around the image in the dialog, cropping it, zooming in and out of it and setting a magnification for viewing it in the dialog.
From the Saved Settings dropdown list you can select an optimization setting for your file, if you select JPEG – Smaller File the image will be saved as a low quality JPG. JPEG – Better Quality will result in a better quality but overall larger size file. For photos always select a JPG option and never GIF.
With the Preview enabled you can read off how long it will take to download the image at the currently selected quality at a 56kbps download rate.
There is also a button in the bottom right of the left hand panel that allows you to optimize to a fixed size. Click it and you can set a target size for your image such as 20kb, click Ok and the image quality will be adjusted to give you file that is no larger than the size requested.
In the Options tab you can select to sharpen the color edges if desired. When you’re done, click Ok to configure the changes for your image.
Other image options include Brightness and Contrast and Sharpening both of which you can select by clicking the respective Brightness and Contrast, and Sharpen buttons in the Properties panel.
These options can also all be found by clicking Modify > Image. Here are options for optimizing the image, editing with an external editor, editing the original with an external editor, cropping, brightening, adjusting contrast, resampling and sharpening the image.
Labels: Dreamweaver, Helen Bradley, how to, images, photos, resize, web optimized, width height
Categories:photoshop
