Hello, community! Nowadays, you can create a layout of your website yourself, even without knowledge of coding. Sounds impossible? Well, but that’s true. With some basic skills of working in Photoshop you can make the design of the site that you want, use any fonts or colors, etc. And then, you can just hire an Angular developer or the whole team that can turn your PSD layout into a real fabulous ebpage. So, if you are here, it means that you are interested in PSD to Angular migration. Let’s find out about it in detail.
What is PSD to Angular migration?
PSD to Angular Development refers to the process of transforming a Photoshop design file to a fully-functional, dynamic website or application using the Angular framework.
What file formats do Angular accept?
Actually, Angular framework can accept almost all file formats, including SKETCH, PSD, AI, PDF, INDD, JPEG, PNG, GIF, etc.
How to create a model of the future site in Angular yourself?
To become an experienced designer, you need to do some big projects and understand how everything works from the inside. If there is no time for projects, then you can just try and learn all the nuances during the process of creating.
Before creating a PSD model of the site, you have to put all the things in order. Website creation is a time-consuming process, because it is necessary not only to think over its logic and develop a style, but also to layout and program the page.
Sometimes a designer draws a good layout, but after the layout the quality drops noticeably. It can happen something like that:
- extra padding appeared;
- missing items;
- the text is outside the content area.
Most likely, this happens because the designer has poorly prepared the layout for a future webpage.
What is the layout for?
Usually a website is developed not immediately, but in several stages. These stages consist of collecting information, drawing designs and writing text, and then typesetting and programming. First, the designer works with the appearance, creates a site layout, then transfers the source code to the developer.
A website layout is a sketch that shows a future page. The general perception of information on the site depends on how well the layout is worked out.
When working on a layout in a graphic editor, the designer has no restrictions. If the selected font does not fit, you can change it in one click. If the button looks bad, you can easily change its color and size.
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 understand.
PSD layout rules
The developer constantly checks the source files he received from the designer. He also looks at indents and distances, copies the text, sets the necessary styles.
Important! Often a designer in a hurry sends a layout to the developer and at the same time forgets to check the work for errors. And the Angular developer may also not notice the problems and publish it all on the site.
Common mistakes of designers that I don’t recommend you to do:
- First common mistake is that you haven’t removed the hidden layer that had the old version, but the developer added this element to the site.
- Then, for example, you haven’t grouped the elements, and the developer spends several hours trying to figure out the layout.
- Sometimes it may happen that you have made a mistake and set too much indent for the element, and the developer laid out the layout in this form. To make this happen less often, you must follow the basic rules for creating a layout and interacting with a layout designer. These rules I have lighted up below.
- Agree on the file format
Designers who are only beginners often do not know which program can be used to make a layout. They study different graphic editors, choose a convenient one for themselves.
The popular editor is Adobe Photoshop. It is a universal tool for working with any kind of graphics: photographers edit images there, illustrators do drawings, and web designers do layouts. The file to which the layout is saved in Photoshop has the .psd format. It is sent to the developers as a PSD mockup for the site.
Photoshop is a versatile editor and therefore not easy to master. In order not to spend a lot of time learning the functions, you can use a new generation of programs designed specifically for web design: Adobe XD, Figma, Sketch.
Some designers draw layouts in other editors. Someone uses Adobe Illustrator or Adobe InDesign.
Before choosing a program for creating layouts, talk to the developer who will turn your PSD to Angular. Will it be comfortable for him to use Photoshop or is it better to draw everything in Sketch? Or is he using Zeplin, so it doesn’t matter which program you draw in?
- Follow the requirements of interactive design
Create a layout according to the rules. This will simplify the work on the appearance and facilitate the layout process.
- Select the RGB color model before creating the layout. This is the standard for monitors and screens.
- Use a grid to align content within your layout.
- Don’t enlarge small pictures.
- Resize images while holding down the Shift key to maintain proportions.
- If you need italic or bold text, choose one of the font styles. Don’t use fake styles to change the look of letters in Photoshop and other editors.
- Get rid of fractional distances
Check all elements of the layout and look at spacing and padding. All dimensions must be expressed in even whole numbers. Don’t use odd numbers and fractions.
- Organize your layers and artboards
While working on the layout, the designer arranges the layers in a chaotic order, does not rename them, hides inappropriate options. It is difficult for developers and other specialists to work with such a layout, because there is no structure in it.
To create order in the layers you should do the following:
- remove hidden and empty ones,
- group by meaning,
- write a name for each.
Name all artboards meaningfully. This will help the developer understand the logic of the layout and make it easier for him to navigate the structure.
- All elements on a separate artboard
All elements that cannot be rendered using HTML and CSS, so they must be placed on a separate layout page. This is usually done with icons, cards and some buttons. To save time for the developer, elements can be directly exported to PNG or SVG format.
On this artboard are shown also all the positions of the elements. Copy the button from the layout and draw all its states: normal, mouseover, click. Indicate all colors and fonts that are present in the layout. Give examples with parameters and sizes of headings, subheadings and the main text.
- Attach fonts and icons to the layout
If the layout uses non-standard fonts, then send the file with them along with the layout.
If the font is on Google Fonts, then give the developer a link to it. In this case, the file will not be needed, because it is connected to the site through this service.
Attach all the elements that you exported from the artboard to the archive. If these files are in PNG format, then you need to make versions in several resolutions.
- Create animations to show the movement of elements
Animated layouts are used not only for demonstrating a site in a portfolio or presentation to a customer.
If you need elements to move and interact with each other, draw an interactive prototype and show it to the layout designer.
You can also create an animated layout using Photoshop or other special programs: Adobe Animate, Adobe Edge or Principle. It is easy to transfer a layout drawn in any graphic editor to these programs.
An experienced designer always checks all the possible mistakes on the layout before sending to the developer. He understands that this saves time for himself and the team. He knows that a clear layout with a good structure will help to avoid mistakes in future work.
Little tip from me. These are some of the Photoshop keyboard shortcuts that I use in my work and want to share with you.
In the process of creating the layout, I use these so-called “hot keys”, which greatly speed up my work in Photoshop. The list is relevant for all versions:
Ctrl + “-” – zoom out
Ctrl + “+” – zoom in
Ctrl + “1” – scale 100%
Ctrl + J – Duplicate Layer
Ctrl + [- decrease brush size
Ctrl +] – increase brush size
Ctrl + Alt + Z – step back (cancel action)
Ctrl + Shift + Z – step forward (reverse the canceled action)
Ctrl + Alt + I – Image Size Dialog Box
How can you turn the PSD template into the site?
Follow these steps to make a successful and fully working website.
- Evaluate the layout, make up the basic markup for yourself, determine which main blocks are present, and what should happen if they are not there.
- Having estimated which blocks are needed, and having estimated the structure of the site, go to csstemplater.com/ generate an HTML / CSS template according to your structure.
- Create a directory with the name of the site in openserver, create an HTML directory in and inside the template.
- Drop the downloaded template into folders, cut out the reset from there.
- Create main_site.less – and then connect all the files that you need less here, template.less. The next step is to write all the structural elements (header, footer, etc.) here, ui.less – usually if the project is not complicated, just put all the design here, sometimes I divide everything into separate blocks, menu / portfolio / modal / btn / etc.
- Then you have to configure the Less compiler in PHP storm for the current project so that only the main_site.less file is compiled into the css folder.
- Mostly I use getuikit.com, well, I like it more than bootstrap, I download and drop files into folders, edit the paths in index.html, add comments along the way.
- Then, open and look at the PSD site template for the presence of non-standard fonts, if the fonts are in www.google.com/fonts, then connect them, otherwise www.fontsquirrel.com, and scatter the files into folders.
- Almost the final step, using Emmet, you have to create the basic markup if it is LP (header / footer / slider, etc.). If not, then start from the very top to mark up the elements (logo / slogan / phone / login-widjets, etc.) and along the way add less code to the files that you need.
- Finally, you have to make up to the end everything that is in the layouts. Then, if necessary, create a template for the CMS.
How much does PSD to Angular migration cost?
Many Angular development companies have basically almost the same price. What is included in this price?
- Cross Browser site layout
- An admin control panel
- Full further project support
- Professional site layout
And the price starts from 60$. But don’t think that this is the final price. You can pay even up to several tens of thousands of dollars for creating a website according to your PSD layout.