mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 10:43:19 +00:00
2.4 KiB
2.4 KiB
+++ 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
- Use English translation
- Empty search
- Remove history checkmarks but leave it on the page thats used for the screenshot
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]({{% relref "/shortcodes/include" %}})
Location: images/screenshot.png
Remarks:
The location is mandatory due to Hugo's theme site builder.
Preview:
Hero Image
Content:
Show the screenshot page on different devices and different themes. Composition of different images.
What to show:
- always use the same page for all variations
- use a delightful background
Used by:
- Hugo Themes notes: https://themes.gohugo.io/themes/hugo-theme-relearn/ 1500 x 1000
- Hugo Themes gallery: https://themes.gohugo.io/tags/docs/ 900 x 600
- GitHub project site: https://github.com/McShelby/hugo-theme-relearn 1500 x 1000
- GitHub social media preview: https://github.com/McShelby/hugo-theme-relearn/settings 1280 x 640
Page URL: [Screenshot Link]({{% relref "/shortcodes/include" %}})
Location: images/hero.xcf
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
- Resize template centered to 3000 x 2000
- Scale to 1500 x 1000 and save as
images/hero.png - Scale to 900 x 600 and save as
images/tn.png - Scale to 1280 x 853, resize template 1280 x 640 offset y: -140 and save as
images/social.png
Preview:
