PSD To HTML Tutorial Using Photoshop And Dreamweaver

Learn how to quickly turn your Photoshop designs into valid HTML & CSS. An essential course for any web developer
3.0 (5 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
532 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 37
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2013 English

Course Description

This PSD to HTML Using Photoshop and Dreamweaver training course from Infinite Skills teaches you the core principles of creating workable websites using these two Adobe programs. This course is designed for users that already have a working knowledge of Photoshop and Dreamweaver.


You will start out by creating a PSD mockup using Photoshop. David will teach you about the design basics in Photoshop, layer properties, slicing, and web optimization. From there, you will dive into working in Dreamweaver to transform your Photoshop document into a working website. In Dreamweaver you will explore the process of setting up and managing a website, working with different view modes, and working with images and layout objects. This video tutorial will also teach you some fundamental HTML and CSS rules. Finally, you will work with the Live View in Dreamweaver to test your website.

By the completion of this video based training course, you will have developed the necessary skills needed to design, create, and publish a working website. Working files are included, allowing you to follow along with the author throughout the lessons.

What are the requirements?

  • Dreamweaver and Photoshop

What am I going to get from this course?

  • Learn How To Create HTML From Photoshop PSD Files

What is the target audience?

  • Web and Graphic Designers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Important - Download These First - Working Files
Preview
Article
0101 What You Will Learn
Preview
00:33
0102 What Is PSD To Web Conversion?
Preview
01:24
0103 Working With Lesson Files
Preview
00:51
0104 Developing A Site Map
Preview
02:17
0105 How To Access Your Working Files
Preview
02:45
Section 2: Creating A PSD Mockup
0201 Deciding On A Site layout
04:23
0202 Selecting Color And Fonts
03:21
0203 Using Photoshop To Create A Color Palette :
06:59
0204 Setting Up Document Size And Image Resolution
02:54
0205 Creating The PSD Mockup Navigation
07:07
0206 Completing The PSD Mockup
04:57
0207 Working With Placeholder Text
03:24
0208 Transparency And Graphics
03:39
0209 Slicing The Mockup
06:14
0210 Slice Options
03:45
0211 Saving For Web - Part 1
05:30
0212 Saving For Web - Part 2
06:17
Section 3: Moving To Dreamweaver
0301 Organizing Files
01:43
0302 Setting Up And Managing A New Site
04:24
0303 Testing The Site Connection
05:36
0304 Working With The Files Tab
03:10
0305 Working With Code, Design And Split Views
03:37
0306 Working With Images And Layout Objects
06:08
Section 4: Converting The PSD Mockup
0401 Opening Files In Dreamweaver
01:17
0402 Adding Title And Meta Name Tags
02:23
0403 Replacing Placeholder Slices With Div Tags
02:36
0404 Replacing Placeholder Text With HTML Using Div Tags
06:06
0405 Using AP Div Tags - Part 1
06:26
0406 Using AP Div Tags - Part 2
04:47
0407 Working With Stylesheets
03:52
0408 Creating New Style Rules
05:16
0409 Adding Hyperlinks - Relative And Absolute
07:22
Section 5: Testing Your Site
0501 Working With Live View In Dreamweaver
01:03
0502 Checking Remote Files And Refreshing
02:11
0503 Viewing The Site In A Browser
01:35
Section 6: Conclusion
0601 Summary
00:46

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Infinite Skills, High Quality Training

Infinite Skills is a Canadian based company who offer a huge and ever growing range of high quality eLearning solutions that teach using studio quality narrated videos backed-up with practical hands-on examples and comprehensive working files. All courses are created by trained educators and experts in video based education.

The emphasis is on teaching real life skills that are essential for progressing in today's commercial environment.

Ready to start learning?
Take This Course