(一)我们需要把中间的图切成一块一块。

  1. 首先在放入PS中;
  2. 【视图】——>【标尺】,为的是能够精确的切图;
  3. 标尺打开后上下左右都可以往图中拉线,我们在这边叫作(参考线),然后使用左边的【放大镜】功能对参考线放大,尽可能的放大,可以看到参考线是否在所需要切的图上,然后选择工具栏的【移动工具】进行调整。【移动工具】在参考线的中间变成两条竖线时可以移动线条的位置,摆放完成后缩小图,继续操作参考线;
  4. 参考线如果不想要,可以使用【视图】——>【清除参考线】;
  5. 所有的线条拉好后,可以选择工具栏的【切片工具】,然后在上方的菜单栏中有一个【基于参考线的切片】,选择后切片即完成;

(二)切片工具的样式有三个,正常、固定长宽比、固定大小;

  正常:随意大小,没有任何的比例限制;

  固定长宽比:按照比例来缩放大小;

  固定大小:是按照像素来规定大小,比如设置宽度33px,高度44px,那么切片的大小就是一个长为44px,宽为33px的长方形切片;

(三)切片取消;

  【视图】——>【取消切片】;

(四)编辑切片选项;

  如下图:右击——>【编辑切片选项】;

URL:链接地址,把这张图片变成一个按钮转跳到其他页面。
目标:鼠标移上去后在图片边上显示注释。
信息文本:鼠标移上去后状态栏里显示的注释。
ALT标记:当图片无法正常显示时的替代文字。

(五)保存:点击【文件】——>【存储为web所用格式】,随后出现如图,设置为jpeg,点数为60,其余不变存储

(六)存储后,选择路径即可,会有出现一个images的文件。文件名自己取一个,保存。

  

ps切片的更多相关文章

  1. 我所了解的WEB开发(2) - PS切片

    PS对于WEB设计和前端开发来说都是不可或缺的工具,基本的用途是用来处理网站的LOGO.Banner 以及按钮图标来着,但是一旦遇上要把整个PSD文件转成网页就让人非常头痛了,可能还不太专业.后来在公 ...

  2. ps 切片 蓝色 灰色 小标志 什么意思

    切片颜色 区分自动切片与用户切片和基于图层的切片.默认情况下,用户切片和基于图层的切片带蓝色标记,而自动切片带灰色标记.-----用户切片就是你需要的切片,其他区域会形成自动切片,可以视为自己不要的, ...

  3. ps还能用脚本切片?

    最近在慕课网上看有关于ps切图的视频,发现ps 切片的水还挺深的.这相当于我的一篇学习笔记吧.对于ps的基本切图我觉得对于前端人员来说就是a piece of cake.但是对于ps的精准切图,我不知 ...

  4. PS切图导出代码后出现的图片布局散乱的解决方法——table布局

    前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...

  5. ai切片的完美解决方案

    ai切片的完美解决方案1 背景拖到外面2 导出psd3 ps切片 背景夹层黑色就看清楚啦

  6. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  7. 定位(position)

    position :属性规定元素的定位类型 语法: position : static | absolute | fixed | relative JavaScript语法:object.style. ...

  8. PS-前端切图教程(切jpg图和切png图)

    微微一运功,把家底都抖出来了. 不过,作为一个设计出身的前端来说,摸ps就和摸键盘一样了 所以可能教程中还是有没用过ps的人看不懂的地方, 欢迎加群讨论:613512106... ---------- ...

  9. 关于前端的photoshop初探的学习笔记

    写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来.温馨提示:比较乱,写给自己看的,看不下去,按ctrl+W 笔记内容 ...

随机推荐

  1. C语言undefined behaviour未定义行为

    C语言中的未定义行为(Undefined Behavior)是指C语言标准未做规定的行为.同时,标准也从没要求编译器判断未定义行为,所以这些行为有编译器自行处理,在不同的编译器可能会产生不同的结果,又 ...

  2. Berkeley DB基础教程

    一.Berkeley DB的介绍 (1)Berkeley DB是一个嵌入式数据库,它适合于管理海量的.简单的数据.如Google使用其来保存账户信息,Heritrix用其来保存froniter. (2 ...

  3. Data Mining 概念

    数据挖掘概念: 数据挖掘是在大型数据库中.自动的发现有用信息的过程. 然. 这个有用只是一个感性的东西.比如我们从表中索引一行数据.这个算不上数据挖掘.因为它依赖的是数据的明显特征. 数据挖掘基本步骤 ...

  4. SQL Server 与 Windows 内存使用上的约定

    什么时候SQL Server 会释放出自己的内存!以提供给别的程序用呢? --------------------------------------------------------------- ...

  5. CURL 和LIBCURL C++代码 上传本地文件,好不容易碰到了这种折腾我几天的代码

    解决了什么问题:curl在使用各种方式上传文件到服务器.一般的文件上传是通过html表单进行的,通过CURL可以不经过浏览器,直接在服务器端模拟进行表单提交,完成POST数据.文件上传等功能. 服务器 ...

  6. javascript 事件设计模式

    http://plkong.iteye.com/blog/213543 1. 事件设计概述 事件机制可以是程序逻辑更加清晰可见,在JavaScript中很多对象都有自己的事件,如:button有onc ...

  7. boost库的安装,使用,介绍,库分类

    1)首先去官网下载boost源码安装包:http://www.boost.org/ 选择下载对应的boost源码包.本次下载使用的是 boost_1_60_0.tar.gz (2)解压文件:tar - ...

  8. index seek与index scan

    原文地址:http://blog.csdn.net/pumaadamsjack/article/details/6597357 低效Index Scan(索引扫描):就全扫描索引(包括根页,中间页和叶 ...

  9. iscroll5 版本下的 上拉,下拉 加载数据

    上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...

  10. 杭电oj1236 排名

    Tips:此题比较简单,最好将每一个学生的信息构建一个结构体,另外需要注意的是,若分数相同,排序按姓名排序,我看网上很多都是使用<algorithm>中的sort算法,只需重写cmp函数即 ...