------------------------常用图片格式------------------------

位图和矢量图
  位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。上面讲的5种图像都属于位图。矢量图和位图组成图像的原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时,实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不会出现像素块,图像边缘也不会出现锯齿。

位图
1、psd
  psd是photoshop的专用格式,UI设计师使用photoshop设计效果图,最后会将psd格式的效果图交付给前端工程师,这种格式是不压缩的,而且保留了图层、透明和半透明等图片信息,所以这种图片格式的容量相对来说是很大的,前端工程师使用这种格式的效果图来切图制作网页,但是网页中不会使用这个格式的图片,它的作用一是保存图片的原始数据,二是方便图片的修改。

2、jpg
  jpg是一种有损压缩格式,压缩效率高,容量相对来说最小,网络传输速度快,它不能存为透明背景,在网页中应用最广,一般在不需要透明背景的时候就使用这种图片。

3、gif
  gif是一种无损压缩格式的图片,最多只有256种颜色,颜色丰富的图片转化为这种格式会颜色失真。它的背景可以是透明的,但不能是半透明的,透明背景中的图像,如果边缘轮廓是曲线的,会产生锯齿,它还可以保存为动画格式。

4、png
  png的目的是为了代替gif图片,无损压缩,背景可以是透明或者半透明的,透明图像边缘光滑,没有锯齿,网页中需要透明或者半透明背景的图片,首选是png图片。png也是firework的专用格式,也可以包含图层信息。firework是另外一款可以和photoshop相比的图像处理软件。也有少量的UI设计师使用这种软件来设计网页效果图,他们设计的效果图就是带图层的png格式的,碰到这种设计师,如果我们习惯了photoshop切图,可以将带图层的png效果图转化成psd图片再处理。

5、webp
  它是由谷歌于2010年推出的新一代图片格式,在压缩方面比当前jpg格式更优越,在质量相同的情况下,WebP格式图像的体积要比jpg格式图像小40%,不过这种图片还没有得到广泛的浏览器支持,仅在Chrome和Opera上支持,在其他浏览器上需要安装插件才可以显示,目前还没有大规模使用。

矢量图
1、svg
  svg是一种矢量二维图形格式,它是基于xml标记语言描述的,可以通过任何文本编辑器创建。它的优点是文件容量小,放大不失真,而且背景也可以是透明的。目前大量使用这种格式来制作网页图标或者网页地图,由于它是矢量的,所以在不同终端屏幕上(pc、手机)都有很好的显示效果。

2、flash
  flash是一种矢量动画文件格式,曾经在网络上风靡一时,如今已逐渐退出历史舞台,原因是它的技术更新跟不上发展,这种格式既可以是静态的图形,还可以是多媒体动画,还可以加入用户交互和数据,这是它曾经很流行的原因,这种格式名为swf,flash是对它的统称。这种格式在网页中已经很少使用了,它的很多优秀特性,可以用HTML5取代。swf文件中衍生出一种视频格式flv,它是一种流媒体视频格式,由于它有文件容量小,可以边下载,边观看等优点,目前广泛应用在视频网站中。

------------------------photoshop常用图片处理技巧------------------------
图片格式转换与压缩
  1、文件/存储为(不推荐)选择图片类型以及压缩比;
  2、文件/存储为web所用格式(推荐) 选择图片类型以及压缩比;

图像放缩,平移
  1、 放缩工具 图像放大缩小,在图像上点击放大,按住alt键点击缩小,快捷键Ctrl+“+”放大 Ctrl+“-”缩小,双击此工具可以让图像按照原始大小显示。

  2、 平移工具 对图像进行移动,在使用其他工具时,按住空格键盘的空格键,可以切换到此工具,移动完后松开空格键回到原来的工具。双击此工具可以让图像放缩到显示区域完全显示。

新建图像
  执行菜单命令 文件/新建 可以新建一张图片,设置大小,颜色模式选RGB,网页图片一般选择72像素/英寸,如果图像要打印,可设为300/英寸。背景按情况选透明或白色。

移动选择与图层面板
  1、按住Ctrl,在图像上点击可以选中图层
  2、 选择此工具,勾选工具属性栏上的“自动选择图层”,可以在图像上点击选中图层
  3、移动元素同时按住Alt键可复制一个图层
  4、图层面板的操作,包括图层的显示隐藏、图层顺序、新建图层、图层删除

