After talking with Add1sun today I was prompted to write screen shot standards for a yet to be created documentation module. This module will use the future D7 help system and possibly the Advanced Help module for D6. These are fluid at the moment and definitely up for discussion.

  • PNG format compressed. (need to add examples of png compressing tools)
  • Screen shots are in the default drupal theme. In D6 this would be Garland. In D7 hopefully not.
  • No wider than 550 pixels. And images are not to be resized. We need to keep it small enough so that popups will fit the screen shot without a horizontal scroll bar. Your best bet is to resize your window to 550px to know how wide you can make it. This will also wrap the help text to fit inside the screen shot.
  • Screen shots should be take of the element and the help text only. If a fieldset is clickable we need a screenshot of the fieldset title. Groups of Checkboxes or radioboxes should be one screenshot. (We'll need a decision on permissions page. Yikes!)
  • Screen shot should be no wider than 10px on any side of the element.
  • Checkboxes should not be checked.
  • Radioboxes being selected is ok
  • Input boxes should not be filled in unless it is an edit screen.
  • Naming convention: If it is a field then use the id of the element. example: edit-name.png If it is not a field then it is the title of the field lower cased and spaces are hyphenated. (This needs to be discussed as this was the hardest to come up with.)
  • They will be added to folders that represent the path of the screenshot. example a screenshot of adding a page would be at node/add/page. If it's on an edit screen that has an id then use 0 for the id. So if we were editing node/1 then it would be at node/0/edit

That's what I have for now. Any more? changes?

Comments

redndahead’s picture

StatusFileSize
new300 KB

Attached is a large example of screen shots.

redndahead’s picture

To add another one.

All screen shots of bottom op buttons will go in a button folder. The reason for this is that there are quite a few duplicate screen shots you can get from these. For example Save Configuration and Reset to defaults occur in multiple places.

domesticat’s picture

StatusFileSize
new21.78 KB
new29.65 KB
new46.37 KB
new99.79 KB
new33.72 KB

Screenshots for the following are attached:

  • RSS Publishing
  • Post Settings
  • Permissions
  • Recent Log Entries
  • admin/reports/event/0
domesticat’s picture

StatusFileSize
new209.11 KB
new19.72 KB
new91.01 KB
new146.93 KB
new113.01 KB
new34.24 KB

Shots for the following sections are attached:

  • Available Updates
  • Access Log
  • Block
  • Contact Form
  • Modules
  • Themes
jumpfightgo@groups.drupal.org’s picture

StatusFileSize
new653.13 KB

Shots for the following sections are attached:

  • URL aliases
  • Error reporting
  • File system
  • Language
  • Uploads
leehunter’s picture

For reference, existing screen shot standards are here: http://drupal.org/node/762

minoroffense’s picture

StatusFileSize
new282.41 KB
redndahead’s picture

@LeeHunter - Those screen shot standards are really made for documentation on the website. And I don't think they will apply to the new help system. These screen shots apply to the new help system and a future documentation module where popups will apply.

crookednumber’s picture

StatusFileSize
new692.24 KB

Attached are shots for:

/admin/build/menu
/admin/build/path
/admin/build/translate
/admin/settings/admin
/admin/blogapi/settings
/admin/settings/clean-urls
/admin/settings/date-time
/admin/user/rols
/admin/user/settings

Adam, let me know if you need more help -- or there are any issues. Happy to help.

alexanderpas’s picture

might be tricky ;)

  • use example.com in urls
leehunter’s picture

@redndahead Things like dimensions and file locations might be specific to the help system, but the look and feel etc should be the same whether it's d.o or help system.

redndahead’s picture

@leehunter ok then I submit that they need to be changed. And the fact that in the new help system these images have become more reusable makes another case that these standards can be separate for the time being.

@Alexander Pas: Although a good idea it requires some major fiddling around with that I don't think most users are willing to do. I think it's important that people are aware of what urls they are willing to share, but in the grand scheme I don't think having inconsistent or a live url will be a problem.

@CrookedNumber: Thank you very much. I'll start compiling these and post an updated zip with all the images. Thanks to everyone that helped!!

jumpfightgo@groups.drupal.org’s picture

Great job organizing this Adam. Thanks for all your work on this!

redndahead’s picture

StatusFileSize
new335.65 KB
new222 bytes
new573.39 KB
new187.34 KB
new374.16 KB
new540.64 KB
new110.08 KB
new86.21 KB
new3.67 KB
new73.47 KB
new43.4 KB

OK here is the current set of screenshots. There are some holes that need to be filled. But this will give us a serious head start. We ended up with a total of 446 screenshots. This is an awesome accomplishment. Really thanks again everyone.

birdmanx35’s picture

Version: » 6.x-1.x-dev

Is there any chance we can get those screenshots up on Flickr or something so people don't have to download 10+ zip files to poke through them?

redndahead’s picture

I was planning on writing a small module to be able to display them to go along with the help module. I can see if I can upload them to my flickr account though. Good idea.

redndahead’s picture

Screen shots can be found here. http://drupalshots.com/screenshots/

MGParisi’s picture

pnggauntlet

AMAZING TOOL!

Will reduce almost any image and will do so with 0 loss in quality!

add1sun’s picture

Project: Documentation » Drupal Documentation
Component: Other documentation issues » Miscellaneous

moving to the drupaldocs module issue queue. :-)