如何用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. idea 启动时报 error:java 无效的源发行版11

    编译的版本不符合,需要修改统一 

  2. Linux下UDP简介及程序设计

    一.UDP简介 UDP(User Datagram Protocol),用户数据报协议,是OSI参考模型中一种无连接的传输层协议,提供面向事务的简单不可靠信息传送服务.UDP提供了无连接通信,且不对传 ...

  3. [BZOJ1381]Knights

    Description 在一个N*N的棋盘上,有些小方格不能放骑士,棋盘上有若干骑士,任一个骑士不在其它骑士的攻击范围内,请输出最多可以放多少个骑士. 骑士攻击的点如中国象棋中的马,可以攻击8个点. ...

  4. [POI2010]Antisymmetry

    Description 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作"反对称"字符串.比如00001111和010101就是反对称的,100 ...

  5. CodeFoces Round #443(div.2)

    http://codeforces.com/contest/879/ A. Borya's Diagnosis time limit per test 2 seconds memory limit p ...

  6. 题解报告:poj 2533 Longest Ordered Subsequence(最长上升子序列LIS)

    Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequence ...

  7. String的用法——获取功能

    package cn.itcast_04; /* String类获取功能 int length():获取字符的长度 char charAt(int index):获取指定索引位置的字符 int ind ...

  8. [ USACO 2013 OPEN ] Photo

    \(\\\) Description 有一个长度为 \(n\) 的奶牛队列,奶牛颜色为黑或白. 现给出 \(m\) 个区间 \([L_i,R_i]\) ,要求:每个区间里 有且只有一只黑牛 . 问满足 ...

  9. IPython notebook快捷键(Jupyter notebook)

    转自“https://blog.csdn.net/eswai/article/details/53642802” 本文整理了神器IPython Notebook(或Jupyter Notebook)的 ...

  10. 在JAVA中封装JSONUtils工具类及使用 (转)

    import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util. ...