Photo Sizing Directions for web[1]

10
lrPhoto Sizing Directions for School Web Site Front Page Photos that are displayed on the main page of our SchoolPointe web sites must be edited to fit a certain size box. You can either scale a horizontal photo to fit the area or use these directions to create an image that fits the space without distorting the image. There are two ways to edit photos: Using PhotoShop (if you have it available) or Pixlr.com (a free PhotoShoplike editing service online). Regardless of which program you use, the photos must be sized to 553x286 pixels (rather than inches). Using Pixlr.com Begin by going to pixlr.com and clicking on Pixlr Editor at the top of the page Select Create a New Image

Transcript of Photo Sizing Directions for web[1]

lrPhoto  Sizing  Directions  for    School  Web  Site  Front  Page  

 -­‐  Photos  that  are  displayed  on  the  main  page  of  our  SchoolPointe  web  sites  must  be  edited  to  fit  a  certain  size  box.    You  can  either  scale  a  horizontal  photo  to  fit  the  area  or  use  these  directions  to  create  an  image  that  fits  the  space  without  distorting  the  image.      There  are  two  ways  to  edit  photos:  Using  PhotoShop  (if  you  have  it  available)  or  Pixlr.com  (a  free  PhotoShop-­‐like  editing  service  online).      Regardless  of  which  program  you  use,  the  photos  must  be  sized  to  553x286  pixels  

(rather  than  inches).    Using  Pixlr.com  -­‐  Begin  by  going  to  pixlr.com  and  clicking  on  Pixlr  Editor  at  the  top  of  the  page    

   -­‐  Select  Create  a  New  Image    

     

-­‐  Change  the  dimensions  to  553x286,  click  the  box  next  to  Transparency,  Click  OK    

   This  is  what  you  should  see:    

   

-­‐  The  first  thing  we  will  do  is  fill  in  the  background  that  will  go  behind  your  photo  (unless  you  have  a  good  horizontal  image  that  can  fill  the  space  without  looking  distorted)    Click  on  the  Drawing  Tool  in  the  tool  bar  (looks  like  a  yellow  square  and  circle,  its  name  will  appear  if  you  hover  over  the  icon  with  your  mouse)    

   -­‐  Once  you’ve  selected  the  Drawing  Tool,  you  can  choose  a  background  color  by  clicking  on  the  colored  box  at  the  top  right  of  the  screen  (your  display  color  may  not  be  red,  it  may  vary).  Make  sure  the  Fill  Shape  box  is  checked.    

   -­‐  Click  on  the  color  you  would  like  to  have  as  a  background  color  and  click  OK    

   -­‐  Now  take  your  cursor  and  beginning  with  the  top  left-­‐hand  corner  of  the  checkered  box,  drag  your  cursor  over  and  down.  When  you  release  your  cursor,  a  solid  box  should  be  covering  the  checkered  box.  

 -­‐  Now  we  can  add  your  image  -­‐  Go  to  Layer  (at  the  top  of  the  screen),  and  select  Open  Image  as  Layer    

   -­‐  Now  you  will  need  to  select  the  photo  you  want  to  use  from  your  computer  or  other  file  and  click  OK    -­‐  It  may  come  in  very  large  or  not  fit  well  in  the  box.    To  resize  it  for  the  image,  go  to  Edit  at  the  top  of  the  screen)  and  click  on  Free  Transform:    

   -­‐  Dots  will  appear  in  the  corners  of  your  image.  You  can  grab  those  dots  with  your  mouse  and  pull  the  photo  inward  to  make  it  smaller.  Try  to  keep  the  image  from  getting  distorted  by  dragging  it  proportionately.  Once  you’ve  achieved  the  desired  size,  click  Return    

     -­‐  To  add  text  to  your  image,  click  on  the  Type  Tool  in  the  tool  box  (large  letter  A)  

 -­‐  When  you  click  on  your  image,  you  will  be  able  to  type  your  words,  resize  the  text  and  change  the  font/color    

   You  can  then  select  the  arrow  tool  from  the  tool  bar  to  move  the  text  to  the  desired  location  on  the  image.    -­‐  To  Save  go  to  File  (at  the  top  left  of  screen)  and  choose  save  from  dropdown  menu    

   -­‐  Be  sure  to  name  your  image  and  save  it  to  your  Computer  (it  will  go  to  your  desktop).  The  quality  should  be  saved  at  80  or  above.    

   Now  you  will  need  to  attach  the  image  to  your  news  story  in  SchoolPointe.  This  will  make  it  appear  on  the  front  page  with  the  story  displaying  under  “This  Just  In”  on  the  right.      

Resizing/  Editing  Directions  for  PhotoShop  -­‐  Go  to  File,  New  -­‐  Change  dimensions  to  553  pixels  wide  by  286  pixels  height  -­‐  Make  sure  to  select  Transparent  under  Background  Contents,  Click  OK  

 

 

   -­‐  To  insert  your  image,  go  to  File,  Place    -­‐  To  adjust  the  image  size,  go  to  Edit,  Free  Transform     -­‐  Dots  will  appear  in  the  corners  of  your  image.  You  can  grab  those  dots  with  your  mouse  and  pull  the  photo  inward  to  make  it  smaller.  Try  to  keep  the  image  from  getting  distorted  by  dragging  it  proportionately.  This  can  be  done  by  holding  down  your  Shift  key  as  you  resize  your  image!  Once  you’ve  achieved  the  desired  size,  click  Return    

   -­‐  To  Add  Text:  -­‐Select  the  Type  tool  from  the  tool  bar  -­‐  drag  a  box  where  you  want  your  text  displayed  on  the  image  and  type  your  message.  You  can  highlight  the  text  and  change  the  color  by  clicking  the  fill  box  at  the  bottom  of  the  tool  bar.  Tools  to  resize  or  change  the  font  are  located  at  the  top  of  the  screen.    

 

     -­‐  You  should  be  all  set  to  save.  Go  To  File,  Save  As  –  Name  the  file  and  save  it  to  your  desktop.      -­‐  Now  you  will  need  to  attach  the  image  to  your  news  story  in  SchoolPointe.  This  will  make  it  appear  on  the  front  page  with  the  story  displaying  under  “This  Just  In”  on  the  right.