ps切图步骤

  1. 我们要用到的切图工具有两个,一个是切片工具,另一个是切片选择工具。左边有个小按钮,你按住它这三个选项就会显示出来。

2、这是我等下用做示范的图片。

3、在切图之前有一点需要说明的是,如果你需要辅助切图,你可以先添加参考线。在PS上方的菜单栏,你可以在视图里找到新建参考线选项。如上图,我已经添加两条参考线,因为参考线在鼠标靠近的时候有吸附功能,所以切图不容易切错位置。

4、好了现在我们开始切图,我用切图工具先裁一个框出来,我们可以看到图片上已经有01的框,但是右边02显示为灰色。

5、我继续用切图工具裁第二个框,记住01和02的框一定要贴合,否则会出现一个03的框。如果你这次切图位置没切对,可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的,你可以把鼠标放在边框上试着移动下,看下效果。你只能移动02,不能移动01。

6、当我发现切图的位置出现错误,开始调整,刚才我把02位置往右挪好,它从02变成了03。

7、然后我用切图选择工具选择01,这样我就能把01的位置调整正确了。

8、切好图之后就到最重要的步骤了,如下图所示,选择文件下面的存储为WEB和设备所用格式,最好能记住快捷键。

9、图片格式为JPEG,它就是JPG,一样的。关键是品质的设定,我们都知道如果一张图片越大它在网上打开的速度就越慢,当我们把图片的品质设的越小,它的大小就越小,但是如果品质太差,图片会变模糊,所以一般情况下如果是网上使用的图片,品质可以设置60,既保证图片较小也不会模糊。这个数值由你自己设置,是大是小,具体看你的要求,试试就知道了。这里有个问题是你只是对其中一个切片设置品质,其他切片又要重新设置,所以存的时候最好检查一下。

10、前面设置好后点击存储会显示以上界面。格式选项选择HTML和图像,默认是图像的,这样我们就能得到网页代码了。

11、存好后得到一个图片文件夹和一个网页,你看到的网页图标可能跟我这个不一样,这个没有关系,因为我们的浏览器不一样。

12、用DreamWeaver软件打开这个网页看到如上界面,我们需要的就是大红框中《table … 《/table》这段代码,拷贝之前要先把图片地址换一下,先把刚才那个images文件夹里的图片上传到淘宝图片空间里去,再复制图片的网络地址替换上图小红框里的那个地址。替换的原因是,PS存的图片地址是你电脑上的,在网络上无法使用,只有你把图片上传到网上别人才会看的到。

至此,大功告成。希望这个教程会对生手有所帮助。

时间: 2024-10-12 22:35:28

ps切图步骤的相关文章

ps切图保存所有切片为png

ps切图保存所有切片为png的步骤: 1. 切图完毕后 2. 点击‘文件’--‘保存为web格式’,弹出对话框 3. 选择左下角的缩放,缩放到一定的比例 4. 按住键盘shift 点选需要的切片(切片周围呈现橙黄色线框) 5. 点击右上角格式为‘png’ 6. 点击右下角'存储',弹出对话框 7. 选择‘选中的切片’保存到你所能找到的地方,over

做一个会PS切图的前端开发

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方

网页设计中ps切图注意问题

最近工作中老是用到ps切图,然后高手说我切图做的不好,在此去网上找了点材料汇集起来,作为参考: 网页设计的切图,最好先用PS做出效果图,然后进行切图.   一.切图的原则:  1.图切的大小越小越好. 2.图切的数量越少越好. 那对于一整张图来说,同时达到这两个原则是相互矛盾的,所以一个网页差不多切成20-30个图就可以了,这样网页的加载速度是不会受影响的.  二.切图的技巧:  1.一行一行的切图.  2.背景的切成小条.  3.不能分开的不分好了,选行的时候要注意怎么样合理.  4.切图的时

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

前端技术-PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

ps切图

Ps切图快捷键m -----选框工具(然后按shift键不放是增加选框,按alt键不放是减小选框)v -----移动工具z -----放大工具(然后按alt键不放,就是缩小工具)空格键-----抓手工具(拖拉画布)注意:一直按住空格键c  -----切片工具F8 -----显示信息 ctrl+1-----100% 正常预览页面 ctrl+r-----隐藏/显示标尺 ctrl+h -----隐藏/显示参考线 按alt键滚动鼠标  -----缩放页面 吸管工具:测量项目上的颜色值: 文字工具(T):

Assistor PS切图

下载.net framework PS外挂:Assistor PS 使用指南-软件介绍与下载 标注.切图.圆角.自定义参考线.单位换算N合1神器-Assistor PS 一款APP从设计稿到切图过程全方位揭秘 免费了!切图标记外挂神器ASSISTOR PS深入解读(上) APP切图实例操作 UI基础教程 – 原生App切图的那些事儿 Assistor PS切图标记工具的详细教程与汉化 android APP UI设计图标注.换算

第144天:PS切图方法总结

一.切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方面,CC版本可通过脚本执行全自动切图,这样完全解放了切图人员的

ps切图保存的网页让它居中

魅力网络今天在给一学生做ps切图,我们一起复习一下网页的基础知识,当我们用ps切图直接保存网页,用浏览器打开默认是左对齐的,一般的网页都是居中对齐这样才看的好看,下面让河北魅力网络告诉大家方法.方法一:<body style="text-align:center" 在body后面加上 style="text-align:center" 这样就能保证内容居中了. 方法二:实用精简方法,直接在body头部中加<center>底部加</center