如何用photoshop输出html网页


首先得先对PSD文件做切片,有两种方法:

①使用工具栏上的“切片工具”,

然后在图象上划出一块一块的区域。

②使用基于参考线的切片,按ctrl+R调出标尺栏,

把鼠标移动到标尺上,按住鼠标左键,移动到图象上,将会看到一条绿色的参考线,如图

将参考线;排好,然后点一下工具栏上的切片工具图表,然后点上面

选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。

接下来就可以输出了:
①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。

②接下来就会弹出一个“将优化结果存储为”的窗口,如图

在“保存类型”处有个下拉列框可以选择,因为我们要存储为网页的格式,所以选择“HTML和图象(* html)”,再选择“保存”就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。

③如果我们需要输出“div+css的网页”我们还可以这么做:
在“设置”处的下拉列框,选择“其他”

就会弹出一个“输出设置”的窗口

在第2个下拉列框处选择“切片”

选择“生成CSS”



单击“好”→“保存”就可以输出一个目前流行的“div+css”的HTML网页。

ps中切片后的参考线

有时候我的图片需要重复用来切片,每次切片后,第二次打开就会出现上次切片后的蓝色切片线。尽管隐藏参考线或切片,也只是暂时的,当我再次点击切片工具,上次的蓝色切片又会出来。
怎样让他每次打开都是新的,不会再出现上次的切片了。
谢谢!

如果你不需要上次的切片,也就是不打算保留已使用过的切片,你可以点击“视图--清除切边(C)”清除切片,这样你就可以重新切片了。

如何用photoshop输出html网页的更多相关文章

  1. 如何用PhotoShop制作网站的favicon.ico

    所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.当然,这不仅仅是Favicon的全部,根据浏览器的不同 ...

  2. asp.net 读取一个文本文件,并输出到网页显示 通过 一般处理程序实现

    asp.net 读取一个文本文件,并输出到网页显示 通过 一般处理程序实现 用这个可以做模板首页进行输出,也可以自已自定义进行扩展 //得到读取到的文本到string中 string resultTe ...

  3. 如何用phpcms将静态网页生成动态网页?

    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...

  4. 简单思考 如何用PHP输出本周的周三日期

    简单思考 如何用PHP输出本周的周三日期?比如今天2017-10-31 计算本周周三应该是2017-11-01 自己动脑筋想一想,然后给我留言或者评论

  5. 如何用Photoshop画一个发光金币(unity游戏素材教程)

    做好的发光金币预览图: 以下为如何用Photoshop画一个发光金币教程: [1]如上图1-2,新建,名称改为Coin,宽度20像素,高度20像素,分辨率72,背景白色: [2]使用Alt+Shift ...

  6. HTML第二部分表单及使用Photoshop快速制作网页

    一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...

  7. Android webView输出自定义网页

    这次来使用webview输出网页型数据.因为这样的数据好使用富文本编辑器,有各种各样的拓展. 上代码: package controller.hzl.com.testcall; import andr ...

  8. 如何用photoshop把一张图片分割成几张图片呢?

    今天情人节,祝大家节日快乐!朋友发来一张照片,我发现这张照片是几张照片组合起来的,是不是感觉每一张都是萌萌哒呢?为了体现单张的独特性,现在我要把它切分成单张,使用Photoshop CS5该怎么弄呢? ...

  9. 如何用chrome扩展将网页变成黑底白字,用以保护视力

    不知道有没有科学依据,自己感觉黑底白字对视力好些,于是动手加个chrome扩展: 第一步:建个文件夹,名称比如叫changeColor; 第二步:在changeColor文件夹中建三个文件:manif ...

随机推荐

  1. 【react-native】持续踩坑总结

    陆陆续续的已经接触了RN快3个月,整体的感受...感觉在调试兼容andorid问题的时候就像回到了IE时代. 本来想按自己踩坑的路径持续更新一些记录,但是,现实是坑太多,还是统一写一篇汇总一下吧(鉴于 ...

  2. redis问题集结

    redis和memcached比较? redis中数据库默认是多少个db 及作用? python操作redis的模块? 如果redis中的某个列表中的数据量非常大,如果实现循环显示每一个值? redi ...

  3. 洛谷 P1816 忠诚

    https://www.luogu.org/problemnew/show/1816 st表模板 #include<cstdio> #include<algorithm> us ...

  4. ACboy needs your help HDU - 1712

    ACboy needs your help HDU - 1712 ans[i][j]表示前i门课共花j时间最大收益.对于第i门课,可以花k(0<=k<=j)时间,那么之前i-1门课共花j- ...

  5. 题解报告:hdu 1060 Leftmost Digit

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1060 问题描述 给定一个正整数N,你应该输出N ^ N的最左边的数字. 输入 输入包含多个测试用例. ...

  6. Ubuntu Server 上安装pip后pip命令报错的解决办法

    Installation Do I need to install pip? pip is already installed if you are using Python 2 >=2.7.9 ...

  7. Android推送服务(1)几种实现方式

    1.几种常见的解决方案实现原理 1)轮询(Pull)方式:应用程序应当阶段性的与服务器进行连接并查询是否有新的消息到达,你必须自己实现与服务器之间的通信,例如消息排队等.而且你还要考虑轮询的频率,如果 ...

  8. WinForm 里面关闭窗体的两个方法的区别 Form.coles()与Application,Exit()

  9. Spring框架学习-搭建第一个Spring项目

    步骤一:下载Spring开发包. 官网:https://spring.io/           下载地址:https://repo.spring.io/libs-release-local/org/ ...

  10. ajax跨域上传图片

    前台页面 var data = new FormData(); data.append('file', file); data.append('app', 'goods'); $.ajax({ url ...