Advanced <span>Web Design Weekend Course</span>

Advanced Web Design Weekend Course

The best web design course for learning professional Graphics & Web Design over the Weekends

Our advanced Web Design & Graphic Design weekend course is created specially for working professionals and full time students. If you are looking to enhance your skills for getting an entry into IT industry or if you are looking to boost your existing skills, this is the perfect course for you. Since the classes for this course are held every Sunday, it is very easy for anyone to learn Graphics Design and Web Design without leaving the current job or leaving college. The course is aimed at preparing you for the needs of a modern graphics & web design company. The course and its course material has been prepared with inputs from experts and designers working in leading web/graphic design companies and MNCs. The course material is also kept up to date as per the latest trends. The sequence of classes is prepared in a way that you learn enough about a topic on Sunday – then in the rest of week, you can revise that also practice it on your own.
This graphics and web design course is created with a target to turn anyone into a professional with complete knowledge. The coverage includes everything from Graphic Design tools, UI, UX, HTML, CSS, Javascript and up to server side concepts like PHP, MYSQL and basics of CMS – WordPress.

Why is this best weekend course for Graphics Design and Web Design?

  • Course material and classes specially crafted for Weekend classes
  • Complete coverage of Graphics Design and Web Design
  • Focussed on Job Placement & Job Interview
  • Course material developed by Industry’s design experts
  • Your teachers will be actual designers from IT Industry
  • Focus on modern technologies demanded by leading Web design companies and MNCs
  • Full of live hands-on exercises and projects
  • DICE Academy provides you best-in-class placement assistance
  • Bonus Personality Development Course covering Professional Communication, Email Etiquette and Interview Handling Skills

You will start by learning basics of the mosts popular image editing tool in the world – Photoshop. This will be followed by other tools like Illustrator and Indesign. The course will eventually lead up to concepts like Creative Visualization, Typography, Designing graphics for websites and UI/UX concepts.

Each student is also provided with multiple course books containing the latest course material. This course material is recommended by designers from the industry.

What should you know before you start Web & Graphic Design Certification Course?

  1. Basic computer knowledge
  2. Basic Internet usage knowledge
  3. Basic typing skills
  4. Basic reading/writing skills

What is covered in Web & Graphic Design Certification Course?

Learning Plan for Graphic

Adobe Photoshop CS6
Becoming familiar with the workspace
Understanding the Toolbox and tool options bar” “- Detail & Importance of Canvas Size
– Explain selection tools, painting tools, erasing tools etc
– Layer Panel
– Unlocking The Layer..
– Color Mode
– New Files
– How to fill the color in document and selected area
– Tool Color pallete

Performing Basic Image/File Operation “- File types (Compressed, Un-compressed, Raster,Vector)
– Creating a new image (explain options shown in dialog box)
– Opening an existing image
– Saving an image (Again explain when to use psd,jpg,png)
– Understanding size and resolution (explain all options from dialog box)
– Changing the canvas size (explain all options dialog box)

– Difference between raster and vector
– Overview if menus bar
– File formates
– File types
– How to change the no. of steps of undo
– What is pixel
– vector images

Working with Layer, Color Modes & Color Palettes

Working with Selection tools
– How to reslect or make selection on object
– Ctrl+click on layer icon
– multiple layer selection
– renaming the layer
– Select Multiple object
– diffeference between fill and opacity
– Grouping of layers
– Transform Tool

Working with Transform, Crop & Straghten Images
– Details of cropping tools
– Cropping (Cropping.psd) – Also explaining changing canvas size along with cropping. Also explain options bar with aspect ratio & size)
– Transform Tools in Details
– Straightening (Straighten.psd)
– Rotating (Rotating.psd)
– Flipping (Flipping.psd)

Working with Selection tools with options
– Quick selection tool
– With all options
– Spacing
– Hardness
– Refine Edge

All about Layers
– Explain the concept of layers – why multiple layers are needed
– Adding new layers
– Using Layer Menus (Explain options in the menu)
– Filtering layers
– Changing the Opacity and Fill settings
– Changing the lock settings
– Blending modes
– Filtering layers
– Opacity and Fill settings
– Lock settings
– Blending modes
– Linking Layers
– Grouping Layers

Working with brushes, paint tool & gradient
– Working with painting tools in blending modes
– Applying color with painting tools
– Painting with editing tools
– Using the Brush Panel
– Selecting the brush tip shape
– Filling a selection with a color or pattern
– Applying a gradient fill

Working with Advanced Transform, Content aware scale feature
– Using Transformations
– Understanding the importance of the reference point
– Scaling images
– Rotating images
– Skewing images
– Changing the perspective of images
– Using the Warp transformation
– Using free transform
– Using the Content-Aware Scale feature”

