Request A Quote

PSD to HTML5 Conversion


Learn to convert PSD templates into beautiful hand coded HTML 5 websites. Student friendly faculties to share their experience to share their real time experience in designing HTML 5 websites. Project at the end of the course.


PSD to HTML5 Conversion, Course Details

Duration:   25 Hours
Price:  
Timing:  5 Hours a Week

PSD to HTML5 Course structure:

  • HTML 5
  • Bootstrap CSS
  • Photoshop
  • Project

HTML5



HTML 5 Introductions

  • HTML 5 an Introduction
  • What is HTML 5
  • Difference between HTML and HTML 5
  • Introduction to Tags
  • Introduction to HTML Editors

Links

  • Linking different pages
  • Hyperlinks
  • Navigation bars
  • External style sheets
  • Types of hyperlinks
  • CSS and hyperlinks

Images

  • Image Attributes
  • Inserting Images
  • Types of Images
  • Images and CSS
  • Background Images
  • Image captions

HTML 5 Tables

  • Introduction to HTML5 Tables
  • Table alignments
  • Row, Column & Images color

Layouts

  • Styling HTML 5 tags
  • CSS Comments
  • Styling layout

HTML 5 Forms

  • HTML 5 Form Layout
    tags
  • Text boxes
  • Submit Box
  • Rest box
  • Formatting Text box
  • Dates
  • Color pickers
  • HTML5 Audio
  • HTML5 Video
  • Labels
  • Text Areas
  • Passwords
  • Hidden fields
  • Option buttons
  • Check boxes

CASCADING STYLE SHEET


  • Controlling Color and Typography
  • Know about CSS
  • Benefits of CSS
  • How to use CSS
  • Creating layouts
  • Different types of Layouts
  • Layout Structures
  • Implement Design as Layout
  • Style Sheet Types
  • Style Sheet Rules
  • Embedded Style Sheets
  • Color Methods
  • RGB Values
  • CSS Comments
  • Cursor Styles
  • Text Styles
  • CSS Text Properties
  • Modify Text Styles
  • Font Styles
  • Modify Font Styles
  • Specifying Fonts and Font Sizes
  • Controlling Font Weight and Style
  • Control Margins and Padding
  • The Box Model
  • Margin
  • Padding
  • Margins
  • Element Padding
  • Positioning
  • Create Borders
  • Arranging Elements with the Float Property
  • Scrollable Content Sections
  • Layout with Positioning
  • Absolute Positioning
  • Customize Cursors
  • Form Design
  • Customizing Form Styles
  • Background Images
  • Applying a Background Image
  • Accessible Style Sheets
  • Link Relationships
  • System Fonts and Colors
  • Print Style Sheets

Bootstrap CSS



  • Introduction To Bootstrap
  • Introduction to Grid
  • Introduction to Bootstrap framework
  • The Grid
  • Controlling The Grid Across Devices
  • Column Offsets
  • Using Nested Columns
  • Column Ordering
  • Responsive Images
  • Flexible fonts
  • Flexible grid
  • Responsive Utility Classes
  • Media Queries and Breakpoints
  • Coding Rows and
    Columns
  • Using Containers
  • Custom Typography
  • Navigation Bar
  • Fixing The Navigation Bar
  • Dropdowns
  • Button Options

PHOTOSHOP Course DETAILS



Photoshop Overview

  • Document Window
  • Toolbars
  • Finding Hidden Tools
  • Option bar
  • Palettes
  • Menus
  • Opening & saving files
  • Working with palettes
  • Using online Help
  • Using Rulers
  • Guides & Grids

Document Dimensions

  • New Documents
  • Resolution vs. File Size
  • Canvas Size
  • Enlarging Canvas size
  • Rotating Canvas

Undo & History Palette

  • Undo Redo/Revert
  • History Palette
  • Stepping Back in “Time”
  • History Palette Features

Views & Navigation

  • Views & Menu
  • Fit on Screen
  • Actual Pixels
  • Print Size
  • View Zooms
  • Zoom & Hand tool
  • Keyboard shortcuts
  • Moving Around
  • Navigator palette
  • Keyboard shortcuts
  • New View (s)

Setting Preferences

  • Resetting Preference
  • Setting Preference
  • General Preferences
  • Saving Files Preferences
  • Display and Cursor Preferences
  • Transparency and Gamut
  • Preferences
  • Units and Rulers Preferences
  • Guides and Grid Preferences
  • Plugins and Scratch Disks
  • Image Cache Preferences
  • Assigning RAM to Photo shop

Color

  • Color Modes & Uses
  • RGB Mode
  • CMYK Mode
  • Bitmap Mode
  • Selecting Colors
  • Eyedropper tool
  • Foreground/Background colors
  • Color palette
  • Swatch palette

Crop Tool

  • Shielding Cropped Area
  • Crop & Straighten

Layers

  • Organizing artwork on layers
  • Creating and viewing layers
  • Selecting and removing artwork on a layer
  • Rearranging layers
  • Changing the opacity of a layer
  • Linking layers
  • Adding a gradient mask
    to a layer
  • Adding a layer effect/style
  • Flattening layers & saving files
  • Painting/ Editing

Gradients

  • Using Pre-defined gradients
  • Editing Gradients
  • Masks, Selections, and Channels
  • Defining masks, selections, and alpha channels
  • Quick Mask
  • Editing a mask
  • Making a mask as a selection
  • Using the Selection tools
  • Rectangular marquee tool
  • Elliptical marquee tool
  • The Magic Wand
  • Moving a selection
  • Add & subtract selections
  • Via Option Bar
  • Via Keyboard shortcuts
  • Editing Selections
  • Moving a Selection
  • Selection only
  • Image Selection
  • Transforming a selection
  • Modifying Selections
  • Inversing Selections
  • Saving & Loading a Selection

Using Palettes

  • Color Adjustment
  • Easy Methods
  • Variations
  • Auto Levels
  • Auto Contrast
  • Auto Color
  • Red Eye Tool
  • Levels
  • Filters
  • Sharpen
  • Blur
  • Filter Gallery, including:
  • Artistic
  • Sketch
  • Stylize
  • Texture

Saving Files

  • Layered Formats
  • TIFF with layers
  • PDF
  • TIFF
  • Flat Format
  • JPEG
  • PNG - 24

Tools

  • Painting Tools
  • Brush Tool
  • Eraser
  • Pencil Tool
  • Line
  • Clone Tool
  • Filling with Color
  • With Paint Bucket tool
  • With Fill Menu
  • Painting
  • Editing images
  • Selecting a Paint or
    Editing Brush
  • Adjusting Opacity
  • Painting within
    a selection
  • Erasing Tools
  • Airbrushing
  • smudging

Printing Files

  • Print With Preview
  • Scaling to fit
  • More Options
  • Output options

Type

  • Type Tools
  • Normal & Setting Type
  • Type Mask & Color
  • Font, Style, Size & Alignment
  • Warped Text Effects
  • Anti-Alias Settings

Project

Students need to create a Website template, Brochure, Flyer in student chosen business category.


learn Photoshop course in Coimbatore

Contact us to learn Photoshop course in Coimbatore.
Call us +91 98430 49705 or email us at info@designwebsites.in



Project


Students need to create a design a basic template and build a 5 page HTML 5 website in student chosen business category.

Contact us to learn PSD to HTML 5 web design course in Coimbatore.
Call us +91 98430 49705 or email us at info@designwebsites.in