The process to convert PSD image file to HTML code (Part 1)
What should you know before converting a PSD to HTML?
In any web development project, it is necessary to carry out a previous design of the desired digital site. It is important not to forget that the design that is made must comply with specific characteristics of a good UI / UX and at the same time be pleasant to the view of the users with the aim of, among other aspects, facilitate the marketing of the platform.
Once the design line is defined next to the components that make up a web page, these elements are converted to the HTML language with Bootstrap. However, it is necessary that those who master the design tools and are starting in the world of programming first know a theoretical section that will facilitate the process of conversion from PSD to HTML. The first question that arises is about which programs should be installed and how they are configured to work more efficiently. Then, the question arises about what should be considered to develop responsive web pages such that the components are well distributed in the structure. The latter would also be a good question because it will allow you to divide the code into sections. Finally, defining typography, images, buttons, shapes, tables, and components will be another big question.
- Installation and configuration of programs
To start programming is necessary to have a text editor that can be something as simple as a notebook or as robust as Sublime text, Visual studio code, Atom, brackets, and others. This will vary according to the needs and objectives that the developer has since some text editors are made to work efficiently in a specific language. Among the editors most used by developers are Sublime Text, Visual Studio Code and Atom considering that the first of these has several plugins pre-installed being this an advantage about other editors, but it is not open source and has the power of working in a trial version. The other two editors are open sources and able to customize according to the needs of each person. Between Atom and Visual Studio Code varies the interface being the Atom more pleasing to the eye but Visual Studio Code can support many more languages.
It is the task of each developer to decide which editor to use. Here are some of the essential plugins that should be used to speed up the development stage, it is important to mention that these vary the name and availability according to the editor in which you work.
- Emmet: allows to speed up the editing of HTML tags
- Autosave files: it automatically saves every change we make in our files.
- Autoprefixier: It is a plugin for Brackets and automatically and intelligently adds prefixes to CSS properties with the Autoprefixer extension.
- Lorem Ipsum: available for several for many of the editors and used to write text
- Minimap: just like lorem ipsum, the minimap is available for several editors, and with it, you can see a representation of the contents of the file on the right side of the code.
- Live server: It is a plugin for Visual Studio code, and its function is to have a local development server with a live recharge function for static and dynamic pages.
- Intellisense class name in HTML: It is a plugin for Visual studio code provides the CSS class name for the HTML class attribute.
2. Why design web pages with responsive design?
Previously, for the creation of web pages, the developers created different folders, where each one contained a specific code for the desktop, laptop, tablet and mobile view making the work long and tedious. Today there is a responsive design that allows you to create web pages that can be adapted to all resolutions and devices by reorganizing the distribution of all its elements.
There are two ways to make responsive a web page:
- Responsive web design
- Mobile first web design
The latter is being used more at the time of development since users are tending to access first through mobile devices and then through any other device. Designing with mobile first web design helps to focus on the necessary elements of the website. For these cases, it will always be better to add than to eliminate elements if necessary.
3. Why use grid systems and pre-established structures?
This article explains the grid system that Bootstrap 4 provides. This system had twelve columns and was designed to work first on small screens of mobile devices and secondly on larger screens. Each column has five types of sizes:
- Extra small: works for resolutions less than 576 pixels. In code, it is written with the prefix: .col-
- Small: works for resolutions greater than or equal to 576 pixels. In code, it is written with the prefix: .col-sm-
- Medium: works for resolutions greater than or equal to 768 pixels. In code, it is written with the prefix: .col-md-
- Large: works for resolutions greater than or equal to 992 pixels. In code, it is written with the prefix: .col-lg-
- Extra large: works for resolutions greater than or equal to 1200 pixels. In code, it is written with the prefix: .col-xl-
Now, the conditions that must be met to structure my web page, with this system of grids, in the code are that the rows must be inside a label called container and the columns inside the rows being twelve the number maximum of divisions in a row. The size of the columns will be defined with the prefixes that were previously specified. An example of how this structure would look like in code is seen in image 1.
In the image one it is observed that the class of each column is written col-md-4 where the “md” refers to the width of the column for screen resolutions greater than or equal to 768 pixels, so for narrower screens, the columns are redistributed one below the other (vertically). The “4” is the number of columns or spaces taken to create a column. The result of that code would be a structure as shown in image 2.
So, why should these grid systems be used? Because they allow to build the layout or layout of the elements of our page and ensure that the web that is developed fits the different screens and resolutions.
4. About the typographies of a web page.
Another point that can not be left aside is how to write in code the size of the highlighted letter, bold, etc. Below is a summary of the most used typographic features:
For headers we use
<h1> text <h1>, <h2> text <h2>, … <h6> <h6>If you want to highlight a paragraph, type <p class = “lead”> Text </ p>
The highlighting of a text is done with <mark> Text </ mark>.
And <strong> text </ strong> is used to write in bold.
You can go deeper into this topic in the content section of the Bootstrap 4 page.
5. About the images of a web page.
Some of the doubts that arise during the development are how to make my image responsive, how to align the image or soften the edges. In picture three you will appreciate how to do it.
Up to here, we describe this article arrives. To learn more about the buttons, forms, tables, components and the step by step code of the process of converting a PSD file to HTML, I invite you to read the second part of this article.
