While working on web page projects converting a website PSD design to HTML page is a very common thing but sometimes there is a need to convert the page in the opposite direction – from HTML to PSD. A typical case is when the website owner comes to the marketing agency to redesign the website but the original PSD design doesn’t exist. In such case, first the graphic designer needs to recreate the design manually in Photoshop that takes some time.
Now it is time for the conversion from PSD design to HTML page . The conversion word is here not really a good one. In fact going from PSD design to a functioning website is called implementation process and the PSD design file only describes how the page should look like however not necessarily how it should work. To transfer a graphical design into a fully functioning website strong technical development skills are required.
While making HTML to PSD or PSD to HTML conversion you have two options…
Option One – Use External Service
In case you need the original PSD design of the website you can ask some agency to do so for you. They will charge you proportionally to the website complexity and accordingly to their pricing. The second option is to use our online tool that will recreate the design for you. It is not free but the cost comparing to the agency will be probably many times lower. Additionally you can download the PSD file for free for test purposes to see the quality of the exported PSD design. The free version doesn’t allow commercial usage but thanks to it you know exactly what you are paying for.
When it comes to the conversion from PSD to HTML, such automatic conversion tool actually doesn’t exist. To implement the website basing on graphical design you need to hire an agency, a freelancer or implement it by yourself. That last option is described below.
Option Two – DIY
If you want to make a conversion by yourself it will not be an easy neither quick task but for sure very satisfying.
HTML to PSD
In most cases the website design is created first and basing on it developers are implementing it in various technologies (HTML + others). Sometimes, however there is a need to make the PSD design basing on already existing website. We can call it reverse engineering process as it produces a visual design (documentation) basing on already existing product. Anyway making PSD basing on a website will not be much different actually from making just the website design basing on some ideas and general concepts. The only difference is that in our case we would not need to use our creativity (unfortunately) as the website already has a visualization and we just want to make the same in the Photoshop. So.. let’s start! You could think.. I will make a screenshot of the website, paste it the Photoshop as a layer and the job is done. Well, unfortunately you will not get any design in this way. You will get just a screenshot. BTW many online “HTML to PSD” converters do it in such way – they just make a screenshot and push it into the PSD file. You already know that the website design consists of editable layers. Thanks to that making updates on the design is simple. So while converting a website to PSD design first make a layer for background, then on the top of it a layer for layout blocks, next for the contents etc. On the top of all layers will be probably created the menu especially in case it has a fixed position. Sounds simple right? Sometimes it only sounds.. There are many cases when making a design back is not so easy. For example things get complicated in case on the page there are some font icons for example Font Awesome. In such case you will need to first generate the PNG file of the icon using some online tool and then add it to your design. Additionally for all elements you will need to apply shadows if needed, borders if exist, make for them round corners if they are on the website, apply gradients, add images and much more. Additionally you should make at least yet one another PSD design for mobile in case the website is responsive.
PSD to HTML
To do such conversion you will need to be or become a full stack web developer. Nowdays implementing the website only in HTML is not too good idea for many reasons. To make it right you will need to know at least HTML + CSS for simple websites. However, in most cases you will need to know also Java Script. If the website is complex and consists not only of the one page you will need to implement the website using also some backed MVC engine. And the most important.. always remember to apply good coding practices. If the website doesn’t have a complex custom logic and data model is typical you can also choose a simpler way – use some CMS for example WordPress – it can save you a lots of hours of work but you might not have an occasion to learn programming languages and other web technologies. Enjoy!
Comments
Post a Comment