TAMIL NADU STATE COUNCIL OF PROFESSIONAL

EDUCATION
COMPUTER AND INFORMATION TECHNOLOGY

COM – 478: Diploma in Graphics and web designing

Course Syllabus
Course Title

SEMESTER-I

1.1 Introduction to Graphic Design (Theory)

1.2 Introduction to Adobe Photoshop(Practical)

1.3 Introduction to Adobe Illustrator(Practical)

1.4 Introduction to Adobe InDesign (Practical)

1.5 Project 1 for Semester I (Report)

SEMESTER-II
2.1 Introduction to Web & User Interface Design (Theory)

2.2 Marking up data using HTML5(Practical)

2.3 Styling HTML 5 documents using CSS3(Practical)

2.4 JavaScript and Responsive Web Design (Practical)

2.5 Project 2 for Semester II (Report)

 SEMESTER I
1.1 Introduction to Graphic Design (Theory)
UNIT I
Elements of Design, Visual design elements and principles describe fundamental ideas about the
practice of good visual design.
UNIT II
Principles of Design, The principles of design describe the ways that artists use the elements of
art in a work of art. Balance is the distribution of the visual weight of objects, colors, texture, and
space. If the design was a scale, these elements should be balanced to make a design feel stable.
UNIT III
Colour theory and Colour schemes, in the visual arts, color theory is a body of practical guidance
to color mixing and the visual effects of a specific color combination. There are also definitions
(or categories) of colors based on the color wheel: primary color, secondary color and tertiary
color. Arrangement or combination of colours, especially one used in interior decoration.
UNIT IV
Typography and Web Typography, the style and appearance of printed matter. Web typography
refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and
styles were controlled exclusively by the settings of each Web browser.
UNIT V
Grid Systems for Web Page Layout, A grid system is a set of measurements a graphic designer
can use to align and size objects within the given format. Although there are a few different
categories of grid systems, there are no strict rules on what can or cannot be a grid. It's up to you.
Reference Books:
● Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships by
Gail Greet Hannah.
● Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler.
● Color Theory (Watson-Guptill Artists Library) By Jose Maria Parramon.
● Thinking with Type by Ellen Lupton.
● Grid Systems in Graphic Design: A Visual Communication Manual for Graphic Designers,
Typographers and Three Dimensional Designers by Josef Muller-Brockmann.
 1.2 Introduction to Adobe Photoshop (Practical)
UNIT I
Introduction to Adobe Photoshop's work space, About Photoshop, Navigating Photoshop, Menus
and panels, Opening new files, Opening existing files.
UNIT II
Creating Gradients and Pattern fills, Getting Started with Photoshop, Exploring the Toolbox, the
New CS4 Applications Bar & the Options Bar, Exploring Panels & Menus, Creating & Viewing
a New Document, Customizing the Interface Setting Preferences.
UNIT III
Using of Brushes and Digital painting, Understanding Paths & the Pen Tool, Creating Straight &
Curved Paths, Creating Combo Paths, Creating a Clipping Path, CREATING SPECIAL
EFFECTS, Getting Started with Photoshop Filters, Smart Filters, Creating Text Effects,
Applying Gradients to Text.
UNIT IV
Raster file formats, Exporting Your Work, Saving with Different File Formats, Saving for Web
& Devices, Printing Options, and Credits.
UNIT V
Preparing images for websites.
Reference Book:
● Adobe Photoshop CS6 Classroom in a Book by Adobe Creative Team.
● Adobe Photoshop CC Classroom in a Book by Andrew Faulkner.

1.3 Introduction to Adobe Illustrator (Practical)

UNIT I
Introduction to Adobe Illustrator's workspace, Draw basic shapes, Draw objects.
UNIT II
Vector file formats, Edit those vector images quickly and easily, Use blends, gradients, and
patterns, Create symbols to place into your work to save time.
UNIT III
Logo Creation and execution, Gradients, Pattern Fills, and Blends, Points and Paths, Illu strator
Effects, Symbols, Creating effects and saving Graphic Styles.
UNIT IV
Creating designs and collaterals using illustrator, Using multiple strokes and fills on one object,
Working With Layers, Transformations, Aligning and Distributing, Line Tools, Compound Path
and Clipping Mask, Applying Color, The Pencil Tools.
UNIT V
Creating assets for wire-frames and mock-ups, The Brush Tool, Gradients, Transparency and
Masking, Enveloping and Meshes, Smart Guides and Rulers, Scissor and Knife, Pathfinder,
Filters, The Blend Tool, Charts and Graphs, RGB and Screen Graphics, Saving for the Web.
Reference Book:
● Adobe Illustrator CC Classroom in a Book by Brian Wood.
● Adobe Illustrator CS6 Classroom in a Book by Adobe Creative Team.

1.4 Introduction to Adobe InDesign (Practical)

UNIT I
Introduction to Adobe InDesign’s workspace, working with panels, customizing the workspace,
navigating through a document, using context menus.
UNIT II
Setting Up a Document and Working with Pages, Working with master pages, Working with
Objects, Creating and modifying text & graphics frames, Wrapping text around a graphic,
Transforming and aligning objects.
UNIT III
Specifying color settings in InDesign, Creating and applying colors, Creating and applying
paragraph &character styles, Adding graphics from other programs, Comparing vector and
bitmap graphics, managing links to imported files.
UNIT IV
Working with Tables, Converting text to a table, Formatting a table, Creating and applying table
and cell styles, working with Transparency, Importing and colorizing a grayscale image,
Applying transparency settings, working with effects.
UNIT V
Printing and Exporting, Preflighting files, Packaging files, creating an Adobe PDF proof,
Previewing separations and page.
Reference Book:
● Adobe InDesign CC Classroom in a Book by Adobe Creative Team.

