Convert a PSD to HTML/CSS in 4 easy steps

Spoiler Alert — This is not another tutorial on how to code from a PSD (you can easily find such articles elsewhere in the web). Nor is it about a freelance service company offering you to convert your PSD to a basic HTML in exchange for some $, € or £. In this blog post we will focus on using an online tool in order to bring some innovation in your front-end development workflow.

As a developer, you may feel a bit abandoned when a designer hands off a Photoshop file to you. Indeed, you don’t always receive a detailed style guide from your designer colleague. Missing information about specs, fonts and colors is a common complain of front-end developers. If it already happened to you, you know what a brutal transition from design to code looks like and how much time you can waste on that. Let’s face it, when it comes to turning a design file into code very few solutions exist to make this transition seamless and help you boost your coding.

Imagine a tool you can use with your own custom design and a source code tailor-made with the stack of your choice and based on this design. Let’s dig into a 4 steps solution to considerably improve your PSD to HTML/CSS workflow using such tool. So you can develop web app or mobile app in a faster and easier way without programming manually from scratch looking at your PSD. Let’s have a look at this solution we named Yotako.

1. Fine-tune your PSD

Your PSD probably already respects Yotako guidelines.

If it’s not the case you will need to slightly adjust some aspects of your PSD in order to get the most out of Yotako.

Have a look at Yotako guidelines for Photoshop files

In order to respect Yotako guidelines, you may need to make some adjustments like for example adapt the name of your widgets so their different states are well addressed (e.g. checkbox checked by default).

2. Connect to Yotako and import your PSD

As described above, Yotako is an online tool you can use to translate your PSD into code. Go to Yotako.io, sign up (it’s all free) and start your very first development project by importing your PSD file into Yotako. In a couple of seconds your design file is imported and ready to be translated into the source code you need.

Import your design file

3. Select the stack of your choice

When your design is imported and ready to use, you now need to choose the code you want for your application. First tell the tool if you work on a web or a mobile application, then select the stack containing the libraries and frameworks of your choice. In this case we selected a web app with HTML/CSS.

Select your stack

Good to know: we are working to open source Yotako, so whatever the need you have for your code (due to dependencies or home-made code), you will be able to tell Yotako the code you want and customize it directly within Yotako.

4. Choose a repository and get your code

By default your code will be available on Yotako public repository on Github. If you have your own Github or Bitbucket account and want to access the code from there, just select “Connect to your repositories” and log into your personal account.

Choose a repository

Congrats, you have now created your first application using Yotako. Just click on “Create”, wait a few minutes and you will receive your code in the repository you selected. Just git clone the code Yotako provided and you can keep on working on your application.

Name your project and get your custom code

What to expect from the code?

You can expect your code to be:

• Ready to use with test and build systems already set up.
• A faithful translation of the interfaces designed with your PSD.

You can see a preview of your application, directly deployed by Yotako

Conclusion

Hope you found this blog post helpful. If you have any question or remark feel free to reach us or just comment below.

Stay tuned! In further posts we will discuss how you can convert PSD to JavaScript. We will also try to dig into how to go from wireframes to code as Yotako currently supports wireframing tool Balsamiq Mockups.

If you are interested in what we do at Yotako, don’t hesitate to join the community on Twitter and Facebook!

Happy coding!

The team at Yotako