2023-01-24 22:58:16 +00:00
+++
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
2023-01-28 10:55:55 +00:00
**Creation**:
2023-01-24 22:58:16 +00:00
- Use English translation
- Empty search
- Remove history checkmarks but leave it on the page thats used for the screenshot
2023-01-28 10:55:55 +00:00
- After resize of the page into the required resolution, reload the page to have all scrollbars in default loading position
2023-01-24 22:58:16 +00:00
2023-01-28 10:55:55 +00:00
## Demo Screenshot
2023-01-24 22:58:16 +00:00
**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_
2024-02-22 19:15:34 +00:00
**Page URL**: [Screenshot Link ](shortcodes/notice )
2023-01-24 22:58:16 +00:00
2023-01-25 20:33:17 +00:00
**Creation**:
- save as `images/screenshot.png`
2023-01-24 22:58:16 +00:00
**Remarks**:
The location is mandatory due to Hugo's theme site builder.
2023-10-11 11:16:34 +00:00
**Preview** `images/screenshot.png` :
2023-01-24 22:58:16 +00:00
2023-08-25 17:24:57 +00:00
2023-01-24 22:58:16 +00:00
## Hero Image
**Content**:
2023-01-28 10:55:55 +00:00
Show the [Demo Screenshot ](#demo-screenshot ) page on different devices and different themes. Composition of the different device screenshots into a template.
2023-01-24 22:58:16 +00:00
2023-01-25 20:33:17 +00:00
The content should be:
2023-01-24 22:58:16 +00:00
2023-01-25 20:33:17 +00:00
- consistent: always use the same page for all devices
- pleasing: use a delightful background
2023-01-24 22:58:16 +00:00
**Used by**:
- Hugo Themes gallery: https://themes.gohugo.io/tags/docs/ _900 x 600_
2023-01-24 23:26:55 +00:00
- 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_
2023-01-24 22:58:16 +00:00
- GitHub social media preview: https://github.com/McShelby/hugo-theme-relearn/settings _1280 x 640_
2024-02-22 19:15:34 +00:00
**Page URL**: [Hero Image Link ](shortcodes/notice )
2023-01-24 22:58:16 +00:00
**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_
2023-01-24 23:26:55 +00:00
- 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`
2023-01-24 22:58:16 +00:00
2023-01-25 20:33:17 +00:00
**Remarks**:
The location of `images/tn.png` is mandatory due to Hugo's theme site builder.
2023-10-11 11:16:34 +00:00
**Preview** `images/hero.png` :
2023-01-24 22:58:16 +00:00
2023-08-25 17:24:57 +00:00
2023-01-25 20:33:17 +00:00
2023-10-11 11:16:34 +00:00
**Preview** `images/tn.png` :
2023-01-25 20:33:17 +00:00
2023-08-25 17:24:57 +00:00
