ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Image Editor

•
•
Steven Blyth
Steven Blyth

1. The document discusses various interactions and animations for reviewing and adjusting photos on a mobile device, including swiping to cycle through effects, zooming and panning cropped images, and viewing the history of applied effects through a segmented timeline. 2. Key interactions covered include rotating photos with two fingers, pinching to zoom a cropped image, dragging corners to adjust a crop frame, and sliding a timeline to view previous editing steps and filter previews. 3. Animations and transitions are proposed for loading effect previews, bouncing images when panned beyond their bounds, and highlighting segments in the editing history timeline as adjustments are applied.

1 of 9
nokia windows phone 7 Creative Suite (Image Editor) A selection of wireframes
Preview level filter nav: Swipe to cycle vertically through effects title size? BACK TO ‘76 DREAMY DREAMY compare compare compare compare Effect title positioned top left. Flick left / right to cycle through the effects The image is presented in low res until Effect title fades in on screen for about Fades in on screen for about 2 seconds Image slides from left or right the effect has been fully processed. 3 seconds then fades out again then fades out again Indeterminate progress indicator runs at the top of the screen until the processing has finished Animation Animation 1. Explore left / right swipe Low res to Full res transition Eg: Image eases in (is this necessary?)
ºÝºÝߣ to adjust - Compare Effects/Adjustment Pivot ºÝºÝߣ to adjust ºÝºÝߣ to compare EDIT before after Adjustments Eff crop rotate contrast sharpness colour exposure colour boost - + compare Tap to select adjustment ºÝºÝߣr Compare If possible effects should ideally have Tap Compare and slide left/right to no more then 1 slider with which to view before and after adjustment manipulate on image Indeterminate progress indicator Tap Tick to apply adjustment We could have this appear at the top of the screen.
Adjustment - Rotate + Auto Crop 90° Overlaid icon is a hint for two finger interaction. Using two fingers user can rotate the picture in any direction. - Fades in (1 second) The image does not zoom or pan. - Still for (3 seconds) A 6x6 grid appears on press. White lines at 25% opacity. - Fades out (1 second) or on Press When user takes their fingers away the cropping frame zooms the picture to the maximum possible size / edges of the rotated image. The grid lines fade away.
Crop (page 1) Zoom in/out Moving the frame centered in height Black 50% Transparency 22px Preview Image is displayed slightly reduced in size 2 finger pinch / expand gesture will Grab and move any of the 4 corners showing the crop frame and handles zoom in/out of the image. in any direction to manipulate the frame (maintains aspect ratio) There is a 22px space between the left Frame has no fixed aspect ratio and right edge of the photo. In landscape You cannot zoom out beyond the mode its 22px top and bottom. Image is photos edge. Image bounces back centered horizontally in black. to fill the frame. Animation 22px Explore the Bounce effect 1 The image bounces back to fill its frame at the 22px 22px first point its zoomed outbeyond its size. 22px On release of fingers from screen the image bounces.
Crop (page 2) 2 finger photo shift 1 finger frame shift Use 2 fingers to move the whole photo in One finger touch inside the frame moves When both crop frame has been adjusted Deselect preview will take the user back any direction. This action makes sense if the to the previosu screen. it around. vertically and horizontally the preview user has zoomed in. button becomes active You cannot move the frame beyond the The edge of photo cannot pan inside of the edge of the screen Press preview to view the image cropped crop frame and expanded. Animation Explore Scale preview crop effect Animation Explore Bounce effect 3 The image bouces back the edge if its shifted off screen Animation Explore Bounce effect 4 The frame bounces back if its shifted off screen
Effects/Adjustments History (p1) Building.... BACK TO ‘76 BUILDING HISTORY BUILDING HISTORY BUILDING HISTORY Press to view effects history Image zooms out to a reduced size. At the point at which 7 of 9 segments have ...and the loading continues. been loaded the timeline slides to the left... History mode requires the software to We think each segment may load as quick build each preview state the user has been as .5 of a second through. As each preview is processed a segment appears The width of these are dynamic and based on the number of effects and adjustments made to the image. (this example has 9)
Effects/Adjustments History (p2) As you slide the title for the effect/adjustment appears for 2 seconds ... ...then fades to the main ‘history’ title BACK TO ‘76 ROTATE HISTORY DREAMY At the moment all the segments have loaded As the you touch and pull along the ...the segment timeline will slide the segment timeline will slide to the right timeline the image updates to reflect each to the right revealing the rest. This will also step in the edit. work in the other direction. The image in view and the step currently highlighted is represented by a solid segment If you touch and slide to the segment just Press Apply (tick) will before the cropped half segment then lift - delete the unselected steps your finger... - exit the user from the history mode - scale the image up
ºÝºÝߣ to adjust - History markers Everytime the slider is moved a visual mark is generated - + - + - + Start previous position previous position

