分享怎么使用PS切图。

怎么使用PS切图?使用PS切图的目的其实就是将大的设计图分割成多个小图片,通过网页代码定位后台相册的照片来显示前端网页的效果,当然,在处理某X宝的图片的时候也是可以使用该方法的,具体见下文怎么使用PS切图的。

早年间我学切图的时候,网上就没看到过什么教程的,只能靠自己摸索学习,挺简单的东西还是绕了点弯子。这次写出来应该会帮助其他人学会切图的。

教程中使用的软件、工具:

Photoshop CS5下载

Dreamweaver CS6 下载

怎么使用PS切图?

1、先说下软件,我用的是PhotoShop CS5 这个版本,你要用其他版本也行,反正对切图这个功能影响不大。

怎么使用PS切图?PS切图后怎么保存到本地?

2、如上图红框所示,我们要用到的切图工具有两个,一个是切片工具,另一个是切片选择工具。左边有个小按钮,你按住它这三个选项就会显示出来。

怎么使用PS切图?PS切图后怎么保存到本地?

上图是我等下用做示范的图片

4、在切图之前有一点需要说明的是,如果你需要辅助切图,你可以先添加参考线。在PS上方的菜单栏,你可以在视图里找到新建参考线选项。如上图,我已经添加两条参考线,因为参考线在鼠标靠近的时候有吸附功能,所以切图不容易切错位置。

怎么使用PS切图?PS切图后怎么保存到本地?

5、好了现在我们开始切图,我用切图工具先裁一个框出来,我们可以看到图片上已经有01的框,但是右边02显示为灰色。

怎么使用PS切图?PS切图后怎么保存到本地?

6、我继续用切图工具裁第二个框,记住01和02的框一定要贴合,否则会出现一个03的框。如果你这次切图位置没切对,可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的,你可以把鼠标放在边框上试着移动下,看下效果。你只能移动02,不能移动01。

怎么使用PS切图?PS切图后怎么保存到本地?

7、当我发现切图的位置出现错误,开始调整,刚才我把02位置往右挪好,它从02变成了03。

怎么使用PS切图?PS切图后怎么保存到本地?

8、然后我用切图选择工具选择01,这样我就能把01的位置调整正确了。

怎么使用PS切图?PS切图后怎么保存到本地?

PS切图后怎么保存到本地?

1、切好图之后就到最重要的步骤了,如上图所示,选择文件下面的存储为WEB和设备所用格式,最好能记住快捷键。

怎么使用PS切图?PS切图后怎么保存到本地?

2、图片格式为JPEG,它就是JPG,一样的。关键是品质的设定,我们都知道如果一张图片越大它在网上打开的速度就越慢,当我们把图片的品质设的越小,它的大小就越小,但是如果品质太差,图片会变模糊,所以一般情况下如果是网上使用的图片,品质可以设置60,既保证图片较小也不会模糊。这个数值由你自己设置,是大是小,具体看你的要求,试试就知道了。这里有个问题是你只是对其中一个切片设置品质,其他切片又要重新设置,所以存的时候最好检查一下。

怎么使用PS切图?PS切图后怎么保存到本地?

3、前面设置好后点击存储会显示以上界面。格式选项选择HTML和图像,默认是图像的,这样我们就能得到网页代码了。

怎么使用PS切图?PS切图后怎么保存到本地?

4、存好后得到一个图片文件夹和一个网页,你看到的网页图标可能跟我这个不一样,这个没有关系,因为我们的浏览器不一样。

怎么使用PS切图?PS切图后怎么保存到本地?

用DreamWeaver软件打开这个网页看到如上界面,我们需要的就是大红框中<table...</table>这段代码,待会拷贝到网页的后台里去的。拷贝之前要先把图片地址换一下,先把刚才那个images文件夹里的图片上传到网页后台图片空间里去,再复制图片的网络地址替换上图小红框里的那个地址。替换的原因是,PS存的图片地址是你电脑上的,在网络上无法使用,只有你把图片上传到网上别人才会看的到。

怎么使用PS切图?PS切图后怎么保存到本地?

以上便是教用户怎么使用PS切图的教程,各类网页在制作之前,一般都需要使用切图操作,切图的目的也就是更加精确的进行网页布局。

本文来自网络投稿,来自作者春天。不代表酷牛教程立场,如若转载,请注明出处:https://www.xukn.com/346490.html

(0)
春天春天
上一篇 2023-06-16 17:45
下一篇 2023-06-16 17:46

