Image overlay display helper for creating pixel perfect designs



hi Matias here from pinegrow pinegrow has a new display Helper image overlays let me show you how I use the image overlay to build the new website for pinegrow this is the image of the new buy section that I got from our designer and let's open the page and image overlay lets us load this image and use it as a visual guide for creating a pixel perfect design so in pango we click on display helper icon and then click on settings' next to image overlay then we select the image and we enable it and here it is next we use the controls to position the image over the part of the website that we want to add it so in this case let's do this choose the payment model button and we can set the opacity level of the guide as well as the grayscale level which makes it easier to distinguish the image from the actual page and with that in place we can start editing our CSS and HTML to make it match the design we can increase the zoom level to make it easier to be more precise with the design we can go back to image overlay settings and play with the opacity level to see how well we are doing and in the past before the responsive web we would probably get one big image from our designer and then we would implement the page like one-on-one exactly according to the design but nowadays we are dealing with different divide sizes and even websites with dynamic content so the image we get from the designer is more of a guideline or a plan for how to implement different sections of our website and now that we finished with with these blue buttons we can move the overlay down or up to a different section of our website and continue our work there and when we don't need the overlay we can toggle it from the display helper menu switch it off or on the information about the position and settings of the image overlay is encoded in the body element as in Delta PG overlay attributes these attributes have no effect on our page outside of pinegrow and they are removed when we remove the overlay from the page for me image overlays are one of the most helpful features of pinegrow and I hope you'll find them useful as well

3 thoughts on “Image overlay display helper for creating pixel perfect designs

Leave a Reply

Your email address will not be published. Required fields are marked *