Index.En

+++ description = "Recipe to create various documentation screenshots" title = "Screenshots" +++

Sometimes screenshots need to be redone. This page explains how to create the different screenshots, tools and settings

Common

Creation:

• Use English translation
• Empty search
• Remove history checkmarks but leave it on the page thats used for the screenshot
• After resize of the page into the required resolution, reload the page to have all scrollbars in default loading position

Demo Screenshot

Content:

A meaningful full-screen screenshot of an interesting page.

The content should be:

• timeless: not showing any dates or often edited content
• interesting: show a bunch of interesting elements like headings, code, etc
• balanced: no cluttering with overpresent elements or coloring
• aligned: aligned outlines

Used by:

• Hugo Themes info: https://themes.gohugo.io/themes/hugo-theme-relearn/ 1000 x 1500 @ 1

Page URL: Screenshot Link

Creation:

• save as images/screenshot.png

Remarks:

The location is mandatory due to Hugo's theme site builder.

Preview images/screenshot.png:

Hero Image

Content:

Show the Demo Screenshot page on different devices and different themes. Composition of the different device screenshots into a template.

The content should be:

• consistent: always use the same page for all devices
• pleasing: use a delightful background

Used by:

• Hugo Themes gallery: https://themes.gohugo.io/tags/docs/ 900 x 600
• Hugo Themes notes: https://themes.gohugo.io/themes/hugo-theme-relearn/ 1280 x 640
• GitHub project site: https://github.com/McShelby/hugo-theme-relearn 1280 x 640
• GitHub social media preview: https://github.com/McShelby/hugo-theme-relearn/settings 1280 x 640

Page URL: Hero Image Link

Creation:

• Template: http://www.pixeden.com/psd-web-elements/psd-screen-web-showcase
• Desktop: light theme 1440 x 900 @ 1
• Tablet: light theme 778 x 1038 @ 1
• Phone: dark theme 450 x 801 @ .666
• From original template size resize to 2700 x 1800 centered, scale to 900 x 600 and save as images/tn.png
• From original template size resize to 3000 x 1500 offset y: -330, scale to 1280 x 640 and save as images/hero.png

Remarks:

The location of images/tn.png is mandatory due to Hugo's theme site builder.

Preview images/hero.png:

Preview images/tn.png: