kl800.com省心范文网

photoshop CC 必学_图文

Photoshop 是视觉设计师最强有力的武器之一,其实 Photoshop 也为前端开发同学带来很多惊喜。特别是从 Photoshop CC 版本 开始,它变得越来越有趣。今天笔者就其中几个新特性给大家介绍 一下。如果您也有更多新的发现,请在下方留言与大家进行讨论。
关于 Photoshop CC 的好文: 《涨姿势!PHOTOSHOPCC 功能手册》 《提速秘笈:PHOTOSHOP CC 使用技巧全公开》

自动切图(含 WebP、SVG 格式):
前端开发人员经常需要将很多图层切出成独立的图片。 有了自动切 图功能,无需花更多时间来切图了。只需在图层名后添加相应格式 后缀(如.png),即可自动输出所需格式的图片。
? ?

请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态; 依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;

试着修改某个图层命名(如 iTunes.png),然后检查当前 psd 文件 所在目录下的“文件名-assets” 的目录,打开此目录,发现 iTunes.png 已经躺在里面了。

常用技巧:

@2x Retina 图片的输出,在图层前添加 200% 即可,如 200% logo@2x.png ; 开启 WebP、 SVG 格式的自动输出: 新建 generator.json 文件, 内容如下:
{ "generator-assets": {

"svg-enabled": true, "webp-enabled": true } }

将此配置文件拷贝至: Windows: (Win+R 后输 入 %USERPROFILE% )目录下,如 C:Usersxxx Mac OS: $HOME 如“Macintosh HD>Users>xxx” 目录下 WebP 输出暂只支持 Mac OS。

复制 CSS
Photoshop CC 终于推出了“复制 CSS” 功能。 它能让开发人员快速 获取形状的 CSS 代码。其实不少设计师也很想学习 CSS,有了这

个功能,可以让这些爱学习的设计师熟悉 CSS 代码与图形的对应 关系;

右击图层面板上的图层,选择“复制 CSS”,或点击菜单“图层->复 制 CSS”; 多个图层的批量获取,请选择多个图层,执行 Ctrl+G,将所选图 层转为图层组。然后在该组上右击,选择“复制 CSS”,即可批量获 取 CSS 代码。

智能对象暂不支持“复制 CSS”功能, 您可以栅格化该图层再来使用。 当前的版本的此功能,包含了很多冗余信息和不太友好的写法,可 能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能, 您可以下载“PhotoshopCopyCSS”来增强 Photoshop CC 自带的 “复制 CSS”功能,提升 CSS 代码的真正采用率;目前的优化有: * 自动识别 CSS Sprite 图片,获取 background-position 信息; * 自动识别是否图标; * 优化 CSS3 渐变、文字、边框、阴影等 CSS 代码; * 优化 RGB 颜色值成 十六进制颜色; * 去除冗余 CSS 属性,如 position, z-index, left, top 等。 您也可以反馈更好的建议,让这个功能真正为大家所用。

图层管理
前端开发同学接手的 psd 文档,往往有大量图层,我们需要对其 进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图 层类型、名称、效果、属性等条件进行快速定位图层。

使用此功能可以很方便定位到当前选定图层, 非常适合含有大量图 层的 psd 文档。

另外隔离图层也是个很不错的功能。开启隔离图层功能之后,我们 可以通过移动选择工具,点选画布上的内容,找出我们需要的图层 将其整理成一个独立的 psd 文件。

WebP 插件
WebP 是 Google 为减少数据量、 加速网络传输的目的而开发的图 片格式。特别适合移动端图片的传输。大大节省带宽,目前只有 Google Chrome 浏览器对其原生支持。 Photoshop CC 的 Mac OS 版自带输出 WebP 功能。 Windows 下 您可以下载此插件来输出 WebP 格式。安装后,可以在 Photoshop 菜单“文件->另存为” 对话框中选择“WebP 格式图片”。 WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win

动作条件
Photoshop CC 新增了动作条件,可以根据不同条件执行命令或其 他动作。

智能参考线/使用图层颜色
这两个功能并不是 Photoshop CC 的新功能。为什么要在这里说 呢,因为它能辅助我们一秒居中对齐、一秒贴边,这个非常实用。 另外也建议设计师使用图层颜色来标出改动位置, 这样前端开发同 学便能快速定位图层。

原文地址:http://www.uisdc.com/ps-photoshop-cc-fd

用好 PS CC,会在设计效率方面带来很大提升。

1、Photoshop CC 精彩新功能
推荐阅读这篇《最全的 PHOTOSHOP CC 总结》

多重形状和路径选择
使用 Photoshop CC 提供的多重形状和路径选择,可以同时选取 多个路径、 形状和矢量蒙版, 不需按多次鼠标即可完成更多任务。 即使在拥有许多路径的多图层复杂图像文件中,也可以使用新的 滤镜模式,直接在画布上锁定路径 (及任何图层)。

简易绘制虚线
PS CC 不需要手工计算像素来进行绘制虚线,虚线绘制变成基础 控件。

