第一部分:界面设置

1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框。名称可随意填写。“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素。“高度”可选择为2000,“单位”选为像素。“分辨率”设置为72px;“颜色”设置为RGB颜色,8位。“背景内容”为透明。之后点击确定即可打开。这里建议最好“存储预设”,这样以后就可以直接打开用了。如下:

2.将移动工具的“自动选择”不要打勾,后面的选择使用“图层”。如下:

(技巧:如果我们需要选择psd的某一个图层,可直接ctrl+点击该图层,就可以获得相应图层了。

3.“视图”—“显示”—“智能参考线”勾上,“视图”-“标尺”(ctrl+R)勾上。

4.在右边的小窗口中,通过“窗口”,只保留“字符”、“信息”、“图层”、“历史记录”。

 在“信息”窗口的右上角点击面板选项,“颜色:全部设置为RGB颜色,“标尺单位”像素,勾选”文档大小“、”文档尺寸“、”当前工具“。如下图:

5.”编辑“—”首选项“—”单位与标尺“,将”单位“修改为像素。列尺寸和分辨率不用设置。如下图:

6.此时已经设置好了。为了方便以后使用,可将之存储起来。”窗口“—”工作区“—”新建工作区“—”名称“存储为web切图—将”键盘快捷键“和”菜单“勾选上—存储。

第二部分:传统切图方式

  即选择第五个工具:切片工具。我们可以看到在切片工具之后还有一个切片选择工具。那么他们都是什么意思呢?

  切片工具主要是用来将大图片分解为几张小图片,因为现在的网页中图文并茂,也正因如此打开一个网页所须的时间就比较长,为了不让浏览网页的人等待时间太长,所以他们将图片切为几个小的来组成。而切片选择工具就是来选择不同的切片。

  切片工具可以是我们在一个psd文件中将自己想要的图片切出来,比如:

其中蓝色数字表示的是我们主动选择的切片,而灰色数字表示的是被动选择的切片。

  而如果我们对其中某一个切片不满意,这时候就可以使用切片选择工具选择该切片,然后再做出相应的的调整。如果不想要某一个切片,直接使用切片选择工具选中该切片,点击del,即可完成删除(注意:只能删除主动选择的图片,而不能删除被动选择的图片)。

当我们切片完成之后,即可导出图片,导出方式为:文件--存储为web所用格式,在对话框中选择PNG-8,之后直接点击存储,选择合适的位置即可。最后就会得到一个切片完成的image文件夹,里面保存这所有切片,且这些切片没有重复之处,如果将这些切片拼接起来,将得到一个一张完整的图片。

  这种切图方式存在一个缺点:即不能保证精确性。下面,我将介绍一种精确的切图方式。

第三部分:精确切图方式

  实现精确切图,我们可以使用文件--脚本--将图层导出到文件,然后选择将要保存的位置,选中PNG-24,最后把下面的透明区域、交错、透明图层全部选中,然后直接运行,这时在图层浮动窗口中我们可以看到ps在自动运行导出图片,这个过程所持续的时间应当与图片的大小和复杂程度成正比。更多...

 

第四部分:下载免费PSD文件的网站

1.http://365psd.com/

2.http://www.bestpsdfreebies.com/

3.知乎回答:有哪些可以收集不错的PSD素材的网站?

photoshop切图介绍的更多相关文章

  1. photoshop切图介绍 && photoshop下载与破解

    第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...

  2. 前端开发工程师 - 01.页面制作 - 第1章.Photoshop切图

    第1章--Photoshop切图 工具.面板.视图 什么是切图? 1. 从设计稿(.psd)中切出网络素材,如按钮.图标.logo.背景图等 2. 编写代码,在代码中使用图片,生成静态页面 --给网页 ...

  3. 使用Photoshop切图的三种方式

    PhotoShop切图的三种方式 1. 原始切图 (1)选择工具栏中的切片工具 (2)找到要切片的元素,在右侧的图层框中,使元素背景隐藏,然后用切片工具选择需要切片的元素     (3)导出为web常 ...

  4. photoshop切图

    1.首先需要用photoshop把psd源文件打开,看看源文件的整体布局.源文件是分层的,方便切图的层次. 2.切图的工具叫做"切片",在左侧面板可以看到.右击可以看到" ...

  5. 页面制作学习笔记:D2.Photoshop切图基础知识

    一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 < ...

  6. photoshop 切图技巧

    前端切图技巧 手动切图 参考线切图 精准切图 自动切图 原文地址 http://www.cnblogs.com/w-wanglei/p/5598336.html

  7. 前端开发使用Photoshop切图详细步骤

    切图的主要目的是从设计师提供的psd中获取网页制作所要的资源 一.界面设置 1. 新建文件,调整界面大小,背景设置为透明 2. 自动选择,把组切换为图层 3. 添加窗口内容,一共四项:图层.历史纪录. ...

  8. 前端photoshop 切图神器cutterman

    1. 切图真的是就件很费力的事情,接下有给大家提供一个工具,本人觉得还不错 http://www.cutterman.cn/ 请参考这个网站,安装方法也有,很简单,我就不说了,赶紧点连接去注册帐号吧

  9. 一个好用的PHOTOSHOP切图插件(CutterMan插件下载)

    请关注CutterMan官方微博,分享本站点到自己微博中@Cutterman,私信TA,就有啦~~ 下载地址:http://www.cutterman.cn/ 也许你兴冲冲的下载了,然后发现安装不上, ...

随机推荐

  1. 【BZOJ1002】【FJOI2007】轮状病毒(生成树计数)

    1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1766  Solved: 946[Submit][Status ...

  2. latex中页面距离的设置

    1.页面设置 a4 会给你一个较小的页面,为了使用更多的控制,可用 geometry宏包和命令 \layout . 2.改变长度 在latex里改变长度的命令是 \addtolength 和 \set ...

  3. 在eclipse中使用第三方库总结

    一.建立user library 导入第三方jar文件,最简单的方式是:右键工程/属性/java build path/add external jars. 另一种方式是:window/prefren ...

  4. [转] ServletContext 与application的异同

    相同:其实servletContext和application 是一样的,就相当于一个类创建了两个不同名称的变量.在 servlet中ServletContext就是application对象.大家只 ...

  5. 【UOJ #150】【NOIP 2015】运输计划

    http://uoj.ac/problem/150 用树链剖分求lca,二分答案树上差分判断. 时间复杂度$O(nlogn)$,n,m同阶. #include<cstdio> #inclu ...

  6. 【BZOJ 1568】【JSOI 2008】Blue Mary开公司

    经典的splay维护凸壳,但是看了看zky学长的题解最后决定写线段树维护标记永久化. Round1考到了这个之后一直没有理解标记永久化,CTSC也因为自己的缺陷丢掉了一些部分分,so sad 看来以后 ...

  7. JS自动填写分号导致的坑

    JS中会自动清除句子和句子之间的空格以及tab缩进, 这样就可以允许用户编写的代码更加随性和更加可读, 在该行代码解析的时候如果该行代码可以解析, 就会在该行代码最后自动填写分号,如果该行代码无法解析 ...

  8. 网络流 POJ2112

    题意:K个产奶机,C头奶牛,每个产奶机最多可供M头奶牛使用:并告诉了产奶机.奶牛之间的两两距离Dij(0<=i,j<K+C). 问题:如何安排使得在任何一头奶牛都有自己产奶机的条件下,奶牛 ...

  9. C#-面向对象的三大特性——多态(虚方法与重写、抽象类、接口)

    多态 同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果.在运行时,可以通过指向基类的指针,来调用实现派生类中的方法. 编译时的多态性:编译时的多态性是通过重载来实现的.对于非虚的成员来说 ...

  10. dede使用方法----如何去掉dede自带的版权

    最近有朋友问如何将dede的Power by DedeCms去掉,一来为了安全,二来外链确实有些影响,这里分享下去除方法,需要的朋友可以参考下   自从dedecms织梦系统更新到6.7日的版本,底部 ...