Learn Everything About Converting PSD to HTML

 

With Photoshop, using dynamic data, tens or hundreds of individual documents can be prepared in a single automated operation customized for different users.

Creation and Configuration of the Document in Photoshop

We create a new document in Photoshop with measurements of 960×800 pixels. Once created, we add guides to the edges of the document to delimit the edge of the template design and we extend the measurements of the document through Settings> Canvas size.

Creating the Web Template Background

Something fundamental for the design of a site to be attractive is to create a striking background and for this there are several techniques such as the one we are going to use now.

To have an attractive website, images are necessary. With the latest advancement in technology, users not only want to see images, but also have good resolution. Nevertheless, a good resolution image carries more size which can be heavy for the speed of a website if you have a lot of images. So what is the possible solution here? Well, convert your image files, which are surely in PSD format if you have decided to make slight changes previously, in HTML, which is the language used on the web. Most people use XD to WordPress instead of PSD to HTML but it is the choice and preferences of the client.

Convert PSD to WordPress

In this tutorial we will see the complete process of how to pass a design made in Photoshop to HTML5 code, first we will start with the cuts and the optimization of the images of the design PSD, then we will see the whole skeleton in html5 and finally we will give you styles with CSS.

REQUIREMENTS:

• A code editor
• Basic knowledge of html and CSS
• An image editor that supports PSD files

STEP 1 – CUTS THE DESIGN IMAGES

Here we are going to use the sector tool to select each of the elements that we are going to cut and then go to step # 2 which is the optimization of the images so let’s start:

• Select the sector tool
• Select the necessary elements to export
• Go to the File / Save menu for web and devices

STEP 2 – OPTIMIZING THE IMAGES

In the optimization process we have to deliberate the format and the quality of the trimmed images, in this example we are going to leave all the images in a JPG format at a quality of 80%, with this we obtain images of very little weight but with good quality, so the steps are as follows:

• Select all the images that we select with the “sector” tool with the shift key.
• In the quality section we leave it at 80%
• We click on the save button
• We look for the destination folder where we are going to save these images
• And we click on the save button with the parameters shown so that only the images we select with the shift key are exported

Note: if we want the images to be saved with an indicated name, we do it by selecting the sector with the “select sector” tool, we select the sector with a double click and we will be given the window to assign a name, so when we export this image it will be saved with the name indicated by the sector.

STEP 3 – HTML5 STRUCTURE

We start with a basic structure of html5

• Now we are going to create the general container and inside this container we will create the “header” and inside the header will go the logo, the slogan, the information for the donation and the images of the header.
• Below the header we will create the navigation menu
• Below the navigation we will create a div where the complete content will be enclosed, this will be like the parent container