Course Description

  • What is the course all about?

    The training gives an introduction on Photoshop, setup options and settings to optimize the tool for web design. Following this, the course covers building and using several grid systems, the workflow process, wireframing and UI design.

  • What learning benefits do you get from Simplilearn’s training?

    At the end of the training participants are able to:
    • Apply design to the wireframe
    • Shift the entire layout from Photoshop into code.
    • Knowledge to construct a WordPress theme from the scratch.

  • Who should do this course?

    The course is ideal for candidates HTML, CSS, PHP and Photoshop domain.

  • Why Simplilearn?

    • Simplilearn is the World’s Largest Certification Training Provider, with over 500,000+ professionals trained globally
    • Trusted by the Fortune 500 companies as their learning provider for career growth and training
    • 2000+ certified and experienced trainers conduct trainings for various courses across the globe
    • All our Courses are designed and developed under a tried and tested Unique Learning Framework that is proven to deliver 98.6% pass rate in first attempt
    • Accredited, Approved and Recognized as a training organization, partner, education provider and examination center by globally renowned names like Project Management Institute of USA, APMG, CFA Institute, GARP, ASTQB, IIBA and others

Course Preview

    • Chapter 1 - Introduction

      11:20
      • 1.1 Installing Scratching WordPress Themes
        01:51
      • 1.2 Understanding WordPress And WordPress Themes
        02:24
      • 1.3 The Workflow Process
        03:06
      • 1.4 Viewing The Finished Site
        03:59
    • Chapter 2 - Setting Up Photoshop For Web Layout

      50:13
      • 2.1 Setting Up Photoshop
        05:57
      • 2.2 Arranging The Workspace
        09:43
      • 2.3 Setting Panel Options
        06:52
      • 2.4 Customizing Menus And Keyboard Shortcuts
        08:53
      • 2.5 Saving Photoshops Workspace
        03:10
      • 2.6 Photoshop Color Management For Web Design
        05:27
      • 2.7 Common Photoshop Productivity Techniques
        05:55
      • 2.8 A Few Final Photoshop Settings
        04:16
    • Chapter 3 - Getting Set Up For User Interface Design

      52:47
      • 3.1 Understanding Monitor Resolution
        04:03
      • 3.2 Fixed Versus Flexible Web Layouts
        04:17
      • 3.3 Introducing The 960 Grid System
        08:59
      • 3.4 Available Column Widths In The 960 Grid System
        04:15
      • 3.5 Building A Custom Grid System (Free Lesson)
        14:01
      • 3.6 Using Photoshops Grid For Layout
        03:18
      • 3.7 Understanding The Golden Ratio
        04:58
      • 3.8 The Main Areas Of A WordPress Blog
        04:06
      • 3.9 Roughing Out The Design
        04:50
    • Chapter 4 - Developing A Wireframe UI In Photoshop

      1:12:26
      • 4.1 Buildg A Wireframe Layout Using Photoshop
        05:53
      • 4.2 Creating The First Wireframe Object
        06:05
      • 4.3 Continuing To Wireframe Objects
        07:24
      • 4.4 Deleting Wireframe Objects
        02:12
      • 4.5 Faster Methods For Creating Wireframe Objects
        10:32
      • 4.6 Building Up The Wireframe
        10:06
      • 4.7 Adding In Horizontal Rules
        04:01
      • 4.8 Wireframing Additional Objects, Plus Some Extra Techniques
        09:13
      • 4.9 Continuing The Wireframe Development
        06:34
      • 4.10 Placing Objects For Loop Post Thumbnails
        05:01
      • 4.11 Roughing In A Photo Gallery
        05:25
    • Chapter 5 - Finishing Up The Wireframe

      1:01:42
      • 5.1 Wireframing The Text
        09:44
      • 5.2 Creating More Wireframe Text
        09:11
      • 5.3 Adding In Additional Text Objects
        07:55
      • 5.4 Finishing Up The Text Wireframing
        03:33
      • 5.5 Getting The Layers Panel Organized
        09:28
      • 5.6 Additional Layer Group Techniques
        06:36
      • 5.7 Adding Text Labels To The Wireframe
        07:36
      • 5.8 Exporting The Wireframe For Review
        07:39
    • Chapter 6 - From Wireframe To Design

      1:55:02
      • 6.1 Applying Design To The Wireframe
        03:18
      • 6.2 Determining The Designs Message
        04:50
      • 6.3 Choosing A Typeface Hierarchy
        13:54
      • 6.4 Choosing Colour Combinations
        12:25
      • 6.5 Saving Out Custom Photoshop Color Palettes (Free Lesson)
        03:26
      • 6.6 Sourcing Photography And Textures
        08:05
      • 6.7 Creating The Site Logo (And Using Smart Objects)
        08:47
      • 6.8 Introducing Layer Style Special Effects
        07:06
      • 6.9 Finishing Up The Header
        03:12
      • 6.10 Building The Menu
        08:18
      • 6.11 Developing The Slideshow And Body Background
        04:11
      • 6.12 Formatting The New Additions Area
        17:52
      • 6.13 Blog Loop Formatting
        03:07
      • 6.14 Developing The Sidebar
        06:24
      • 6.15 Finishing Up With The Footer And Saving Out Custom Styles
        10:07
    • Chapter 7 - Applying Photography And Textures

      30:30
      • 7.1 Applying Texture To The Header
        08:06
      • 7.2 Including Additional Textures
        04:37
      • 7.3 Adding A Photo To The Slideshow
        04:02
      • 7.4 Inserting Photography For The New Additions Area
        04:55
      • 7.5 Adding Post Thumbnails In The Loop
        05:30
      • 7.6 Inserting Thumbnails In The Photo Gallery
        03:20
    • Chapter 8 - Preparing A Blank WordPress Theme For Design

      1:09:26
      • 8.1 Tools Of The Trade
        04:13
      • 8.2 Understanding Template Hierarchy
        06:08
      • 8.3 A Look At Geoffs Setup
        01:44
      • 8.4 Applying A Blank WordPress Theme
        06:00
      • 8.5 Reviewing And Adjusting The Style Sheets
        05:14
      • 8.6 Creating The First Div And CSS Rule
        05:28
      • 8.7 Roughing In The Layout
        09:09
      • 8.8 Further Roughing In The Layout
        12:38
      • 8.9 Adding The Photoshop Colour Palette To The Themes Style Sheet
        06:45
      • 8.10 Creating Our Sites Page Structure And Main Navigation Menu
        08:36
      • 8.11 Creating Sample Posts For The Loop
        03:31
    • Chapter 9 - Building The WordPress Theme From Complete Scratch

      3:06:36
      • 9.1 Extracting The Header Texture From The Layout
        09:47
      • 9.2 Inserting The Header Graphic Into The Theme
        03:30
      • 9.3 Extracting The Logo From Photoshop And Inserting It Into The Theme
        08:56
      • 9.4 Rebuilding The Navigation Menu Using CSS
        20:00
      • 9.5 Building Up The Main Content Area
        06:23
      • 9.6 Roughing In The Inner Containers
        18:38
      • 9.7 Inserting The Positioning Statement
        04:59
      • 9.8 Creating Button Formatting With CSS
        20:03
      • 9.9 Building And Formatting The New Additions Area - Part 1
        05:53
      • 9.10 Building And Formatting The New Additions Area - Part 2
        12:14
      • 9.11 Font Replacement With Google Fonts API
        10:20
      • 9.12 Consolidating Font Usage And Organizing Typography
        21:12
      • 9.13 One Giant Leap For Theme Design
        09:48
      • 9.14 Formatting The Loop
        09:54
      • 9.15 Adding Post Thumbnails To The Loop
        21:20
      • 9.16 Getting The Sidebar Started
        03:39
    • Chapter 10 - Pushing The Theme Design Further

      2:28:53
      • 10.1 Footer Development
        06:17
      • 10.2 Formatting Hyperlinks
        05:54
      • 10.3 Limiting The Number Of Posts Appearing On The Home Page
        06:38
      • 10.4 Inserting Custom Loop Pagination
        09:05
      • 10.5 Inserting The Slideshow
        16:25
      • 10.6 A Better Way For Building WordPress Menus
        08:10
      • 10.7 Building And Formatting WordPress Subpages
        08:27
      • 10.8 Applying Formatting To Post Pages
        07:16
      • 10.9 Completely Customizing The Comments Area
        18:55
      • 10.10 Adding A Ribbon Graphic To The Comment Area
        15:49
      • 10.11 Customizing Category And Search Results Pages (Free Lesson)
        08:07
      • 10.12 Adding A Search Field To The Header
        08:23
      • 10.13 Building A Lightbox Photo Gallery
        16:11
      • 10.14 Finishing Touches
        03:34
      • 10.15 Addressing Browser Compatibility Issues
        09:42
    • Chapter 11 - Wrapping Things Up

      05:39
      • 11.1 Final Site Checklist
        01:57
      • 11.2 Thanks For Watching That Was Fun
        03:42
    • {{childObj.title}}

      • {{childObj.childSection.chapter_name}}

        • {{lesson.title}}
      • {{lesson.title}}

    View More

    View Less

      FAQs

      • How do I enroll for the Online training?

        You can enroll for this Online training online. Payments can be made using any of the following options and receipt of the same will be issued to the candidate automatically via email.
        1. Visa debit/credit card
        2. American express and Diners club card
        3. Master Card, or
        4. Through PayPal

      • What will I get along with this training?

        You will have access to the online e-learning along with the training.

      • Can I cancel my enrollment? Do I get a refund?

        Yes, you can cancel your enrollment. We provide you complete refund after deducting the administration fee. To know more please go through our Refund Policy.

      • Do you provide any course completion certificate?

        Yes, we offer course completion certificate after you successfully complete the training program.

      • Where and how can I access the e-learning content? Are there any limitations?

        Once you register with us for a course by paying the course fee, you can have 24/7 access to the e-learning content on our website. An automated course purchase confirmation mail from our side will guide you through the process.

      • I am not able to access the online course. Whom should I contact for a solution?

        Please raise a request via our Help and Support portal to have your issue resolved.

      • Do you provide money back guarantee for the training programs?

        Yes. We do offer a money-back guarantee for many of our training programs. You can refer to the Refund Policy and raise refund requests via our Help and Support portal.

      • I want to know more about the training program. Whom do I contact?

        Please join our Live Chat for instant support, call us, or Request a Call Back to have your query resolved.

          • Disclaimer
          • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.