IN G A N D D E S I G N F O R

IMAG
TH E
ONLINE ENV I R O N M E N T
A N I P U L AT I ON
USE IMAGE M
TECHNIQUES
•  HOW DO YOU MANIPULATE TEXT AND IMAGES?
•  WHAT IS THE BEST IMAGE FORMAT TO BE USE IN YOUR PROJECTS?
•  WHAT IS THE BEST RESOLUTION IN CREATING YOUR PROJECTS?
WHAT IS IT
Photo editing and designing software allow you to manipulate or
edit images.
In order to perform image manipulation, you need to have basic
knowledge of image editing operations such as cutting, cropping,
replacing and more. For this, you need an image editing software
for image manipulation practices.
The followings are some examples of image editing software:
•Adobe Photoshop •Gimp •Corel Draw •Pixler Editor
•PAINT.NET •InPixio
ONLINE FILE FORMATS FOR IMAGES AND TEXT
Image file format refer to how data associated to the image will be
stored. It can be compressed to decrease file size of the image. There
are two different compression you can choose when enhancing your
images: lossy and lossless compression. Lossy compression reduces
file size by removing redundant information means that some data from
the image file is lost. While Lossless compression retains values and
manages to lower file size.
Common image file formats
Image resolution refers to the number of pixels in an image
or the detail an image holds. It is identified by the height and
the width of the image. A pixel is just one unit of the whole
digital image it is the smallest unit of an image. The higher
the resolution, means that there more pixels per inch (PPI),
resulting in more pixel information and creating a high-
quality, crisp image.
WHAT IS GIMP?
GIMP is a cross-platform image editor available for
GNU/Linux, OS X, Windows and more operating
systems. It is free software, you can change its source
code and distribute your changes.

GIMP means “GNU Image Manipulation Program”. It is

free software to download at http://www.gimp.org/.
GIMP was built for a Linux system, but it can also runs
on any platforms like Windows and Mac OS.
GIMP TUTORIALS
 Download and install Gimp Image Editor
a. Open your browser and visit http://www.gimp.org/.
b. From the GIMP website, click on the button that says “Download” to
proceed to the download page.

c. Scroll down and look for the Current Stable Version. Click Download
GIMP directly.
d. Choose where you going to save your GIMP installer and Click Save.
Wait for the download to finish, it may take some time.
e. To install the GIMP application, Double click or Right Click on the file
installer to start the installation.
f. Just follow the on screen instruction to install the GIMP.
g. For more detailed instruction on how to download and install Gimp in
your computer, please visit YouTube website and type in “How to
download and Install Gimp” in the search bar and click search. See
picture below for the guide
Crop and Resize an image
a. Open GIMP photo editor and click on File > Open to open the image you
wish to crop and resize.
b. The image opens in a new editing window. Select
the rectangular icon from the GIMP toolbar.
c. After select that tool, move your mouse to the
image window and create a selection that you
wish to crop.
d. Then, select Image > Crop to selection from the
menu bar or you can also right click the image window and select Image
> Crop to selection.
e. To resize the image, you can click Image > Rescale Image.
f. Enter your desired width and click Scale. The image will then be resized and
automatically rescaled using the width you entered.
g. If you are satisfied with the result, you may now save you file by clicking File > Save as.
h. For the instruction on how to crop and resize an image, please visit YouTube website
and type in “gimp tutorial resize and crop image” in the search bar and click search. See
picture below for the guide.
COLOR ADJUSTMENT.
a. Open GIMP photo editor and click on File > Open to open the image you wish
to adjust the color.
b. Click Colors > Levels from the menu bar or right click the image window
and select Colors > Levels.
c. Click on textbox beside Channel to view the
four options: RGB (Red,Green, Blue) and alpha.
d. You can adjust the red channel by selecting it
and changing the value or
adjusting the input and output level.
e. You can continue adjusting the color levels by selecting the “Green” or “Blue”
channel options and then dragging the triangular slider buttons for the
preferred effect.
f. If you are satisfied with the result, you may now save you file by clicking File >
Save as.
g. For more tutorials about
applying color adjustment on an
image, please visit youtube
website and type in “gimp tutorial
Color Adjustment” in the search
bar and click search. See picture
besides for the guide.
 BRIGHTNESS