All about Text
– Learning a Little Bit about Text
– Using the Text Tools to Add Text to Images
– Using the text tools to add text
i. Adding text as a point type
ii. Adding text as a paragraph type
iii. Edit Type
iv. Check Spelling
– Find and Replace Text
– Rasterize Type
– Create Work Path
– Convert to Shape
– Horizontal/Vertical options
– Anti-Alias adjustment
– Faux formatting
– Convert to Point Text/Paragraph Text
– Warp Text
– Adding text in a Smart Object

Working with Advanced Layers
– Layers Panel Menu
– Duplicate Layer
– Layer Style
– Layer Content Options
– Layer Mask
– Vector Mask
– Create Clipping Mask
– Smart Objects, Rasterize
– Group Layers, Ungroup Layers
– Hide Layers
– Arrange
– Combine Shapes
– Align, Distribute
– Lock All Layers in Group
– Link Layers
– Select Linked Layers
– Merge Down
– Merge Visible
– Flatten Image

Working with Path
– Understanding Paths
– Building path components
– Exploring the Vector Path
i. Using the Pen tools
ii. Using the Path Selection tools
iii. Understanding the Paths panel
iv. Free transforming paths
– Creating vector masks
– Working with vector shape tools

Working with Color, Contrast & Brightness correction of Images
– Levels
– Curves
– All Adjustemts of image menus
– Smart Filter, New Fill Layer, New Adjustment Layer

Working with advanced selection methods & filters
– Masking, Channel masking
a. Looking at Artistic Effects Filters
b. Exploring Artistic filters
c. Discovering Brush Stroke filters

Working with Web Templates Part-I
– Basic requirement to create a web page
– Understanding Patterns
– Understanding Icons
– Understanding Fonts
– Knowing Design References
– Understanding Website Design

Working with Web Templates Part-II
– Understanding tutorials available on internet
– Understanding the creation of artistic effects, brushes etc
– How to work with logo & branding
– Understanding the source of images
– Understanding UI elements
– Understanding about the dummy content based on specific industry
– Understanding how to use cooked-up vectors in your files

Working with Web Templates Part-III
– Hands-on exercise based on the industry standards

UI/UX Concepts
– Understanding the Business Problems
– Undetstanding the User Context
– Sketching to explore the design concept
– Prototype the solution
– Working with Wireframe Part-I
– Working with Wireframe Part-II
– Understanding the latest apps, widgets & code snippets which can be used in sites
Adobe Illustrator CS6
Working with artboards
– Working with artboardsa.
– Drawing shapes and lines
– Applying color
– Working with the Shape Builder tool

Creating and editing gradients
– Applying a gradient to an object
– Creating an elliptical gradient
– Modifying the colors in a gradient
– Applying a gradient across multiple objects
– Changing gradient direction, radius, or origin

Placing Adobe Photoshop images in Illustrator
– Using Image Trace

Working with the Color Guide panel
– About selecting colors
– Swatches panel and swatch library panels
– Color Picker
– Eyedropper tool
– Color panel
– Color Guide panel
– Edit Colors/Recolor Artwork dialog box
– Add Selected Colors command or New Color Group button

Creating and applying a pattern
– Creating painted pattern object
– Creating pattern swatch from an object :
– Editing your pattern

Adobe In-Design CS6
Setting Up A Document
– Creating a new document
– Adding text and art in frames
– Applying color to an object

Working With Pages
– Adding pages to your document
– Creating a PDF for print
– Adding a hyperlink
– Finding the page center

Working with Frame, Shapes and Graphics
– Resizing content in a frame
-Evenly distributing objects
– Adding placeholder text
– Linking graphics

Learning Plan for Web

Basic HTML
Introduction to HTML
– What is HTML?
– Tag Syntax
– Create HTML

HTML Document
– Structure
– Doctype
– html element
– head element
– body element

Basic content
– Headings
– Paragraph
– Line
– List
— unordered list
— ordered list
— definition list
– Image

– What is Hyperlinks
– Hyperlinks
– Relative paths or Absolute URL
— Relative path
— Absolute URL

– Table
– Table row
– Table data
– Table heading
– Captions

– User-submittable form
— The action attribute
— The method attribute
– Form controls
— The Input element
—- type=”text”
—- type=”radio”
—- type=”tel”
—- type=”email”
– The textarea element
– Select menu
— The select element
— The option element
– button

– pre
– blockquote
– center
– u
– i
– b
– br
– font
– marquee
– small
– sub , sup
– strike

