开发者社区> 代码打碟手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Photoshop

简介: 常用图片格式         图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下: 1、psd         psd是ph...
+关注继续查看

常用图片格式

        图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下:

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上支持,在其他浏览器上需要安装插件才可以显示,目前还没有大规模使用。

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

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

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

9.总结 
        在网页制作中,如何选择合适的图片格式呢?

  • 网页制作中,如果要使用不透明背景的图片,就使用jpg图片;如果要使用透明或者半透明背景的图片,就使用png图片;
  • 制作网页图标时候,如果图标含多种颜色,可以使用gif或png图片;如果图标是单色,而且要求有很好的显示效果,可以使用svg;如果是动画图标,可以使用gif。

photoshop常用图片处理技巧

photoshop是一款优秀的图像处理软件,作为前端开发工程师,掌握它的一些常用功能是必须的。photoshop的常用功能有:选择、裁剪图像、修图、取色、插入文字等等。除了这些常用功能,前端还需要掌握制作新图像、切图等技巧。本次讲解的photoshop版本为cs6。

图片格式转换与压缩
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
2、粘贴入 执行菜单命令 编辑/选择性粘贴/贴入
3、填充 执行菜单命令 编辑/填充
4、描边 执行菜单命令 编辑/描边
5、删除 执行菜单命令 编辑/清除 快捷键 delete
6、自由变换 执行菜单命令 编辑/自由变换 快捷键 ctrl+t

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

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

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

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

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

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

photoshop批量切图技巧

        切图,就是从效果图中把网页制作需要的小图片裁剪出来。

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

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

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

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

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

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《Photoshop图层调整深度剖析》—第2章结论
<span style='letter-spacing:1px'>本节书摘来自异步社区《Photoshop图层调整深度剖析》一书中的第2章结论,作者【美】Scott Valentine,更多章节内容可以访问云栖社区“异步社区”公众号查看。</span>
1348 0
《Photoshop图层调整深度剖析》—第1章什么是调整图层?
<span style='letter-spacing:1px'>本节书摘来自异步社区《Photoshop图层调整深度剖析》一书中的第1章什么是调整图层?,作者【美】Scott Valentine,更多章节内容可以访问云栖社区“异步社区”公众号查看。</span>
1485 0
Photo Shop 修改、维护
调整画布大小 要继续放更多的图片? 更改画布大小                     移动图标 若图标为独立图层,则用移动工具拖动即可   若图层为非独立图层 - 用选区工具选中图标区域 - 用移动工具拖动图标 如果要拆分同一图层下的两个图标,则选中一个  Ctrl+C 复制,再 Ctrl+V 粘贴,然后再移动。
757 0
李涛老师详解Photoshop CS5新功能
题目:高手之路----李涛老师详解Photoshop CS5新功能 说明:Adobe中国教父级专家李涛老师就PSCS5的新功能做进一步的视频详解,敬请广大设计艺术爱好者关注。漫游世界超媒体中心独家放送。 作者介绍: 李涛——·Adobe专家委员会委员名师·Adobe中国专家    ·Adobe专家委员会委员    ·Apple教育计划教师认证高级讲师    ·中国商业插画师
1178 0
photoshop图层缩小及字体加粗
1、图层缩放方法     默认的PS工具箱里是没有图层缩放这个功能的。如何调出?     CTRL+T   2、字体加粗可以下面方法     选中文字图层,栅格化文字,滤镜,其他,最小值,OK...
840 0
Photoshop CS5的序列号
网上的序列号,一搜一大把,不过大多数都是啥订阅版,不能直接使用。 在百度中好不容易找到一个可以直接使用的: 1330-1927-7762-6383-0202-0414   来源:http://zhidao.baidu.com/question/148984342
506 0
Photoshop 爱好者应该收藏的42个网站
  Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一,集图像扫描、编辑修改、图像制作、广告创意,图像输入与输出于一体的图形图像处理软件。今天,本文与大家分享42个非常有用的 Photoshop 设计教程和素材资源网站,希望能帮助到您。
1000 0
+关注
代码打碟手
常用编程语言Python,熟悉主流的MySQL数据库,掌握MongoDB,Redis等非关系型数据库,在前端方面,熟悉HTML和CSS以及HTML5和CSS3的新特性,掌握JavaScript以及Jquery,Bootstrap等前端框架
36
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载