Difference between revisions of "Image Editor"

From Help
Jump to: navigation, search
(Created page with 'Image Manipulation Category:Design')
 
Line 1: Line 1:
Image Manipulation
+
Image Manipulation  
  
 
[[Category:Design]]
 
[[Category:Design]]
 +
 +
 +
 +
<br>
 +
<font face="Times New Roman, serif"><font size="4" style="font-size: 16pt">'''Image Editor'''</font></font>
 +
 +
<font color="#000000"><font face="Times New Roman, serif"><font size="3"><font color="#000000"><span lang="en-US">Image
 +
editor </span></font><font color="#000000"><span lang="en-US">application
 +
allows you to make basic changes to your picture file(s). Supported
 +
file formats are: jpg, jpeg, gif and png. </span></font></font></font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3">'''Choose image for manipulation'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Choose image directory from drop-down list</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Choose image file from drop-down list</font></font>
 +
 +
 +
<font face="Times New Roman, serif"><font size="3">Chosen image file and its details will be displayed within the interface.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">In order to download and save a file on local PC, click Download button.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click Edit button to edit an image file.</font></font>
 +
 +
 +
<font face="Times New Roman, serif"><font size="3">The Image Editor allows you to modify images you have uploaded or selected from the library. The Image Editor consists of the following:</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3"></font></font>
 +
 +
{| width="639" border="1" bordercolor="#000000" cellpadding="7" cellspacing="0"
 +
|- valign="TOP"
 +
| width="262" |
 +
<font face="Times New Roman, serif"><font size="3">'''Icon'''</font></font>
 +
 +
| width="347" |
 +
<font face="Times New Roman, serif"><font size="3">'''Description'''</font></font>
 +
 +
|- valign="TOP"
 +
| width="262" |
 +
 +
 +
| width="347" |
 +
<font face="Times New Roman, serif"><font size="3">'''Tools:'''</font></font><font face="Times New Roman, serif"><font size="3">A tool bar that allows you to modify the image.</font></font>
 +
 +
<br>
 +
 +
<font face="Times New Roman, serif"><font size="3">'''The following can be found under Tools:'''</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3">Crop, Resize, Rotate, Contrast, Brightness, Sharpness, Exposure, Red-eye Reduction, Effects,</font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">Flip,
 +
</span></font></font><font face="Times New Roman, serif"><font size="3">Undo.</font></font>
 +
 +
|- valign="TOP"
 +
| width="262" |
 +
 +
 +
| width="347" |
 +
<font face="Times New Roman, serif"><font size="3">'''Image View :'''</font></font><font face="Times New Roman, serif"><font size="3"></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">A</span></font></font><font face="Times New Roman, serif"><font size="3">llows you to zoom in and out of the image.</font></font>
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="262" |
 +
 +
 +
| width="347" |
 +
<font face="Times New Roman, serif"><font size="3">'''Thumbnail (Original Image):'''</font></font><font face="Times New Roman, serif"><font size="3">Allows you to revert back to the original image.</font></font>
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="262" |
 +
 +
 +
| width="347" |
 +
<font face="Times New Roman, serif"><font size="3">'''History Bar:'''</font></font><font face="Times New Roman, serif"><font size="3">shows the past steps of the resulting image. You can return to a specific step by click on the thumbnail.</font></font>
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="262" |
 +
 +
 +
| width="347" |
 +
<font face="Times New Roman, serif"><font size="3">'''Cancel &amp; Apply'''</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3">You must click “Apply,” if you wish to keep all modifications made to the image.</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3">Click “Cancel,” if you wish to exist and dismiss all changes.</font></font>
 +
 +
<br>
 +
 +
|}
 +
 +
<br>
 +
 +
<font face="Times New Roman, serif"><font size="3"><u>'''An in-depth look at Image Editor Tools'''</u></font></font>
 +
 +