文字优化
旧版本的 PS 在使用微软雅黑字体时, 无法清晰显示。 而 PS CC 增 加了 WindowsLCD 的文字选项,编辑文字时选择 WindowsLCD, 就可在 PS 中获得文字外观的真实预览效果。

背景存储与自动复原

使用 PS CC,能够在背景储存大型的 PS 档案,同时还可继续工 作;也可透过全新的自动复原选项保留所做的编辑,而不会中断 工作进度。

PS 软件效率更高,大型文件处理更快
PS CC 对代码进行了优化,软件算效率有了很大的提升。

可编辑的圆角矩形
PS CC 可以生成 4 个不一样圆角的矩形,圆角设置更加精准。

更精细的描边
描边能精确到 0.x,能做更加精致的效果。

2、简单设置 Photoshop CC

说了这么多好处,也谈谈问题。在使用 PS CC 的过程中,笔者经 常遇到假死、闪退、崩溃的问题。出现这些问题的主要原因是目 前大部分用户使用的都是机械硬盘,而从 PS CS6 开始就增加了 一个后台储存的新功能,该功能的好处是定时给你的 psd 文件进 行保存,但这个功能在设计的时候并没考虑到目前大部分用户使 用的都是 7200 转速的机械硬盘。我们平时做设计稿很有可能同 时打开多个甚至数十个 psd 文件, 如果当前运行的十个 psd 文件 都同时储存, 而刚好我们也在进行 PS 操作, 那出现假死、 闪退、 崩溃的机率就非常大了。 所以为了使用更稳定,可以在使用 PS CC 前先做一下如下设置, 关闭后台储存功能。

3、Photoshop CC bug 一览表和解决方法
除了关闭后台存储来降低软件崩溃的问题,这里笔者还根据工作 经验,汇总了一些 PS CC 的常见问题。部分问题可以解决,但仍 有部分问题只能留待下个版本的更新优化。

习惯篇

阅读之前, 优设哥特别向您和您所在的团队推荐 《PS 礼仪手册》 ! 网页设计师必须修炼的内功技法,更是不可或缺的 WEB 设计指 南。 还有这篇浏览量过五万的 PS 技巧! 《设计师应该知道的 17 个 PS 技巧》

1、同一个项目尽量在一个 psd 里
在项目中统一功能块、功能尽量保存在同一个 psd 里,日后使用 会更加方便,节约在不同 psd 文件里查找时间。

2、时刻保持图层命名、归类
良好的归类、图层、命名习惯,在团队合作中 psd 源文件可用度 效率更高,日后修改也会节省时间。

3、尽量使用智能对象
智能对象好处在于合并对象后不破坏对象,同时可以让这个合并 后的对象具有可编辑特性,同时具备同步更新功能。

4、在文件夹中加蒙版,操作一步到位
在文件夹加蒙版,再次修改的时候只需要把图片放入文件夹即可, 可以减少重复调整蒙版等工作。

5、输出尽量简单
如果项目有命名标准建议以标准来命名,如项目没命名标准建议 用简单易懂的中文命名方式命名。

6、安装 psd 缩略图补丁
安装 PSD 缩略图补丁,一目了然 PSD 文件的内容,提高效率拒 绝猜测。

技巧篇 1、精简快捷键
如果你肯花一点点时间来练系这些快捷键,腾出你闲置的左手放 到键盘上,相信这会让你的工作更加快捷高效。

2、设置隔离图层快捷键
设置隔离图层快捷键,好处在于进入了隔离图层后不会对其他图 层进行误操作。

技巧:进入隔离图层后,按 Ctrl 可以进行对画布中的其他图层加 入此隔离图层。

3、色阶的解决办法
我们做效果图的时候经常会使用大面积渐变,时常会出现比较严 重的色阶问题,通常出现这些明显色阶的时候,可以通过使用高 斯模糊对色阶进行模糊化处理。

4、文本框的好处
当你需要处理一大段文字时,文本框的好处就会体现出来,它会 永远保持你字体的宽度整齐展现。

5、对齐像素
平时画 icon 的时候会常常使用到二分一、 三分一或者其他比例的 线条,所以一般会对网格对齐功能进行关闭。而做界面的时候我 们要求更加精准的界面,所以通常会开启网格对齐功能。 开启与关闭网格对齐方法: Ctrl+K 勾选 “将矢量工具与变化和像 素网格对齐 ”

6、图形可以合并
PS CC 图形图层集体合并后,仍然是可编辑图形。 技巧:合并图层快捷键 Ctrl+e,能把选中的图层快速合并。

说了这么多, PS CC 确实是一个有助于提升 UI 设计效率的好软 件。 当然, 以上所述仅为笔者个人经验总结, 如有错漏欢迎指出, 愿与大家交流!


photoshop CC 必学_图文.doc

photoshop CC 必学 - 最新photoshop2014 CC 秘籍,适合前端快速切图,如何使用 生成资源,直接生成图片,不需要切图,前端必学技巧