相关推荐

  • 小编分享怎么用PS做铅笔画

    怎么用PS做铅笔画?相信大家在路上都有看到画师用铅笔来帮人画肖像,如果你没那个时间的话,可以使用PS等软件来制作铅笔画。下面小编以大幂幂的图片为例,教大家用PS来制作铅笔画。 首先...

    2023-06-20 PC教程
    0200
  • 小编分享如何清除PS中最近打开文件记录

    相信有用过PS的朋友都清楚,在使用该软件打开文件后,这些文件便会被保存在最近打开的文件记录中。那么,该如何清除PS中最近打开文件记录呢?不清楚具体操作的朋友,可以参考一下小编分享的...

    2023-07-05
    0200
  • 小编教你ps怎么修改GIF动图

    ps怎么修改GIF动图?ps是一款图片编辑软件,用户可以使用其对图片进行编辑处理。GIF动图非常有趣,想要使用ps修改GIF动图,具体该怎么操作?下面就是使用PS修改GIF动图的具...

    2023-06-25 PC教程
    0200
  • 用 PS 在图片上加网格线的小技巧分享。

    PS 软件是大家常用的一款修图工具,如果你需要给一张图片制作网格效果,就可以用 PS 来完成。到底我们该怎么用 PS 给图片做网格效果呢?一起来看小编带来的详细介绍吧。 PS 怎么...

    2023-05-21 其他教程
    0260
  • PS使用常见问题整理,解除你的困扰。

    虽然Photoshop的使用方法稍显复杂、麻烦,但是它的修图能力强大,很多时候只能用它进行图片处理。根据用户反馈,本文整理了一些关于使用PS软件的常见问题,大家可以进行了解。 PS...

    2023-05-14 其他教程
    0300
  • PS图片调色之修改人物衣服颜色,看一遍就会了。

    图片调色是 PS 后期修图环节中的一个普遍要求,例如更换证照底色、修改人物服装颜色等等,为了更好应对这些情况,我们需要多学一些技能。就以修改人物衣服颜色来说,我们今天再来介绍一种简...

    2023-05-21 其他教程
    0260
  • 图片处理之添加备注,可以选择PS注释工具。

    日常办公,我们可以在Word、PPT、Excel等文档中添加注释,同理,如果需要在图片中添加备注,可以使用PS的注释工具。利用Photoshop的备注工具可以针对图片任意区域进行留...

    2023-05-14 其他教程
    0270
  • 分享怎么使用PS抠图

    怎么使用PS抠图?许多小伙伴在浏览图片的时候,都会发现图片中的某些元素非常的漂亮,想要将这些图片扣取出来使用。那么今天小编就带着大家来学习一下如何使用PS来扣取图片中的素材吧! 操...

    2023-07-13 PC教程
    0190
  • 分享PS填充快捷键是什么。

    PS填充快捷键是什么?PS填充快捷键怎么用?使用PS作图的过程中,填充颜色是最常使用的操作,为了提高效率,我们就必须掌握各种快捷键,才能最快速制作出美丽的图片。下面小编就给大家分享...

    2023-06-17 PC教程
    0210
  • 分享PS如何拉伸不变形

    PS是我们经常使用的一款图片编辑软件,有时候我们缩放人物的图片会发现变形,你知道PS如何拉伸不变形的吗?接下来我们一起往下看看PS拉伸不变形的方法吧。 方法步骤 1、首先你先将人物...

    2023-06-29 PC教程
    0200
  • 我来教你PS液化怎么用(ps液化怎么用不了)

    PS是一个功能强大的图片编辑工具,很多用户在使用的时候,还不知道PS液化怎么用,下面小编就为大家详细的介绍一下,大家感兴趣的话就一起来了解下吧! PS液化怎么用?PS液化使用技巧 ...

    2023-05-26 安卓教程
    0230
  • 小编分享Ps图片如何调色

    Photoshop是一款非常优秀的修图软件,但不少小伙伴在使用Photoshop的时候会碰到前景色无法调整的情况,那么遇到这种情况应该怎么办呢?下面就和小编一起来看看应该如何去操作...

    2023-07-18
    0190
  • 说说ps怎么添加第二张图片进去。

    关于这个问题很多小伙伴都不知道,下面乖乖小编就介绍一下,ps是非常不错的专业p图软件,很多新手朋友在使用ps时对很多功能都不太了解。本文为大家带来ps怎么添加第二张图片进去的方法,...

    2023-08-14 其他教程
    0310
  • 我来分享PS拉伸放大图片变形

    那些经常使用Photoshop来拉升放大图片的朋友都会面临一个相同的问题,那就是“图片变形”,进而影响到整体的视觉效果!那么,是否有方法可以有效的避免这一问...

    2023-07-02 PC教程
    0200
  • PS修图技巧之创建快照,给你的一剂“后悔药”。

    大家在使用Photoshop进行图片处理时一定要养成好的习惯,例如创建快照,简单来说,即对图像的任何状态进行临时拷贝。建立图片快照,如果后续操作出现失误,你可以选择快照进行重新编辑...

    2023-05-13 其他教程
    0280

发表回复

登录后才能评论