ps图片怎么转换为html ps图片转换为html图文教程
2016-02-18 11:49
639 查看
ps图片如何转换为html
1、先打开photoshop设计好你的网页背景。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/371f938603c3a31a6b9f454ef548785e.png)
2、在工具栏选择“切片工具”,大部分人的工具栏只显示“裁剪工具”,右键单击“裁剪工具”就能看到“切换工具”,选择它即可。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/92fa9b174abca614527680227188b744.png)
3、属性栏进行设置,先来设置样式,有三种样式可供选择,正常样式、固定长宽比、固定大小。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/0bbcf086c5ac04ffc09e81c1af2da9a2.png)
4、正常样式下,鼠标拖动可以绘制一个矩形的切片,切片的大小和长宽比都是任意的,点击切片就会使切片的边框变成棕褐色,并出现八个控制点,拖动控制袋可以任意的改变切片的大小,另外,直接拖动切片也可以改变切片的位置。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/e8d3e6cc68307ae3880769dc35d8531f.png)
5、固定长宽比模式下,拖动鼠标可以绘制切片,切片的大小是任意的,但是切片的长宽比是固定不变的。为了方便,一般长宽比和图像的的长宽比是相同的。在图像的“图像大小”下,打开“图像大小”对话框,这里你可以找到图像的宽度和高度。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/691ed7b13900334d596d9e0994971a92.png)
6、固定大小模式下,切片的长和宽都是你设定的,不会改变,点击一下鼠标就可以绘制一个切片,我绘制的这些切片都是一样大小的。选中一个切片,切片变成棕色的边框,并出现了八个控制点,拖动控制点也可以改变切片的大小。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/b4bef1f2a549c1d3dcefcbec5ac3681a.png)
7、一般将图片切割成网页的时候,我们可以使用一种简便的方法,切换到任意一种模式下,右键单击图像,然后在打开的右键菜单中,选择“划分切片”,打开划分切片的对话框。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/eab1dc563188b5b9517ebdcc8ac04c2c.png)
8、设置将图片切分为水平4个切片,垂直5个切片,点击确定按钮。这是建立切片最快的速度了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/0835af1c4ae0a99e3c0d58f77d51b6db.png)
9、拖动控制点可以改变整行或者整列的宽度和高度。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/7bd4a308689d1124da16bf4f3d9e6ac4.png)
上一页12 下一页
1、先打开photoshop设计好你的网页背景。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/371f938603c3a31a6b9f454ef548785e.png)
2、在工具栏选择“切片工具”,大部分人的工具栏只显示“裁剪工具”,右键单击“裁剪工具”就能看到“切换工具”,选择它即可。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/92fa9b174abca614527680227188b744.png)
3、属性栏进行设置,先来设置样式,有三种样式可供选择,正常样式、固定长宽比、固定大小。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/0bbcf086c5ac04ffc09e81c1af2da9a2.png)
4、正常样式下,鼠标拖动可以绘制一个矩形的切片,切片的大小和长宽比都是任意的,点击切片就会使切片的边框变成棕褐色,并出现八个控制点,拖动控制袋可以任意的改变切片的大小,另外,直接拖动切片也可以改变切片的位置。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/e8d3e6cc68307ae3880769dc35d8531f.png)
5、固定长宽比模式下,拖动鼠标可以绘制切片,切片的大小是任意的,但是切片的长宽比是固定不变的。为了方便,一般长宽比和图像的的长宽比是相同的。在图像的“图像大小”下,打开“图像大小”对话框,这里你可以找到图像的宽度和高度。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/691ed7b13900334d596d9e0994971a92.png)
6、固定大小模式下,切片的长和宽都是你设定的,不会改变,点击一下鼠标就可以绘制一个切片,我绘制的这些切片都是一样大小的。选中一个切片,切片变成棕色的边框,并出现了八个控制点,拖动控制点也可以改变切片的大小。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/b4bef1f2a549c1d3dcefcbec5ac3681a.png)
7、一般将图片切割成网页的时候,我们可以使用一种简便的方法,切换到任意一种模式下,右键单击图像,然后在打开的右键菜单中,选择“划分切片”,打开划分切片的对话框。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/eab1dc563188b5b9517ebdcc8ac04c2c.png)
8、设置将图片切分为水平4个切片,垂直5个切片,点击确定按钮。这是建立切片最快的速度了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/0835af1c4ae0a99e3c0d58f77d51b6db.png)
9、拖动控制点可以改变整行或者整列的宽度和高度。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201602/7bd4a308689d1124da16bf4f3d9e6ac4.png)
上一页12 下一页
相关文章推荐
- html超链接确认删除
- html页面内容替换
- htmlparser抽取网页内相关节点链接的代码
- htmlparser判断网页文本包含关键词的三种方法
- HTML中结构化标签的使用
- 第一天 HTML基础
- HTML 图片鼠标悬停动态效果
- 通过url,获取html内容,并解析
- 浅谈HTML移动Web开发(转)
- 有关HTML的相关基础问题:
- HTML简单实例
- power designer导出word或html
- IE版本判断
- 从html传到后台转成utf-8
- html的布局
- html容器与元素代码编写时的缩进
- HTML DOM的基本知识
- <转载>HTMl转义字符大全
- html中的alt和title用法区别
- ODOO Unable To Find Wkhtmltopdf On This System. Error/Bug ?