Designers usually hand over PSD files with the guidelines in place If CSS is applied based on that guideline, it seems to come out a little different in the actual browser.
Is there any know-how to make it the same as the actual design, such as the size of the letter, the gap between the top and bottom margins, and the space between the two?
fast-frontend css photoshop psd guideline
Hello, Mincheol. I'm Yamoo.
You must have been disappointed that the same result did not come out when you wrote the CSS based on the designer's draft file. Unfortunately, the environment in which designers produce designs (e.g., Photoshop, Sketch) and the environment in which they draw through CSS (e.g., web browsers) are different, so they have not been accurately matched. :-(
These problems are not only in the web environment, but also in the app environment.
But we can't just blame the production environment, can we? Let's look at some solutions.
How to create a guide to visually check spacing and typography information in a design (design) file. You can also use plug-ins such as Specifying to make design guides easier.
It is easy for the CSS manufacturer to check the figures at a glance.
Efforts to produce design guides are required separately. In addition, you can't expect perfect results even with the guide numbers.
The Zeplin tool opens the designer's cyan file (PSD, Sketch) to obtain basic layout, spacing, color, and typography information in code. For more information on how to use it, read You can take over the design file, check it with your eyes, and get numerical information. In addition, image slicing can be handled smoothly. You need one or more projects, or you need to pay a certain amount of money for to be used on a team basis. In other words, it's not free. In addition, you can't expect perfect results even with the guide numbers. It's the way I use and teach. Based on the grid system guidelines, you can display the web browser guidelines on the screen (using JavaScript), and then use the workspace in the Chrome development tool to visually check them to produce 99.9% of the same results as the design proposal. (Compare the browser in the image below with the screen in Photoshop) For more information, see Set persistence using the DevTools workspace. Create near-perfection results (99.9%) such as Design File View. If the designer does not know how to create a draft using the grid system, this method is not available. Designers need time and effort to learn.
In order for typography to appear the same as the view shown on the actual monitor, the options in Photoshop and css must be exactly the same.
various spacing, area of element, font-family, font-weight, font-size, line-height, angle...
And when designing, you have to work according to the area that each element has, not the visible color boundary. But not many designers will. Especially in the case of designing in informal typeface, the spacing is likely to be different from the actual font, so we matched it, but in reality, it's often different. Sometimes you know this, sometimes you don't, but anyway, many designers often set up a high-quality layout in the eyes of and record only large numbers in the guide document rather than completely detailed options. So there's a difference between the design file and the actual development.
The perfect alternative may not be easy, but the most efficient alternatives are as follows.
First of all, it is important to make designers aware that the actual figures are different from those of Photoshop. Show the difference between the design guideline document and its figures, and share the fact that the standard of design lies in the display, not the design file.
As I said above, it's good to give a technical perfect and detailed figure, but if it's not, there's bound to be a difference between the design image and the actual product. If it is difficult to solve documentally, we need time to coordinate with the designer. When scheduling, we usually include design QA, coordinate it with the designer's eyes around the results shown on the monitor, and the developer executes them. It may feel a little boring and annoying, but it's a very important time.
It is a way to set up a development environment including a collar, set up the local environment so that the results can be seen by themselves, then provide a minimum guide to find the parts that need to be modified in code, and then modify the CSS to the designer's satisfaction. It may be hard for designers to ask busy developers to do this or move it, so it may be the best way to do it yourself. Since you said CSS above, it is highly likely to be web development, so I am talking about it.
© 2024 OneMinuteCode. All rights reserved.