针对图像中选中图层的操作
  1、移动
  2、自由变换 执行菜单命令 编辑/自由变换
  3、拖拽到另一张图像上完成图层拷贝

历史记录面板
  记录20部操作,可以点击已经记录的操作步骤回到之前

选择工具
  1、 矩形选择工具
  2、 椭圆选择工具 按住alt+shift键可以从中心拉出正圆
  3、 任意套索工具 用手任意画出选区,不精确,不常用
  4、 多边形套索 可以选择多边形物体,对于结构复杂的物体,可以点多个小段来选择。
  5、 磁性套索 可以自动在物体边缘生成选择线,但是由于太自动了,所以不够精确,也不常用。
  6、 魔术棒选择工具 按照点击的点的颜色范围来选择,可以设置范围的容差,容差越大,选择区域越大,对于有单色背景的图像中的元素,可以用它点选背景,然后反选,从而选中元素。
  7、 快速选择工具 直接在要选的元素上画,按照画的颜色范围进行选择。
  8、对图层创建选区:按住Ctrl,用鼠标点击对应的图层,在图层外框生成选区。

选区的编辑技巧
  1、新选区模式下移动选区
  2、选区的加、减、乘,工具属性栏上设置
  3、调整边缘 工具属性栏或者执行菜单命令 选择/调整边缘
  4、变换选区 执行菜单命令 选择/变换选区,可对选区进行缩放、移动等
  5、反选 执行菜单命令 选择/反向
  6、取消选择 执行菜单命令 选择/取消选择,快捷键ctrl+d

选区特别注意
  选区(蚂蚁线)只对当前图层器起作用,选区操作失败一般是当前图层弄错了

裁剪图像
  1、 裁切工具
  2、对选区执行菜单命令 图像/裁剪
  3、设置矩形框大小,创建固定宽高的矩形框,可进行固定尺寸裁剪

针对确定选区的操作技巧
  1、复制 执行菜单命令 编辑/拷贝 快捷键ctrl+c
  2、粘贴 执行菜单命令 编辑/粘贴 快捷键ctrl+v
  3、粘贴入 执行菜单命令 编辑/选择性粘贴/贴入
  4、填充 执行菜单命令 编辑/填充
  5、描边 执行菜单命令 编辑/描边
  6、删除 执行菜单命令 编辑/清除 快捷键 delete
  7、自由变换 执行菜单命令 编辑/自由变换 快捷键 ctrl+t

擦除与修复工具
  1、 擦除工具
  2、 污点修复工具

参考线技巧
  1、视图/标尺,显示标尺,在标尺上按住鼠标拖动可以拉出参考线
  2、视图/对齐到/参考线 让参考线移动时自动对齐到选框或者图像的边缘
  3、视图/新建参考线 可以精确创建参考线

文本输入
  1、执行菜单命令 编辑/首选项/单位和标尺 设置文字的单位
  2、 文本输入
  3、文本编辑 属性工具栏上点击文本编辑按钮

取色
  1、 取色工具,点击前景色按钮,弹出取色对话框,当前工具切换成取色工具。
  2、 点击前景色按钮,当前工具自动切换到取色工具

图像大小与画布大小
  1、图像/图像大小 查看和设置图像的整体大小
  2、图像/画布大小 查看和设置图像的画板大小

尺寸测量
  1、 切片工具 双击切片弹出切片对话框
  2、 切片选择工具
  3、 矩形框工具,打开信息面板

----------------------切图步骤----------------------
  1、使用psd格式并且带有图层的图像切图。

  2、在图像上用切片工具切出需要的小图。

  3、双击切片,给切片命名。

  4、执行菜单命令 存储为web所用格式。

  5、点选切片,设置切片的图片格式。

  6、存储切片,选择“所有用户切片”,点存储(多个切片会存到所选文件夹中的images文件夹中)。

  7、之后将对应的小图片进行合并制作成对应的icons

