Key features


How this works :

At Simplilearn, we greatly value the trust of our patrons. Our courses were designed to deliver an effective learning experience, and have helped over half a million find their professional calling. But if you feel your course is not to your liking, we offer a 7-day money-back guarantee. Just send us a refund request within 7 days of purchase, and we will refund 100% of your payment, no questions asked!

For Self Placed Learning :

Raise refund request within 7 days of purchase of course. Money back guarantee is void if the participant has accessed more than 25% content.

  • 90 High Quality Lectures
  • 13 Hrs of HQ e-learning content
  • Complete look at theme building
  • Course Completion Certificate

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 Themes01:51
      • 1.2 Understanding WordPress And WordPress Themes02:24
      • 1.3 The Workflow Process03:06
      • 1.4 Viewing The Finished Site03:59
    • Chapter 2 - Setting Up Photoshop For Web Layout 50:13
      • 2.1 Setting Up Photoshop05:57
      • 2.2 Arranging The Workspace09:43
      • 2.3 Setting Panel Options06:52
      • 2.4 Customizing Menus And Keyboard Shortcuts08:53
      • 2.5 Saving Photoshops Workspace03:10
      • 2.6 Photoshop Color Management For Web Design05:27
      • 2.7 Common Photoshop Productivity Techniques05:55
      • 2.8 A Few Final Photoshop Settings04:16
    • Chapter 3 - Getting Set Up For User Interface Design 52:47
      • 3.1 Understanding Monitor Resolution04:03
      • 3.2 Fixed Versus Flexible Web Layouts04:17
      • 3.3 Introducing The 960 Grid System08:59
      • 3.4 Available Column Widths In The 960 Grid System04:15
      • 3.5 Building A Custom Grid System (Free Lesson)14:01
      • 3.6 Using Photoshops Grid For Layout03:18
      • 3.7 Understanding The Golden Ratio04:58
      • 3.8 The Main Areas Of A WordPress Blog04:06
      • 3.9 Roughing Out The Design04:50
    • Chapter 4 - Developing A Wireframe UI In Photoshop 1:12:26
      • 4.1 Buildg A Wireframe Layout Using Photoshop05:53
      • 4.2 Creating The First Wireframe Object06:05
      • 4.3 Continuing To Wireframe Objects07:24
      • 4.4 Deleting Wireframe Objects02:12
      • 4.5 Faster Methods For Creating Wireframe Objects10:32
      • 4.6 Building Up The Wireframe10:06
      • 4.7 Adding In Horizontal Rules04:01
      • 4.8 Wireframing Additional Objects, Plus Some Extra Techniques09:13
      • 4.9 Continuing The Wireframe Development06:34
      • 4.10 Placing Objects For Loop Post Thumbnails05:01
      • 4.11 Roughing In A Photo Gallery05:25
    • Chapter 5 - Finishing Up The Wireframe 1:01:42
      • 5.1 Wireframing The Text09:44
      • 5.2 Creating More Wireframe Text09:11
      • 5.3 Adding In Additional Text Objects07:55
      • 5.4 Finishing Up The Text Wireframing03:33
      • 5.5 Getting The Layers Panel Organized09:28
      • 5.6 Additional Layer Group Techniques06:36
      • 5.7 Adding Text Labels To The Wireframe07:36
      • 5.8 Exporting The Wireframe For Review07:39
    • Chapter 6 - From Wireframe To Design 1:55:02
      • 6.1 Applying Design To The Wireframe03:18
      • 6.2 Determining The Designs Message04:50
      • 6.3 Choosing A Typeface Hierarchy13:54
      • 6.4 Choosing Colour Combinations12:25
      • 6.5 Saving Out Custom Photoshop Color Palettes (Free Lesson)03:26
      • 6.6 Sourcing Photography And Textures08:05
      • 6.7 Creating The Site Logo (And Using Smart Objects)08:47
      • 6.8 Introducing Layer Style Special Effects07:06
      • 6.9 Finishing Up The Header03:12
      • 6.10 Building The Menu08:18
      • 6.11 Developing The Slideshow And Body Background04:11
      • 6.12 Formatting The New Additions Area17:52
      • 6.13 Blog Loop Formatting03:07
      • 6.14 Developing The Sidebar06:24
      • 6.15 Finishing Up With The Footer And Saving Out Custom Styles10:07
    • Chapter 7 - Applying Photography And Textures 30:30
      • 7.1 Applying Texture To The Header08:06
      • 7.2 Including Additional Textures04:37
      • 7.3 Adding A Photo To The Slideshow04:02
      • 7.4 Inserting Photography For The New Additions Area04:55
      • 7.5 Adding Post Thumbnails In The Loop05:30
      • 7.6 Inserting Thumbnails In The Photo Gallery03:20
    • Chapter 8 - Preparing A Blank WordPress Theme For Design 1:09:26
      • 8.1 Tools Of The Trade04:13
      • 8.2 Understanding Template Hierarchy06:08
      • 8.3 A Look At Geoffs Setup01:44
      • 8.4 Applying A Blank WordPress Theme06:00
      • 8.5 Reviewing And Adjusting The Style Sheets05:14
      • 8.6 Creating The First Div And CSS Rule05:28
      • 8.7 Roughing In The Layout09:09
      • 8.8 Further Roughing In The Layout12:38
      • 8.9 Adding The Photoshop Colour Palette To The Themes Style Sheet06:45
      • 8.10 Creating Our Sites Page Structure And Main Navigation Menu08:36
      • 8.11 Creating Sample Posts For The Loop03:31
    • Chapter 9 - Building The WordPress Theme From Complete Scratch 3:06:36
      • 9.1 Extracting The Header Texture From The Layout09:47
      • 9.2 Inserting The Header Graphic Into The Theme03:30
      • 9.3 Extracting The Logo From Photoshop And Inserting It Into The Theme08:56
      • 9.4 Rebuilding The Navigation Menu Using CSS20:00
      • 9.5 Building Up The Main Content Area06:23
      • 9.6 Roughing In The Inner Containers18:38
      • 9.7 Inserting The Positioning Statement04:59
      • 9.8 Creating Button Formatting With CSS20:03
      • 9.9 Building And Formatting The New Additions Area - Part 105:53
      • 9.10 Building And Formatting The New Additions Area - Part 212:14
      • 9.11 Font Replacement With Google Fonts API10:20
      • 9.12 Consolidating Font Usage And Organizing Typography21:12
      • 9.13 One Giant Leap For Theme Design09:48
      • 9.14 Formatting The Loop09:54
      • 9.15 Adding Post Thumbnails To The Loop21:20
      • 9.16 Getting The Sidebar Started03:39
    • Chapter 10 - Pushing The Theme Design Further 2:28:53
      • 10.1 Footer Development06:17
      • 10.2 Formatting Hyperlinks05:54
      • 10.3 Limiting The Number Of Posts Appearing On The Home Page06:38
      • 10.4 Inserting Custom Loop Pagination09:05
      • 10.5 Inserting The Slideshow16:25
      • 10.6 A Better Way For Building WordPress Menus08:10
      • 10.7 Building And Formatting WordPress Subpages08:27
      • 10.8 Applying Formatting To Post Pages07:16
      • 10.9 Completely Customizing The Comments Area18:55
      • 10.10 Adding A Ribbon Graphic To The Comment Area15:49
      • 10.11 Customizing Category And Search Results Pages (Free Lesson)08:07
      • 10.12 Adding A Search Field To The Header08:23
      • 10.13 Building A Lightbox Photo Gallery16:11
      • 10.14 Finishing Touches03:34
      • 10.15 Addressing Browser Compatibility Issues09:42
    • Chapter 11 - Wrapping Things Up 05:39
      • 11.1 Final Site Checklist01:57
      • 11.2 Thanks For Watching That Was Fun03:42
    • {{childObj.title}}
      • {{childObj.childSection.chapter_name}}
        • {{lesson.title}}
      • {{lesson.title}}

    View More

    View Less


  • 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.