Images for Web Parts

This document covers a basic image preparation in Photoshop for Welcome Pages, Article Pages, and Web Parts included in the package.

Resizing Images for Web Parts and Saving them for Web

Required tools for editing your logo: Photoshop (recommended) or Fireworks
You may download any of the above applications from www.adobe.com

    There are 4 image sizes used in this package:

IMPORTANT
To prevent layouts from distortion, all images that you are going to use on your site should follow the below image sizes:

  1. Width: 190 pixels / Height: 253 pixels (190 x 253)
  2. Width: 190 pixels / Height: 143 pixels (190 x 143)
  3. Width: 120 pixels / Height: 90 pixels (120 x 90)
  4. Width: 64 pixels / Height: 48 pixels (64 x 48)
    5. #1 and #2

    Image sizes 190 x 253, and 190 x 143 should be used for:

    • Main Image in Welcome Pages
    • Main Image in Article Pages
    • Image in 1-Column Content Editor Web Part with Bulleted List & Image on Top
    #3

    Image size 120 x 90 should be used for:

    • Images in Latest News Content Editor Web Part
    • 120 x 90 is also recommended for Banner Images Content Editor Web Part
    #4

    Image size 64 x 48 should be used for:

    • Images in 1-Column Summary Link Web Part with Images on Left (Platinum Package only)
    • Images in 2-Column Summary Link Web Part with Images on Left (Platinum Package only)
    • Images in 2-Column Summary Link Web Part with Banded Headings and Images (Platinum Package only)
    • Image in Time Reporting Summary Link Web Part (Platinum Package only)
    • Image in Service Desk Content Editor Web Part

    To appropriately resize and save images for your SharePoint Site and Web Parts enclosed in the package, please follow the steps below:

  1. Extract YourPackage.zip file.
  2. In the PSD folder, you will find:
    • 190x253.psd for size #1
    • 190x143.psd for size #2
    • 120x90.psd for size #3
    • 64x48.psd for size #4
  3. Open the 190x143.psd in Photoshop.
  4. Open the image you want to resize for your site in Photoshop as well.
  5. In Photoshop, activate the window (or tab) containing your image.
  6. From the Photoshop menu bar (located at the very top of your screen) select Images -> Image Size.
  7. At the bottom of the Image Size dialog box, select Constrain Proportions and Resample Image checkboxes, and ignore the Scale Style checkbox. From the drop-down list select Bubic (best for smooth gradients).
  8. Enter 143 pixels for Height under Pixel Dimensions and ignore Width (the width should adjust automatically).
  9. Ignore the Document Size field set -> Click Ok.

    You just resized your image.

  10. Make sure the window (or tab) containing your image is active.
  11. From the Photoshop menu bar (located at the very top of your screen), go to Select -> All (Ctrl+A) -> Next go to Edit (located at the very top of your screen) -> Copy Merged (or Copy if your image does not have any layers).
  12. Activate the 190x143.psd (if you don’t see this file, you can activate it from the Photoshop menu bar by selecting Window -> 190x143.psd).
  13. With the 190x143.psd active, go to Edit -> Paste (Ctrl+V).

    Your resized image should appear in the 190x143.psd.

  14. From the menu bar go to File -> Safe for Web and Devices (and Devices may be not present in your version of Photoshop).
  15. In the Save for Web dialog box, you can choose the file format you want to use for your image:
    • Select JPG if your image is colorful and doesn't need to have transparent areas. Set Quality to High/65, select optimized checkbox. The JPG format is recommended for photos.
    • Select GIF option if your logo has a lot of solid color. For colors choose Selective/128 or less and deselect the transparency checkbox. The GIF format is recommended for logos and illustrations.
  16. Click Save.
  17. Upload the resized image to your publishing folder or to preferred location.
    For #1, #3 and #4 image sizes, repeat the steps from 3 to 17. In step 8, you will need to enter different width for #1, and different heights for #3 and #4:
    • For #1 enter 190 pixels for "Width" under Pixel Dimensions and ignore "Height" (the height will adjust automatically).
    • For #3 enter 90 pixels "Height" under Pixel Dimensions and ignore "Width" (the width will adjust automatically).
    • For #4 enter 48 pixels "Height" under Pixel Dimensions and ignore "Width" (the width will adjust automatically).
Copyright © 2013-2019 MasterThemes, Inc. All rights reserved.