Above The Fold Overlay Done Right

I sat through many presentations were an agency or a designer was showcasing a creative to a client and was always disappointed with how they displayed the fold of the design. Usually they would signify it with a couple of lines and arrows going across the design, marking 1024 px. (width) and 768 px. (height) marks.

Finally, I got fed up with the poor execution of the fold presentation and decided to develop a data driven, visually sound and easy to understand (better) way to do this.  I did this because I was taught that if you do something, you should do it well. So here we go:

Ingredients:

  1. Data of your visitors browser height (not screen resolution height, browser height.)
  2. A screen-shot of an example page.

Calculating the data

We need to figure exactly what percentage of visitors will see each height segment. The more height segments you have the more specific your end-result will be, but it will also require more work. For the purpose of keeping this tutorial brief we will go with 100px segments, even though Site Catalyst gives us the segments in 50 px increments:

we need to put all the percentages together and calculate how much percent (out of 100) does each segment take up. So you can end up with something along the lines of:

  • 0 to 100 px – 99%
  • 100 – 200 px – 97%  ( . . . )

Setting up the layers

Let’s put the screen shot of our page at the bottom. Create a few groups above it and name them something sensible like:

after doing that we will create a first segment group and in it we will have three layers. The area which will be the shape that covers the full width and exact height (in our case 100px.) in #000000. The opacity of that layer will match the percentage of visitors that our users see when subtracted from 100. We will of course have the percentage indicator as well as the height marker:

after some copy pasting we should end up with all the segment groups, changing the percentage, height and opacity values accordingly:

Exporting and reusing the fold

Right click the layer group that contains all the Fold Overlay layers and select “Convert To A Smart Object.” This will collapse the layers and give us an exportable (reusable) file. We export it by right clicking on it and selecting “Export Contents.”

 

Now we can use the freshly created .psb over and over again in all our source files for different concepts or pages without having a need for all those extra layers.