Docs Screenshot Guide
(Difference between revisions)
| Line 3: | Line 3: | ||
#Assuming that you are using Photoshop to create your screenshots, keep your original .psd file at the original screen size. Once you are done editing it, adjust the size to a max width of 725 px, and save it as a .png. Do not use .jpg because the quality will be reduced. If you save the master .psd file, keeping the original size, it will be much easier to merge updated/revised screenshots with your original. Keep both your .psd file and your .png file in "PageLines Docs" dropbox folder, inside the sub-folder named after your doc. | #Assuming that you are using Photoshop to create your screenshots, keep your original .psd file at the original screen size. Once you are done editing it, adjust the size to a max width of 725 px, and save it as a .png. Do not use .jpg because the quality will be reduced. If you save the master .psd file, keeping the original size, it will be much easier to merge updated/revised screenshots with your original. Keep both your .psd file and your .png file in "PageLines Docs" dropbox folder, inside the sub-folder named after your doc. | ||
#When using a screenshot of the WP-admin panel, collapse all of the settings except for the one you are writing about. This will look much cleaner.[[File:Screenshot-example.png|200px|thumb|right|alt=Screenshot-example.png|Screenshot-example.png]] | #When using a screenshot of the WP-admin panel, collapse all of the settings except for the one you are writing about. This will look much cleaner.[[File:Screenshot-example.png|200px|thumb|right|alt=Screenshot-example.png|Screenshot-example.png]] | ||
| + | #Make sure than your browser's zoom is set to 100%, no bigger no smaller | ||
#If any of your instructions will result in a color change when you mouse-over an item, include that color change in your screen shot. For example: If you are about to click on PageLines -> Settings, when you mouse over setting, it will be highlighted in blue. Include that highlight in your screen shot. Also, if you check a box, the box will be highlighted in blue. Things like that | #If any of your instructions will result in a color change when you mouse-over an item, include that color change in your screen shot. For example: If you are about to click on PageLines -> Settings, when you mouse over setting, it will be highlighted in blue. Include that highlight in your screen shot. Also, if you check a box, the box will be highlighted in blue. Things like that | ||
#Do not include any custom information in your screen shots. Omit things like "Hi Admin!" or "Edited by (name) " or the name of the site. Simply paint over them with the same color as the background. | #Do not include any custom information in your screen shots. Omit things like "Hi Admin!" or "Edited by (name) " or the name of the site. Simply paint over them with the same color as the background. | ||
Revision as of 06:04, 2 November 2011
Here's some guidelines for making screen-shots
- Assuming that you are using Photoshop to create your screenshots, keep your original .psd file at the original screen size. Once you are done editing it, adjust the size to a max width of 725 px, and save it as a .png. Do not use .jpg because the quality will be reduced. If you save the master .psd file, keeping the original size, it will be much easier to merge updated/revised screenshots with your original. Keep both your .psd file and your .png file in "PageLines Docs" dropbox folder, inside the sub-folder named after your doc.
- When using a screenshot of the WP-admin panel, collapse all of the settings except for the one you are writing about. This will look much cleaner.
Screenshot-example.png
- Make sure than your browser's zoom is set to 100%, no bigger no smaller
- If any of your instructions will result in a color change when you mouse-over an item, include that color change in your screen shot. For example: If you are about to click on PageLines -> Settings, when you mouse over setting, it will be highlighted in blue. Include that highlight in your screen shot. Also, if you check a box, the box will be highlighted in blue. Things like that
- Do not include any custom information in your screen shots. Omit things like "Hi Admin!" or "Edited by (name) " or the name of the site. Simply paint over them with the same color as the background.
- The numbered graphics should corresponding with the numbered list. If there is a number or roman numeral on your list, there should be the same number in your screen shot right next to where the user needs to look. If something on your list is more of a comment than a numbered instruction, use * instead of # to make it a bullet point
- Crop out anything relating to your browser. Only the website/settings should be shown. No shortcut items, links, url addresses, etc
- For the most part, every time you creating a screenshot, act as if you are starting your website from scratch. If you are showing the front end of your site, the only menus that should show are "Home," "Blog" and if necessary, whatever page that relates to the doc you are writing. Keep all of your plugins and new extend section that down't pertain to the doc deactivated. This is because some of these sections or plugins will show a new item in the WP administration panel, and it will look different than someone who has just installed a new site.
If anyone else has any comments or guidelines, feel free to add to these