Photoshop. How to save for web

Alex Ross November 8, 2011
Rating: 2.6. From 15 votes.
Please wait...

The following tutorial will show you how to save for web your images from your PSD file.

For example, you wish to change this blue slogan and the big black title

As you can see, it is not selectable text, so, you cannot edit it in HTML file. These two wordings are images. Let us edit them.

1. Open your PSD file

Please, note that for editing text in your PSD file you need to install required fonts which are specified in fonts_info.txt file.

2. Choose the Slice Select tool. As you can see, the slices with these wordings are overlapped by other ones. You need to bring them back, select your slice and bring it to front (more information in this tutorial – How to use bring to front feature).

The same procedure is for the slogan. It is overlapped by another slice. Bring it to front as well.

3. Now you need to select all slices you wish to save holding "Shift" button

4. From the top menu choose File > Save for Web & Devices

5. Choose the Slice select tool here and select your slices again holding "Shift" button. Click Save button

Please, note that you should save your images to the Site folder, not to the Images folder. Double check and make sure you have the same settings:

  • – Save as type: Images Only
  • – Settings: Default Settings
  • – Slices: Selected Slces (important!)

Click Save button

6. You will see the files which will be replaced and click "Replace" button

7. Refresh your page and check the image you have changed.


Feel free to check the detailed video tutorial below:

How to save for web
This entry was posted in Working with Photoshop and tagged Photoshop, save for web, slice. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

  • Anita

    I purchased templaes and would like to modify logo.jpg to change name.

    Is there a video for this

    No votes yet.
    Please wait...
    • admin

      The .jpg files are not editable. All changes should be performed in the .psd files before you “Save for Web”

      No votes yet.
      Please wait...
  • Anita

    How to modify text in logo.jpg files

    No votes yet.
    Please wait...
  • Silvana

    The video does not show you how to save for web using Microsoft Expression and still you are advised that you can use this programme too.

    No votes yet.
    Please wait...
    • Chris Diaz

      Microsoft expression web is an HTML editor and could not be used to edit images. Save for web procedure could be done only with Photoshop. Nevertheless the template is not only an image so you still need Microsoft Expression web or Adobe Dreamweaver to edit the template code.

      No votes yet.
      Please wait...