Image Editor


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Image Editor

  1. 1. nokia windows phone 7Creative Suite (Image Editor)A selection of wireframes
  2. 2. Preview level filter nav: Swipe to cycle vertically through effects title size? BACK TO ‘76 DREAMY DREAMY compare compare compare compareEffect 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 aboutFades in on screen for about 2 seconds Image slides from left or right the effect has been fully processed. 3 seconds then fades out againthen 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. 3. Slide to adjust - CompareEffects/Adjustment Pivot Slide to adjust Slide to compare EDIT before after Adjustments Eff crop rotate contrast sharpness colour exposure colour boost - + compareTap to select adjustment Slider 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. 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. 5. Crop (page 1) Zoom in/out Moving the frame centered in height Black 50% Transparency22px 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. 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. 7. Effects/Adjustments History (p1) Building.... BACK TO ‘76 BUILDING HISTORY BUILDING HISTORY BUILDING HISTORYPress 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. 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 DREAMYAt the moment all the segments have loaded As the you touch and pull along the ...the segment timeline will slidethe 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 currentlyhighlighted 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. 9. Slide to adjust - History markers Everytime the slider is moved a visual mark is generated - + - + - + Start previous position previous position