1.5 Project 1 for Semester I

● Project Summary:
o Design a complete Branding Guideline with redesigned Logo and other collaterals and
packaging for your selective topic/product/company
● Target Audience
● Perception/Tone/Guidelines
● Communication Strategy
● Competitive Positioning

SEMESTER II
2.1 Introduction to Web & User Interface Design (Theory)
UNIT I
Introduction to Internet & Web Technologies, What is Website? How it will work? understand
fundamental concepts, advantages and limitations of the Semantic Web, understand the basics of
knowledge representation with description logics.
UNIT II
What is UI and UX, RIA Designs, Wire-frame Designing, Click-able prototyping, Browser
Compatability, Types of Layouts, HTML using Divs. Aspiring UX designers, Product managers
& entrepreneurs, Testing our Assumptions.
UNIT III
Design process of UI and UX, What is Usability?, How does a UX Designer see the world?,
Qualities essential to becoming a UX Designer, The UX Design Process, User Research, Design,
Testing, and Implementation.
UNIT IV
Website Development. Workflow, Defining site goals, developing site structure & getting your
hands dirty, Design and production, testing, collecting feedback & fixing bugs.
UNIT V
Organization of Data – Sitemaps, wireframes and mock-ups.
Reference Book:
● Ux Ui Design - Simple Steps to Win, Insights and Opportunities for Maxing Out Success by
Gerard Blokdijk.
● The Importance of User Experience by Lan Brooks.
● Web Design with HTML, CSS, JavaScript and jQuery set by Jon Duckett.

2.2 Marking up data using HTML5 (Practical)

UNIT I
Introduction to the Internet, Introduction to HTML Terminology, Options for Writing HTML,
Unicode Transformation Format (UTF), HTML5 Resources.
UNIT II
New for HTML5,What’s Different in HTML5?, in HTML5, Designing a Webpage, Design
Considerations and Planning, , Basic Tags and Document Structure, HTML Tags, Metadata ,
Saving an HTML Page, Body Tags.
UNIT III
Page Formatting, Adding a New Paragraph, Adding a Line Brea, Inserting Blank Space, Text
Items and Objects, Headings, Comments, Block Quotes, Creating Lists, Numbered (Ordered)
Lists, Bulleted (Unordered) Lists, Nested Lists, Definition Lists.
UNIT IV
Links, Images, Dives, Sections, Image Links, Tables, Iframes, Audio Tags, Video Tags, and Para
tags.
UNIT V
Forms, Form Elements, Input Types, Buttons, Canvas, SVG, and B.E.M Model.
Reference Book:
● HTML and CSS: Design and Build Websites by Jon Duckett.
 2.3 Styling HTML5 Documents Using CSS3 (Practical)
UNIT I
What are Cascading Style Sheets?, Types of Style sheets, Syntax, Difference Between CSS and
CSS3, Linking to External CSS, Creating Internal CSS, Examples.
UNIT II
Color Coding, Box Model, Border Design, Decoration, ID and Class, Difference Between ID and
Classes, Text Color, Margin, Padding, Style Links, Number & Bullets, Text Wrapping,
Shadowing.
UNIT III
Position Properties: Static, Fixed, Relative, Absolute, Floating Elements: Left, Right, Display
Properties, Outline, Display and Visibility, Grouping and Nesting, Dimensions of Elements,
Pseudo-Classes/Pseudo-Elements.
UNIT IV
Adding a Navigation Bar in CSS, Vertical Navigation Bar, Horizontal Navigation Bar – Inline,
Horizontal Navigation Bar – Floating, CSS Tables, Borders, Collapsed Borders, Table Width and
Cell Height, Table Color, Table Text Element, Table Padding, Working with Transforms in CSS,
What are Transforms? 2D Transforms, 3D Transforms.
UNIT V
Transitions and Animations in CSS, Transitions, Animations, CSS Shorthand, and Shorthand
Properties.
Reference Book:
● HTML and CSS: Design and Build Websites by Jon Duckett.

2.4 JavaScript and Responsive Web Design (Practical)

UNIT I
Basics of JavaScript, What is JavaScript? Understanding objects, Understanding variables,
making comparisons, Understanding events.
UNIT II
Starting to Code, Writing your first script, Internal vs. external scripts, Using comments in
scripts, Using the noscript tag in HTML, Interacting with Users, Creating alert dialogs,
Understanding conditional statements, Getting confirmations from users, Creating prompts for
users, Understanding functions, Making links smarter, Using switch/case statements, Handling
errors.
UNIT III
Building Smarter Forms, Responding to keyboard events, Working with Cookies, The DOM,
Nodes, and Objects, Understanding the DOM, Adding nodes to the DOM, Working with Dates
and Times, Displaying dates, Displaying times, Creating a countdown, Real World Applications
of JavaScript, Creating sliding menus, Creating pop-up menus, Creating slideshows with
captions, Creating a stylesheet switcher,
UNIT IV
What is Responsive Web design, Using Media query, Create a responsive design from scratch,
using your own grid system, media queries, and responsive images, Explore responsive
typography, and understand its impact on excellent web page design and usability. Using
Bootstrap to create a responsive Website.
UNIT V
Designing for Mobile, Desktops, IPods, Various Devices, Testing with Different Devices.
Reference Book:
● JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett
● Mastering Bootstrap 4 by Benjamin Jakobus, Jason Marah
● E-commerce Get It Right! By Lan Daniel

2.5 Project 2 for Semester II

● Project Summary
o Design a Website for any topic/product/company
o Target Audience
o Web Site Goals, Requirements
o Promotion/Communication Plan
o Timing, Competitive Positioning