Basic CSS
Introduction to CSS
– What is CSS
– Syntax
– Selectors
— Type selector
—- Class selector
—- ID selector
—- Descendant combinator
—- Grouping
– Create CSS

Adding style to HTML
– Linking style sheet
— Internal style sheet
— inline style sheet
— external style sheet

– Texts
— text-align
— text-decoration
— text-indent
– line-height
– vertical-align
– text-transform
– letter-spacing
– word-spacing
– white-space

Box Size
– width
– height

Visual formatting
– Display
– position
– top
– right
– left
– bottom
– Float
– clear
– z-index
– overflow
– clip
– visibility
– cursor

CSS Fonts
— font-size
— font-family
— font-style
— font-weight
— Font Face
—- Custom Fonts
—- Google Fonts
– Lists
– Link

Box model
– Box model
– Paddings and Margins
– Background
– Borders
– outline
– color
– opacity

Advanced HTML
Introduction to HTML Doctype
– The HTML5 doctype
– The HTML 4.01 strict doctype
– The HTML 4.01 transitional doctype
– The XML 1.0 strict and transitional doctypes
– The HTML 4.01 and XML 1.0 frameset doctypes
– Other doctypes

– Grouping content
— div
– Text-level semantics
— cite
— code
— em
— kbd
— span
– Sections
— section
— nav
— article
— aside
— header
— footer
— address

Embedded content
— canvas
— map
— area
— svg
— audio
— iframe
— video
— embed

HTML structural elements
– simple page structure using basic html
– Structuring a page with HTML 4
— div , span structure
– Enter HTML5 structural elements
— header, footer , nav , article , aside , section

Advanced CSS
Box Size
– width
– min-width
– max-width
– height
– min-height
– max-height

Styling tables
– Table and cell width
– border, padding , margin
– A simple design

Styling forms
– label styling
– input styling
– select styling
– button styling
– textarea styling
– checckbox , radio button styling
– error message styling
– fieldset styling

Floats and clearing
– How does floating work?
– Margins on floats
– Clearing
– Containing floats
– Shrink-wrapping
– Centering Floats

CSS static and relative positioning
– Static positioning
– Relative positioning

CSS absolute and fixed positioning
– Absolute positioning
– Fixed positioning

Introduction To CSS3
– Type Selector
— elementname
– Universal Selector
– Attribute Selector
— [attributename]
— [attributename=”val”]
— [attributename~=”val”]
— [attributename|=”val”]
— [attributename^=”val”]
— [attributename$=”val”]
— [attributename*=”val”]
– Pseudo-classes
– Dynamic pseudo-classes
– The target pseudo-class
– The language pseudo-class
– The UI element states pseudo-classes
– Structural pseudo-classes
– The negation pseudo-class
– Pseudo-elements
— ::first-line
— ::first-letter
— ::before
— ::after
– Combinators
— Descendant combinator
— Child combinators
— Adjacent sibling combinator
— General sibling combinator

– linear
– radial
– conic

Other CSS Properties
– Transform
– Lists and Counters Properties
– Multi-column Layout Properties
– Filter Effects Properties
– Masking Properties
– box shadow
– Text shadow
– Transition
– css3 Animation

Headers footers columns and templates
– Introduction
– The stylist’s critical process steps
— Gather requirements
— Content classification
— Wireframes
— write code
— Test
— repair
— publish
– Element nesting and grouping
– Single column layout implementation
– Double column layout implementation
— Two Column Equal layout
— Two Column Left Layout
— Two Column Right Layout
– Triple column layout implementation
— Three Colun Equal Layout
— Three Column Layout

– Introduction to Javascript
– Understanding Javascript Syntax
– Understanding Javascript Statements
– Understanding Javascript Variables
– Using Javascript Operators
– Understanding Javascript Functions

– Introduction to JQuery
– Understanding JQuery Syntax
– Understanding JQuery Selectors
– Understanding JQuery Events
– Using JQuery Effects like Hide/Show, Fade In-Fade Out

Bootstrap 3
– Bootstrap Overview
– Bootstrap Grid System
– Bootstrap – CSS Overview
– Bootstrap Typography
– Bootstrap Code
– Bootstrap Tables
– Bootstrap Buttons
– Bootstrap Images
– Bootstrap Responsive Utilities
– Bootstrap Layout Components

– Introduction to PHP & MySQL
– Understanding PHP Variables
– Understanding PHP Data Types
– Understanding PHP Constants & Operators
– Understanding PHP Loops & If-Else
– Understanding PHP Functions

– How to Install WordPress
– How to Create a WordPress Site
– How to Install WordPress Themes
– How to Install WordPress Plugins