Photosweb

463 views

Published on

When and how to use photos on your website. Make them look good and load fast! By Christy Broccardo-Davis, www.broccardodavis.com

Published in: Design, Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
463
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Here you have close ups of people, crowd shots, buildings, different shapes and sizes.
  • See, we want him to face TOWARDS the content. But look at his containers. Oops, I have done this before in a brochure and it almost went to print! So thought it seems like it goes without saying, good to remember.
  • Focus on the item, the award, hands on the item, what something or someone does or produces
  • (sea of people, crowd shot looking in through action instead of from the outside)
  • After you take the first few posed shots, just keep shooting. They will get used to the camera being there and do what they do naturally.
  • Focus in on one person or small group in the crowd vs. typical crowd shot
  • We have shots you will see nowhere else – unique only to uis. Today’s students grow up in a culture of social networking, centering things around themselves and their interests – they want to see themselves when picking a college or showing college pride.
  • READ First: these last slides, some stats to take back with you in preparing your files regarding size and resolution for fast and accurate loading…
  • otherwise, the browser is loading the file size of the original image and then resizing it in the browser
  • Photosweb

    1. 1. Great Photos for your Website Make them look good and load fast! www.uis.edu/webservices
    2. 2. Make Them More Interactive and Interesting <ul><li>Add at least one great photo to the main menu pages on your web site </li></ul><ul><li>Cropping – take more than you need, then crop in on what tells the story </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    3. 3. Make Them More Interactive and Interesting <ul><li>Contrast in sizing, shapes, and subjects for active design </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    4. 4. Make Them More Interactive and Interesting <ul><li>Face them in the direction of the content – not looking off page </li></ul><ul><ul><li>Be careful if flipping photos with text content </li></ul></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    5. 5. Unique Perspectives <ul><li>Focus on something new </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    6. 6. Unique Perspectives <ul><li>Take it from a new point of view </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    7. 7. Unique Perspectives <ul><li>Action shots vs. portraits – show people in action when they are not looking – keep shooting! </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    8. 8. Unique Perspectives <ul><li>Suggest intimacy and connection, added emotional punch </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    9. 9. Unique Perspectives <ul><li>Use photos of UIS people – unique faculty, students, staff </li></ul><ul><ul><li>Students love to see photos of themselves/peers! </li></ul></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    10. 10. Make them Easier to VIEW <ul><li>Use of white space is GOOD design </li></ul><ul><ul><li>In Contribute, “Image Properties” align right or align left to make text flow around the photo </li></ul></ul><ul><ul><li>Set horizontal and/or vertical “padding” for each image </li></ul></ul><ul><li>Border set to “0” if linked, for accurate display in some browsers (avoid amateur blue border) </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    11. 11. Make them Easier to VIEW <ul><li>Always fill in the “alt tag” text with a good description, prompted in Contribute. </li></ul><ul><li>Very helpful to those with screen readers, accessibility issues, etc. and will display on the web page if the image does not load. </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    12. 12. Make them Easier to VIEW <ul><li>Consistency is also good. For faculty/staff head shots, don’t want contrast here </li></ul><ul><ul><li>Average size is 75 pixels by 100 pixels. </li></ul></ul><ul><ul><li>Crop with a small amount of headroom at top, and to the bottom of the neck. Same headsize for all photos. </li></ul></ul><ul><ul><li>If in profile, leave extra space on the nose side. (screen shot of page) </li></ul></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    13. 13. Make them Easier to LOAD <ul><li>Each overall page should not be more than 60 kb in order to download in less than 30 seconds on a modem. </li></ul><ul><li>Especially if a page contains several images, keep the image file sizes below 20-30 kb each </li></ul><ul><li>Resolution for the web: 72 pixels–also keeps the file size down </li></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    14. 14. Make them Easier to LOAD <ul><li>Physical size: not larger than 400 pixels wide for UIS templates and fast download </li></ul><ul><li>Resize your images first if possible, image editor such as Photoshop, available in media lab </li></ul><ul><li>“ Save for Web” </li></ul><ul><ul><li>Photos: save in .jpg format </li></ul></ul><ul><ul><li>Graphics (flat colors): save in .gif format unless they have a lot of shading and gradation in colors </li></ul></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices
    15. 15. Learn more <ul><li>Free ITS Photoshop workshops </li></ul><ul><li>Handout “How to Resize a Photo and Save for the Web” </li></ul><ul><li>www.myragantv.com video, search “How to Take Better Photos” </li></ul><ul><ul><li>http://www.ragan.com/ME2/Sites/Default.asp?SiteID=2DE73B54303942C4AC9E7EC3867DBF9E&Itemplay=6EA9FB1FC4EC44A4B01BDE20D45852A0 </li></ul></ul>Office of Web Services - University of Illinois Springfield www.uis.edu/webservices

    ×