b

1. YOU NEED TO BE ABLE TO CREATE DIGITAL GRAPHICS FOR
AN INTERACTIVE MEDIA PRODUCT FOLLOWING INDUSTRY

2. WORKFLOW
BANNER SIZE REQUIREMENTS:
Banner Minimum Image Size
It has to be at least 2048 by 1152 pixels. If you try to upload an
image smaller than that you'll get an error
message.
Banner Maximum Image Size
The maximum size isn't limited by dimensions, but it is limited by
file size to 6MB.
Recommended Image Size for Banner
The size that YouTube and Twitch recommends you use is 2560 x
1440 pixels.

3.  Software interface: eg work area, tool box, status bar, file information, window control, floating palettes,
palette docking and tabs
This is the file information of the Photoshop GIF

4. A
B
C
WORKING AREA

5. Software interface: eg work area, tool box, status bar, file information, window control, floating palettes, palette docking
and tabs
 A- Colour panel: The Colour panel displays the colour values for the current foreground and
background colours. Using the sliders in the Colour panel, you can edit the foreground and background
colours using different colour models. You can also choose a foreground or background colour from the
spectrum of colours displayed in the colour ramp at the bottom of the panel.
 B- Layers panel: By default, you'll find the Layers panel in the lower right of the screen. Photoshop makes
it easy to rename a layer. Simply double-click directly on a layer's name in the Layers panel to highlight
it.
 C- Tools panel: Tools panel appears at the left of the screen. Some tools in the Tools panel have options
that appear in the context-sensitive options bar.

6. RULERS
 Rulers help you position images or elements
precisely. Guides and the grid help you
position images or elements precisely. Guides
appear as nonprinting lines that float over the
image. You can move and remove guides and
can also lock them so that you don’t move
them by accident.
 Guides help you align shapes, slices, and
selections. They appear automatically when
you draw a shape or create a selection or
slide. You can hide Guides if you need to. The
grid is useful for laying out elements
symmetrically. The grid appears by default as
nonprinting lines but can also be displayed as
dots.

7. LAYERS
In Photoshop, there are many types of layers. You can add text to your
image using a Type Layer. You can duplicate any type of layer. By using a
Layer Style, you can add a drop shadow or other effects to your photo.
For the creation of the GIF I had to make different layers for specific parts
of the GIF .To ensure that I know where the layers are when I need to edit
them I made folders for main areas of the GIFS. You can delete a layer by
clicking on it and dragging it to the little trash can at the bottom of the
panel. You can also duplicate a layer by dragging it down to the icon
beside the trash can, which creates a copy of that layer. This was done a
few times for the Alien GIF which needed the same images. A layer can be
moved by clicking on it and dragging it up or down the stack. The order
in which the layers positioned is the level in which the images are
arranged. You can reduce the opacity of a layer, thereby allowing some or
all of the image layer underneath to show through, depending on how
much you reduce the opacity. I had to lock my layers for each task to
make certain that the layers don’t move or change when editing.

8. PALETTE
 In the Adobe Colour Picker, you can choose
colours using four colour models: HSB, RGB,
Lab, and CMYK. The Colour Picker is used to set
the foreground colour, background colour, and
text colour of the GIF. For the colours of my
PAC-MAN GIF I had white images of the aliens
which needed to have colour, so i imported a
image of the aliens with colour and used the
Eyedropper tool to sample the colour to
designate the exact foreground or background
colour of the aliens. You can sample from the
active image or from anywhere else on the
screen.

9. GIF ANIMATION- PAC-MAN
To make a GIF of a animated character you can search on the web for sprite images that are collection
of images put into a single image. When you find your image you import the image to Photoshop and
use the cut tool to select the part of image you want. For my example I'm making a Pac-man Gif , so I
cut the sprite parts that I needed. Then I used the Magic wand tool to remove the black background.
After I removed all the parts which weren’t needed I duplicated the layers to make sure each image is
layered for the future tasks. This will allow me to edit each of the parts without effecting the other parts.

10. GIF ANIMATION-STREET FIGHTER
To make a GIF of a animated character you can search on the web for sprite images that are…. .when you
find your image you import the image to Photoshop and use the cut tool to select the part of image you
want. For my example I'm making a street fighter Gif , so I cut the sprite parts that I needed. Then I used
the Magic wand tool to remove the green background. After I removed all the parts which weren’t
needed I duplicated the layers to make sure each image is layered for the future tasks. This will allow me
to edit each of the parts without effecting the other parts.

