【Photoshop创作礼仪】之 输出

一个可以确定的事情是:如果你的工作是将PSD输出为图片,那么你肯定不想重复操作,确保一次搞定。

ctrl+shift+alt+S另存为WEB所用格式

记住这个快捷键ctrl+shift+alt+S。你会发现一些神奇的功能,特别是在看过网页图片优化之后,也能更明白这样做的意义了。

WHY? 存储为“WEB和设备所用格式”,地球人都这么做。

TRY THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

NOT THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

一丝不苟 & 保存文件大小

Go old school:舍弃部分质量/颜色用来做较小的文件。没错,直到现在它仍然是有用的。

WHY? 以把你的图像在优化工具里减肥,适当压缩和减小体积文件是非常必要的。

TRY THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

NOT THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

用功能为文件命名

“黄色_方块3.jpg” 无法给开发人员任何信息,试试 黄色渐变_订单页面提交按钮.jpg

WHY? 我们的目标是要尽可能明确的文件是什么,尽可能简单。

TRY THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

NOT THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

没有无用的空间

不需要故意做一些内边距或者外边距,那是css干的事情。

WHY? CSS excels at being easy to adjust positioning. Photoshop’s workflow (Open –> Nudge –> Save for Web)? Not so much.

TRY THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

NOT THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

做一个Retina版,比如这个页面就支持。

如果可以,制作高精度图片,页面里设置Retina屏幕的设备读取这些图片。

WHY? iOS设备几乎都是”视网膜”屏。 如果你想要你的项目在用户放大后还那么优雅的展现的话,不妨制作Retina版本。

TRY THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng

NOT THIS
【Photoshop创作礼仪】之 输出  ruanjian jiaocheng