In the Page Tab of the ribbon, when you click on the Page Layout button (after clicking ‘Edit’), you’ll notice that there are images associated with each Page Layout in the list. Whenever you create a new page layout, it automatically assigns a generic image. So, if you want to have a specific image that (more or less) looks like the layout you have created, you must create a new image and associate it with the page layout.

First, to create the new image, I recommend (like many other things in SharePoint) to go to an existing image, and change it however you need it to look. This way, you are assured of at least getting the same size as the other images. For me, I usually go to the SharePoint root (14) and then:

\TEMPLATE\FEATURES\PublishingLayouts\en-us

I start with the ‘ArticleBodyOnly.png’ image in that folder. Of course, you can use any other associated image you would like. I rename and edit it the way I need and create a folder to house the custom image.

Next, open up SharePoint Designer 2010 and click on your custom page layout in the Page Layouts folder. Under ‘Customization’, you will see a link called ‘Manage all file properties in the browser’. Click that link. A web page will open, showing you all the properties associated with this page layout. Click the ‘Edit Item’ button in the ‘View’ tab. The next thing is to enter the web address to your new image, in the ‘Preview Image’ text box. (you can also test the path, to make sure it is the correct url). Once you click ‘Save’, Check in and Publish your layout, this new image will be associated with your Page Layout and you’re done.