PSD to HTML revaluation by adobe Dreamweaver

What is the easiest way to develop HTML site from PSD?

Did you bore to slicing PSD file via Photoshop?

Now you can convert PSD file to HTML more efficiently with Dreamweaver.

How?

The new Dreamweaver (2014.1)  comes with new feature called Extract. This is really powerful feature ever to convert PSD to HTML.

You can easily extract image from PSD or able to directly insert to page by drag & drop. You will be able to get the size of the element. Easily copy CSS such as color, gradient, fonts etc. Able to copy and pest text. You will easily get the font family as css.

You can extract asset or image from layers and layer groups by using a visual interface. Save your valuable time by using Dreamweaver extract feature.

Step-1: Install Dreamweaver 2014.1

Step-2: Open Dreamweaver. You will find screen like this.

PSD to HTML revaluation

PSD to HTML revaluation

Step-3: Click on the “Upload PSD” button.

Step-4: Select your PSD file then click Open.

Step-5: Then upload will start. After finish upload you will find your PSD on the panel.

Step-6: Click on your PSD file.

Step-7: Create a new HTML file on the right side.

Step-8: Activate live view.

Dreamweaver Activate Live View

Dreamweaver Activate Live View

Step-9:  Now you are ready to drag and drop image, copy text and copy style.

Step-10: To copy any image simply drag & drop where you need that image.

Step-11: To copy any style to associate  with any image or text, just click on image or text. Then click Copy CSS. Styles will copy to your clipboard.

Dreamweaver Copy css style

Dreamweaver Copy css style

Step-12: To apply css add class to that element by clicking + button. Then right click on the class name then select Paste Styles.

Add Style

Add Style

Step-13: That’s all.

Comments

  • Author Image

  • Author Image

Leave a Reply