`
wx1569225609
  • 浏览: 14520 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

PS技巧:将图片存储为web所用格式的最佳方式!

 
阅读更多
存储为web所用格式 互联网几乎是当今最大的艺术、图形和相片分享平台之一,因此掌握一些保存为网页格式的基础知识就非常重要了。实际上,保存为网页格式是一项平衡艺术——你必须在图片品质和介质的文件尺寸之间做好平衡,以便满足你的个人需求。 在速度相对重要的地方(如迅速地加载网站),你可能需要牺牲一些图片品质。而在品质重要的地方,则需要牺牲一点速度。这堂课程的目的就是向你介绍一些方法,在这两个因素之间寻求平衡,与此同时保留非常好的图像品质。 无损 vs 损耗数据 虽然存在有非常多的图片格式(仅举几例,如jpeg,gif和png),但是依据压缩方法不同,所有的图片都能进一步归类为两大类别:无损和有损。无损数据压缩保证了图像在没有任何品质和信息丢失的情况下重现,而有损数据压缩的结果就是可能造成品质和信息的丢失。在平面设计领域最主流的无损媒介格式包括GIF,PNG,以及TIFF,而JPEG是最主流的有损压缩的图形格式。 如何用PHOTOSHOP保存网页格式 PS拥有非常好的方法来为网页优化图片。在ps中,选择文件>存储为web格式或者使用快捷键ctrl+alt+shift+s。一个新的对话框将会弹出,这里有所有为网页保存和优化图片的设置。 wps_clip_image-23841 我会通过以下一些生活中的案例来演示如何使用对话框中的设置。 为网页存储图像 由于图片巨大的文件体积,它们更多是以有损压缩格式来保存的。甚至在拍照时,相对于数倍大小的RAW格式,相机也倾向于用有损格式(如JPEG)来保存图片。 JPEG是日常中首选的图片格式,它是以它的创造者“联合图像专家小组”来命名的。Jpeg之所以能够成为标准,是因为它在压缩图像数据的同时可以保留高品质,并且在相关信息上能够接近无损图像的效果。 当你在保存图片的时候,有几种网页格式预设可供选择。对于一张图片,你应该考虑是使用JPEG 低、JPEG 中,还是JPEG高。观察下面的对比图,(可以)发现案例中的图片经过压缩后并没有多大的品质损耗。相比起超过250KB的源文件,我们选择中等质量或者高等质量的压缩预设就能够得到一个大小不超过30KB,并有合适品质的图片。 wps_clip_image-22304 GIF图像 有些时候,你会被要求用无损格式来保存,以便最好地优化你正在创作的任何作品。这在网页设计中时常遇到,在布局上使用比普通图片更少的颜色。 GIF,全称为“图像互换格式”,是一种只用到256个颜色调色板的图片格式,这让它成为不需要使用太广泛色域的网页图片的理想选择。GIF也能将单个像素设置成透明,不过这并不在这个教程的讨论范围之内。下面展示了一张(使用着256个颜色的)GIF图像和JPEG图像的对比照,它们拥有同样的大小.正如你所见到的,无损GIF图片能更好的接近源文件。 wps_clip_image-5919 因为GIF图像受到256色的限制,它本应该极少被用到图片中,但是他们恰好适合那些使用纯色或是有限色彩的图像。对于图片来说,通常来说不是使用JPEG有损压缩,就是GIF无损格式。 高品质图像和无损PNG PNG,全称为“可移植网络图形”,是一种类似于GIF的无损格式,只是它支持更为丰富的色彩(有时候也让它的体积变大),而且可以支持带透明图层的Alpha通道,而非单一透明像素。 PNG图像正在日渐取代GIF,主要是因为在支持更丰富的色彩方面,png通常比gif的压缩效果要更好。虽然它还不想GIF有广泛的支持,但是无疑它正朝着那个方向前进。 当图片必须保留完整品质在网络上进行传输的时候,PNG是最佳的选择。比起用JPEG传输图片,(PNG)会令你得出更大的图片大小,但是有时候这是一个非常有必要的牺牲。当一个图片包含锐利的线条、以及必须保留清晰的文字时,PNG通常是一个更好的选择,当然了,最终还是要由设计师来决定使用哪一种格式。

转载于:https://my.oschina.net/wangchenyu/blog/1530741

分享到:
评论

相关推荐

    ps切图小技巧

    4. **导出切片**:在完成切片设置后,使用“文件”菜单中的“导出”>“存储为Web所用格式”命令,可以将切片导出为适合Web的格式。这里可以批量设置各个切片的格式、质量,并自定义文件名。 5. **使用辅助工具**:...

    ps切图生成div_css代码

    -存储为web和设备所用格式”,如图PS导出切片然后再弹出对话框中选择相应的操作,最后点击存储,存储时可以选择“html和图像”、“仅限图像”、“仅限html”,你可以根据自己的喜好来输出不一样的格式。 FW切片工具...

    PS如何批量处理图片

    选择“文件”>“存储为Web所用格式”,在这里选择JPEG格式,因为JPEG在保持图像质量的同时,文件大小相对较小。点击“完成”以保存图片。 停止动作的录制,点击动作面板上的“停止播放/记录”按钮,以确保不会再...

    PS网页设计经典教程

    - **保存切片**:选中切片后,通过“文件”->“存储为Web所用格式”将切片保存为网页所需的图像格式。 3. **切图技巧** - **切图策略**:切图要考虑页面的灵活性,确保在不同屏幕尺寸下页面各部分能自由伸缩而不...

    ICOFormat-x86.8bi ICOFormat-x64.8bi ps中另存为icon的扩展资源

    本文将深入探讨如何在Adobe Photoshop(简称PS)中将任意图片转换为ICO格式,以及关于ICOFormat-x86.8bi和ICOFormat-x64.8bi这两个文件的作用。 首先,让我们了解在PS中将图片转换为ICO格式的步骤。打开你想要转换...

    ps自动生成文字图片

    然后,通过PS的保存为Web所用格式功能,将每个含有文字的图层导出为PNG图片,这种格式通常用于游戏中的UI元素,因为PNG支持透明背景且文件尺寸相对较小。 自动化这个过程的好处在于提高了效率,避免了手动逐个转换...

    PS怎样修改照片

    在不明显降低图像质量的前提下,可以通过“存储为Web所用格式”来实现。这个功能会自动对图片进行有损或无损压缩,根据你选择的文件格式(如JPEG、GIF或PNG)和压缩级别来调整。JPEG格式适用于照片,因为它支持丰富...

    ico format64(adobe cc 2015 64位)存储图标格式icon 适用于256像素及以下图片

    在Adobe CC 2015版本中,PS增加了对ico格式的支持,允许用户直接将图片转换为图标。这个过程非常方便,不仅简化了设计师的工作流程,还确保了图标的高质量输出。 在转换过程中,首先你需要打开Adobe Photoshop CC ...

    PS中英文对照表.pdf

    - **存储为Web所用格式(Save for Web)**:优化图像以减少网络加载时间。 - **恢复(Revert)**:返回到最后一次保存的状态。 - **置入(Place)**:将其他文件(如图像或文本)插入到当前文档中。 - **输入(Input)**...

    ps电火花的制作.doc

    14. 保存为GIF:最后,使用“文件”>“存储为Web所用格式”,选择GIF格式,保存动画。注意调整颜色质量和文件大小以平衡质量与文件大小。 通过以上步骤,你将在Photoshop中成功地制作出具有动态电火花效果的GIF图片...

    PDF文档打印机,DWG格式转化JPG

    用户可以通过打开PDF文档,然后选择“文件”>“导出”>“保存为Web所用格式”来将其转换为JPG图像。JPG(Joint Photographic Experts Group)是一种广泛支持的位图格式,适合网络发布和存储照片或复杂图像,因为它能...

    ps切图教程

    为了导出切片,应选择菜单中的“文件->存储为Web和设备所用格式”。在弹出的对话框中,你可以选择不同的导出选项,如“html和图像”、“仅限图像”或“仅限html”。 **FW切片工具简介:** FW的切片工具相比PS更为...

    修改图片 hash 值1

    4. 选择存储为 web 所用格式,快捷键拖动选中所有小方格。 5. 设置导出为 png-24,点击存储,导入图片到工程中即可。 六、结论 本文总结了如何使用 ImageMagick 工具修改图片的哈希值和颜色,并在 Xcode 项目中...

    怎么用PS把图等分成切片

    选择“文件”>“导出”>“存储为Web所用格式”。在弹出的对话框中,确保所有切片都被选中,然后选择合适的文件格式(如JPEG或PNG),调整质量设置,点击“存储”并选择保存位置。 切片完成后,你会得到一个HTML文件...

    如何用photoshop做gif动态图片,怎么用PS做出gif动态图片参考.doc

    9. 要保存GIF,选择“文件”>“存储为Web和设备所用格式”,预览并调整效果,然后保存为GIF格式。 方法二(适用于带有视频功能的Photoshop版本,如CS6): 1. 创建新Photoshop文档,选择“文件”>“新建”,在预设...

    ps载入切图神器实现快速切图

    4. **导出切片**:完成后,选择“文件”>“导出”>“存储为Web所用格式”,在弹出的对话框中确认导出设置,如图片质量、格式等,然后保存。 5. **整合到HTML5**:将导出的切片图片文件引入到HTML5代码中,使用`...

    Photoshop 批量处理图片

    - 选择“文件”(File)> “另存为”(Save As)或“导出”(Export)> “存储为Web所用格式”(Save for Web & Devices)。 - 选择合适的图片格式,如JPEG或PNG,并调整质量滑块来控制文件大小与清晰度的平衡。 ...

    photoshop考试题.docx

    3. **Photoshop将图片存储为以下格式**:正确答案是 **A、B、D**。Photoshop支持多种文件格式的保存,但 **TXT** 格式不属于图像文件格式。 4. **Photoshop里调整有以下哪些功能**:正确答案是 **A、B、C、D**。...

Global site tag (gtag.js) - Google Analytics