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

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

解决这个问题的方法就是把图片分割,它将允许你在加载图片的时候可以一片一片地加载,直到整个图像出现在你的屏幕上。
一、它的使用原理

首先概述下它的工作原理,当你有一个需要花很长时间来加载的大图像时,你可以使用Photoshop中的切片工具把图像切成几个小图。这些图像将被作为一个单独的文件保存,还可以进行优化通过保存为中Web所用格式。

此外,Photoshop生成HTML和CSS以便用来显示切片图像。在网页中使用时,图像通过使用前面提到的HTML或CSS在浏览器中重新组合以便达到一个平滑流畅的效果。下面是一个关于图像切片的例子。

二、切片的基础知识

为了简单起见,我们只在一个图上使用切片工具。在这个例子中,我使用的图片大小为960 x722px。在我们开始之前你需要了解一些知识:

a.在创建切片时,你可以使用切片工具或构建使用层。

b.切片可以选择使用选择工具来选中。

c.你可以移动它,设置它的大小,还可以让切片与其他切片对齐。而且你还可以给切片指定一个名称,类型和URL。

d.每个切片都可以通过保存时的网页对话框进行优化设置。

按下键盘上的C键,选中裁剪工具,右键选择切片工具。

当您创建切片时,你可以进行如下三个样式设置:正常,固定长宽比和固定大小。

a.正常:随意切片,切片的大小和位置取决于你在图像中所画的框开始和结束的位置

b.固定长宽比:给高度和宽度设置数字后,你得到的切片框就会是这个长宽比

c.固定大小:固定设置长和宽的大小

当分割图像时你会碰到一些选项。如果精确度不那么重要时,你可以手工切片图像,必要的时候,可以使用切片选择工具对已完成的切片图像进行调整。如果精确度很重要,可以使用参考线在图像上标出重要的位置。

在顶部的切片菜单栏,点击C或切片工具激活它片上面菜单栏图片,画好参考线后选择基于参考线的切片的按钮。

它就会自动为您绘制切片。你还可以使用切片选择工具重新定位切片。

三、编辑切片信息

创建切片之后,您可以编辑切片信息通过以下两种方式中的任一种。一种要做的就是点击切片选择工具,单击你想编辑的切片,然后点击菜单栏中>为当前切片设置选项的按钮。

另一个选择是右键单击切片,在弹出的菜单中,选择编辑切片选项。

两种选择都将弹出如下的切片选项对话框。

正如您所看到的,对话框里有许多设置。

a.切片名称:打开网页之后显示的名称

b.URL:点击这个被编辑的图片区域后,会跳到你输入的目标网址内

c.目标:指定载入的URL帧原窗口打开,表示是在还是在新窗口打开链接

d.消息文本:鼠标移到这个块时浏览器左下角显示的内容

e.Alt标记:图片的属性标记,鼠标移动到这块时鼠标旁的文本信息

f.切片的尺寸:设置块的x、y轴坐标,W、H的精确大小
四、保存网页

一旦你满意你的布局后,选择文件>存储为Web所用格式,保存图片。

在这里,您可以为切片设置文件类型或者使用网页对话框中列出默认设置。完成设置后,单击存储按钮。

这时会弹出一个存储优化结果的对话框,底部的对话框是几个重要的设置。

a.格式:你有三个选择,分别是HTML和图像,仅限图像和仅限HTML。

b.设置:您选择自定,背景图像,默认设置,XHTML和其他。

c.切片:所有切片,所有用户切片和选中切片。

对于本教程我使用的是HTML和图像(一般都这么保存),默认设置和所有切片。完成设置后,选择您想要保存文件的文件夹,并单击保存按钮。这时会创建一个HTML文件和一个包含六个图像文件,它们在同一个大文件夹中。

这是一个在Adobe Dreamweaver中的分区屏幕的HTML文件。你可以看到,代码很简单也很好用。

五、结论

正如您可以看到的,当你有一个大图片时,图像分割是非常有用的。通过将它分解成小图,加载时小图一个一个加载,让用户逐步看到更多。这对于网速慢的用户很有帮助

快来e良师益友网学习更多的平面设计教程

时间: 2024-10-13 13:44:52

手把手带你认识PS切片工具的相关文章

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 所用格

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

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

ps切片

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

Photoshop切片工具的使用

用了这么久photoshop还没用过切片工具,为什么呢? 这充足说明这个工具不是那么实用! 呵呵,开了个玩笑.虽然平时不用,但偶尔用到发现还真是特别的方便. 步骤: 首先切片工具的自动切图功能只适合用于背景图层,所以把你要的图片保存成一张背景 然后选择切片工具 直接右键点击划分切片 在跳出来的窗口就可以选择你要划分的模式了 接下来是保存,点击文件 – 存储为Web和设备所用所用格式 直接点击存储选择要保存的位置. (PS,这里保存的格式应该是GIF的) 然后可以在保存的地方看到你切的文件了.

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

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

手把手带你搭建开发环境

俗话说得好,工欲善其事,必先利其器,开着记事本就想去开发 Android 程序显然不是明智之举,选择一个好的 IDE可以极大幅度地提高你的开发效率,因此本节我就将手把手带着你把开发环境搭建起来. 需要java环境jdk    jdk环境搭建教程 需要的软件 1.Android SDK Android SDK 是谷歌提供的 Android 开发工具包,在开发 Android 程序时,我们需要通过引入该工具包,来使用 Android 相关的 API 2. Eclipse     相信所有 Java

手把手带你掌握新版Webpack4.0

课程介绍:Webpack 目前无论在求职还是工作中,使用越来越普及.而想要学懂,学会Webpack更绝非易事.本课程完整讲清最新版本下的 Webpack 4 知识体系,通过 基础 + 实例 + 原理代码编写 + 复杂案例分析 完成Webpack4的分析与讲解.更重要的是让你对整个前端项目的构建有一个全局化的认识,实现能力思想双升级. 课程目录:第1章 课程导学(打消你的学习疑虑)掌握Webpack越来越成为前端工程师的标配技能,本章会对课程整体进行介绍,打消你的学习疑虑.1-1 课程导学 第2章

手把手带你自制Linux系统之二 简易Linux制作

手把手带你自制Linux系统之二 简易Linux制作 本文利用CentOS5.5自带内核制作一个Mini Linux. 打开准备工作中创建的CentOS,为另一个虚拟机MiniLinux添加一个最小Linux所需要的文件. 1. 创建分区 为准备好的磁盘创建两个主分区,大小分别为20M和512M. 使用fdisk命令创建分区详细过程: fdisk /dev/hda 创建第一个20M分区依次输入: n --> p --> 1 --> <Enter> --> +20M 这几

第十课 切片工具 修复画笔工具 修补工具 颜色替换工具

切片工具.切片选取工具K 切片工具:用来划分图像的区域 切片选取工具:可以用来选中所划分的切片,并且移动或者删除等. 将图像格式存为网页Ctrl+Alt+Shift+S,再次打开时可以看到所划分的裁切区域. 修复画笔工具:J 修补工具:J 颜色替换工具:J 修复画笔工具的用法:按住Alt键不放,在需要复制的地方单击即可进行取样,再需要放置的地方进行涂抹即可,涂抹时十字光标的走向决定涂抹被覆盖的对象/复制得来的对象会受当前层颜色的影响,若在属性栏中将正常模式改为“替换”则不会受影响./若不勾选“对