ps切片

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

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

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

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

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

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

(三)切片取消;

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

(四)编辑切片选项;

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

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

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

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

  

时间: 2024-10-05 11:39:24

ps切片的相关文章

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

PS对于WEB设计和前端开发来说都是不可或缺的工具,基本的用途是用来处理网站的LOGO.Banner 以及按钮图标来着,但是一旦遇上要把整个PSD文件转成网页就让人非常头痛了,可能还不太专业.后来在公司做个网站项目中,美工一般都能给出切图和CSS文件,解决了很大的问题.那个时候我还没想到PS还有一个很重要的工具[切片],这个工具提供了一个非常实用的功能,将切片导出为DIV+CSS布局.以下是摘抄:http://www.blogjava.net/algz/articles/297304.html

用ps切片快速制作静态网页

利用ps快速的制作静态网页 步骤: 1.在ps中打开一个网页模板,利用切片工具进行剪裁 2存储方式是:存储为web所用格式 3设置存储像素1366.GIF格式 4保存到文件夹中以html+图像 的格式 5打开html,打开方式为DW方式打开 6:根据网页在进行对其修改

PS 切片工具实现CubeMap制作

1.在PS中导入待制作的图片 2.设置图像大小,整张图片要划分成3(高)*4(宽)片,假设每张图大小为256*256,那么整张图高=3*256=768:宽=4*256=1024,则设置如下 3.选择工具"切片选择工具" 4.右击图像选择切片划分 5."水平划分为"复选框勾上,设为3,"垂直划分为"复选框勾上,设置为4,如下图 6.到此,结果如下 对比下图,我们要的就是5,2,6,10,7,8这六张图. 7.文件菜单->存储为 Web 所用格

PS切片时,如何选择图片保存格式

在网页设计中,对图片进行剪切是必不可少的一个步骤. 但一个页面中,需要用到的图片太多,为了节省时间,当然不能一个一个的裁剪保存,好在PS工具提供了一个快捷的功能:切片(快捷键:C,来源应该为cut). 我们可以通过切片把需要剪切的图形在页面中先规划设定出来,然后Ctrl+shift+Alt+S就能一次性导出并保存下来. 那么问题来了,保存的时候有5种格式,应该选择哪一种呢: 通过多次试验以及资料查证,目前总结如下: 1.色彩丰富.图像较大的图片,选择JPG格式: 2.尺寸较小.色彩单一和背景透明

为什么PS切片可以提高网页浏览速度?

切成小块浏览的时候就可以一块一块的加载,一小块一小块的显示,要是不切,就整个一大块加载好了才现实,网速是经常波动的,如果图片过大,加载起来就不稳定,当然时间要久一些.而且切成小片,可以更节省图片的空间,因为色彩单一的图片,你可以用GIF的格式代替,用不着JPGE,要是整块就一个颜色的,你甚至不用切,可以直接用代码写.所以,切片的时候,没必要整个一大块切下来.

手把手带你认识PS切片工具

在 网页中处理图片时,有时会想要加载一个大的图像,比如页面上的主图,或者是背景.如果文件很大,它加载的时候需要的时间就会长,尤其是用户网速比较慢的时 候.你可以通过压缩来减小文件大小,但是这会使图像质量受到影响,压缩文件也要适可而止.因此你需要注意以下几个问题:一是实际文件的大小:二是分辨率: 三是压缩.推荐学习E学堂photoshopCS6从入门到精通 解决这个问题的方法就是把图片分割,它将允许你在加载图片的时候可以一片一片地加载,直到整个图像出现在你的屏幕上. 一.它的使用原理 首先概述下它

ps还能用脚本切片?

最近在慕课网上看有关于ps切图的视频,发现ps 切片的水还挺深的.这相当于我的一篇学习笔记吧.对于ps的基本切图我觉得对于前端人员来说就是a piece of cake.但是对于ps的精准切图,我不知道你们有没有用过,反正我是没用过... 相关课程链接:http://www.imooc.com/learn/506 下面说一下流程: 1.文件------->脚本------->将图层导出到文件 2.选择文件保存路径,文件保存的类型. 3.大功告成.此时你就可以看到切出来的图层了.有没有感觉狂拽酷

PS,UI,美工

详解PS切片工具的切图使用技巧 PhotoShop教程:切图那点事儿 关于网页制作的,什么是切图,切图要达到什么目的,用什么工具来切

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加