Banner

Owned by David Schmidt
Last updated: Dec 06, 2017
4 min read

Table of Contents



Banner


Primary training in this tool is handled during the Image Manipulation for the Web class. Here, we'll quickly walk through the steps of how to resize the image to match the necessary dimensions.

Banner images must be 630 pixels wide, but can be anywhere form 150 to 300 pixels high. Even though the height can be taller if desired, the standard is 150.


You can use BeFunky, a free online tool, if you do not have Photoshop. This video will be using BeFunky.

  • Use a web browser to navigate to befunky.com
  • Click the Photo Editor button.
  • Click Upload.
  • Select the Computer opton from the dropdown list. Your computer's finder or explorer window will display.
  • Select the image file you wish to manipulate.
  • Click the Resize option.
  • Change the width of the image to 630 pixels.
  • Click the Blue Checkmark button to apply your changes.



You may also have to crop the image.

  • Click the Crop button.
  • Change the width of the image to 630 if it isn't already.
  • Change the height of the image to 150, or to whichever height you want between 150 and 300 pixels. We'll assume a 150 height for this video.
  • With the available 630 x 150 crop window, frame the subject of the photo the way you want.
  • Click the Blue Checkmark button to apply your changes.



  • Click the Save button.
  • Select Computer from the dropdown list.
  • Select your desired saving destination.
  • Click the Save button to save the formatted image to your computer.





Make sure to select the emails site in Cascade. Each school and department that has access to the Email Builder has specific folders. Use only the folders associated with your school or department.



  • Click the Add Content button.
  • Select the correct school or department.
  • Click the option for Image.

Note: All departmental websites are under the Department folder.




  • Click the Attach field, which is the giant area in the accompanying screenshot bordered in red.
  • Select the correct image to attach.



  • The File Name should follow the Naming Conventions.
  • The Placement Folder should be the images folder for your school or department. You can look at the file path underneath this button to confirm the location is correct.
  • There should be a Received file confirmation displaying the original name of the file (which may be different if you've changed the File Name in Cascade, which is totally fine) and the memory size of the image.
  • The W: (width) should be 630, and the H: (height) should be 150.
  • If everything is correct, click the Save & Preview blue button in the top right.



  • If everything appears correctly, click the Submit button.
  • From the pop-up, click the Content Check & Submit button.
  • Once complete, the image will auto-publish to the web.




Now we need to open the live version of the image in a new tab, and keep the tab open.


  • Copy the file path of the submitted image.
  • Open a new browser tab, type in staging.sandiego.edu/ and paste the image's file path in at the end and press Enter.
  • Leave this tab open for now as it will be used later to add the image to the header of your email.