National University of Technology

Department of Computer Science

Lab Manual
Introduction to ICT (CS 1028)
1|Page

Table of Contents
FOREWORD………………………………………………………………………………………………..3

LAB STRUCTURE .......................................................................................................................... 4

Lab Policy……………………………………………………………………………………………….....5

PRACTICAL 1 UNDERSTANDING OF OPERATING WINDOWS AND LINUX……………..….6

Practical 2 Hands-on with MS Office (Word Processing and Presentation……………….. ……17

Practical3 Hands-on with MS Office (Excel)…………………………….……………….………….…24
PRACTICAL 4 OPEN SHOT VIDEO EDITING.................................................................................. 30
PRACTICAL 5 PENCIL 2D-PART-1............................................................................................. 36

PRACTICAL 6 PENCIL 2D-PART-2………………………………………………………...……...38

PRACTICAL 7 GETTING STRTED WITH PHOTOSHOP PART 1............................................... 40

PRACTICAL 8 GETTING STARTED WITH PHOTOSHOP PART 2 ............................................ 50
PRACTICAL 9 OPEN ENDED LAB 1 .......................................................................................... 57
PRACTICAL 10 FIGMA TOOL PART 1 ...................................................................................... 58
PRACTICAL 11 FIGMA TOOL PART 2 ....................................................................................... 60
PRACTICAL 12 HTML AND WEBPAGE DEVELOPMENT PART 1 ........................................... 62
PRACTICAL 13 HTML AND WEBPAGE DEVELOPMENT PART 2 ............................................. 65
PRACTICAL 14 OPEN ENDED LAB 2 ........................................................................................ 73

1|Page
2|Page

Foreword

The primary purpose of the laboratory part of CS1028 Introduction to ICT is to

introduce basic principles of different useful software applications, and to use different

important software for document writing, making Presentations, Web Development,

Game Development etc. This lab constitutes 25% of the total marks of the course.

This lab is designed and intended to implement the knowledge of using and

downloading different software to perform real-world computing problems.

In order that students have a fairly good understanding of the theory underlying the

experiments, the entire course is designed such that classroom lectures precede lab

work. Students are advised to pay close attention in class so that they can perform

well in the lab.

2|Page
3|Page

Lab Structure
Provided lab manual is organized in such a way that the students can directly use it in
the laboratory. Each laboratory exercise comprises of
1. Statement of the problem
2. Algorithm/Pseudo Code
3. Source Code
4. Results
5. Conclusion
Student must follow this sequence to conduct any experiment in the computer
laboratory and write your report accordingly. The lab is divided into 2 stages. Each
stage exemplifies various concepts. At each stage there is a software application
example. That can be an example of how software should work.
In-Lab: At this stage students will go through multiple scenarios and practice their
knowledge in it. Individual Lab practice is integrated at this stage where student utilize
their understanding and improve their problem-solving skills.
Post Lab: After Lab is completed at this level students will perform real time
problems at home to further strengthen their concepts and impart their creative skills.
The nature of problem given at this stage will be more intricate.

3|Page
4|Page

Lab Policy
Groups
Students will be formed into groups / syndicates of two or three for projects/Open
ended labs(optional). This pair programming approach may vary depending upon the
experiment nature.
Lab Reports
Students will perform the Experiment/Practical in group(optional), and turn in individual
laboratory reports on the assigned date of deadline mentioned at the beginning of
each lab experiment detailed document. Your report should be self-contained, i.e. a
computer scientist should be able to perform the experiment and duplicate your results
by reading your report. DO NOT "adjust" your data to make them fit what you believe
to be an acceptable value. Plagiarism is strictly forbidden in individual reports. Those
Students who found in such activities will be awarded no credits plus re-submission
will not be entertained. For each Lab Task maintain screenshots of results along with
all the program files as a record in separate lab folder with name of student id or group
id. Task Screenshots should be shown along with program source code as evidence
of task implementation. In order to achieve the expected results do not “adjust” your
actual results instead explain the discrepancies.

Report Format
The report must be typewritten. A report should include the following in order.
A. Title page, which includes the following information, in given format:

4|Page
5|Page

Introduction to ICT
Lab Code: _______

Subject/Course Name
B.

Semester/Sect
Department Registration Number/Name
ion

Instructor’s Name Instructor’s

Date
Signature

Objective or purpose and scope of the experiment work.

C. Theoretical aspect of the experiment.
D. Experimental procedure that explains briefly the pseudocode or algorithm used
to carry out the experiment by utilizing the equipment and data provided.
E. Experimental and /or calculated results. (Include all data (screenshots, numeric)
you have taken, a sample calculation, and the results) All results should be
documented as well as maintained in electronic form. Hand written results or source
code will not be accepted
F. Discussion of results in light of the theoretical “predictions”. Include an error
analysis. Quantify the errors whenever possible.
G. Conclusions, wherein you write what you learned from the experiment. Your
conclusions must summarize your report and must be based on your experimental
results.

5|Page
6|Page

Practical 1
Basic Understanding of Windows
Objective
In this lab we are going to work around basic understanding of windows through different
tasks. Learning key constructs of understanding windows will be applied.

Learning Outcomes
The Scope of this lab practical is to:
• Learn the basic structure of windows.
• Learn how to do basic tasks of windows.

Theoretical Explanation
Windows is an operating system designed by Microsoft. The operating system is what allows
you to use a computer. Windows makes it possible to complete all types of everyday tasks on
your computer. For example, you can use Windows to browse the Internet, check your email,
edit digital photos, listen to music, play games, and do much more. Windows is also used in
many offices because it gives you access to productivity tools such as calendars, word
processors, and spreadsheets.
Microsoft released the first version of Windows in the mid-1980s. There have been many
versions of Windows since then, but the most recent ones include
Windows Version Release Date
Windows 11 2021
Windows 10 2015
Windows 8 2012
Windows 7 2009
Windows Vista 2007
Windows XP 2001

Practice Task
In Lab Tasks
Task 1 (Walkthrough and practice task)
To add a new user (with a Microsoft account):
1. Open the Settings app, then select Accounts.

6|Page
7|Page

2. Select Family & other users. Scroll down to the Other Users section, then
choose Add someone else to this PC.

3. If the new user already has a Microsoft account, enter the associated email
address, then click Next.

7|Page
8|Page

4. The user can then sign in to the computer with his or her Microsoft account
information. Note that it may take several minutes to configure a user's settings
when logging in with a Microsoft account for the first time.

To add a new local user (without a Microsoft account):

1. From the Account settings, click Add someone else to this PC.

2. Select The person I want to add doesn't have an email address.

8|Page
9|Page

3. The account creation screen will appear. Select Add a user without a
Microsoft account.

4. Enter an account name, then type the desired password. It's important to
choose a strong password—in other words, one that is easy to remember but
difficult for others to guess. For more information, check out Password Tips in
our Tech Savvy Tips and Tricks tutorial. When you're finished, click Next.

9|Page
10 | P a g e

5. The local user can then sign in to the computer with this account information.

Signing out and switching users

If you're finished using your account, you can sign out. To do this, click the Start button, select
the current account in the top-left corner, then choose Sign out. Other users will then be able
to sign in from the lock screen.

10 | P a g e
11 | P a g e

It's also easy to switch between users without signing out or closing your current apps.
Switching users will lock the current user, so you won't need to worry about someone else
accessing your account. To do this, select the current account, then choose the desired user
from the drop-down menu. You can use this same method to switch back to the other user.

Managing user accounts

By default, the user account you created when setting up your computer is an Administrator
account. An Administrator account allows you to make top-level changes to the computer,
like adding new users or modifying specific settings. Any users you add are automatically
assigned to a Standard user account, which should meet the everyday needs of most users.
You will probably only need one Administrator account on a shared computer, but you have
the option to promote any user to an Administrator account if you want.

1. From the Family & other users’ options, select the desired user, then
click Change account type.

11 | P a g e
12 | P a g e

2. Select the desired option from the drop-down list, then click OK. In this
example, we'll choose Administrator.

3. The user will now have administrative privileges.

12 | P a g e
13 | P a g e

Setting parental controls

Windows offers a variety of parental controls that can help you monitor your children's
activity and protect them from inappropriate content. For example, you can restrict certain
apps and websites or limit the amount of time a user can spend on the computer. You'll need
to add a family account for each user you want to monitor. Each user will also need to have a
Microsoft account; you cannot enable parental controls on a local account.

1. From the Family & other users’ options, select Add a family member.

2. Select Add a child, enter the new user's email address, then click Next.

13 | P a g e
14 | P a g e

3. The new member will then need to confirm the addition to your family group
from his or her inbox.

14 | P a g e
15 | P a g e

4. Once this is done, select Manage family settings online.

5. A page will open in a new browser window. From here, select the desired user
to set parental controls.

TASK 2
Change Folder Icon
Step 1: Right-click on a folder you want to customize and select "Properties."

Step 2: In the "Customize" tab, go to the "Folder icons" section and click the "Change Icon"
button.

Post Lab Task

Task 1
Install any antivirus software in your systems and take screenshots of each and every step and
submit it in the form of word document.

Task 2
Change the regional settings

To change regional settings, follow the steps described for your computer's operating system.

In Windows 10

15 | P a g e
16 | P a g e

1. Click the Start button, and then click Control Panel.

2. Click Change date, time, or number formats.
3. The Region dialog box appears.
4. On the Formats tab, select the format you want to change from the drop-down list.
Now click the Additional Settings button.
5. The Customize Format dialog box appears.
6. Click the tab that contains the settings that you want to modify and make your changes.
For example, to change part or all of a number format, click the Numbers tab and
change the setting that you want.

16 | P a g e
17 | P a g e

Practical 2
Hands-on with MS Office (Word Processing and Presentation)

Objectives:
In this lab session students will learn about very useful software. After this lab student will be
able to use this software for number of purposes.

Pre-Requisites:
Knowledge of Keyboarding.

Use of MS office word:

Microsoft Office (or simply Office) is a family of server software, and services developed by
Microsoft. It was first announced by Bill Gates on August 1, 1988, in Las Vegas. The first
version of Office contained Microsoft Word, Microsoft Excel, and Microsoft PowerPoint. Over
the years, Office applications have grown substantially closer with shared features such as a
common spell checker, data integration etc. Office is produced in several versions targeted
towards different end-users and computing environments. The original, and most widely used
version, is the desktop version, available for PCs running the Windows, Linux and Mac OS
operating systems. Office Online is a version of the software that runs within a web browser,
while Microsoft also maintains Office apps for Android and iOS. Microsoft Office is a suite of
desktop productivity applications that is designed specifically to be used for office or business
use. It is a proprietary product of Microsoft Corporation and was first released in 1990.
Microsoft Office is available in 35 different languages and is supported by Windows, Mac and
most Linux variants. It mainly consists of Word, Excel, PowerPoint, Access, OneNote, Outlook
and Publisher applications. Microsoft Office was primarily created to automate the manual
office work with a collection of purpose-built applications.

Important Features of MS Word:

MS Word not only supports word processing features but also DTP features. Some of the
important features of MS Word are listed below: i) Using word you can create the document
and edit them later, as and when required, by adding more text, modifying the existing text,
deleting/moving some part of it. ii) Changing the size of the margins can reformat complete
document or part of text. iii) Font size and type of fonts can also be changed. Page numbers
and Header and Footer can be included. iv) Spelling can be checked, and correction can be
made automatically in the entire document. Word count and other statistics can be generated.
v) Text can be formatted in columnar style as we see in the newspaper. Text boxes can be
made. vi) Tables can be made and included in the text. vii) Word also allows the user to mix
the graphical pictures with the text. Graphical pictures can either be created in word itself or
can be imported from outside like from Clip Art Gallery. viii) Word also has the facility of
macros. Macros can be either attached to some function/special keys or to a tool bar or to a
menu. ix) It also provides online help of any option.

