PNGs for Screenshots - Revision history

Neville Reid: update internal link, remove dead link, add category

2024-04-14T16:51:08Z

update internal link, remove dead link, add category

← Older revision		Revision as of 16:51, 14 April 2024
Line 21:		Line 21:
	Good luck and happy photoshopping!		Good luck and happy photoshopping!

	~~Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]~~

	~~Link to [[Putting Screenshots on Wikipedia]]~~

	~~<br> Back to~~ [[~~PR Materials~~]]		==See also==
			*[[Putting screenshots on Freegle Wiki]]

	[[Category:How do I do this?]] [[Category:PR_Materials]]
			Back to [[PR Materials]]

			[[Category:How do I do this?]]
			[[Category:PR_Materials]]
			[[Category:Freegle Wiki]]

Jacky at 09:54, 13 February 2012

2012-02-13T09:54:24Z

← Older revision		Revision as of 09:54, 13 February 2012
Line 27:		Line 27:
	<br> Back to [[PR Materials]]		<br> Back to [[PR Materials]]

	[[Category:~~Tech_Group_Stuff~~]] [[Category:PR_Materials]]		[[Category:How do I do this?]] [[Category:PR_Materials]]

Dorothyjeanquinn at 10:30, 16 October 2010

2010-10-16T10:30:33Z

← Older revision		Revision as of 10:30, 16 October 2010
Line 22:		Line 22:

	Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]		Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]

			Link to [[Putting Screenshots on Wikipedia]]

	<br> Back to [[PR Materials]]		<br> Back to [[PR Materials]]

	[[Category:Tech_Group_Stuff]] [[Category:PR_Materials]]		[[Category:Tech_Group_Stuff]] [[Category:PR_Materials]]

Jacky at 05:54, 17 September 2010

2010-09-17T05:54:04Z

← Older revision		Revision as of 05:54, 17 September 2010
Line 1:		Line 1:
	It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past.		It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past.

	Additionally, if we are talking screenshots (which might be large in size), it is wise to save them nicely compressed for the web. This is quite doable with photoshop and many other tools.		Additionally, if we are talking screenshots (which might be large in size), it is wise to save them nicely compressed for the web. This is quite doable with photoshop and many other tools.

	What this means is that by default graphics programs typically save images in a high quality. However for the web, this quality is unnecessary and only results in bigger files and slower downloads/page loads. For instance, a high quality image might be 200 kilobytes (or more). Web quality might be 40 kilobytes. An image if 1/5th the size means a 500% faster image download.		What this means is that by default graphics programs typically save images in a high quality. However for the web, this quality is unnecessary and only results in bigger files and slower downloads/page loads. For instance, a high quality image might be 200 kilobytes (or more). Web quality might be 40 kilobytes. An image if 1/5th the size means a 500% faster image download.

	=Photoshop Save As PNG Instructions=		= Photoshop Save As PNG Instructions =

	First, open the image in photoshop. You can also hit printscreen, then switch over to photoshop and do a File > New. By default Photoshop these days offers to create a new image sized on the clipboard. Once the new image is open, hit paste and then crop down. Continue as below.		First, open the image in photoshop. You can also hit printscreen, then switch over to photoshop and do a File > New. By default Photoshop these days offers to create a new image sized on the clipboard. Once the new image is open, hit paste and then crop down. Continue as below.

	[[~~File~~:Photoshop-save-png-1-opened-image.png\|300px]]		[[Image:Photoshop-save-png-1-opened-image.png\|300px]]

	Next, Open File > Save for Web & Devices.		Next, Open File > Save for Web & Devices.

	[[~~File~~:Photoshop-save-png-2-save-for-web-and-devices-menu.png\|300px]]		[[Image:Photoshop-save-png-2-save-for-web-and-devices-menu.png\|300px]]

	Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the Colours. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colours until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colours actually make the image bigger.		Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the Colours. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colours until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colours actually make the image bigger.

	[[~~File~~:Photoshop-save-png-3-save-for-web-and-devices-dialog.png\|300px]]		[[Image:Photoshop-save-png-3-save-for-web-and-devices-dialog.png\|300px]]

	Good luck and happy photoshopping!		Good luck and happy photoshopping!

	~~Back~~ to [~~[PR Materials]~~]		Link to [http://wiki.modplugin.org/index.php/Capturing_Screenshots Basic Screenshot instructions]

	[[~~category~~: ~~Tech Group Stuff~~]]		<br> Back to [[PR Materials]]
	[[~~category~~: ~~PR Materials~~]]
			[[Category:Tech_Group_Stuff]] [[Category:PR_Materials]]

Jacky at 22:49, 21 July 2010

2010-07-21T22:49:14Z

← Older revision		Revision as of 22:49, 21 July 2010
Line 20:		Line 20:

	Good luck and happy photoshopping!		Good luck and happy photoshopping!

			Back to [[PR Materials]]

	[[category: Tech Group Stuff]]		[[category: Tech Group Stuff]]
	[[category: PR Materials]]		[[category: PR Materials]]

Jacky at 13:51, 19 July 2010

2010-07-19T13:51:20Z

← Older revision		Revision as of 13:51, 19 July 2010
Line 15:		Line 15:
	[[File:Photoshop-save-png-2-save-for-web-and-devices-menu.png\|300px]]		[[File:Photoshop-save-png-2-save-for-web-and-devices-menu.png\|300px]]

	Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the ~~Colors~~. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower ~~Colors~~ until either image quality begins to suffer (then pop back up one level). Or sometimes lower ~~Colors~~ actually make the image bigger.		Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the Colours. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colours until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colours actually make the image bigger.

	[[File:Photoshop-save-png-3-save-for-web-and-devices-dialog.png\|300px]]		[[File:Photoshop-save-png-3-save-for-web-and-devices-dialog.png\|300px]]

	Good luck and happy photoshopping!		Good luck and happy photoshopping!

			[[category: Tech Group Stuff]]
			[[category: PR Materials]]

Paul Thompson: Created page with 'It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past. Ad…'

2010-03-15T22:22:30Z

Created page with 'It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past. Ad…'

New page

It is advisable to use PNGs for screenshots. PNG is a more appropriate format these days. Once upon a time, it was not well supported by browsers. However, this is long past.

Additionally, if we are talking screenshots (which might be large in size), it is wise to save them nicely compressed for the web. This is quite doable with photoshop and many other tools.

What this means is that by default graphics programs typically save images in a high quality. However for the web, this quality is unnecessary and only results in bigger files and slower downloads/page loads. For instance, a high quality image might be 200 kilobytes (or more). Web quality might be 40 kilobytes. An image if 1/5th the size means a 500% faster image download.

=Photoshop Save As PNG Instructions=

First, open the image in photoshop. You can also hit printscreen, then switch over to photoshop and do a File > New. By default Photoshop these days offers to create a new image sized on the clipboard. Once the new image is open, hit paste and then crop down. Continue as below.

[[File:Photoshop-save-png-1-opened-image.png|300px]]

Next, Open File > Save for Web & Devices.

[[File:Photoshop-save-png-2-save-for-web-and-devices-menu.png|300px]]

Finally, adjust options in this dialog. In particular I like to pick PNG-8 and then adjust the Colors. Watch both the file size in the lower left of the windows (58.74K in this example) and watch how changing different options effects the output image (the main windows shows how the image will look once compressed/saved. I often lower Colors until either image quality begins to suffer (then pop back up one level). Or sometimes lower Colors actually make the image bigger.

[[File:Photoshop-save-png-3-save-for-web-and-devices-dialog.png|300px]]

Good luck and happy photoshopping!