photoshop软件应用手记的更多相关文章

  1. Win8.1/win10安装photoshop软件提示please uninstall and reinstall the product如何解决

    Photoshop CS6是一款编辑图片软件,在Win8系统中安装Photoshop CS6,提示:please uninstall and reinstall the product ,该如何解决? ...

  2. Photoshop软件破解补丁安装方法

    参考: http://jingyan.baidu.com/article/454316ab4b3266f7a6c03a7d.html 1.安装好photoshop之后,解压32位64位破解补丁.zip ...

  3. 用Photoshop软件实现批量压缩照片

    前提:手头有 "大" 照片,出于某种原因想把它变成 "小" 照片:电脑刚好安装有PS软件. 需知:如果您的压缩需求仅限于降低图片品质,降低图片像素,那么建议您采 ...

  4. [转载]PhotoShop性能优化

    现在随着Photoshop版本越来越高功能也越来越强大,而往往强大的功能需要电脑有好的配置运行,比如HDR.图像合成或者3D和视频等类似的功能,还有处理比较大尺寸的图像时,如果电脑配置不够强往往非常卡 ...

  5. PhotoShop简介

    Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件.Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编 ...

  6. APP icon 自动来做,photoshop 做圆角图片

    项目上传到应用市场,没有美工配合,那就只能自己捉刀了. 有几个点快捷键要注意,对使用ps有帮助 (1)ctrl+enter 建立选区 (2)建立选区后,移动到另外的图层,按delete键就为删除 (3 ...

  7. PS网页设计教程XXV——使用Photoshop设计的老式组合布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  8. 20+非常棒的Photoshop卡通设计教程

    现在把一个人的脸变成卡通图案再用它来当头像这种现象使非常常见的,同样的卡通插图可以用于多种渠道的设计.网上有很多公司都会创立一种吉祥物并把它应用到市场营销中.因为有了类似于photoshop这样强大的 ...

  9. 关于前端的photoshop初探的学习笔记

    写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来.温馨提示:比较乱,写给自己看的,看不下去,按ctrl+W 笔记内容 ...

随机推荐

  1. net 将手机号码中间的数字替换成星号

    Regex.Replace(link.user_tel, "(\\d{3})(\\d{5})(\\d{3})", "$1*****$3")

  2. 【干货】一篇文章学会Gulp(Getting started with Gulp)

    抛开Grunt,又有一个新的自动化构建系统成为新的领跑者.那就是Gulp. Gulp是一种直观.自动化构建的工具. 为什么前端er会这么感兴趣Gulp?我相信大家都有个思想:要么不做事,要做事就要把事 ...

  3. SQL Server Alwayson创建代理作业注意事项

    介绍 Always On 可用性组活动辅助功能包括支持在辅助副本上执行备份操作. 备份操作可能会给 I/O 和 CPU 带来很大的压力(使用备份压缩). 将备份负荷转移到已同步或正在同步的辅助副本后, ...

  4. 那些年,用C#调用过的外部Dll

    经常有人找到我咨询以前在csdn资源里分享的dll调用.算算也写过N多接口程序.翻一翻试试写篇随笔. 明华IC读写器DLL 爱迪尔门锁接口DLL 通用OPOS指令打印之北洋pos打印机dll 明泰非接 ...

  5. JavaSE(五)JAVA对象向上转型和向下转型

    今天做了一个测试的题目,发现自己还是很多问题没有静下心来做.很多问题是可以自己解决的但是自己一是没有读清题意,二是自己心里太急躁了.所以这个要自己应以为鉴! 对象的转型问题其实并不复杂,我们记住一句话 ...

  6. Beautifulsoup和selenium的简单使用

    Beautifulsoup和selenium的简单使用 requests库的复习 好久没用requests了,因为一会儿要写个简单的爬虫,所以还是随便写一点复习下. import requests r ...

  7. 消息队列中间件 RocketMQ 源码分析 —— Message 存储

  8. JavaScript中的尾调用优化

    文章来源自:http://www.zhufengpeixun.com/qianduanjishuziliao/javaScriptzhuanti/2017-08-08/768.html JavaScr ...

  9. exit()与_exit()的区别(转)

    http://blog.csdn.net/lwj103862095/article/details/8640037 从图中可以看出,_exit 函数的作用是:直接使进程停止运行,清除其使用的内存空间, ...

  10. android炫酷动画源码,QQ菜单、瀑布流、二维码源码

    Android精选源码 自定义弹框封装,ProgressDialog,StatusDialog和Toast,支持自定义颜色 有深度感的fragment代码 在屏幕顶部或者底部显示提示 短信转发工具,自 ...