Introduction to MS Power Point:

17 | P a g e
18 | P a g e

A PowerPoint presentation is a presentation created using Microsoft PowerPoint software. The

presentation is a collection of individual slides that contain information on a topic. PowerPoint
presentations are commonly used in business meetings and for training and educational
purposes. Microsoft PowerPoint is a software product used to perform computer-based
presentations. There are various circumstances in which a presentation is made: teaching a
class, introducing a product to sell, explaining an organizational structure, etc. The preparation
and the actual delivery of each are quite different. PowerPoint typically comes with a set of
preloaded themes for you to choose from. These can range from simple color changes to
complete format layouts with accompanying font text. Themes can be applied through the
whole presentation or a single slide. Using the page setup allows you to optimize the
presentation for the display size; for instance, you should use a larger screen ratio when
displaying on a projector compared to a computer screen.

Features:

PowerPoint software features and formatting options include a wizard that walks you through
the presentation creation process. Design templates---prepackaged background designs and
font styles that will be applied to all slides in a presentation. When viewing a presentation, slide
progression can be manual, using the computer mouse or keyboard to progress to the next slide,
or slides can be set up to progress after a specified length of time. Slide introductions and
transitions can be added to the slides.

Walk Through Task

STARTING MS word:
There are a variety of ways to start MS word and the method you use depends on
whether you intend to open an existing document or create a new one. In Windows,
the most common way is from the Start Menu.

1. Click the Start Button on the taskbar and click on All Programs
2. Click on MS word

18 | P a g e
19 | P a g e

When you open up MS Office, a blank document opens and you can begin working
immediately. Let's first take a look at the program window.

Title bar

19 | P a g e
20 | P a g e

The Title bar is located at the top of the MS word window and shows the name of
the current document. The document name will appear as a generic Untitled 1 until
you save and name your document.

Menus

The Menu bar is located just below the Title bar and contains standard menu items
such as File, Home, Insert, Design, Layout, References, Mailings, Review, View
and Help. Edit, View, Format, Table, Tools, Window and Help.

Toolbars

Right below the menu you'll find the Standard Toolbar and the Formatting Toolbar.
MS word provides several toolbars for your use.

Starting Power point:

There are a variety of ways to start MS power point and the method you use
depends on whether you intend to open an existing presentation or create a new
one. In Windows, the most common way is from the Start Menu.

1. Click the Start Button on the taskbar and click on All Programs
2. Click on MS power point

Navigating the Impress Window

When you first open up Power point, you'll be presented with a blank presentation
window. Here's what the Window looks like:

20 | P a g e
21 | P a g e

Practice Task
In Lab Task
A. Create a new blank document in Writer.

Click the File Menu > New > and select Blank document. A new Blank document
will appear as shown below:

B. Set Line Spacing

Your business letter needs to be single spaced. Set your line spacing to Single Line
Spacing.

From the Toolbar > Paragraph >click linespacing > select desired spacing .

C. Set Header Footer

Your document needs header and footer. Set your document header footer.

Menu > Insert > Header > Select required format.

Menu > Insert > footer > Select required format.

21 | P a g e
22 | P a g e

D. Saving Your Document

It's important to save your documents to protect yourself from power outages and
other incidents that could result in lost data. You can save your documents to
storage locations such as hard drives, USB flash drives or in the Cloud. In this
example, we'll save the document to our hard drive on the computer in Windows.

The Save Command

There are 3 ways you can save your Writer documents:

• The Save short cut Clrt+S

• The File > Save Command from the menu
• The File > Save As command.

Task 2
A. Inserting Text

Impress slides have placeholders for you to type in. For example, the title slide
has placeholders for the title and a text subtitle. To enter text, just click the
placeholder to enter text on a slide.

B. Choose a Slide Design

There are many different slide designs available in Impress depending on the
theme of your presentation. You can also create your own Maste r designs. Here
we will add an existing design to our presentation.

C. Adding Slides

Add a New Slide and insert text using a Single Bulleted List.

D. Working with Indented Bulleted Lists

In text boxes created automatically by Impress (called Auto Layout), the ou tline
styles available are by default bulleted lists therefore, every text box included in
the available layouts is already formatted as a bulleted list.

E. Saving Your Presentation

It's important to save your presentations often to protect yourself from powe r
outages and other incidents that could result in lost data. You can save your
presentations to storage locations such as hard drives, USB flash drives or in the
Cloud. In this example, we'll save the document to our hard drive on the computer
in Windows.

22 | P a g e
23 | P a g e

The Save Command

There are 3 ways you can save your Impress documents:

• The Save Short Cut, Clrt+S

• The File > Save Command from the menu
• The File > Save As command

Post Lab Task

Task 1
Create document of any topic in a MS office using at least fifteen features of MS word
software like line spacing, bullets, images, alignment etc. You should use table of contents,
different shapes, watermark and add page numbers. At the end of same document, you must
mention about features you have used in your document in points.
Task 2
Complete a presentation of in lab task in an MS power point presentation and choose formal
layout, Design, Transitions, color combinations, use at least 15 features to make your
presentation more formal and attractive.

Note: Be selective in topic selection of your document. It will grade separately.

23 | P a g e
24 | P a g e

Practical 3
Hands-on with MS Office (Excel)

Objectives:
In this lab session students will learn about very useful software. After this lab student will be
able to use this software for number of purposes.

Pre-Requisites:
Knowledge of Keyboarding.

Use of MS Excel:

Microsoft Excel is a spreadsheet program included in the Microsoft Office suite of

applications. Spreadsheets present tables of values arranged in rows and columns that can be
manipulated mathematically using both basic and complex arithmetic operations and functions

Important Uses of MS Excel:

The three most common general uses for spreadsheet software are to create budgets, produce
graphs and charts, and for storing and sorting data. Within business spreadsheet software is
used to forecast future performance, calculate tax, completing basic payroll, producing charts
and calculating revenues.

Walk Through Task

STARTING MS Excel:
There are a variety of ways to start MS Excel and the method you use depends on
whether you intend to open an existing document or create a new one. In Windows,
the most common way is from the Start Menu.

3. Click the Start Button on the taskbar and click on All Programs
4. Click on MS Excel

When you open up MS Excel, a blank document opens and you can begin working
immediately. Let's first take a look at the program window.

24 | P a g e
25 | P a g e

Title bar

The Title bar is located at the top of the MS Excel window and shows the name of
the current document. The document name will appear as a generic Book1 until
you save and name your document.

Menus

The Menu bar is located just below the Title bar and contains standard men u items
such as File, Home, Insert, Page Layout, Formulas, Data, Review, View, and Help.

Toolbars

25 | P a g e
26 | P a g e

Right below the menu you'll find the Standard Toolbar and the Formatting Toolbar.
MS Excel provides several toolbars for your use.

Practice Task

Walkthrough Task

Spreadsheet Layout

To create a new spreadsheet. Click on open office then click on spreadsheet. On your PC screen
will appear a basic spreadsheet, divided into numbered rows and lettered columns.

The rows and columns intersect to create small boxes, which are called cells. Each cell is
identified by its column letter and row number. So, the very first cell in the upper left-hand
corner is called A1. Just below A1 is A2. Just to the right of A1 is B1. Just below B1 is B2,
and so on. In the image below, for example, cell D9 is highlighted.

26 | P a g e
27 | P a g e

Insertion and deletion of rows and columns

You can insert and delete rows by right click on a row/column which you want to delete or
insert and click on an option insert or delete.

Merge Cells

You can merge different cells of a single row/column by selecting it and select an option of
format in toolbar and then select merge cells.

Setting the View Options

You can select some settings to change the view of the spreadsheet or display toolbars you
frequently use, such as the one for entering formulas to make calculations. To do this, in the
menu at the top click on View and make sure there’s a check mark next to Show Formula Bar
(to display a box to enter formulas).

You can enter three different types of information into a cell:

• Numbers – so you then can perform mathematical calculations on them.

• Text – to identify what the numbers in the columns and rows represent, usually by
typing headings across the top of the columns or on the left edge of the rows
• Formulas – to perform calculations on the numbers in a column or a row of cells.
To enter information into a cell, simply click on the cell and type in the information. Each time
you type information into a cell, you’ll notice the information also appears in the Formula bar,
the box just above the columns and rows. For example, if you click on cell:

B3

And type in the number:

100

You will see the number 100 displayed in the formula bar above.

27 | P a g e
28 | P a g e

Text Headings
To enter text headings for the various columns and rows to identify them, follow the same
procedure as you would with entering numbers.

IN LAB TASK
TASK # 1

Create a spreadsheet of quiz evaluation for all students of your class. Make seven columns
1. Column 1 for serial number like 1, 2, 3.

28 | P a g e
29 | P a g e

2. Column 2 for registration numbers.

3. Column 3 for Names.
4. Column 4,5,6,7 for marks of quiz 1,2,3,4.
5. Column 8 for adding all marks of all quizzes and find the percentage of each student
from 15% through using a formula.

Post Lab Task

Task 1
Create document of any topic in a MS Excel using at least 10 Formulas, graphs, bar charts
and as many features as possible. At the end of same document, you must mention about
features you have used in your document in points.
Task 2
Group a: includes all those students having even registration numbers.
Group b: includes all those students having odd registration numbers.

29 | P a g e
30 | P a g e

Practical 4
Open Shot Video Editor
Objective
In this lab session students will learn
• How to edit video using open shot video editing,
• Apply all features of this app on a video to make it more presentable.

Scope
• Use of video effects
• Use of cross platform
• Use of animations and key frames

Introduction
Open Shot Video Editor is easy to use, quick to learn, and surprisingly powerful video editor.
Some of our most popular features and capabilities are as follows.
• Cross-Platform
• Trim & Slice
• Animation & Key frames
• Unlimited Tracks
• Video Effects

Features
• Cross-platform (Supports Linux and Windows)
• Support for many video, audio, and image formats.
• Powerful curve-based Key frame animations.
• Drag and drop support.
• Unlimited tracks / layers
• Clip resizing, scaling, trimming, rotation, and cutting
• Video transitions with real-time previews
• Animation support.

Download Link for Open Shot Video Editor

https://www.openshot.org/download/

In Lab Task

30 | P a g e
31 | P a g e

Lab Task 1

Import Photos & Music

We need to import files into Open Shot. Drag and drop a few images (*.JPG, *.PNG, etc.) and
a music file (most formats will work) from your Desktop to open Shot. Be sure to drop the files
where the arrow in the illustration is pointing to.

Lab Task 2

Arrange Photos on Timeline

Next, drag each photo onto the timeline (as seen in the illustration). The timeline represents
your final video, so arrange your photos in whatever sequence you want them to appear in your
video. If you overlap two clips, open shot will automatically create a smooth fade between
them, displayed by blue rounded rectangles between the clips. Remember, you can rearrange
the clips as many times as needed by simply dragging and dropping them.

31 | P a g e
32 | P a g e

Lab Task 3

Add Music to Timeline

To make our photo slide-show more interesting, we need to add some music. You should have
imported a music file in step 1. Click on the music file, and drag it onto the timeline. If the
song is too long, grab the right edge of your music clip, and resize it smaller.

32 | P a g e
33 | P a g e

Lab Task 4

Preview your Project

To preview what our video looks & sounds like, click the Play button under the preview
window. You can also pause, rewind, and fast-forward your video project by clicking the
corresponding buttons.

33 | P a g e
34 | P a g e

Lab Task 5

Export your Video

Once you are happy with your photo slide-show video, the next step is to export your video.
This will convert your open Shot project into a single video file, which will work on most
media players such as VLC or websites such as YouTube, Vimeo, etc. Click on the Export
Video icon at the top of the screen (or use the File > Export Video menu). Choose from one
of the many preset export options, and click the Export Video button.

Lab task 6
Fade In
Fade Out
How to remove Audio of any video
Timelapse And Slow motion

