Difference between revisions of "Image Editor"
(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 & 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:
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.