0

0

前端之Photoshop切片

高洛峰

高洛峰

发布时间:2017-02-23 09:20:34

|

2280人浏览过

|

来源于php中文网

原创

        什么是切片 ?     (photoshop中的切片)

切片:将图片切成几部分,一片一片往上传,这样上传的速度比较快。每个切片作为一个独立的文件传输,文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。

切片工具:主要是用来将大图片分解为几张小图片,这个功能用在网页中较多,因为现在的网页中图文并茂,也正因如此所须的时间就比较长,为了不让浏览网页的人等待时间太长,所以他们将图片切成几个小的来组成。

 

      切片是网页制作过程中非常重要的一个步骤,往往切片的正确与否会影响着网页的后期制作。一般是用Ps或者Fw对网页的效果图或者大幅度的图片进行切割。重要的正确的切片会给网站带来一非常正面的影响。比如:减少网页加载时间、制作动态效果、优化图像、链接等。

立即学习前端免费学习笔记(深入)”;

一、网页切片的制作

1、  减少网页加载时间

     有时候网页上可能需要大的banner图片,那么浏览器下载这个图片就要花费很长的时间,这是很不利于用户体验的。而网页切片的出现就很好的解决了这个问题。切片的使用使整个大的图片分为不同的很多的小图片,浏览器也会对这些小图片进行下载,这样浏览器下载图片的时间就大大的缩短了,节约了很多时间。

2、  优化图像

    一般说一个完整的图像只能是一种格式,jpg、gif、png、psd、dpf或者其他,一种格式那么我们就只能采取一种优化方式。而网页切片可以把这张分割成很多小图片,并且可以保存成其他格式,可以分别对其优化。这样就能保证图片质量高等的情况下还能减少图片的内存,也提高网页的加载速度。

   切片前的准备:另存网页PSD文件,整合ps的图片

   切片的具体准备:分割切片、切片的类型(用户切片、非用户切片)

   切片的基本要点:

                        1、根据颜色范围来切;

                        2、切片大小:把网页的切片切的越小越好;

                        3、切片区域为完整性:保证完整的一部分在一个切片内,例如某区域的标题文字,以后修改时方便;

                        4、导出类型:颜色单一过渡少,应该导出GIF,颜色过渡比较多,颜色丰富的应该导出JPG,有动画的部分应该导出为GIF动画;

                         5、保留文件:即使页面好了,也要保留带切片层的源文件,说不上哪天要改某个部分,例如文字什么的,直接修改单独到处所用的切片就可以了。

    切片的图层显示和隐藏:背景图片的切片;不规则图片的切片。

    切片的编辑:大小、调整、删除、清除切片(可一个个选中右击删除,也可视图所有都删除)、保存切片(存储为web所用格式)

                    删除切片

Bandy AI
Bandy AI

全球领先的电商设计Agent

下载

                    编辑切片选项:切片类型、名称:自动生成的,一般采用英文命名,网页代码中运用英文比较友好、URL:是链接地址、目标、ALT标记:通过可以搜索优化图片、                                         尺寸W H X Y、切片背景:一般默认无

                    划分切片:水平划分、垂直划分         组合划分

                    保存切片(存储为web所用格式)ctrl+shift+alt+s:一般常用格式为jif、png—24支持背景透明(透明度勾选支持背景透明)、jpeg(图片品质一般80以上)。                                  然后点击保存,保存格式,格式有极限图像,设置为默认设置,切片(所有切片:不管是用户切片还是非用户切片都会导出来、所有用户切片:只会导出                                  切到的切片、选中切片:只会导出在选中的切片),会自动生成一个文件夹(images)                                          

                   切片的格式:

                                    1、三种切片格式的介绍:颜色范围比较鲜艳的使用jpg格式、png支持网页透明、jif支持颜色范围比较单一。

                                    2、三种切片格式的比较(适用范围):jpg网页中都支持这种格式;png支持透明和背景无关;jif动画可以发表情。

                                    3、三种切片的适用范围及优缺点:png:IE6不支持图片透明;gif动画导出的颜色单一,当颜色鲜艳时会出现锯齿状。

                    切片的保存及重命名:

                                   1、切片的导出保存

                                   2、切片的重命名,名称最好是英文的,也不要以特殊的符号开头

                   切片的技巧(渐变、阴影、不规则) :

                                   渐变:可以单独拉一个切片

                                   阴影:网页中如何实现,css3也可以实现阴影但是ie6、ie8不支持,可以单独为阴影做一个切片,让背景关掉保存为png-24格式

                                   不规则:背景隐藏掉,保存png格式

网页切片实战练习

     有的颜色可以自己表示、挂件制作(整个切)、视频播放按钮

     步骤:整理图层、另存一下(为图片做备份)、尽可能的做精确点、画布多的话可以新建一个然后复制到新的画布

切片如何快速插入:超链接或者添加为背景链接

总结   切片的知识点及要点:切片的概念、作用、格式选择

更多前端之Photoshop切片相关文章请关注PHP中文网!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

2

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

2

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

0

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

0

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.29

clawdbot ai使用教程 保姆级clawdbot部署安装手册
clawdbot ai使用教程 保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

25

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址
clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手,可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等,并且可以接入用户常用的任何聊天APP,所有的操作均可通过WhatsApp、Telegram等平台完成,用户只需通过对话,就能操控设备自动执行各类任务。

16

2026.01.29

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

8

2026.01.29

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

622

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
成为PHP架构师-自制PHP框架
成为PHP架构师-自制PHP框架

共28课时 | 2.5万人学习

Go语言教程-全程干货无废话
Go语言教程-全程干货无废话

共100课时 | 10万人学习

前端工程师必备技能—PS切图
前端工程师必备技能—PS切图

共11课时 | 1.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号