Entries tagged with “Upload Image” from CMS

thering.jpg

The Lord of the Picture Part I: Everything You Wanted to Know About Photos & Collage



People use pictures for everything, including sprucing their websites. As the old saying goes, “A picture is worth a thousand words.” Thankfully in our case you don’t have to write and put into collage 1,000 words before you can put a picture in. This guide will not only walk you through how to get your photo optimized and uploaded into Collage, but will also explain the University’s policy on photos – “Why can I have only three photos per page?” and much more.

cartoon.jpg 

First of all let’s start with some ground rules. The University’s Graphic Standards Policy can be found here, including logos and power point backgrounds available for download.
There’s also a CMS FAQ with photo information.

Here’s what you need to know:

  • Adding pictures and graphics to your website is encouraged. Clip art, while good for blogs and other informal communications, is not allowed on web pages.

  • Only three pictures are allowed per page (with some rare exceptions). The main reason for this is that the more photos on a page, the longer it takes to load, and it has been determined that three photos is the optimal amount for a quick load.

  • If you have more than three photos you’d like to include, an on-line gallery can be created here. Please contact a member of the Web Content Team via e-mail at 978-934-3875 to set up one of these.

  • Photos can be hand-delivered on a CD, disk, flash drive, etc., to the Public Affairs Office in Cumnock C-7. You can also upload and send them to us via the Dropbox.

  • On some occasions photos can also me e-mailed to the Web Content Team. Please contact a member of the Web Content Team (e-mail: webcontent@uml.edu) at 978-934-3875 to discuss your options.

  • For the Web photos should be 72 dpi, 200 pixels wide, optimized for web, saved as .jpg. There’s one exception – bio (Faculty and Staff) photos should be 72 dpi, 160 pixels wide for the image on individual bio page, 64 pixels wide for the thumbnail on the faculty listing page, optimized for web, and saved as .jpg
So how do you re-size your photos and optimize them? Please read Part II of this blog trilogy for how to use Photoshop to do so. You can also read Part III for a  step by step guide on how to upload a photo into Collage.
 

thering.jpgThe Lord of the Picture Part II: Using Photoshop

Earlier we covered the University's policy on photos, how many and what size and much more. Part three of this trilogy explains how to upload your photos into Collage.

So how do you re-size your photos and optimize them? It depends on what program(s) you have. We use Photoshop, but you are welcome to try another program. If you don?t have Photoshop or a similar program you can contact us, or upload the images in a task in Collage and then we will re-size them after the fact. If so skip ahead to part 3. If you have Photoshop, you can read this blog entry on how to re-size, etc. images.

Using Photoshop

1.    Open the photo in Photoshop – right click on the photo and select Open With and then the program you wish to open it with – in this case Photoshop.
open-with.jpg 

2.    Left click on Image in the top menu, and then select Resize and Image Size.
resize-photoshop.jpg
 

3.    In the pop-up window, make sure that Scale Styles, and Constrain Proportions are checked. Then change the resolution to 72. Chances are this will change the width and height.
resolution-photoshop.jpg 


4.    Once you’ve changed the resolution, change the width to 200 (or 160 for a Bio picture) and hit ok. This should also change the height. In this case the picture is a perfect square – so the width and height match. This will not always be the case.
change-width-photoshop.jpg
 

5.    Once you hit ok, the photo should shrink down.
smaller-image-photoshop.jpg
 

6.    Now click on File and then Save for Web.
save-for-web-photoshop1.jpg
 

7.    In the pop up window, make sure the images look fine and that the Quality is set to 50. Then hit ok.
save-for-web-photoshop2.jpg
 

8.    In the pop up window, select the destination you wish to save the picture to (I like to save it to the Desktop to make it easy to find) and name it.
save-to-desktop.jpg
 

9.    Now repeat this process for any other photos you wish to upload. For a bio thumbnail go up to step #4 and change the width to 64, and then repeat the steps that follow it – saving it with a different name so you can tell the smaller from the bigger image.
thumbnail-size-photoshop.jpg


thumbnail-size-photoshop-smaller.jpg

Photoshop Elements is a fairly inexpensive product (around $50) that is perfect for tasks like optimizing photos. If you do not have Photoshop or another photo software please contact a member of the Web Content Team (email: webcontent@uml.edu) at 978-934-3875 to discuss your options. Again: you can also upload the original photos in a task and we will re-size them after the fact.




thering.jpgThe Lord of the Picture Part III: Uploading Photos In Collage

Earlier we covered the University's policy on photos, how many and what size and much more. Part two of this trilogy explains how to re-size and optimize photos using Photoshop.

O.k. so now that you’ve got the image sized and optimized correctly, its time to upload it in Collage. This step by step guide will help you do just that.

1.    Create a new task. If you’re fuzzy on how to do this please follow the directions in this blog entry.

2.    Once you’ve created the task and opened it - Go into Overview in your task, Select the page you want to add the picture on and click on the file name. In this example we’re using a Student Affairs Veterans task.

select-file-name.jpg


 3. For example let’s use the Resources page. Once inside the editor, put your mouse cursor where you want to add the picture and click on image.
hit-new-image.jpg
 


4. You’ll get a pop-up window that looks something like this . Click on the little plus sign next to the images folder to see all of the folders.
image-plus-sign.jpg 
 
5. Please keep in mind you may see a lot less folders than I do depending on your permissions. Use the arrows to get down to the folder the pictures are in that you want to use.
navigate-image-folder.jpg 


6. In this case it’s the Veterans folder. Click on the blue name of that folder. This is the folder where the images will live later in Collage – in case you ever want to use them again.
select-image-folder.jpg
 


7. You’ll then see the contents of that folder – in this case all of the images in the Veterans folder.
new-image-added-to-folder.jpg 


8. Select the photo you want by clicking on the little square to the left of the file name.

9. Remember: for photos other than Faculty Bios, the largest you can have is a width of 200, or 160 for a bio photo. Also make sure that the Constrain Proportions box is checked. You’ll also need to fill out the Alt: space with a caption of what the photo (is).

width-proportions-alt.jpg 

10. You can also select an alignment and put in padding for horizontal and vertical if you want to have text wrap around the (photo).
allignment-and-padding.jpg
 


11. If you’re uploading a new photo – follow these same steps, but once you get to the folder you want to put it into – select the new photo button –
new-image-button.jpg
 

12. You’ll get a pop up window – hit browse.
browse-new-image.jpg

 
13. Find where you saved the photos too (I always put them on my desktop to make it easiest to find) and click on the file and then hit open.
select-new-image-desktop.jpg 


14. Then hit Ok to upload the image.
image-upload-hit-ok.jpg
 

15. It will add it to the folder, and you’ll need to fill out all of the boxes, including width, alt etc. When you’re done hit ok and the image should appear on your page.
 
new-image-added-to-folder2.jpg


16. Make any more edits to the pages in your task, save them and mark the task done. For help on how to mark a task done please go to step #11 in this blog entry.

Subscribe to feed Subscribe to this blog's feed

Subscribe to feed Search results matching “Upload Image”

Tags