第一部分:界面设置

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. MinHash算法

    MinHash是用于快速检测两个集合的相似性的方法.改方法由Andrei Broder(1997)发明,并最初用于搜索引擎AltaVista中来检测重复的网页的算法.它同样可以用于推荐系统和大规模文档 ...

  2. team foundation server——网络代码管理工具

    像我们平时有时会莫名的弹出一个如下图所示的提示框,这个是什么呢?这个就是有人用team foundation server进行过代码管理的项目 那么team foundation server到底是什 ...

  3. android SwipeRefreshLayout google官方下拉刷新控件

    下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...

  4. ActiveMQ_监听器(四)

    一.本文章包含的内容 1.列举了ActiveMQ中监听器的使用 2.spring+activemq方式 1 2 3 <!-- 消息监听容器(Queue),配置连接工厂,监听的队列是queue3, ...

  5. Jenkins_获取源码编译并启动服务(一)

    一.安装Jenkins插件(可以手动安装,使用推荐安装容易卡死) 系统管理-->插件管理-->可选插件 Folders Plugin OWASP Markup Formatter Plug ...

  6. 状态压缩 poj 3254

    n * m 个玉米 n*m个数字 0 或者1 1可以种玉米 0 不能  种玉米不能相邻 计算有几种 种的方法 #include<stdio.h> #include<algorithm ...

  7. 网络流 poj 3308 最小割

    t个样例 n*m的矩阵 L个伞兵 给出每行每列装激光的花费 伞兵的位置 要求杀死所有伞兵 总费用为这些费用的乘积  求花费最小 建图  源点 ->   行   -> 列  -> 汇点 ...

  8. node.js-概念

    官方网站:http://nodejs.cn/ 1.Node 是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不 ...

  9. mysql-now()读取当日日期-格式化

    使用系统时间now(): MYSQL 获取当前日期及日期格式获取系统日期: NOW() 格式化日期: DATE_FORMAT(date, format) 注: date:时间字段format:日期格式 ...

  10. 让webstorm支持avalon语法自动补全

    在file菜单下选择Settings,选择Editor ——> Inspections ——> Html ——> Unknown HTML tag attibute添加以下标签ms- ...