Category Archives: Image Editing

Drupal CMS Basics, Image Editing, Web Editing

Website Image Size and Format Guide

Image Size and Format Guide

For image width dimensions (in pixels)  for specific uses on our website, see the list at the end of this guide.

See the Images in Drupal guide for further information on how to upload and embed images.

Creating Images for the web

Speed is important!

Website visitors don’t care what format your images are in, they only care that they are viewable and downloaded in a timely fashion (even on slower connections). To accomplish this, images should be optimized for both speed and usability.

Image Mode: Use RGB format.

Image file format

JPG: Use this in most cases! This file type is good for saving images with millions of colors, including photographs and graphics with a variety of shades and gradients.

GIF: Best for line art/cartoon-like drawings.

PNG: Also an acceptable format, but not needed in most cases.

Please do not use other image file formats on the website.

Rules for Saving Images:

  • Make sure you have saved a copy of the original image, so that you can come back and edit it again later if needed. This may be a different format such as, .raw, .tiff, .png, or .psd, or it may simply be the original size of a .jpg (e.g. from your digital camera) It is especially important to save the original if layers have been added to the image or graphic file.
  • .jpg files are often larger and take longer to load. However, most image editing tools allow you to select the file compression for .jpg. For example, you can choose Maximum, Very High, High, Medium, and Low. Try saving larger images under several compression settings and then test them for quality rendering and load times. Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it appears in.
  • Final web images should be saved at the same size at 72 pixels per inch resolution.
  • An ALT tag is required for each image.

File sizes:

Choose the optimal size based on how you are using the image:

  • For banners or hero images, a file size up to 60KB is acceptable.
  • For high end photographs, try to keep them to within 100KB at an absolute maximum.

List of image sizes:

When any image is uploaded, Drupal applies the Focal Point you assign to that image and then crops and scales the image for the area in which it will be used. (Please refer to the Images in Drupal guide article for this in depth).

This means that some images could be used in places that are more horizontal, some more square or vertical, etc.

If we decide to use an image that has a small original size in a Feature Large Flexible Content Item, it may display as very pixelated as Drupal is trying to make a small image fit in a big display element.

With this in mind, it is a good idea to upload images that can work in the following categories:

Image categories:

  • WYSIWYG Images: 800 x 600px
  • Squares and Vertical orientation: Thumbnails; Headshots used for Admissions Officer;  staff directories; News – Portrait; Social Media Connect; etc.  400px wide, (minimum dimension 350x464px)
  • Horizontal orientation: Most Flexible Content Items; News – Wide; Hero; etc.     1900×1022 (2:1 aspect ratio)

Previewing an Image

Remember, you can see the Preview of all the image sizes and orientations for any image you add to a content item.  Here is an excerpt on the Preview function from our Images in Drupal article

we can click on the Preview link under the thumbnail to see that this focal point we picked really will be the best part of the photo to never get cropped out.

 

This puts a pop-up window within our pop-up window that displays all the site-wide Image Styles of the image while employing the Focal Point we just selected. We clicked the Focal Point to be on the bike rider in the middle of the path.

These Image Styles are in a horizontal-scroll pane. If you scroll down you can see the original image for comparison.  Here is a view of the horizontal-scroll-pane moved to see the difference between the News/Event Detail Portrait and the News/Event Detail Wide image styles.

When you are finished with the Preview, you can click the X in the upper right of the Image Preview (inner pop-up window) to close the preview.

 

Academic Software, Image Editing, Image, Audio, and Video

Adobe Creative Cloud: College Computers

The following article applies to College-provided computers. For personal devices, see Adobe Creative Cloud: Personal Devices.

Before you start, you will need access to the following:

  • Bryn Mawr College community members: a College account
  • Haverford & Swarthmore community members: a free Adobe ID

Table of Contents:

 

Public/Lab Computers

Adobe Creative Cloud applications are pre-installed on these devices. Simply open the program you’d like to use and login with your…

  • Bryn Mawr College: College email and password
  • Haverford & Swarthmore: a free Adobe ID

 

Faculty & Staff College Computers

Follow the steps below to install and manage your Adobe apps with Creative Cloud:

 

1. Required: Install the latest Adobe Creative Cloud application

Windows ()

Follow the instructions here to install “Adobe Creative Cloud – Standard”. You may have to restart your computer once complete.

“Adobe Creative Cloud – Standard” not present? (click me!)
  1. Close Software Center
  2. Press thekey on your keyboard
  3. Type in and click on Control Panel
  4. Select Configuration Manager
  5. Click the Actions tab
  6. Select Machine Policy Retrieval & Evaluation Cycle
  7. Click Run Now
  8. Wait a few minutes for the process to complete
  9. Restart your computer
  10. Open Software Center

 

macOS ()
  1. Using Finder, navigate to your Applications folder
  2. Open Adobe Creative Cloud
  3. The application should automatically update and relaunch
Adobe Creative Cloud not working or updating? (click me!)

 

 

2. Installing New Adobe Software

Windows ()
  1. Press thekey on your keyboard
  2. Type in and click on Adobe Creative Cloud
  3. If prompted, login with your College email and password
  4. On the left-hand pane, click All apps
  5. Scroll down to find an app you’d like to install
  6. Click Install
macOS ()

Follow the instructions here to install individual Adobe applications.

 

3. Update Existing Adobe Software

Windows ()
  1. Press thekey on your keyboard
  2. Type in and click on Adobe Creative Cloud
  3. If prompted, login with your College email and password
  4. On the left-hand pane, click Updates
  5. In the top-right corner, click Update all
macOS ()
  1. Using Finder, navigate to your Applications folder
  2. Open Adobe Creative Cloud
  3. If prompted, login with your College email and password
  4. On the left-hand pane, click Updates
  5. In the top-right corner, click Update all

 