<br>
 +
 +
{| width="639" border="1" bordercolor="#000000" cellpadding="7" cellspacing="0"
 +
|- valign="TOP"
 +
| width="304" |
 +
<font face="Times New Roman, serif"><font size="3">'''Icons'''</font></font>
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Descriptions'''</font></font>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Crop'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Crop” select the portion of the image you wish to keep.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Highlight the section you wish to crop by dragging your mouse over the desired portion of the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Crop,” to modify image.</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">If you do not wish to crop an image that has been highlighted, click on the image again.</font></font>
 +
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Resize'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Resize,” to modify the size of the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">A screen will pop up allowing you to specify height and width of the image in pixels.</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">Check Preserve aspect ratio, to maintain the ratio of height and width of the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Apply,” to accept changes.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Close” to exit screen without accepting changes.</font></font>
 +
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Rotate'''</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3">Click “Rotate,” to turn image counter clockwise.</font></font>
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Contrast'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Contrast,” to either increase/decrease gradient of color within the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">You can change the contrast by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">Or you can specify the intensity of the gradient by entering a number into the text box (-100, 0 100)</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “X” to if you do not wish to make any modifications.</font></font>
 +
 +
 +
<br>
 +
 +
<br>
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Brightness'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Brightness,” to either increase/decrease the amount of light in color of the image</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">You can change the brightness by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">Or you can specify the intensity of the light by entering a number into the text box (-100, 0 100)</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “X” to if you do not wish to make any modifications.</font></font>
 +
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Sharpness'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Sharpness,” to either increase/decrease the density of the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">You can change the density by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">Or you can specify the density number into the text box (-100, 0 100)</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “X” to if you do not wish to make any modifications.</font></font>
 +
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Exposure'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Exposure,” to either increase/decrease the amount of light allowed in the image</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">You can change the degree of light in the image by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">Or you can specify the intensity of the exposure by entering a number into the text box (-100, 0 100)</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “X” to if you do not wish to make any modifications.</font></font>
 +
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Red-eye Removal'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Red-eye Removal,” to enable crop feature.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Highlight the section you wish to have red eye reduced; by dragging your mouse over the desired portion of the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Red-eye Removal,” to modify image.</font></font>
 +
 +
 +
<br>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Effects'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Effects,” to select different color effects to be done to the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Select one of the following two options:</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">Grayscale</font></font>
 +
 +
##
 +
<font face="Times New Roman, serif"><font size="3">Sepia (Shades of brown, similar to grayscale)</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “X” to exit if you do not wish to make any modifications to effects.</font></font>
 +
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Flip'''</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Click “Flip” to flip the image.</font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3">Select one of the following two options:</font></font>
 +
 +
 +
<font face="Times New Roman, serif"><font size="3">a. Horizontal (flips the image horizontally)</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3">b. Vertical (flips the image vertically)</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3"><span lang="en-US">3.
 +
  </span></font></font><font face="Times New Roman, serif"><font size="3">Click “X” to exit if you do not wish to make any modifications</font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">.</span></font></font>
 +
 +
|- valign="TOP"
 +
| width="304" |
 +
 +
 +
| width="305" |
 +
<font face="Times New Roman, serif"><font size="3">'''Undo'''</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3">This button allows you to retract the last step that was done. By clicking “Undo” twice, you will revert two steps back. The number of times “Undo” is selected will be equivalent to the number of steps reverted back. This is based on how many steps you have done.</font></font>
 +
 +
<br>
 +
 +
|}
 +
 +
<br>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3"><span lang="en-US">Once
 +
you have completed editing image, click </span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">'''Apply'''</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">
 +
to accept changes or </span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">'''Cancel'''</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">
 +
to discard.</span></font></font>
 +
 +
 +
<br>
 +
 +
<font face="Times New Roman, serif"><font size="3">'''Upload Image'''</font></font>
 +
 +
<font face="Times New Roman, serif"><font size="3"><span lang="en-US">In
 +
order to activate </span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">the
 +
Upload Image functionality, click the </span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">'''Upload
 +
'''</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">button.
 +
</span></font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3"><span lang="en-US">Select
 +
directory </span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">from
 +
the drop down menu on top of the page to upload image into. You can
 +
also choose to create a new directory.</span></font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3"><span lang="en-US">In
 +
order to create a new directory, click </span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">'''Create
 +
Directory'''</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">
 +
button.</span></font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3"><span lang="en-US">Click
 +
</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">'''Browse'''</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">
 +
and choose image file to upload.</span></font></font>
 +
 +
#
 +
<font face="Times New Roman, serif"><font size="3"><span lang="en-US">Click
 +
</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">'''Upload'''</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">
 +
to complete the operation or </span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">'''Cancel'''</span></font></font><font face="Times New Roman, serif"><font size="3"><span lang="en-US">
 +
to discard changes.</span></font></font>

Revision as of 13:53, 7 July 2009

Image Manipulation



Image Editor

Image editor application allows you to make basic changes to your picture file(s). Supported file formats are: jpg, jpeg, gif and png.

Choose image for manipulation

Choose image directory from drop-down list

Choose image file from drop-down list


Chosen image file and its details will be displayed within the interface.

In order to download and save a file on local PC, click Download button.

Click Edit button to edit an image file.


The Image Editor allows you to modify images you have uploaded or selected from the library. The Image Editor consists of the following:

Icon

Description


Tools:A tool bar that allows you to modify the image.


The following can be found under Tools:

Crop, Resize, Rotate, Contrast, Brightness, Sharpness, Exposure, Red-eye Reduction, Effects,Flip, Undo.


Image View :Allows you to zoom in and out of the image.



Thumbnail (Original Image):Allows you to revert back to the original image.



History Bar:shows the past steps of the resulting image. You can return to a specific step by click on the thumbnail.



Cancel & Apply

You must click “Apply,” if you wish to keep all modifications made to the image.

Click “Cancel,” if you wish to exist and dismiss all changes.



An in-depth look at Image Editor Tools


Icons

Descriptions


Crop

Click “Crop” select the portion of the image you wish to keep.

Highlight the section you wish to crop by dragging your mouse over the desired portion of the image.

Click “Crop,” to modify image.

If you do not wish to crop an image that has been highlighted, click on the image again.



Resize

Click “Resize,” to modify the size of the image.

A screen will pop up allowing you to specify height and width of the image in pixels.

Check Preserve aspect ratio, to maintain the ratio of height and width of the image.

Click “Apply,” to accept changes.

Click “Close” to exit screen without accepting changes.




Rotate

Click “Rotate,” to turn image counter clockwise.



Contrast

Click “Contrast,” to either increase/decrease gradient of color within the image.

You can change the contrast by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).

Or you can specify the intensity of the gradient by entering a number into the text box (-100, 0 100)

Click “X” to if you do not wish to make any modifications.






Brightness

Click “Brightness,” to either increase/decrease the amount of light in color of the image

You can change the brightness by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).

Or you can specify the intensity of the light by entering a number into the text box (-100, 0 100)

Click “X” to if you do not wish to make any modifications.




Sharpness

Click “Sharpness,” to either increase/decrease the density of the image.

You can change the density by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).

Or you can specify the density number into the text box (-100, 0 100)

Click “X” to if you do not wish to make any modifications.




Exposure

Click “Exposure,” to either increase/decrease the amount of light allowed in the image

You can change the degree of light in the image by selecting either the bar which will allow you to move from left (decrease, -100) to right (increase, 100).

Or you can specify the intensity of the exposure by entering a number into the text box (-100, 0 100)

Click “X” to if you do not wish to make any modifications.




Red-eye Removal

Click “Red-eye Removal,” to enable crop feature.

Highlight the section you wish to have red eye reduced; by dragging your mouse over the desired portion of the image.

Click “Red-eye Removal,” to modify image.




Effects

Click “Effects,” to select different color effects to be done to the image.

Select one of the following two options:

Grayscale

Sepia (Shades of brown, similar to grayscale)

Click “X” to exit if you do not wish to make any modifications to effects.



Flip

Click “Flip” to flip the image.

Select one of the following two options:


a. Horizontal (flips the image horizontally)

b. Vertical (flips the image vertically)

3. Click “X” to exit if you do not wish to make any modifications.


Undo

This button allows you to retract the last step that was done. By clicking “Undo” twice, you will revert two steps back. The number of times “Undo” is selected will be equivalent to the number of steps reverted back. This is based on how many steps you have done.



Once you have completed editing image, click Apply to accept changes or Cancel to discard.



Upload Image

In order to activate the Upload Image functionality, click the Upload button.

Select directory from the drop down menu on top of the page to upload image into. You can also choose to create a new directory.

In order to create a new directory, click Create Directory button.

Click Browse and choose image file to upload.

Click Upload to complete the operation or Cancel to discard changes.