a. Open GIMP photo
AND CONTRAST.
c. A new dialogue box will
editor and click on File >
appear so that you can
Open to open the image
adjust your settings.
you wish to adjust the
d. You can adjust the
brightness and contrast.
"Brightness" and
b. Click Colors >
"Contrast" by clicking
Brightness-Contrast
and dragging
from the menu bar or
the scrollers left or right
right click the image
or by entering a value
window and select
into the text boxes
Colors > Brightness-
Contrast
e. You can click on “Edit these Settings as Levels" to bring up the "Levels" pop-
up window.
f. The "Brightness-Contrast" is a simpler version of the changes that you can
make with "Levels". "Levels" gives you much more control over the editing
process.
g. For the instruction on how
to apply color adjustment on
an image, please visit
YouTube website and type in
“gimp tutorial Brightness &
Contrast” in the search bar
and click search. See picture
besides for the guide.
TEXT TUTORIAL.
a. Open GIMP photo editor. And Create a new
document by clicking File> New. Just accept the
default value then click OK.
b. Open the Type tool by clicking on the black "A"
in the Toolbox window or by just pressing the
letter “A” in your keyboard.
c. Select the Philosopher font type. If you don’t have
philosopher font you
can download it here
https://www.ffonts.net/Philosopher.font?text=ABCDEFG
d. Type the word “Google” in the image window
e. Highlight 2 letter “G” and change the color to blue. Next, highlight the
first letter “o” and change their color to red, highlight the next letter “o”
and change their color to yellow lastly highlight the letter “l” and change
their color to green.

f. Don’t forget to lock the transparency
when you’re done.
g. The next step is to convert the text
into an image. Right click on your
google text layer and then click
"Discard Text Information".
h. GO to your google layer. Right
Click > Duplicate Layer, lock
transparency and fill the layer
with black.
i. Open Gaussian blur by click
Filters > Blur > Gaussian blur Do
a Gaussian blur of 10 pixels.
j. Select the layer that contains the colored Google logo and Open Bump
Map by clicking Filter > Map > Bump Map. Enter the following
information:
Azimuth: 90
Elevation: 45
Depth: 7
Leave the default value for X offset, Y offset, Water level and Ambient.
k. For more tutorials about Text and Text
effects, please visit youtube
website and type in “gimp text effects” in
the search bar and click search.
See picture besides for the guide.
IMAGE MANIPULATION (BEAR ON THE ROAD).
a. Open GIMP photo editor and click on File > Open
b. Locate the 2 images (European brown bear and road). If you don’t have
these images please download it here:
Bear
https://pixabay.com/photos/european-brown-bear-brown-bear-3336849/
Road : https://pixabay.com/photos/road-scenery-destination-4125391/
c. Select the Free Selection Tool from the tool bar.
d. Go to the tool option, and tick on Feather edges.
e. Change the value of the radius to 10
f. Create a selection in the image(A) then press CTRL+X to cut the
selection and go to the next image and press CTRL-V paste (B).
g. You can used the move tool to adjust the bear image.
h. Erase the unwanted outer image by using the Eraser Tool from the
tool bar then go to tool option and select the brush size.
i. Click and drag the outer image to delete.
j. Finally, click on Colors > Hue Saturation
k. Adjust the saturation.
l. For more tutorials about image manipulation, please visit
youtube website and type in “gimp manipulate images” in the
search bar and click search. See picture below for the guide.
COMBINING TEXT, GRAPHICS, AND IMAGES
Combining text, graphics, and images in your design will make your
message
clearer.
~Transparent shapes
•Add simple opacity to your shape to see clearly the text you want to
emphasize. It adds an elegant and focal point to your design
~Fonts and Shapes
• Used the right font size (not to small and not to big) and font type in your
design and combined it with a nice shapes.
~ Text and background
• Organized your design. Make used of the different text alignment on an
image(s).
~ Clean and clear background
Less is more. Focus on what matters. Use a clean and clear background
for the message to be readable.
😊THANK YOU FOR LISTENING!😊

☺WE ARE THE GROUP 3😊