Prisma docs image guidelines

Screenshots

  • Use SnagIt to edit screenshots.
  • Always apply a centered minimum shadow to the image. This helps the screenshot stand out on the page.

File type and path

  • Save the screenshot as a PNG file.
  • Filename guidelines:
    • Keep the filename short, but descriptive.
    • Use only alphanumeric characters.
    • Use hyphens (-) instead of space characters.
    • Example: editor-screen.png.
  • Put the PNG in the same directory as the associated Markdown file.
  • Always save the SnagIt Project file (filename extension is .sngx).
  • Save the source file to the same directory as the PNG file. Use the same filename prefix as for the PNG file. Example: editor-screen.sngx.

Diagrams

  • Use Figma to create diagrams.
  • For consistency, when you create a new diagram, base it on an existing one.
  • Add the URL of the source image to the Markdown page. Use a comment immediately above the image tag, as follows:
<!-- https://www.figma.com/file/H7EMWAuCaRVHrdNoQpky7J/Tracing?node-id=2%3A37 -->
![image](trace-diagram.png)

Image annotations

Guidelines to be added:

  • Text
  • Arrows
  • White highlight of text and shadows
Edit this page on GitHub