Tutorials  in  Photoshop  

COURSE

SI694, Winter 2010

SO’PHO’ TEAM

Annie Fang, Adrienne Klum, Katie McCurdy, Eric Mrak

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Introduction

Tūtville  is  an  extension  for  Adobe  Photoshop  CS5  that  helps  people  bookmark,    

share  and  search  for  tutorials.  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Motivation

9  User  interviews    

•  Beginner,  intermediate,  advanced,  expert  Photoshop  users.  

User  Interview  Findings  •  Novices  don’t  know  where  helpful  tutorials  can  be  found  

•  People  oIen  don’t  know  what  they  need  

•  Photoshop  users  have  a  hard  2me  finding  appropriate  or  credible  tutorials  

•  People  have  trouble  re-­‐finding  informa2on  once  they  have  found  it.  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Competitive Landscape

NET  TUTS  

LYNDA.COM  PHOTOSHOP  TUTORIALS   SMASHING  MAGAZINE  

DELICIOUS   ADOBE  

•  Online  Tutorials  –  Hobbyists,  Photoshop  enthusiasts  

–  Professional  sites  

•  Bookmarking  tools    

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Lo-Fi

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Wireframes

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Usability Testing

Lo-­‐Fi    

•  3  users,  paper  prototypes  

Hi-­‐Fi    

•  8  users,  func2oning  prototype    

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Key Features

•  Search  

•  Filtering  

•  Ability  to  add/edit  tutorials  

•  Select  as  a  favorite  •  Recommenda2ons  

•  Commen2ng  

•  Flagging  

•  Create  an  account  

•  Login/logout  •  User  profiles  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Use Cases

•  Launches  Photoshop  CS5  

•  Wants  to  crop  an  image  but  does  not  know  what  tools  to  use  

•  Opens  the  Tūtville  extension  

•  Searches  for  term  “Crop”  

•  Finds  10  search  results  

•  Selects  the  most  popular  and  views  the  web  tutorial  in  Photoshop.  

Searching  for  Tutorial   Adding  Tutorials  

•  Searches  the  web  for  a  Photoshop  tutorial  on  red  eye  removal  

•  Finds  and  adds  the  tutorial  to  Tūtville  using  the  bookmarklet.  

•  Opens  the  Tūtville  extension  in  Photoshop  CS5    

•  Finds  newly  added  tutorial  under  user  profile  marked  as  a  favorite  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Architecture

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Implementation

How  it  was  built  

•  HTML  &  CSS  

•  Javascript  

•  PHP  •  MySQL  

•  Photoshop  CS5  

•  Configurator  2.0  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Demo

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Recommender System

•  First  iden2fies  other  users  that  have  favorited  the  same  tutorials  as  you  have,  like  Nancy.  

•  Recommends  the  tutorials  that  Nancy  has  favorited,  that  you  have  not.  

•  The  system  also  takes  into  account  how  similar  you  are  to  Nancy,  and  ranks  the  recommenda2ons  by  popularity.  

You   “Nancy”  

Recommenda2ons  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Business & Sustainability

Business  Model  •  Infomediary  model:  we  could  license  our  content  to  Adobe  •  Community  model:  Adobe  provides  So’Pho’  as  a  service  

Sustainability    Current  •  Compelling  social  object:  Tutorials  •  Community  driven  –  user  generated  content,  updated  content  •  Useful  repository  •  Flagging  content  •  Pre-­‐populate  content  Future  •  Mo2vate  contribu2on  •  Use  analy2cs    •  Check  for  broken  links    •  Web-­‐based  site  to  work  in  tandem.  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Future Work

•  Conduct  user  tests  to  evaluate  the  design  and  UI  of  Tūtville  .  

•  Resolve  issues  with  Flash  player  inside  Photoshop.  

•  Make  use  of  contextual  menu  inside  Photoshop  panel  (move  “Recommenda2ons”  into  this  menu).  

•  Create  companion  website  that  would  allow  people  to  access  their  bookmarked  tutorials  outside  of  Photoshop.  

•  Implement  social  networking  tools  onto  companion  website.  

•  Refine  account/  management  abili2es  of  tutorials  by  users  and  administrators.  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Lessons Learned

Benefits  of  user  tesBng    

•  Icon  ambiguity  

•  Lack  of  explana2on  on  the  bookmarklet  

•  CS  versioning  

ComplicaBons  involved  in  implementaBon    

•  Constraints  of  hos2ng  environment  

•  Gegng  func2onality  to  work  on  different  builds  of  CS5  &  Configurator.  

Introduc2on   Demo    Design  Tūtville Wrap-­‐up  Development  

Thank you. Questions, Comments?