11. TIMELINE ANIMATION
In my layers you can see all the layers for my Street fighter GIF. I named them in the order in which the GIF should be arranged in. This is important
because when you make the GIF you want the animation to flow smoothly. To animate layer content in timeline mode, you set key frames in the
Timeline panel, as you move the current-time indicator to a different time/frame, and then modify the position, opacity, or style of the layer. The
creation of the GIF involved you controlling the visibility of the layers by turning on off the eye icon on the layer. For the 1st sequence on the timeline I
had only the layer called “first” turned on and the rest off. This process happened for every layer of the Fighter gif folder. The timeline is set to forever
which means that the animation will continuously play. Key frames 2-12 have a delay time of 0.1 seconds and the key frame 1 was set to 0.5 seconds

12. TIMELINE ANIMATION
In my layers you can see all the layers for my PAC-MAN GIF. I named them in the order in which the GIF should be arranged in. This is important
because when you make the GIF you want the animation to flow smoothly. To animate layer content in timeline mode, you set key frames in the
Timeline panel, as you move the current-time indicator to a different time/frame, and then modify the position, opacity, or style of the layer. The
creation of the GIF involved you controlling the visibility of the layers by turning on off the eye icon on the layer. For the 1st sequence on the timeline
I had only the layer called “1” turned on and the rest off. The RED layer in the alien folder was turned on and this object was positioned in each key
frame to lookalike its been eating. This process happened for every layer of the PAC-MAN gif folder. The timeline is set to forever which means that
the animation will continuously play. Key frames 2-12 have a delay time of 0.1 seconds and the key frame 1 was set to 0.5 seconds

13. SOCIAL MEDIA
I needed to add the socials symbols of social media platforms the company is accounted too. This was a fairly simple
process that involved the text tool. I used the lemon/milk regular font with the size 72 font. I added a gradient overlay to
give off a black to silver effect which is done by using effect tool. The effect tool is done by double tapping the FX symbol
and clicking the gradient overlay and drop shadow and adjusting through settings to make the best design.

14. TEXT BACKGROUND
I had to duplicate the layer, by
pressing Ctrl+J. If we look once
again in the Layers palette, we see
that we now have two layers. The
original Background layer is on the
bottom, and the copy is layer 2.
Next, we need to add a new blank
layer between the layer 2 and "Layer
1". Currently, "Layer 1" is the layer
that's selected in the Layers palette.
Then I made the layer white by using
the fill tool.
I added the text, by using the Type Tool
from the Tools palette. Options Bar at the
top of the screen and choose whichever
font you want to use for the effect.
After I inserted the text I need to
resize and reposition my text at the
point I find suitable, and this was can
do both of those things using Free
Transform command in the edit
menu.
This is the arrangement of
the layers. To create the
illusion that the photo is
inside the text, I needed to
use clipping mask. This is
found by right clicking on the
layer .This will "clip" the
photo on "Layer 2" to the
text on the layer directly
below it. Any areas of the
photo that appear directly
above the letters will remain
visible in the document. The
rest of the photo will
disappear from view.
This is the final result of the
text. This process was done 6
times for the different themes.

15. IMAGE SETTINGS: SIZE; RESOLUTION, WIDTH; HEIGHT; COLOUR MODE;
BACKGROUND; TRANSPARENCY; ASPECT RATIO, FILE NAME
Size: Width =67cm Height =38cm
Resolution: 72
Background: Transparent
Pixel Aspect Ratio: Square Pixels
Colour Mode: RGB Colour

16. IMAGE SETTINGS: SIZE; RESOLUTION, WIDTH; HEIGHT; COLOUR MODE;
BACKGROUND; TRANSPARENCY; ASPECT RATIO, FILE NAME
Size: Width =37cm Height
=19cm
Resolution: 72
Background: Transparent
Pixel Aspect Ratio: Square Pixels
Colour Mode: RGB Colour

19. OPEN, SAVE
 For the gif I made 6 text
templates with different
designs ,which needed to
be edited before adding
to the main workspace.
The images had white
spaces which need to
removed. The required
me to open the images
into a different tab.
I had to save my work constantly to
avoid myself from losing work which
wasn’t previously saved. To save the
document you go to FILE>SAVE then
you make a name for the document

20. EXPORT
 To save the gif you have to go FILE>EXPORT>SAVE FOR WEB (LEGACY) then a window will open that will
require you to change the preset to GIF. The colours section for the GIF preset should always be 256
colours.

21. REFLECTION ON FINAL PRODUCT
 When I finished my final product I was happy with how the GIF came out. I didn’t have any struggle
during the process of the creation of the GIF and everything compared with my original intentions. The
GIF displays the company's name in the centre of the GIF and shows examples of retro games that fit its
selling point, therefore the GIF works perfectly for the purpose its intended. If I had more time I would
have made the background of the GIF more creative and had it have a motion instead of a still
background.The ideas I generated were independent and relied on my own creativity and with the help
of the clients personal image.