DFP4113 MULTIMEDIA TECHNOLOGY

LAB 2:
WORKING WITH TYPOGRAPHY
AND IMAGES
Duration :

Learning Outcomes

3 Hours

CLO3

This Labsheet encompasses of activities which is 2A, 2B, 2C, 2D and 2E.
By the end of this laboratory, students should be able to:
1. Define what is graphic.
2. Design with text
3. Choose text fonts
4. Design a text as a menus, buttons, symbols and icons.
Hardware / Software: Adobe Photoshop

Individual Task: Design it by the end of this laboratory
You need to create a text as menus, buttons, symbols or icons for your multimedia
project in the laboratory session. The examples of the text design as below.
Icon Button:

Text button:

DFP4113 MULTIMEDIA TECHNOLOGY

Activity 2A
Activity Outcome: Text Character

Procedure:
Step 1: Open Adobe Photoshop and create new file
350x 200 pixel, Mode: RGB and BG color = White.
Step 2: Type any text on the file.
Step 3: Change the text color at “Character”
Click Window> Character
Step 4: Use “Warp text” and apply it to your text.

2

DFP4113 MULTIMEDIA TECHNOLOGY

Activity 2B
Activity Outcome: Mask for text

Procedure:
Step 1: Create new file
350x 200 pixel, Mode= RGB and BG color = White.
Step 2: Click “Horizontal Type Mask Tool” on toolbox and type the text on file > Enter

The color change to “PINK”

Step 3: It will display:

3

DFP4113 MULTIMEDIA TECHNOLOGY

Step 4: To color the text, use Paint Bucket or Edit > Fill at the menu bar.

Activity Outcome: Mask for text (Using Type Tool for special effect)
Step 1: Open a new file image. For Example: flower.jpg
Step 2: Choose “Horizontal Type mask Tool” > Type any text > Enter

Step 3: At the new file image that you already open before:
Select > All
Edit > Copy

4

DFP4113 MULTIMEDIA TECHNOLOGY

Step 4: At the editing file:
Choose Edit > Paste Special> Paste Into
Result:

Activity 2C
Activity Outcome: Text editing

