PSD to HTML: Taking Your Designs from Photoshop to HTML5

Figure 36
Figure 36 – Dreamweaver with a Tracing Image

How does a great design in Photoshop become a great design on the web? This tutorial will take you through creating a functional Photoshop design and then using tools within Photoshop to produce the HTML5. A method of manually taking Photoshop elements into an HTML5 file is also demonstrated.

Designers have been using Photoshop for many years to not only create images for the web, but also to design the layout of a web page. Today, web design often includes a different look for mobile and tablet devices. As a result, Photoshop’s role in the design process is even more important. By effectively using Photoshop, the time writing HTML and CSS coding to design your next web project can be significantly reduced.

Photoshop can natively provide you with HTML code from a graphic. However, the HTML code that is generated comes from the Save for Web dialog box. This feature has been moved to the File > Export > Save for Web (Legacy). This would indicate that this feature will eventually be removed from Photoshop. One of the reasons that we do NOT recommend using this feature to make a webpage, is that the entire structure will be built using tables. According to the popular w3schools website, “The <table> element was not designed to be a layout tool. The purpose of the <table> element is to display tabular data.”

Rather than giving you an example of creating a webpage that is condemned almost unanimously by the web design world, this article will show you a technique that gives you more control. While we will demonstrate a unique method of harnessing Photoshop’s features to help you build a web site quickly, this tutorial will not get the HTML content from Photoshop. For readers wanting to get HTML and CSS out of Photoshop, there is a plugin called Export Kit (http://exportkit.com/plugin/environments/html5/convert-a-psd-to-responsive-html-and-css) that you can purchase. In order to work with this plugin, you have to follow a specifically named set of layers and structure. By following the tutorials on the Export Kit site, you can learn how to use this plugin. The HTML code created by the Export Kit is cleaner than the tabular HTML tags coming from Photoshop.

New Method in Photoshop

One of the new features of Photoshop CC 2015 is Artboard. An Artboard will allow you to create multiple canvases (images) inside of one PSD image. In the past, designers would use folders and place a number of layers within the folder. Figure 1 shows what the Layers panel looks like with Artboards.

Figure 1
Figure 1 – Phone, Tablet and Desktop Artboards within the Layers Panel

Using Artboards is also a very good way to create buttons. Rather than managing a large number of layers to make buttons, you can use Artboards for each button. As a result, designers don’t have to search for and turn layers on and off.

Once the Artboard for the desktop, tablet and phone are made, Photoshop will allow you to export the CSS code to recreate these designs in your favorite web editor. In this tutorial, we will use Adobe Dreamweaver. You will be given step-by-step instructions on how to go from Photoshop to Dreamweaver.

Creating Web Design in Photoshop

In this section of the tutorial, you will create a new Photoshop document. The size of the document will reflect the size of the desktop version of your website. The default Layer 1 layer will then be converted to Artboard. To get started:

  1. Start Photoshop. Create a new document by clicking on the File > New menu option.
  2. Set the size to 1366 by 768 pixels. The resolution should be set to 72dpi. The dialog box will look similar to Figure 2. Click the OK button.

    Figure 2
    Figure 2 – New Image Dialog box.
  3. Click on the Layer > New > Artboard menu option as shown in Figure 3.

    Figure 3
    Figure 3 – Making a New Artboard
  4. Click on the pull-down arrow in the Set Artboard to Preset menu item as shown in Figure 4. Choose the Web Most Common setting. Click the OK button.

    Figure 4
    Figure 4 – Web Most Common setting
  5. In the Layers Panel, there is now an Artboard 1 with the original Layer 1 underneath it as shown in Figure 5.

    Figure 5
    Figure 5 – New Artboard Layer
  6. Double click on the name Artboard 1. Rename it to Desktop and press the Enter key.
  7. Double click on Layer 1. Change the name to bar.
  8. Click on the Rectangle Marquee tool. Draw a rectangle over the top part of the layer to create a title bar. The width of the marquee should be the width of the screen. The height should be approximately 130px.
  9. Click on the Paint Bucket tool. Change the foreground color to a light blue. The color used in this tutorial is: #B6CBEE.
  10. Click in the marquee to fill it with color.
  11. Click on the Layer > Layer Style > Drop Shadow. Adjust the shadow to your preferences. Figure 6 shows the settings used within this tutorial.

    Figure 6
    Figure 6 – Drop Shadow Settings
  12. Click on the Text tool. Set the font to Arial Black, 36 px and the color in this sample is white. On the blue bar, type the following :
    HOME PRODUCT SERVICES ABOUT

    When complete, it should look like Figure 7.

    Figure 7
    Figure 7 – Text menu options
  13. To make the header bar look a little nicer, place any logo you have in the top left corner. For this tutorial, a robot head from a mobile app will be used. You can see the results in Figure 9.
  14. Click on the Rounded Rectangle Tool as shown in Figure 8.

    Figure 8
    Figure 8 – Rounded Rectangle Tool
  15. Set the Fill color to a dark blue. Set the stroke to a black color that is 2px thick. Set the Radius of the corners to 20px. Draw a rectangle on the canvas that approximately 360 x 460 pixels. The image should now look similar to Figure 9.

    Figure 9
    Figure 9 – Rounded Rectangle in the layout
  16. To fill in the rounded rectangle, grab an image of either a plate of food or a restaurant. In this tutorial, images of an old western ghost town will be used. Figure 10 shows the image in place.
  17. Click the Text Tool. Change the font to Arial Regular, 36px, set the color to White and set the Justification to Center. Type the following text on the bottom of the blue rectangle: Tex-Mex at its Best. It should look similar to Figure 10 when it’s complete.

    Figure 10
    Figure 10 – Text with image
  18. Double click on the Rounded Rectangle name in the Layer menu. Change the name to Feature 1.
  19. Double click on the image of the restaurant (or food picture) and rename as Image 1. The Layer Panel should now look like Figure 11.

    Figure 11
    Figure 11 – Layer Panel
  20. Click on the Move tool.
  21. Click the Rounded Rectangle layer named Feature 1. Hold the Alt key down. Drag the rectangle to the right to make a clone copy of the original rounded rectangle.
  22. Repeat step 20 again to make a third round rectangle. The image should now look similar to Figure 12.

    Figure 12
    Figure 12 – Three Feature rectangles
  23. Double click on the names of the two new rectangles so they are called Feature 2 and Feature 3.
  24. Repeat steps 16-19 to add a new image and new text field to the other two feature rectangles. The finished image should look similar to Figure 13. Figure 14 shows the Layers of the Desktop Artboard.
    Figure 13
    Figure 13 – Completed Web Page Layout

    Figure 14
    Figure 14 – Layers Panel

Next Artboard

The layout of the site is fairly simple and nothing is too complex. Many designers who use Photoshop to create the initial layout often will make the layouts significantly more elaborate. However, for the purpose of this tutorial, a simple layout will work best.

As with many features inside of Photoshop, there is usually more than one way to do something. Instead of using the interface, in this tutorial you will be shown a new tool that has been added to Photoshop CC 2015.

Click on hold down on the Move tool. In the fly out menu, there is a new tool called Artbook Tool as show in Figure 15. Click on the

Artbook Tool

.

Figure 15
Figure 15 – New Artbook Tool

In the workspace to the right of the desktop Artboard, draw a new Artboard. If the Properties panel is not open, click on Window > Properties to open the Properties panel. Change the Artboard pre-set to iPad Mini. This is the resolution of the iPad Mini in portrait mode. To change this to landscape mode, exchange the values of the width and height. Double click on the W: and enter 1024. Double click on the H: and enter 768. Figure 16 shows what the Artboard should look like.

Figure 16
Figure 16 – Configuring the new Artboard

The interface, including the Layers panel will now look like Figure 17. Notice that there are two Artboards. With the Artboard 1 group selected, Photoshop shows “+” signs around the Artboard. By clicking on these signs, you can add more Artboards.

Figure 17
Figure 17 – Full Interface with Two Artboards

Double click on Artboard 1 in the Layers Panel and rename it to Tablet.
Click the plus (+) button to the right of the new Tablet Artboard. This will add a third Artboard. Select the preset of iPhone 5. Photoshop will put the dimensions in landscape mode. Exchange the width and height so the phone version is in portrait mode.
Double click on the Artboard 1 in the Layers panel and rename it to Phone.

Making the New Interface

Now that the two new Artboards are created, you can start to copy the assets over to the Artboards. To start, let’s focus on the top navigation bar. To copy the bar from the desktop to the tablet:

  1. Select the Move Tool. You will have to hold the mouse down on the Artboard tool so you can access the Move Tool.
  2. Rather than copy and paste, use the clone method. To do this, click on the bar in the Desktop Artboard.
  3. Hold the Alt key down and drag the bar layer to the Tablet Artboard. This will copy the layer and place it in an identical spot from the original Desktop layer. Figure 18 shows the Layers panel and the two Artboards after the bar has been copied.

    Figure 18
    Figure 18 – Bar Layer added to Tablet Artboard
  4. Double click on bar copy and rename it to bar. It’s important to keep the layer names the same. Photoshop will use the layer names when creating CSS rules.
  5. Click on the menu text (HOME PRODUCT …) in the Desktop Artboard.
  6. Hold the Alt key down and drag the menu text to the Tablet Artboard in the Layers Panel.
  7. The text is set to the same position on the Tablet as it was in the Desktop. However, it doesn’t fit. Use the Move Tool to move the text so it can be read.
  8. Double click on the T in the Tablet Artboard to alter the text. Change the font to Arial Regular.
  9. Using the Move Tool, move the text so it’s closer to the right edge of the Artboard as shown in Figure 19.

    Figure 19
    Figure 19 – Adjusted Menu Text
  10. Following step 3, copy the logo (robot’s head in this case) from the Desktop Artboard to the Tablet Artboard.
  11. The logo may be a little large, so you can click on Edit > Free Transform (CTRL+T) to shrink the logo down a bit.

At this point, you probably see a pattern developing here. In order to speed things up, you can move a number of layers at the same time. To select a number of layers and move them:

  1. Click on the Feature 1 layer, so it is highlighted.
  2. Hold the Shift key down and click on the top Text Layer (“Best Steaks…”) as shown in Figure 20.

    Figure 20
    Figure 20 – Highlighting a number of Layers
  3. Hold the Alt key down and drag the layers to the Tablet in the Layers Panel.
  4. The images, text and dark blue rectangles are too large for the tablet view. These can be re-sized very quickly. First, deselect the text by holding the Shift key down and clicking on the layer just below the last text layer (Image 3 copy).
  5. Select the Free Transform option by pressing CTRL+T.
  6. Hold the Shift key down and reduce the size of the images and rounded rectangles.
  7. Use the Move Tool to move the objects where they are centered on the page.
  8. Click the Commit check mark on the top of the context sensitive menu.
  9. Move the text fields so they are on the blue boxes. If you don’t see the text, keep in mind that it is white text and may be sitting on a white background.
  10. Double click on the T on the Tex-Mex layer. Change the text font size to 30px so it fits better in the round rectangle.
  11. Repeat step 10 for the other two text layers. The final look will be similar to Figure 21.
Figure 21
Figure 21 – Final Tablet layout

Making the HTML Page

Before you start moving assets from Photoshop to a web page, it’s important that a site, or at least a basic web page, be defined. You can use your favorite web editor. For this tutorial, Dreamweaver will be used since it is part of the Creative Cloud. If you have Photoshop, then you most likely have access to Dreamweaver.

The first step after starting Dreamweaver is to define a site. While this is not absolutely necessary, it is a best practice. To define a site in Dreamweaver:

  1. Click on the Site menu option and choose New Site.
  2. Type Photoshop RWD for the title.
  3. Make a folder on your desktop called psd-rwd. It should look similar to Figure 22.

    Figure 22
    Figure 22 – Defining a site
  4. Click the Save button.

Before making the web page and CSS file, the images and CSS folders should be created. The simplest way to make the folders is to right-click in the Files panel as shown in Figure 23. Make one folder called images and a second folder called css.

Figure 23
Figure 23 – Making a new Folder in Dreamweaver

Next step is to create both a web and css file and link the two together. To do that in Dreamweaver:

  1. Click on the File menu option and choose New.
  2. From the New Document dialog box, make sure the HTML category is selected. Click Create.
  3. Click the File menu option and choose Save.
  4. Type in the name index.html and click Save.
  5. Creating the CSS can be done in a number of ways. In this case, the tutorial will use the CSS Designer panel. Click on CSS Designer tab.
  6. Click on the + button. From the pop-up menu choose Create a New CSS File as shown in Figure 24.

    Figure 24
    Figure 24 – Create New CSS File
  7. Click the Browse button. Point to the CSS folder.
  8. Type in style.css as the file name. The finished dialog box will look similar to Figure 25. Click the OK button.

    Figure 25
    Figure 25 – Creating and Linking a CSS file
  9. Figure 26 shows that both the index.html and style.css file have an asterisk after their name. That’s because these files have not been saved. To save both files at once, click on File > Save All.

    Figure 26
    Figure 26 – Two Files Not Saved

Getting Code from Photoshop

Now that a site has been defined and the web and css pages have been made, you can start getting the code from Photoshop and place it in the style sheet. Before extracting the code, you need to move the Desktop Artboard into position. While you can drag and move all the Artboards anywhere in the workspace, you can also use the Property panel to position the Artboard to a specific location. To start creating the CSS and HTML code:

  1. In Photoshop, click on the Desktop Artboard. In the Property panel, set the X and Y values to 0 for the Desktop Artboard.
  2. Locate the bar layer in the Desktop Artboard. Right-click on the bar layer in the Desktop Artboard. In the pop up menu, choose Copy CSS as shown in Figure 27.

    Figure 27
    Figure 27 – Copy CSS
  3. Switch to your web editor (Dreamweaver in this tutorial’s case).
  4. Open the css file. Because CSS files are text files with no design (images), Dreamweaver opens these files in Code View.
  5. Place the cursor inside the CSS file. Press CTRL+V (Command + V on a Mac) to paste the code into the CSS file. It should look similar to Figure 28.

    Figure 28
    Figure 28 – Box code inserted into CSS
  6. This text is editable. The code is below. The bolded text is the altered code. One of the biggest changes is removing the bar.png image and putting in the color. The drop shadow is also added since Photoshop would have put the drop shadow on the bar.png file.

  7. Click on the Design part of the index.html page.
  8. Click Insert > Div to create a DIV tag.
  9. In the dialog box, click on the Class pull-down menu. Choose bar.
  10. Click the OK button.
  11. If you are not using Dreamweaver, you can type in the HTML code by hand. The following is what Dreamweaver automatically wrote:

<div class=”bar”>Content for class “bar” Goes Here</div>
When the page is previewed in the browser, it looks similar to what you had in Photoshop. You will need to remove the text Content for class “bar” Goes Here.

Before starting the preceding steps, you were instructed to move the Desktop Artboard to the coordinates 0, 0. If the X value was 10, then the left parameter for the bar would be 10px, not 0px. This needs to be kept in mind when working with the other layouts. You’ll need to move the Desktop Artboard to the side and move the Tablet Artboard to coordinate 0, 0.

The next step is to get the three feature blue rounded rectangles into the CSS file. The process is the same as how you copied the bar from the previous steps. The main steps are:

  1. Right-click on the layer.
  2. Select Copy CSS from the pop up menu.
  3. Switch to your web editor (Dreamweaver in this case).
  4. Paste the CSS code into the CSS file.
  5. Add the HTML <div> tag with the appropriate ID.

When you are done with the three feature boxes, the CSS code will look similar to:

The HTML code would look similar to the following:

What about images? This also works very well. There are a number of ways to get images or sections of the PSD file into a web page. One option is to right-click on the layer with the image and use the Export feature.
However, there is also a copy and paste feature that can work. To place an image from Photoshop to Dreamweaver:

  1. Click on the first image in the Layer panel as shown in Figure 29.

    Figure 29
    Figure 29 – Select the first image
  2. Click on the Magic Wand Tool as shown in Figure 30. You may have to hold down the Quick Selection to find the Magic Wand Tool.

    Figure 30
    Figure 30 – Magic Wand Tool
  3. Click anywhere on the Photoshop document except Image 1. This will highlight the entire background.
  4. Click on the Select > Inverse menu. This will make only Image 1 selected.
  5. Press CTRL+C or Command+C to copy the selection.
  6. Switch to Dreamweaver. Make sure that the cursor is in the first DIV tag that defines the rounded rectangle. Press CTRL+V or Command+V to paste the image into Dreamweaver.
  7. In the Image Optimization dialog box, change the Format to JPG as shown in Figure 31.

    Figure 31
    Figure 31 – Optimize to JPG
  8. Set the Quality to 80 to reduce the file size while maintaining a high quality.
  9. Click the OK button.
  10. In the Save Web Image dialog box, change to the images folder.
  11. Type in the name restaurant_1.jpg as shown in Figure 32.

    Figure 32
    Figure 32 – Save Web Image in the images folder.
  12. Click the Save button.

To control the image a little better, you can create a rule for this image. It will be placed inside the round rectangle DIV tag. However, there is no padding. You can copy the CSS out of Photoshop or write the following CSS rule in the CSS file.

Switch to the HTML code. Add the class parameter to the image tag. It should look similar to the following line of code.
<img src=”images/restaurant_1.jpg” width=”329″ height=”311″ class=”Image_1″>

Adding Other Designs

Although the desktop view is not completed yet, the process is the same as what was covered in the previous steps. As you can see, there is a fair bit of copy and pasting to build your design this way. However, there is an even faster method. Before moving on, please read the important note.

NOTE: When making a RWD page from Photoshop, it’s important that all the layer names are the same. Therefore, if you have Image 1 in the Desktop layer, that image should be the same name in the Tablet and Phone layers.

To create the CSS rules for the tablet:

  1. In Photoshop, click on the Desktop Artboard in the Layers panel.
  2. Move the Desktop Artboard away from coordinate 0, 0.
  3. Click on the Tablet Artboard.
  4. In the Property panel, set the X and Y coordinates to 0, 0.
  5. Open the style.css file in the web editor (Dreamweaver).
  6. Type in the following code at the bottom of the file:

  7. Place the cursor between the opening brace ( { ) and the closing brace ( } ).
  8. Switch to Photoshop.
  9. Click on the Tablet Artboard in the Layers panel as shown in Figure 33.

    Figure 33
    Figure 33 – Tablet Artboard
  10. Right-click on the Tablet Artboard and click on Copy CSS.
  11. Switch back to the CSS file. Make sure the cursor is inside the media rule created in step 2.
  12. Press CTRL+V or Command+V to paste all the tablet code inside the CSS file.

Provided the layer names were the same, this will now create all the rules for the tablet. You may need to resize the images but you can still use the same images and just resize the images with CSS rules. This is not a best practice but it can be done very quickly.

One Final Tip

This is a feature in Dreamweaver. You can load what is called a Trace Image. A Trace Image is an image that can be loaded into Dreamweaver in the background. It has no bearing on the HTML file and will NOT show up in the browser. But it will allow you to trace div tags around the image. You can also adjust the opacity of the Trace Image. To create and load a Trace Image:

  1. In Photoshop, right-click on the Desktop Artboard.
  2. From the pop-up menu choose Export As.
  3. In the Export As dialog box, make sure the output is set to PNG as shown in Figure 34.
  4. Click Export.

    Figure 34
    Figure 34 – Export As dialog box
  5. Locate folder where you defined your site in Dreamweaver.
  6. Click Save.
  7. Switch to Dreamweaver.
  8. Switch to Design View.
  9. Click on the Modify > Page Properties.
  10. Click on the Tracing Image category.
  11. Click the Browse button. Locate the Desktop.png file and click Open.
  12. You can adjust the Transparency so the image is a little more faded. This will make seeing the HTML elements easier as you can distinguish between HTML and the background image. Your dialog box should look similar to Figure 35.

    Figure 35
    Figure 35 – Setting up the Tracing Image
  13. Now the image will appear in the background within Dreamweaver.

Figure 36 shows an example of what your screen may look like. Notice the Node marker at the top of the DIV tags. In Dreamweaver, you can click on these Nodes and drag the DIV tag anywhere on the screen. Dreamweaver will automatically update the CSS rule for that DIV tag.

Figure 36
Figure 36 – Dreamweaver with a Tracing Image

Conclusion

Creating a professional finished web site using code generated by Photoshop is not the most ideal way of building a site. However, it can generate code to create the look of a site based on a Photoshop mock up. This will save you time and money.

The method of using Artboards is fairly new. If you take the time to look at some of the presets, you’ll notice that at the bottom are a number of icon sizes. This is ideal if you have to create icons for native applications. While there are currently 14 different icon sizes listed, there are over 30 different icon sizes needed between Apple and Android apps. However, using the Artboards, you can have one file with over 30 different Artboards for all of your icons. Using the new Export As feature, you can also have these icons rendered in one step.








Be the first to comment

Leave a Reply

Your email address will not be published.


*