December 6, 2011 at 19:23Preparing .psd for layout
I do not pretend to be innovative, perhaps many are already using everything that will be described. This topic is rather a proposal for discussion about the preparation of layouts for layout. I think that the inhabitants of the Habr, especially those who visit the Web Design branch, are mostly familiar with the ilovepsd.ru resource . Therefore, I will not list wishes from this site for working with files. Who is interested, please under the habrakat.
Often, when I give the template files to the customer, I prepare two versions. One complete, the other prepared for layout. Both, of course, go to the layout designer. The first is that absolutely everything would be at hand ready for editing, if that. The second is to speed up the work.
Let's say we have a background under the menu. It consists of 4 layers, effects are applied to some of them. In most cases, the layout designer needs to cut out the central part with a width of 1 pixel, which would then be repeated horizontally. Who doesn’t understand what I’m driving to - this means that the layout designer needs to select the layers, click the right mouse button, find the “Merge layers” item, click. A minimum of 3 actions and a minimum of 3 actions for each similar case. Thus, we can save the layout designer, albeit a little, but still time.
I will not start holivar about whether a web designer should be able to typeset? I believe that he definitely must know the parameters that are set in CSS. Therefore, where the situation allows, I write in CSS what happens to the element.
It's about the photoshop's native grid. It’s not always possible to apply, but you can often adjust the grid to your chosen vertical rhythm or as close as possible to the system by which you worked placing everything on the layout.
Often indents between elements are multiples of 5 pixels. In such cases, I set the grid parameters as shown in the picture and leave a reminder for the layout designer, so that I would configure them accordingly and turn on the grid. Once again I say - this is just an example, configure it so that it fits your layout. Thus, in layout, in places, it becomes much easier to count distances and sizes.
That's all. There is not much information, I hope you will add. I hope even more that the layout designers themselves will write about the methods described above.
PS If any of the written, in your opinion, outright nonsense - please comment extensively. This will help me not to do heh *, for which people will be grateful, who cut layouts after me.
Often, when I give the template files to the customer, I prepare two versions. One complete, the other prepared for layout. Both, of course, go to the layout designer. The first is that absolutely everything would be at hand ready for editing, if that. The second is to speed up the work.
Glue layers and effects
Let's say we have a background under the menu. It consists of 4 layers, effects are applied to some of them. In most cases, the layout designer needs to cut out the central part with a width of 1 pixel, which would then be repeated horizontally. Who doesn’t understand what I’m driving to - this means that the layout designer needs to select the layers, click the right mouse button, find the “Merge layers” item, click. A minimum of 3 actions and a minimum of 3 actions for each similar case. Thus, we can save the layout designer, albeit a little, but still time.
Commenting correctly
I will not start holivar about whether a web designer should be able to typeset? I believe that he definitely must know the parameters that are set in CSS. Therefore, where the situation allows, I write in CSS what happens to the element.
Grid
It's about the photoshop's native grid. It’s not always possible to apply, but you can often adjust the grid to your chosen vertical rhythm or as close as possible to the system by which you worked placing everything on the layout.
Often indents between elements are multiples of 5 pixels. In such cases, I set the grid parameters as shown in the picture and leave a reminder for the layout designer, so that I would configure them accordingly and turn on the grid. Once again I say - this is just an example, configure it so that it fits your layout. Thus, in layout, in places, it becomes much easier to count distances and sizes.
That's all. There is not much information, I hope you will add. I hope even more that the layout designers themselves will write about the methods described above.
PS If any of the written, in your opinion, outright nonsense - please comment extensively. This will help me not to do heh *, for which people will be grateful, who cut layouts after me.