Post Lab Tasks

Lab Task 1
Take at least 3 short video clips and edit it in Open Shot Video Editor. Following tasks should
be performed on video

1. Merge all video clips.

2. Add background music.
3. Add water mark.
4. Add Fade in and fade out.

34 | P a g e
35 | P a g e

5. Add some effects and Transitions.

6. Trim video
7. Apply Slow motion effect

Helping Material

https://www.youtube.com/watch?v=0a_B4LxTy3Y&ab_channel=TuxDesigner

35 | P a g e
36 | P a g e

Practical 5
Pencil 2D tool
Objective:
The objective of this lab is to:
• Understand different layers in pencil2D
• Understand how to create a 2D animation.
Introduction:
Pencil 2D is an easy and intuitive tool to make 2D hand-drawn animation. Pencil2D is a free
and open-source 2D animation software for Windows, macOS and Unix-like operating
systems. It is released under the GNU General Public License. It is used for
making cartoons using traditional techniques (tracing drawings, onion skinning etc),
managing vector and bitmap drawings.
It allows saving the animations in its own native file format, as well exporting it as a
sequence of images in PNG, JPEG, BMP or TIFF format, and also in a video file in AVI,
MP4, WebM, GIF or APNG format.

User Interface:

1 In the top you have the menu bar. Here you can load and save files, import images,
add layers and much more.

2 In the bottom you’ll find the timeline, which keeps track of your key-frames.

36 | P a g e
37 | P a g e

3 To the left and right you’ll find dock able windows, where you can select tools,
colors, choose settings and more.

4 In the middle you have the canvas. The canvas is unlimited in size. The white
rectangle in the middle of the canvas, is the camera field. When you open Pencil2D
the first time, this size will be 800x600 pixels, but you can change it by double-
clicking on the camera layer. Remember that the bigger camera field you choose, the
more RAM and computer power you use and need

Working:
Step 1:
Download and install pencil 2D in your systems.
Step 2:
Open pencil 2D.
Step 3:
Create new file from menu.
File > new
Step 4:
Select desired layer from layers, select drawing tool from toolbox and draw your desired
shape.
Step 5:
Add new frame, select layer and continued drawing till you complete your desired animation.

In Lab Task:
Task 1:
Open pencil 2D and explore the differences between bitmap layer and vector layer.
Task 2:
Draw different shapes with both bitmap and vector layer and colored them.
Task 3:
Draw walking or running 2D character with the help of different key frames.

Post Lab Task:

Draw your favorite cartoon character in pencil 2D and try to make it similar to original
(shape, colors, etc.).

37 | P a g e
38 | P a g e

Practical 6
Pencil 2D tool part 2
Objective:
The objective of this lab is to:
• Understand different layers in pencil2D
• Understand how to add music/background sound in an animation.
Introduction:
Pencil 2D is an easy and intuitive tool to make 2D hand-drawn animation. Pencil2D is a free
and open-source 2D animation software for Windows, macOS and Unix-like operating
systems. It is released under the GNU General Public License. It is used for
making cartoons using traditional techniques (tracing drawings, onion skinning etc),
managing vector and bitmap drawings.
It allows saving the animations in its own native file format, as well exporting it as a
sequence of images in PNG, JPEG, BMP or TIFF format, and also in a video file in AVI,
MP4, WebM, GIF or APNG format.
User Interface:

5 In the top you have the menu bar. Here you can load and save files, import images,
add layers and much more.

6 In the bottom you’ll find the timeline, which keeps track of your key-frames.

7 To the left and right you’ll find dock able windows, where you can select tools,
colors, choose settings and more.

38 | P a g e
39 | P a g e

8 In the middle you have the canvas. The canvas is unlimited in size. The white
rectangle in the middle of the canvas, is the camera field. When you open Pencil2D
the first time, this size will be 800x600 pixels, but you can change it by double-
clicking on the camera layer. Remember that the bigger camera field you choose, the
more RAM and computer power you use and need

How to add audio:

File > Import > Sound > Create audio layer

Lab task:
Create a proper story by using multiple layers and multiple frames, use background images,
add audio, and add different audios in different frames.

39 | P a g e
40 | P a g e

Practical 7

Getting Started with Photoshop

Objective:

In this lab session you will explore the Photoshop workspace and use Photoshop to modify a
photograph taken with a digital camera. Photoshop is a very complicated application, and it is
learned best through repetition.

Scope:
➢ Identify the categories of Adobe Photoshop tools.
➢ Identify the Primary Tools of the Adobe Photoshop toolbar.
➢ Identify the Secondary Tools of the Adobe Photoshop toolbar.

Introduction:
Photoshop is the industry-standard image rendering software. You can use Photoshop to create
customized graphics, edit photographs and make flyers and images for print as well as for the
web. This handout provides a simple how-to guide to familiarizing yourself with the Photoshop
environment.

Photoshop Tools:

40 | P a g e
41 | P a g e

41 | P a g e
42 | P a g e

42 | P a g e
43 | P a g e

43 | P a g e
44 | P a g e

Walkthrough Task
Task 1

CREATING PHOTOSHOP FILE

1. To create new file, select File>New (CTRL + N)

2. Option 1 – To Print as hardcopy for example - flyer, poster, banner, stickers, tag.

44 | P a g e
45 | P a g e

- Measurement unit in inches, centimeters or millimeter

- Color Mode: CMYK (subtractive color)

3. Option 2 – For softcopy such as fb banner, website banners, online adverts.

Measurement unit in PIXELS

Color Mode: RGB (ADDITIVE COLOUR)

Task 2
Correcting backlight

45 | P a g e
46 | P a g e

1. Open file tech04

2. Image > Adjustment > Level

3. Set the value to 45 or anything below 70

4.Select Magic Wand Tool

5. Enhance tolerance to 70.

6. Click on any point of the sky to select entire sky

46 | P a g e
47 | P a g e

7. Image > Adjustment > Shadow/ Highlight - set highlight to 40% or else

8. Select > Deselect