More Related Content

Image Editor

  • 1. nokia windows phone 7 Creative Suite (Image Editor) A selection of wireframes
  • 2. Preview level filter nav: Swipe to cycle vertically through effects title size? BACK TO ‘76 DREAMY DREAMY compare compare compare compare Effect title positioned top left. Flick left / right to cycle through the effects The image is presented in low res until Effect title fades in on screen for about Fades in on screen for about 2 seconds Image slides from left or right the effect has been fully processed. 3 seconds then fades out again then fades out again Indeterminate progress indicator runs at the top of the screen until the processing has finished Animation Animation 1. Explore left / right swipe Low res to Full res transition Eg: Image eases in (is this necessary?)
  • 3. ºÝºÝߣ to adjust - Compare Effects/Adjustment Pivot ºÝºÝߣ to adjust ºÝºÝߣ to compare EDIT before after Adjustments Eff crop rotate contrast sharpness colour exposure colour boost - + compare Tap to select adjustment ºÝºÝߣr Compare If possible effects should ideally have Tap Compare and slide left/right to no more then 1 slider with which to view before and after adjustment manipulate on image Indeterminate progress indicator Tap Tick to apply adjustment We could have this appear at the top of the screen.
  • 4. Adjustment - Rotate + Auto Crop 90° Overlaid icon is a hint for two finger interaction. Using two fingers user can rotate the picture in any direction. - Fades in (1 second) The image does not zoom or pan. - Still for (3 seconds) A 6x6 grid appears on press. White lines at 25% opacity. - Fades out (1 second) or on Press When user takes their fingers away the cropping frame zooms the picture to the maximum possible size / edges of the rotated image. The grid lines fade away.
  • 5. Crop (page 1) Zoom in/out Moving the frame centered in height Black 50% Transparency 22px Preview Image is displayed slightly reduced in size 2 finger pinch / expand gesture will Grab and move any of the 4 corners showing the crop frame and handles zoom in/out of the image. in any direction to manipulate the frame (maintains aspect ratio) There is a 22px space between the left Frame has no fixed aspect ratio and right edge of the photo. In landscape You cannot zoom out beyond the mode its 22px top and bottom. Image is photos edge. Image bounces back centered horizontally in black. to fill the frame. Animation 22px Explore the Bounce effect 1 The image bounces back to fill its frame at the 22px 22px first point its zoomed outbeyond its size. 22px On release of fingers from screen the image bounces.
  • 6. Crop (page 2) 2 finger photo shift 1 finger frame shift Use 2 fingers to move the whole photo in One finger touch inside the frame moves When both crop frame has been adjusted Deselect preview will take the user back any direction. This action makes sense if the to the previosu screen. it around. vertically and horizontally the preview user has zoomed in. button becomes active You cannot move the frame beyond the The edge of photo cannot pan inside of the edge of the screen Press preview to view the image cropped crop frame and expanded. Animation Explore Scale preview crop effect Animation Explore Bounce effect 3 The image bouces back the edge if its shifted off screen Animation Explore Bounce effect 4 The frame bounces back if its shifted off screen
  • 7. Effects/Adjustments History (p1) Building.... BACK TO ‘76 BUILDING HISTORY BUILDING HISTORY BUILDING HISTORY Press to view effects history Image zooms out to a reduced size. At the point at which 7 of 9 segments have ...and the loading continues. been loaded the timeline slides to the left... History mode requires the software to We think each segment may load as quick build each preview state the user has been as .5 of a second through. As each preview is processed a segment appears The width of these are dynamic and based on the number of effects and adjustments made to the image. (this example has 9)
  • 8. Effects/Adjustments History (p2) As you slide the title for the effect/adjustment appears for 2 seconds ... ...then fades to the main ‘history’ title BACK TO ‘76 ROTATE HISTORY DREAMY At the moment all the segments have loaded As the you touch and pull along the ...the segment timeline will slide the segment timeline will slide to the right timeline the image updates to reflect each to the right revealing the rest. This will also step in the edit. work in the other direction. The image in view and the step currently highlighted is represented by a solid segment If you touch and slide to the segment just Press Apply (tick) will before the cropped half segment then lift - delete the unselected steps your finger... - exit the user from the history mode - scale the image up
  • 9. ºÝºÝߣ to adjust - History markers Everytime the slider is moved a visual mark is generated - + - + - + Start previous position previous position