PhotoshopCC培训(超精华版)_图文.ppt

PhotoshopCC培训(超精华版)_企业管理_经管营销_专业资料。Photoshop,CC培训,(超精华版),2014 最新培训教程, Photoshop 入门 培训天津大学青年文化促进会宣传部 简介...

PhotoshopCC培训讲义(超精华版)_图文.ppt

PhotoshopCC培训讲义(超精华版)_计算机软件及应用_IT/计算机_专业资料。PhotoshopCC Photoshop 入门 培训天津大学青年文化促进会宣传部 简介 PSPhotoshop,是Adobe(奥...

完全掌握Photoshop CC白金手册_图文.pdf

北京清华大学学研大厦A座 邮编:100084 社总机:010-62770175 邮购:010-62786544 ...PhotoshopCC 软件是一款操作实践性很强的软件,每一位希望掌握该软件的用户都必 ...

《中文版Photoshop CC基础培训教程》教学教案_图文.doc

《中文版 Photoshop CC 基础培训教程》 配套教学教案 第1章 课时内容 教学目标 教学重点 教学难点 Photoshop CC 的基本操作 授课时间 90 分钟 课时 2 ? 掌握...

第1章 Photoshop CC 2015基础知识_图文.ppt

第1章 Photoshop CC 2015基础知识_工_高等教育_教育专区。《中文版Photoshop CC 2015图像处理入门到精通》课件 中文版《Photoshop CC 2015 图像处理入门到精通》...

第1章--Photoshop-CC-2015基础知识_图文.ppt

中文版《Photoshop CC 2015 图像处理入门到精通》 1 第 1 章 Photoshop CC 2015基础知识 2 本章展现学习运用Photoshop之前,首先要对图像的基本概念和色彩 模式有...

第2章 Photoshop CC快速掌握_图文.ppt

(时间:2学时) ◎◎◎ 2.1 2.2 2.3 2.4 2.5 2.6 Photoshop CC界面简介 图像操作的基本概念 提高Photoshop的工作效率 Photoshop中的图层功能 将图像导入到Ph...

PHOTOSHOPCC课件全解_图文.ppt

计算机应用基础 Photoshop CC特效合成及商业广告设计 学习目标学习任务

01 Photoshop CC基础入门_图文.ppt

01 Photoshop CC基础入门_计算机软件及应用_IT/计算机_专业资料。第1章 Photoshop CC 基础知识学习目标 ?了解Photoshop CC 基础知识 ?了解Photoshop CC的应用领域 ?...

Photoshop CC第01章_图文.ppt

Photoshop CC第01章_计算机软件及应用_IT/计算机_专业资料。数字

PhotoshopCC操作基础讲解_图文.ppt

计算机基础 第7章 photoshop CC 操作基础 第3页 主要内容 7.1 7.2 7.3 7.4 7.5 7.6 7.7 Photoshop CC常用概念 Photoshop CC工作界面 图像文件的基本...

Photoshop CC概述_图文.ppt

Photoshop CC概述_计算机软件及应用_IT/计算机_专业资料。Photoshop CC概述 从功能上看,Photoshop可分为图 像编辑、图像合成、校色调色以及特 效制作部分。随着...

第1章 认识Photoshop cc_图文.ppt

1 设置前景色与背景色 我们在Photoshop cc中进行工作时使用颜色是必不可少,在Photoshop cc中的 颜色主要应用在前景色和背景色上。在Photoshop cc中使用前景色来...

第7章 Photoshop CC的通道与蒙版_图文.ppt

第7章 Photoshop CC的通道与蒙版_工_高等教育_教育专区。图形图像处理 (PhotoshopCC+IllustratorCC) 第7章 Photoshop CC的通道与蒙版 在Photoshop中,通道和蒙版...

《Photoshop-CC网店美工》完整教学教案_图文.doc

Photoshop-CC网店美工》完整教学教案_计算机软件及应用_IT/计算机_专业资料。《Photoshop CC 网店美工》 配套教学教案 第1章 课时内容 教学目标 网店美工常识 授课...

第4章 Photoshop CC的路径与文字_图文.ppt

第4章 Photoshop CC的路径与文字_工_高等教育_教育专区。图形图像处理 (PhotoshopCC+IllustratorCC) 第4章 Photoshop CC的路径与文字在Photoshop CC中,路径是...

中文版Photoshop CC 2018图像处理实用教程PPT_图文.ppt

计算机基础与实训教材系列《中文版Photoshop CC 2018 图像处理实用教程》 第一章初识Photoshop CC 2018 学习目标 Photoshop是一款世界顶级的图像设计软件,它是由美国 ...

photoshopCC课件_图文.ppt

【课前导读】使用photoshopCC对图像进行移动、缩放、旋转、调整色 彩和滤

网店美工设计--Photoshop CC案例教程_图文.ppt

网店美工设计--Photoshop CC案例教程_管理_高等教育_教育专区。C