Task 3
Removing facial blemishes/mole

47 | P a g e
48 | P a g e

1. Open tech14 image.

2. Select clone stamp and set brush to 50 px

3. Hold down ALT key and click on a flawless patch of skin ( near a spot to make a
copy).

4. Stamp on a mole spot.

5. Repeat step until all spots are removed.

6. Next, remove to redness from face. Select sponge tool. Set

Brush Size to 350 pixel and Mode to Desaturate

7. Click and drag this tool over the red areas to remove them.

Task 4
Enhancing portraits removing red eye

48 | P a g e
49 | P a g e

1. Open image tech13.

2. Select Red Eye Brush Tool from toolbox.

3. Click on the eyes and release.

4. To add reflection to make eyes look more realistic, select Brush Tool.

5. Set to Size 5-pixel, Mode Normal and Opacity 100%.

6. Click to white eye only once.

49 | P a g e
50 | P a g e

PRACTICAL 8
GETTING STARTED WITH PHOTOSHOP PART 2

In Lab Tasks
In Lab Task 1
Removing white background on logo and turn into transparent image.

1. Open UiTM logo

2. Double click on the layer in the layer’s palette on the right-hand side of the screen by
default.

3. Press OK when you see this message.

After, layer background turn to Layer 0

50 | P a g e
 51 | P a g e

4. Grab the magic wand tool and click on the white background. (W)

5. Press Delete on your keyboard.

6. Press Ctrl + D on your keyboard.

7. Repeat step 5 and 6 if any white spot left

8. Hit Ctrl + Shift + S (SAVE AS) on your keyboard and select CompuServe (*.gif) in the
File Type dropdown.

In Lab Task 2
Cropping an object.

1. Open tech22 image

2. Select Polygonal Lasso Tool (L)

51 | P a g e
52 | P a g e

3. Click and drag bottle shape to select it.

4. Double Click on Background Layer in layers palette and press OK.

5. Select > Inverse to switch object outside the bottle.

6. Press DELETE to remove background

7. Press CTRL+D to deselect or select > Deselect

8. Save as GIF as transparent object

In Lab Task 3
Clean background

52 | P a g e
53 | P a g e

1. Open tech23
2. Select Clone Stamp Tool. Set 50 Pixel Mode Normal and Opacity 100%

3. Removing Yellow Truck > Hold Down ALT key and click on the patch
of clear ground near the toy and stamp over to the yellow truck.

4. Exercise: Remove Wooden Gate behind the boy with 300 pixels.
In Lab Task 4
Bokeh effect / blur background

53 | P a g e
54 | P a g e

1.Open tech33
2.Change to Quick Mask Mode.

3.Change to the Brush tool (press B), select a mid-sized brush (45-pixel), and carefully cover
the areas you want to leave unchanged. By default, covered areas display with a red veil.
If you accidentally cover something you shouldn't, press E to change to the eraser tool,
and use a similar-sized eraser to undo the unwanted mask, and restart covering the area
that needs it.
4.Press Q to back to Normal Mode
5.Apply Blur Filter>Blur>Gaussian Blur

54 | P a g e
55 | P a g e

6.Radius change to 3.5 (you can increase to add more blur)

7.After applying the Blur effect, press Ctrl+D to remove the selection, and finally, save
the image.

Post Lab Task

Panorama
1. File > Automate >Photo merge

2. Click browse the panorama folder and add pictures

55 | P a g e
56 | P a g e

3. Click OK

4.Crop the image to get full covered.

56 | P a g e
57 | P a g e

Practical 9
Open Ended Lab 1

Question 1:

You're an Animal!
In this project, you will combine a human with an animal. You can use a photo of yourself, a friend,
or a family member. It is extremely important with this one that you don’t grab animal imagery from
a quick Google search. You must spend time finding high-quality, creative commons photographs for
your animal parts. Notice the examples don’t simply combine half of an animal with half a human.
The skin and fur or other animal features really combine to look like a single creature.

Question 2:
Double Exposure
For this project, you will combine two or more photos into a “Double exposure” effect. Double
exposure is a popular darkroom technique where negatives were sandwiched together, or a piece of
photo paper was exposed twice. The result is a stunning and meaningful combination of two images.

57 | P a g e
58 | P a g e

Practical 10
Figma Tool

Objective:
After completing this lab, the student should be able to:
• Understand how Figma work.
• And how to create interactive user interface.
Introduction:
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with
additional offline features enabled by desktop applications for macOS and Windows. The
Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes in real-
time on mobile devices. The feature set of Figma focuses on use in user interface and user
experience design, with an emphasis on real-time collaboration.
Characteristics:
Following are the characteristics of Figma:
• Free
• Collaborative
• Fast
• Work on any computer
• Mobile companion app
How it works:
This is how dashboard look like

Steps to create your design:

Step 1:
Open browser and type figma.com

58 | P a g e
59 | P a g e

Step 2:
Sign in if already have account else sign up.
Step 3:
After Sign in/Sign up, create new file.
Step 4:
Start creating your design.
UI design:
https://www.figma.com/proto/8EHeA6qFUdO7IGBq3Qg1ZV/Untitled?nodeid=1%3A2&star
ting-point-node-id=1%3A2 Post Lab task: Replicate responsive UI deign of any social media
application of your choice.
Lab Task:
Try to replicate UI of Youtube or any other online streaming app.
References:
https://www.youtube.com/watch?v=FTFaQWZBqQ8

59 | P a g e
60 | P a g e

Practical 11
Figma Tool (Part b)

Objective:
After completing this lab, the student should be able to:
• Understand how Figma work.
• And how to create interactive user interface.
Introduction:
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with
additional offline features enabled by desktop applications for macOS and Windows. The
Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes in real-
time on mobile devices. The feature set of Figma focuses on use in user interface and user
experience design, with an emphasis on real-time collaboration.
Characteristics:
Following are the characteristics of Figma:
• Free
• Collaborative
• Fast
• Work on any computer
• Mobile companion app
How it works:
This is how dashboard look like