Procedure:
Step 1: Create new file
500x 300 pixel, Mode= RGB and BG color = Background Color
Press D on your keyboard to reset your foreground and background color.
Step 2: Go to Layer -> New -> Layer and click Ok.
Make sure your background of the new layer with black. (#000000).
Step 3: Type some text.
So far it should look something like Figure 2.1:

Figure 2.1

5

DFP4113 MULTIMEDIA TECHNOLOGY

Step 4: Go to Image -> Image Rotation -> 90 Degree CW
Next Filter -> Stylize -> Wind, choose direction From the right and click ok.
Next Filter -> Wind (all the way top) or press CTRL + F, and apply it twice to make the
wind effect deeper.
Step 5: Go to Image -> Image Rotation -> 90 Degree CCW
Your image should look something like Figure 2.2 below:

Figure 2.2
Step 6: Go to Filter -> Distort -> Ripple and apply the following settings as shown in
Figure 2.3:

Figure 2.3
Step 7: Final result should look something like Figure 2.4:

Figure 2.4

6

DFP4113 MULTIMEDIA TECHNOLOGY

Activity 2D
Activity Outcome: Text editing in creating Rust text

Procedure:
Step 1: Open a new 600 x 200 sized document.
Insert a new layer
Write some text with the color BLACK.
Step 2: Go to Layer -> Rasterize -> Type.
Next Select -> Load Selection and click ok.
Step 3: Select the Gradient Tool (
Figure 2.5:

), and click on this from the top as shown in

Figure 2.5

Step 4: Now from there choose this gradient

called COPPER and click ok.

Apply the gradient as shown in Figure 2.6:

Figure 2.6

Step 5: Go to Image -> Adjustment -> Hue/Saturation
Apply the following settings as shown in Figure 2.7 and click ok:

Figure 2.7
7

DFP4113 MULTIMEDIA TECHNOLOGY

Step 6: Go to Layer -> Duplicate Layer and click ok.
Select Filter -> Filter Gallery > Texture -> Grain,
Apply the following settings as shown in Figure 2.8 and click ok:

Figure 2.8
Step 7: Change your layer mode to difference.

Step 8: Go to Select -> Modify -> Contract, enter VALUE= 3 and click ok.
Enter the Quick Mask Mode by clicking (
Press Q on your keyboard.

) (at left toolbar panel) or

Step 9: Go to Filter -> Distort -> Spherize,
Apply the following changes as shown in Figure 2.9 and click ok:

Figure 2.9

8

DFP4113 MULTIMEDIA TECHNOLOGY

Step 10: Exit the Quick Mask Mode by clicking (

) or press Q on your keyboard

Step 11: Go to Layer -> Duplicate Layer and click ok.
Press Delete button from the keyboard.
Change the layer mode to Color Dodge. (Above of toolbar)
Step 12: Go to Layer -> Layer Style -> Bevel and Emboss,
Apply the following settings as shown in Figure 2.10 and click ok:

Figure 2.10
Step 13: Go back to vary first text layer you made, go to
Layer -> Layer Style -> Drop Shadow and click ok.
Step 14: Go back to the latest layer you made (the most top one, PROBABLY
NUMBERED 3), and change it mode to Saturation.
Step 15: Press CTRL + D to deselect the selection.
The final result should look something like Figure 2.11 below:

Figure 2.11

9

DFP4113 MULTIMEDIA TECHNOLOGY

Activity 2E
Activity Outcome: Text editing in creating Fire text

Procedure:
Step 1: Open a new 500 x 500 PSD document.
Press D on your keyboard to reset your foreground and background color.
Fill the background colour with black. (#000000)
Type some text using a WHITE colour. (#FFFFFF) or change your text color
to white color
So far it should look something like Figure 2.12:

Figure 2.12
Step 2: Insert a new layer (layer -> new -> layer)
Click Alt -> Layer -> Merge Visible
So far it should look something like Figure 2.13: (see a layer)

Figure 2.13
Step 3: Go to edit -> transform -> rotate 90 Degree CCW
Go to Filter -> Stylize -> Wind, choose direction From the right and click ok.
Filter -> Wind (2 times)
10

DFP4113 MULTIMEDIA TECHNOLOGY

Step 4: Go to edit -> transform -> rotate 90 Degree CW
So far it should look something like Figure 2.14:

Figure 2.14
Step 5: Go to filter -> blur -> Gaussian blur (radius=2.5 pixels).
So far it should look like Figure 2.15:

Figure 2.15
Step 6: Go to image -> adjustment -> hue/saturation like Figure 2.16.
Hue =38, Saturation = 100 , lightness = 0

Figure 2.16
The output must be like Figure 2.17:

Figure 2.17

11

DFP4113 MULTIMEDIA TECHNOLOGY

Step 7: Go to layer -> duplicate layer.
In the layer menu, set color dodge as shown in Figure 2.18.

Figure 2.18
The output must be like Figure 2.19:

Figure 2.19
Step 8: Go to Layer -> Merge Down
Select Filter -> Liquify like Figure 2.20 (set it based on your creativity)
Brush option> Brush size = 30

Figure 2.20
12

DFP4113 MULTIMEDIA TECHNOLOGY

Step 9: Move text layer above as shown in Figure 2.21:

Figure 2.21
Step 10: Click blending option at LAYER TEXT as shown in Figure 2.22.

Figure 2.22

13

DFP4113 MULTIMEDIA TECHNOLOGY

When the blending option windows appear, set the attribute as shown in Figure 2.23
and Figure 2.24.
Choose = Color Overlay…then

Figure 2.23
Choose = Inner Glow > OK

Figure 2.24
Step 11: Final result should look something like Figure 2.25:

Figure 2.25

14