Questions?

If you have any additional questions or problems, don’t hesitate to reach out to the Help Desk!

Phone: 610-526-7440
Email: help@brynmawr.edu
Location: Canaday Library 1st Floor

Academic Software, Image Editing, Image, Audio, and Video

Adobe Creative Cloud: Personal Devices

The following article applies to Faculty & Staff personal devices. For College computers, see Adobe Creative Cloud: College Computers.

Before you start, you will need the following:

  • a Faculty & Staff Bryn Mawr College account
  • a laptop or desktop computer with internet access

Table of Contents:

 

What is Creative Cloud?

Creative Cloud is Adobe’s suite of productivity software, including everything from Acrobat to Photoshop.

 

Installing Adobe CC Software

  1. Navigate to Adobe’s Creative Cloud Portal
  2. Enter your College email address and click Continue
  3. Login with your College email and password
  4. Click View all
  5. a) For a single application:
    Find your desired application and click Install

    b) For multiple applications:
    We suggest downloading the Creative Cloud app and then installing additional applications (i.e. Acrobat, Photoshop, etc.) from there.

 

Updating Adobe CC Software

If Adobe Creative Cloud is installed…

Windows ()
  1. Press thekey on your keyboard
  2. Type in and click on Adobe Creative Cloud
  3. If prompted, login with your College email and password
  4. On the left-hand pane, click Updates
  5. In the top-right corner, click Update all
macOS ()
  1. Using Finder, navigate to your Applications folder
  2. Open Adobe Creative Cloud
  3. If prompted, login with your College email and password
  4. On the left-hand pane, click Updates
  5. In the top-right corner, click Update all

 

If Adobe Creative Cloud isn’t installed…

  1. Open the application you’d like to update
  2. In the top-left corner, click Help
  3. Click Check for Updates
  4. Follow the on-screen steps to download and install the latest updates

 

Questions?

If you have any additional questions or problems, don’t hesitate to reach out to the Help Desk!

Phone: 610-526-7440
Email: help@brynmawr.edu
Location: Canaday Library 1st Floor

 

Drupal CMS Basics, Image Editing, Image, Audio, and Video, Microsoft Office 2016, Web Editing, Word

Preparing Images for the Web in MS Word 2016

Before uploading your images to Drupal, it’s important to correctly crop, size, and optimize them to ensure they will display correctly and be accessible. The document below provides instructions for performing those tasks within MS Word 2016 on Windows and MacOS.

PreparingImagesfortheWebinMSWord2016
Title: PreparingImagesfortheWebinMSWord2016 (0 click)
Caption:
Filename: preparingimagesforthewebinmsword2016.pdf
Size: 345 KB

 

Image Editing, Image, Audio, and Video

Using Windows Live Gallery

Windows Live Gallery is a light photo editor available for download on College Windows computers via Microsoft Software Center. For more information on using and downloading programs via the Microsoft Software Center, please see our post here: http://techbar.blogs.brynmawr.edu/441

Basic help for using the Gallery is available by clicking the blue “?” in the upper right corner of the Gallery window. This will bring you to Microsoft support information, including how to edit and share photos. If you would like further assistance or in-depth tutorials, please visit LinkedIn Learning for more information.

Image Editing, Image, Audio, and Video

Taking Screenshots – Mac

A screenshot can be used to extract images from the screen or to take particular elements and add them to a document. They can be useful in showing the locations of buttons in software programs or particular elements of websites.

There are multiple ways to take a screenshot on a Mac depending on what you want to capture:

  • To capture the entire screen, press Command+Shift+3. This will capture the entire screen as it appears to you and save it in a file to the desktop.
  • To capture a rectangular screen selection, press Command+Shift+4 and select the area you would like to capture by clicking and dragging your mouse. This will save your selection as a file on the desktop.
  • To capture a particular window, press Command+Shift+4, and instead of selecting the area you would like, press Space and click on the window you want to capture. This will capture the window and save it as a file on the desktop.
  • To copy a sceenshot to the clipboard (so it can easily be pasted into another program or document rather than saved on the desktop), press Control in addition to any of the combinations above. This will not create a file on the desktop, but will save the image to your clipboard to paste elsewhere.
Image Editing

Artstor

Artstor is Bryn Mawr’s primary resource for images from museums, library, and archival collections. It’s quick and easy to access both on and off campus.

To access on-campus:

  1. Go to http://www.artstor.org.
  2. Click on the red “Go” button in the upper right hand corner of your screen.

To access off-campus:

If you have not created an account:

  1. Click the “Off Campus Access” link in the left hand column on the library webpage, or click here.
  2. Log with your Bryn Mawr Username.
  3. Go to http://www.artstor.org.

If you have created an account:

  1. Go to http://www.artstor.org.
  2. Log in with your username. Once you have logged in on campus, you will have off campus access for 120 days. If during or after the 120 days you would like to restart the counter, just log in on campus.

Once you have access, you can either search by keyword, or browse through images grouped into a variety of categories.

  • Note: If your professor has created an Artstor folder of images specifically for your course, you can access them by clicking “Open” under the “Folders and Images Groups” heading, and then choosing the class you wish to view.

Once you have found the image you desire, you can open it in a larger viewer by double clicking on the thumbnail displayed within the search window. Another browser window will open containing the image at a larger size. At the bottom of this window is a toolbox containing icons for zoom in and zoom out, rotate, move, print, and save.

If you register with a username on the Artstor webpage, you can create image groups of your own. Under the organize heading, select New Image Group. Title the group, and save it. Now when you select images,  you can select Save to Image Group under Organize.

Have more questions? Check out the excellent help documents provided by Artstor:

If you need help researching images, check out the Art History Subject Guide on the library page.