PSD to WordPress Conversion – Creating HTML and CSS

In the previous part of this series on PSD to WordPress Conversion, we learned how every distinctive and beautiful web design begins its life as a PSD file, and how implementing that design into WordPress involves the creation of a WordPress theme.

We also arrived at a basic understanding of the process that we need to follow while designing and implementing a PSD design into WordPress – which is great, but now we’re going to wade in deeper and really get our feet wet. So let’s suit up and dive right in!

Splicing the PSD

As you might remember, we learned that we need to ‘splice’ or ‘slice’ the PSD image into multiple image files based on the parts of the webpage – such as background, header or footer. However, we need to keep a few things in mind when doing this:

• Try to not use too many images on your webpage – you don’t want the images to add to the page loading time.
• Optimize your images for file size with any kind of online or offline image optimizing tool – such as Free Image Optimizer.
• Arrange the images by where you intend to use them, such as the background, header, navigation menu or footer.

Regardless of the slicing and the optimization, remember to maintain as much of the image quality and resolution as you might need because your website needs to look great on many different screen sizes and work well with responsive design.

Coding HTML and CSS for the Design

It goes without saying that a fair amount of HTML and CSS knowledge is a prerequisite for this part of the process. With that established, let’s begin by creating an HTML file (for the content) called mainpage.html and a CSS file (for the design and formatting) called mainstyle.css.

To write the code, you can use something basic like Notepad, more convenient but still basic editors like Notepad++, or the full-featured code editor or IDE of your choices, such as Dreamweaver or Visual Studio Code.

• In the editor, create the HTML and CSS files we mentioned, and save them.
• Next, open mainpage.html and type in the code for the header, footer and body tags. Don’t forget to use the right ‘id’ and ‘class’ attributes for each section for the CSS file to later style appropriately.
• After the HTML code has been finalized, open up the mainstyle.css file and type in the styling code required to set the formatting you want for all the different HTML tags in mainpage.html.
• Be sure to reference the correct ‘id’ and ‘class’ attributes that you had used in the HTML, in order to style the tags such as header, div, body, or footer.
• Ensure that the images that we had sliced earlier are now included in the right positions in the CSS file (and the HTML file, if needed).

Check that the web design works in the browser, and verify that the responsive design adapts for different devices or screen sizes. Then save both files to conclude the coding.

In the next part of this series, we will learn how to convert these two files into the PHP and CSS files that constitute a WordPress theme.

However, since the DIY route can reasonably get a little too technical for the everyday website owner, there also exists the option of handing over the job to professional designers and developers – such as our team at Vipe Studio – who can take your concept and come up with top-quality web design for WordPress, including animated jQuery effects and Bootstrap compatible design.

So we’ll see you next time, with the concluding part of this series, where we’ll explain the WordPress part of the design in more detail. Till then, Happy WordPress-ing!

Image by Pexels

More on The Topic

• Enhancing User Interaction on WordPress Sites with Innovative Design
• Custom WordPress Themes: Crafting Unique Digital Identities for Businesses
• Navigating the Future of Web Design with WordPress at the Helm
• The Advantages of Custom WordPress Themes for High-Performance Websites
• Unlocking the Full Potential of Gutenberg for Corporate Website Design