如何用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. Service官方教程(9)绑定服务时的注意事项

    Binding to a Service Application components (clients) can bind to a service by calling bindService() ...

  2. Cenos7 切换单用户模式

    CentOS 7在进入单用户的时候和6.x做了很多改变,下面让我们来看看如何进入单用户. 1.重启服务器,在选择内核界面使用上下箭头移动 2.选择内核并按“e” 3.修改参数 将rhgb quiet ...

  3. 解决ef第一次启动较慢

    protected void Application_Start() { //禁用第一次ef查询对表__MigrationHistory的问题使用了ef的Code first会在第一次ef查询的时候会 ...

  4. Linux之测试服务器和端口连通

    目录 wget工具 telnet工具 ssh工具 wget工具: 该工具是网络自动下载工具,如果linux或centos中不存在,需要先安装,支持http.https.ftp协议,wget名称的由来是 ...

  5. jq判断上下滚动

    $(document).ready(function(){ var p=0,t=0; $(window).scroll(function(e){ p = $(this).scrollTop(); if ...

  6. input 全选 jquery封装方法

    HTML代码 <table class="table table-striped"> <thead> <tr> <th><in ...

  7. 10.3 Implementing pointers and objects and 10.4 Representing rooted trees

    Algorithms 10.3 Implementing pointers and  objects  and 10.4 Representing rooted trees Allocating an ...

  8. git 学习笔记1

    目前我属于粗放型的[学习者],接下来需要做一些改变,让自己更加规范.首先需要学习的就是版本控制系统,本科在工作室的时候使用过一点Subversion,不过到现在已经基本没有印象了.git现在越来越成为 ...

  9. ajax跨域上传图片

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

  10. 手机端打开调试工具,模拟console.log

    将下列代码考入需要调试页面即可 <script src="//cdn.jsdelivr.net/npm/eruda"></script> <scrip ...