Hi, guys. The topic of today’s article is “How to export an app PSD to Angular”. To be honest, creating a template of a website in Photoshop is a bit old-fashioned option, but such practice remains in the development world.
I am going to show you how to convert the app template that was created in Photoshop to the HTML format using such a framework as Angular.
Contents
What is PSD?
The format is intended for storing bitmap images in an Adobe Photoshop project file. Being stored uncompressed, it contains color spaces, masked layers, bi-color settings, layer structures, and other data for fine-tuning the bitmap.
What is HTML?
First of all, the abbreviation HTML stands for HyperText Markup Language. HTML is a web format file. You can edit the HTML source code in a text editor. HTML files are developed for future use in users’ web browsers and allow you to format sites with text, images and other necessary materials. Files in this format use tags to create web pages. The interpretation of the HTML code is done by the web browser, and this code is usually not shown to the user.
Why is it not good to create a template of a website in Photoshop nowadays?
Photoshop can transform a template into a gruesome fixed template that will look terrible. You do not want this because this is a nightmare. The best and the only way is to slice the layout, name the slices forensically, and then export them. Then code your html / css manually in Angular. This is what everyone is doing, so there is nothing wrong with that. Sure, your html / css has to be good to do a good job, but that’s why the developers get paid.
By the way, using a number of images in layouts and images with text is a very bad practice. There are several excuses for doing this now, with the possible exception of custom marketing materials.
How to export an app PSD to Angular?
Preparation
First, we need to create a simple folder, preferably on the desktop. Create a folder, name it whatever you like. And we create another folder, and name it images, I think that everything is clear here that all the pictures will be in this folder. After that, you need to create another ordinary text document and name it index.
We have already taken the first step. Let’s move on to adding HTML code to Angular.
Adding HTML layout
Open our index text document through Angular and paste the following code into it:
<! DOCTYPE html>
<html>
<head>
<script type = “text / javascript” src = “http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”> </script>
<meta charset = “utf-8” />
<title> Layout </title>
</head>
<body>
<! – Start Header ->
<header class = “header”>
<div id = “headerInner”>
</div>
</header> <! – End of header ->
<! – start of wrapper ->
<section id = “wrapper”>
<div id = “middle”>
<div id = “content”>
<div id = “colLeft”>
</div> <! – End of call ->
<aside id = “colRight”>
</aside> <! – End of color ->
</div> <! – End content ->
</div> <! – End middle ->
</section> <! – End of wrapper ->
<! – Start footer ->
<footer id = “footer”>
<div id = “footerInner”>
</div> <! – End of the fuuterinner ->
</footer> <! – End footer ->
</body>
</html>
Now let’s take a closer look at the code. The future template will be divided into three parts. This is the site header, middle, and bottom of the site.
Site header
This code is responsible for the top of the site:
<! – Start Header ->
<header class = “header”>
<div id = “headerInner”>
</div>
</header> <! – End of header ->
But, id = “headerInner” will include the top and main bottom menus, as well as social bookmarking buttons. Another id = “headerInner” is 1200 px wide and is placed in the middle of the browser window. Next, we will set the appropriate CSS styles for it.
Middle of the site
This code is responsible for the middle section:
<! – start of wrapper ->
<section id = “wrapper”>
<div id = “middle”>
<div id = “content”>
<div id = “colLeft”>
</div> <! – End of call ->
<aside id = “colRight”>
</aside> <! – End of color ->
</div> <! – End content ->
</div> <! – End middle ->
</section> <! – End of wrapper ->
id = “wrapper” is a large middle block that will include the left and right sides of the site. In other words, on the left side we will display the latest posts, and on the right sidebar widgets.
id = “content” – is responsible for aligning the left and right sides to the top.
id = “colLeft” – the left side of the site (Posts)
id = “colRight” – right side (sidebar)
Bottom of the site
Basically, it is almost the same as the top blue bar of the layout.
<! – Start footer ->
<footer id = “footer”>
<div id = “footerInner”>
</div> <! – End of the footerinner ->
</footer> <! – End footer ->
HTML and CSS layout
First you need to select an HTML editor.
Once you’ve pasted the code into our index text document, you need to save it. Click on “file” and “save as”, then select the encoding “UTF – 8” and save.
When the file is saved, rename its resolution from .txt to .html. Now we open our file using the browser. We will have a simple white field, right-click on it, select “Source Code” and we will be taken to the editor. To see the changes after editing the code, you need to click on “Apply changes”.
CSS
I recommend writing styles right there. Then they can simply be transferred to a separate file and attached to the html code. Before the </head> tag, put the <style> … </style> tags, and between them, accordingly, the CSS code will be located.
Add this CSS code:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
color: # 333;
background: #fff;
font-family: “Segoe UI”, “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 0.94em;
line-height: 135%;
}
aside, nav, footer, header, section {display: block; }
ul {
list-style: none;
}
a {
text-decoration: none;
}
a: hover {
text-decoration: none;
}
Here we have set some styles for the body tag. Width and height 100%. The color for the text is #333. Also we have set some fonts, and its size, as well as the distance between lines.
Main blocks (top, middle and bottom)
Now we insert this code of CSS styles that are responsible for the positioning of the main three blocks on the browser page.
#wrapper {
margin-top: 40px;
width: 1200px;
margin: 0 auto;
height: auto! important;
}
.header {
width: 100%;
background: # 0dbfe5;
height: 57px;
z-index: 4;
}
#headerInner {
position: relative;
border: 0px solid # 333;
width: 1200px;
height: 250px;
margin: 0 auto;
margin-top: 0px;
}
#content {
margin-top: 40px;
}
#content #colLeft {
background: #fff;
float: left;
width: 800px;
margin-right: 0px;
}
#content #colRight {
margin-left: 45px;
float: left;
width: 350px;
position: relative;
}
#middle: after {
content: ‘.’;
display: block;
clear: both;
visibility: hidden;
height: 0;
}
As you can see, the id #wrapper (large middle block) is 1200px wide and is also aligned to the middle of the browser window.
The .header class stretches to 100%.
#colLeft is for the post block (left side) and #colRight is for the right side. Both are left-aligned, so the sidebar is positioned after the left side of the site.
Top Menu
In the HTML code, between the <div id = “headerInner”> </div> tags, add the following code that is responsible for the menu:
<nav class = “topMenuRight”>
<ul>
<li> <a href=”#”> Page 1 </a> </li>
<li> <a href=”#”> Page 2 </a> </li>
<li> <a href=”#”> Page 3 </a> </li>
<li> <a href=”#”> Page 4 </a> </li>
</ul>
</nav>
Before adding styles to the menu, you need to cut the strip that separates the list from the PSD layout.
Open up our PSD layout. In the layers, look for the “Header” group, then the “Top Menu” group, then “Lines”. And select any layer with a line, click on it with the right mouse button, and select “Convert to Smart Object”. Then the layer will change the icon, you need to double-click the left button on the style icon, not on the name, just on the icon. Then you will be transferred to a new layer with the cut out line.
Go to the “File” and “Save for web” tab. It is desirable to select the PNG-24 format, click “save”, and save our line under the name line in the images folder.
And now we can safely add styles for our menu, here they are:
.topMenuRight {
height: 57px;
position: absolute;
left: 0px;
top: 0px;
border: 0px solid # 1FA2E1;
}
.topMenuRight ul li {
background: url (images / line.png) 0px 0px no-repeat;
float: left;
height: 57px;
}
.topMenuRight ul {
padding-left: 0px;
}
.topMenuRight ul li a {
margin-top: 0px;
font-weight: 100;
border-right: 0px solid #adadad;
display: block;
color: #fff;
text-decoration: none;
line-height: 20px;
font-size: 18px;
padding: 16px 20px 21px 20px;
}
.topMenuRight ul li a: hover {
background: #fff;
color: # 555;
}
What are other ways to export an app PSD, except using Angular?
There are several automated services that can convert PSDs for you:
http://converxy.com
http://psd2htmlconverter.com/en/
http://www.psdtoweb.de/
However, you can also consider a service-based approach. There’s a thriving community of professional slicers out there (just google “psd to html” and you will see what I mean).
You can also try redesigning from a program or framework, for example:
http://html.adobe.com/edge/reflow/
https://webflow.com/
http://www.ekomobi.com/en/home.html
http://macaw.co/
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
It really depends on your budget, your timeline, and your skill set.
Conclusion:
Friends, I hope you enjoyed this tutorial, I tried to explain it as clearly as possible. Most importantly, you need to do it yourself, try, change. It didn’t work out, to redo it.
Do not like it, redo it again. In the end, everything will work out. Besides, you can use not only Angular, but also some online automatic services. I think there is no “right” solution. Different people have different requirements that will change the choice.
Thank you for being interested and good luck in converting PSD to Angular!
The Daily Buzz combines the pursuit of interesting and intriguing facts with the innate human desire to rank and list things. From stereotypical cat pictures to crazy facts about the universe, every thing is designed to help you kill time in the most efficient manner, all while giving you something to either laugh at or think about!