Steps to create your design:

Step 1:
Open browser and type figma.com

60 | P a g e
61 | P a g e

Step 2:
Sign in if already have account else sign up.
Step 3:
After Sign in/Sign up, create new file.
Step 4:
Start creating your design.
UI design:
https://www.figma.com/proto/8EHeA6qFUdO7IGBq3Qg1ZV/Untitled?nodeid=1%3A2&star
ting-point-node-id=1%3A2
Lab Task:
Create a UI of a online shopping website. Design your UI for desktop, add proper menu bar,
add pictures with description etc. Try to make it real.
References:
https://www.youtube.com/watch?v=FTFaQWZBqQ8

61 | P a g e
62 | P a g e

Practical 12
HTML and Webpage Development-Part I

Objective
In this lab we are going to:

• Work around basic web development activities including HTML in particular.

• Starting from the purpose of using HTML markup language towards implementing
HTML tags and learning key constructs of developing content management website
will be applied.

Reading Resources
• W3Schools HTML Tutorial

• W3Schools CSS Tutorial

• W3Schools CSS Properties Reference

Hypertext Markup Language (HTML)

HTML (Hypertext Markup Language) is the language used to create web page documents.
There are a few versions of HTML in use today: HTML 4.01 is the most firmly established,
and the newer, more robust HTML5 is gaining steam and browser support. Both versions have
a stricter implementation called XHTML (extensible HTML), which is essentially the same
language with much stricter syntax rules. You may see HTML and XHTML referred to
collectively as (X)HTML.

HTML is not a programming language; it is a markup language, which means it is a system for
identifying and describing the various components of a document such as headings, paragraphs,
and lists. The markup indicates the document’s underlying structure (you can think of it as a
detailed, machine-readable outline).

Cascading Style Sheets (CSS)

While HTML is used to describe the content in a web page, it is Cascading Style Sheets (CSS)
that describe how that content should look. In the web design biz, the way the page looks are
known as its presentation. That means fonts, colors, background images, line spacing, page

62 | P a g e
63 | P a g e

layout, and so on, are all controlled with CSS. With the newest version (CSS3), you can even
add special effects and basic animation to your page.

Style sheets are also a great tool for automating production because you can change the way
an element looks across all the pages in your site by editing a single style sheet document. Style
sheets are supported to some degree by all modern browsers.

Sample code

Lists
There are two common types of HTML lists, those in which the order matters, and those in
which it doesn't. If the order matters (as in sports rankings), we use an ordered list, which in
HTML is created with the <ol> element.

63 | P a g e
64 | P a g e

Lab Task

Task 1
Create a webpage of any topic. Home webpage should consist of further subpages like
Gallery, About Us, Contact Us, etc.
1. Webpage should contain background image, logo and add different colors and
fonts to make it more attractive.
2. Add ordered and unordered lists in your webpage.

64 | P a g e
65 | P a g e

Practical 13
HTML and Web page Development-Part II

Objectives
In the previous unit you used HTML to add content and structure to your portfolio home page.
In this lab you will learn how to create a Data table in HTML, moreover you will also practice.
Cascading Style Sheets (CSS) to make the page presentable.CSS, like HTML, is a markup
language. It is used to define the style of the page and to control the overall page layout.
Reference

• CSS Reference from W3Schools

• HTML Element Reference from W3Schools
• HTML Specification: https://html.spec.whatwg.org/

Theoretical Explanation
How to Create an HTML Table

1. HTML tables begin with <table> and end with </table>.

2. Inside the table element, you can optionally include a caption element, which contains
a brief title or description of the table's content. Most browsers display the caption
above the table.

3. Like HTML documents, tables include a head and body. In tables, these are specified
using the <thead> and <tbody> elements respectively. These tags are optional, but
they should be included on long tables. If long tables are printed and span multiple
pages, browsers will repeat the content of the <thead> element (usually the top row(s)
of the table) at the top of every printed page.

4. Each row in a table begins and ends with table row (tr) elements: <tr></tr>

5. Each cell in the table begins and ends with either table header (th) elements or table
data (td) elements, depending on what type of information the cell contains.

• If a cell contains headers, it begins and ends with th elements: <th></th>

• If a cell contains data (not headers), it begins and ends with td

elements: <td></td>

6. Table header elements (th) should also include a scope attribute, which is
either scope="row" or scope="col". This instructs screen readers as to which

65 | P a g e
66 | P a g e

headers apply to which cells. Screen readers read tables row by row from left to right,
and without this extra markup blind users would have a difficult time figuring out
which headers apply to the cell they're in.

7. Compare the following table with the code that was used to create it:

School Lunch Menu

Monday Tuesday Wednesday Thursday Friday

Chicken
Sausage Corn
Carnivores Sloppy Joe Beef taco and
pizza dogs
dumplings

Veggie Veggie BBQ Bean Tofu

Herbivores
pizza dogs tempeh burrito teriyaki

66 | P a g e
67 | P a g e

<table>
<caption>School Lunch Menu</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Carnivores</th>
<td>Sausage pizza</td>
<td>Corn dogs</td>
<td>Sloppy Joe</td>
<td>Beef taco</td>
<td>Chicken and dumplings</td>
</tr>
<tr>
<th scope="row">Herbivores</th>
<td>Veggie pizza</td>
<td>Veggie dogs</td>
<td>BBQ tempeh</td>
<td>Bean burrito</td>
<td>Tofu teriyaki</td>
</tr>
</tbody>
</table>

How to Apply CSS Style in HTML

1. Using your text editor, return to your portfolio's index.html file.

2. Start by typing <style> and </style> on separate lines within the head section of your
document. These tags mark the beginning and end of the style section. When you're finished,
your head section should look something like this:

67 | P a g e
68 | P a g e

<head>

<meta charset="utf-8">

<title>Web Portfolio: Judy Jetson</title>

<style>

</style>

</head>

3. If we were using an earlier version of HTML or XHTML, the opening tag of the style
section (<style>) would also need one more thing before it's complete: An attribute, telling
the browser what type of style you're defining. When using CSS, the type is always
"text/css". So, after adding this attribute, your opening style tag would look like this:

<style type="text/css" >

However, HTML5 doesn't require this attribute. So all you need on your web page is <style>.

4. Now that you have created the beginning and end of a style section, you can begin to add
style declarations to that section for controlling the style of various HTML elements. Start
with the <body> tag. Since all other web page content is contained within the body, the
style you apply to the body will be inherited by all other elements. If you want a particular
element to have a different style than everything else in the body (for example, to change
the color, size, and weight of an <h1> tag), you'll need to add a style declaration for that
element. Add the following code between the <style> and </style> tags in your document

body {
font-size: 1em;
font-weight: normal;
font-family: Arial, Sans-serif;
color: #000000;
text-align: left;
}
h1 {
font-size: 1.8em;
font-weight: bold;
color: #0000ff;
text-align: center;
}

5. Save and view in your browser.

6. There are three parts to the style:

68 | P a g e
69 | P a g e

a. Selector - the selector is usually the HTML element that you are attempting
to control. In this example you have two selectors, body and h1.

b. Property - the property defines the selector in some manner, usually by size
or variety. In this example font-weight and font-family are properties that
describe the <h1> selector.

c. Value-the value declares how much, how far, what color, etc. The value of
the font-size in the above example is 140%. Values can be expressed in
absolute terms. For instance something can be declared to be an exact
number of pixels (px) or points (pt). A pixel is one dot on the computer
screen, and a point is equal to 1/72 of an inch, which is measure better suited
for print documents than for computer screens. Values can also be declared
in relative terms such as percent (%). For example, the font-size for the body
might be set to 100%, which is the default font size in the user's browser. If
the h1 font-size property is set to 180%, that's 80% larger than the rest of the
body. It's relative because the default font varies from computer to computer.
Another relative unit is Ems (em). One "em" is the size of the letter "M" in
the user's current font. In the above example, the font-size for the body is set
to 1em, and the font-size for h1 is set to 1.8em, or 1.8 times the default size.
Relative values are generally better to use because they are scalable; they
grow and shrink as needed to best fit given the user's screen resolution,
window size, and default browser font size. If you use 12px to specify font
size, that may look fine to most users on a computer screen, but it will be
tiny on a high resolution cell phone!

7. Notice the syntax of the code you entered. Even though CSS refers to the same
elements as HTML (in this case, body and h1), it does so use very different syntax.
For example, in CSS the names of elements aren't wrapped within angle brackets
(< and >) like they are in HTML. Discuss with your instructor the function of the
brackets, colons, semi-colons, and commas in CSS.

Comments in CSS
In HTML, you opened comments with <! -- and closed them with -->
In CSS, the syntax is different. You open comments with /* and closed them with */

69 | P a g e
70 | P a g e

body {
font-size: 1em;
font-weight: normal;
font-family: Arial, Sans-serif;
color: #000000; /* black */
text-align: left;
}
h1 {
font-size: 1.8em;
font-weight: bold;
color: #0000ff; /* blue */
text-align: center;
}

1. Create an external style sheet file. This file should consist of all styles that you want to
apply across your entire website. The contents of the file is the same as the contents of
the <style> section you've created within your web pages. The only difference is that the
opening and closing <style> tags are omitted.
2. Save your style sheet file in the styles subfolder. Name the file anything you like, but give
it a .css extension (for example, mystyle.css)
3. Within the head section of each of the web pages in your website, add a link to the external
style sheet. Here's how, assuming your style sheet is named mystyle.css
<link type="text/css" rel="stylesheet" href="styles/mystyle.css" media="screen">
4. While adding the above tag to each of your files, you can delete the <style> section
from index.html and any other page that has one. Since styles are now contained in an
external css file, the <style> section is no longer needed. It's still ok to have these sections
though, as you might occasionally use them to define styles that only apply to the elements
on a particular page.
5. Also, while you're updating each of the files in your portfolio, you should also seize the
opportunity to copy and paste any other content that so far you've added only to the home
page, but should appear on every page throughout your site. Specifically, copy and paste
the following content:

• The "skip to main content" link

• The main heading (<h1>) - but change the text so it reflects the content of the page
you're copying it to
• The navigation menu
• The <main id="main"> tag that marks the start of the main content
• The closing </main> that marks the end of the main content.
• Be very careful to paste each of these items in their appropriate places within the
HTML.
70 | P a g e
71 | P a g e

6. Play around with your external style sheet to see how your changes affect the look of your
home page. Also, use your navigation menu to check how your external style sheet affects
other pages on your site in addition to your home page.

Forms in HTML:

An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form
facilitates the user to enter data that is to be sent to the server for processing such as name,
email address, password, phone number, etc.

HTML forms are required if you want to collect some data from of the site visitor. For example:
If a user want to purchase some items on internet, he/she must fill the form such as shipping
address and credit/debit card details so that item can be sent to the given address

HTML Form Tags:

71 | P a g e
72 | P a g e

Lab Tasks
Lab Task 1

Make up a table of data. Your table must have at least four rows and four columns. It must
have at least one rows pan and one cols pan specifier. (And yes, the value of the
attribute must be greater than one!) This does not have to be real data; you can make up
numbers. However, the table does have to make sense. Please name this
file my_table.html, put it in the assignments folder, and make sure there is a link to it
in your index.html file.

Lab Task 2

Modify the page to include a table of courses you are taking and have taken. Here are
some examples of simple tables. https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/table#Examples

Your table should have:

• three columns: course number, course title, and semester taken

• two vertical sections, with headers for courses taken 'For Credit' and as 'Listener'
• alternating row background colors, so it's easy to read
• green colored text if the class is currently being taken

It should look something like this:

72 | P a g e
73 | P a g e

Practical 14
Open Ended Lab 2

Question 1:

Web form!
Create a form using html having all input type (text box, radio button, check box, drop down list,
submit button).

Question 2:
CSS
Add little CSS to enhance form.

73 | P a g e