Welcome to the world of programming! If you are a web developer and the design of your project is developed in Angular or Ember JS, then most likely you encounter problems when exporting resources: colors cannot be unloaded, PSD icons and pictures are inconvenient to export.
In this article ‘How to Export PSD to Angular and Ember JS Templates’, I’ll show you how you can make your life easier and automate exporting using the Export Kit directly in Angular and Ember JS.
Let’s begin!
At the moment, there are many JavaScript libraries for manipulating the DOM. However, when it comes to the need to build a one-page application, many frameworks caved. EmberJS and Angular are exactly what we need when it comes to complex one-page applications.
With their help, you can create complex applications without complicating your life. In their basis, the developers have laid the possibility of working on the principle of MVC.
When it comes to the design and layout of web pages, many developers use PSD templates in order to save their time. The developer receives a graphic layout from the designer. It then uses HTML and CSS, a page markup language, and a stylesheet to render the layout in a way that browsers accept.
It is sent to the developers as a PSD mockup for the site. The development of a PSD template for a site should take into account the possibilities of recreating its design using the HTML and CSS languages. And so we came to exporting those PSD templates…
How to do that?
You can transform any PSD to both of frameworks templates with minimum installation using the Export Kit. This set of tools is created so that developers can adapt a layer of PSD that will accept any custom technology such as HTML5 and JavaScript.
This is due to the fact that Export Kit supports class tags. It will make ready-to-go view for your further or existing Anger JS (ANGular + embER) complex, and coordinated specifically together with your controllers.
As you already know, Angular and EmberJS are popular in both large and small scale project development. Export Kit offers two special strategies for changing over your PSD to both layouts, depending on your circumstance you will discover one or the other more suited method which is based on your necessities.
You’ve got the choice to keep it old-school with HTML formats, or go new-school with JavaScript UI.
What is a new-school UI? Export Kit makes JavaScript UI fast and easy. Using this technique you will effortlessly make a full JavaScript UI or website with pure components.
This makes it exceptionally easy to include the user interface output to your current project and call the component straightforward to your actual code – without any HTML templates! It is convenient that there are no innovations in this approach and you follow the old scheme: you add source files to the project and call elements as you always did.
Old-school templates. Another approach that Export Kit provides us is to create classical HTML templates for your platforms, in which you can customize the desired module elements such as style and values. You will be able make any HTML based format layout and connect instantly to your Angular and EmberJS framework values.
Most developers simply cut and paste the necessary elements into their project and based on this, place them correctly. There is one small ‘but’: before you can create HTML templates using Export Kit you need to know how to convert PSD to HTML. As far as I know, there are several ways:
1) It is corny to take a PSD and cut it, then in Photoshop itself there is a function to convert to HTML and voila, the site is ready. After of course, you can still play around so that everything would be fine.
2) With PSD, they pull out individual pieces (let’s say a ready-made button in png / jpeg / bmp in whatever format you like) and then again throw them on the site in pieces.
Of course, this is longer than the first method, but much more effective in terms of beauty, if they are not crooked, then everything can be adjusted normally. Another important rule: you must be aware of the class and code tags, because HTML templates actively use them to correctly display the necessary properties of the platform.
Deal with Framework Controllers
JavaScript templates are based on the concept of MVC so that’s why they always need a controller. You just need to “connect” any controller to your PSD element to take control of the template creation process. For quality work, it is necessary to try to link data of the controller externally.
Example in Angular:
//angular controller
function personController($scope){
$scope.firstName = “Alex”;
$scope.lastName = “Pennycooke”;
}
Example in EmberJS:
//ember controller
App.ApplicationController = Ember.Controller.extend({
firstName: “Alex”,
lastName: “Pennycooke”
});
Template Containers.
Most JavaScript frameworks have special template rendering settings and you should know them. You must make the specified holders for your project.
Numerous projects use custom containers, so you may got to include the desired properties to your layer tag. In Photoshop you’ll got to utilize Class Tag with Layer Groups/Folders to include the specified component containers to the project.
Angular: ${class|div:ng-app=”myApp” ng-controller=”personController”}
EmberJS: ${class|script:type=”text/x-handlebars”}
A really common strategy to represent a framework/controller property is to utilize {{ and }} together with your content. Both frameworks will reflect the data which is specified in these brackets into the values of the native platform properties.
Example: Hello, {{firstName}} {{lastName}}.
Conclusion
Thanks for reading the article ‘How to Export PSD to Angular and Ember JS Templates’, in which I have outlined the main issues in the process of developing a web site design using PSD templates.
In fact, once you understand how this system works, you will be able to actively use it. I described how the Export Kit technology works and its features, and gave some examples (which are given above). Hope it was useful and interesting for you!
