搜索
首页web前端PS教程前端技术-PS切图

前端技术-PS切图

Feb 10, 2017 pm 01:49 PM

页面制作部分之PS切图

      网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS,这里使用PS进行网页切图。

      我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background)。

一.使用PS工具

1.1 PS首选项设置

编辑-》首选项-》单位与标尺,选改为像素。

前端技术-PS切图

1.2 面板

在“窗口”菜单下开启:

工具(默认已开启)

选项(默认已开启)

图层(默认已开启)

信息(手动开启)

历史记录(手动开启)

关闭其他不需要的功能,将以上功能放置在合适的区域,窗口-》工作区-》保存工作区,设置后的工作区如下:

前端技术-PS切图

1.3 切图常用工具

▪移动工具

将自动选择勾选,将组改为图层

前端技术-PS切图

▪矩形选框工具

▪魔棒工具

▪裁剪工具+切片工具

▪缩放工具

-放大:Ctrl+加号

-缩小:Ctrl+减号

▪取色器

1.4 辅助视图

在“视图”菜单下开启:

▪对齐(默认开启)(遇到参考线、边界有一个吸附力)

▪标尺 Ctrl+R

▪显示->参考线 Ctrl+;(需要显示额外内容)

二.获取信息

打开设计稿,获取信息:

▪尺寸信息:测量

▪颜色信息:取色

获取信息最重要的是将画布拉的尽量大,尽量减小误差。

测量

2.1所有数字都要测量

工具:

矩形选框工具+信息面板

测量内容:

宽度、高度

内边距、外边距

边框

定位

文字大小

行高

背景图片位置

2.2测量选区(矩形选框工具)

添加到选区:按住Shift

从选区减去:按住Alt

与选区交叉:按住Shift+Alt

前端技术-PS切图

2.3文字相关测量
2.3.1单独的文字图层

选中图层,点击工具T,顶部选项区显示如下:

前端技术-PS切图  

可以直接获得文字的大小;

点击前端技术-PS切图,可以获得其他的一些信心,如行高:

前端技术-PS切图

2.3.2非单独的文字图层(选择较大字作为测量)

使用矩形选框工具,选中文字,高度即为字号大小;

行高的测量

使用矩形选框工具,从上一行文字底部到本行文字底部的高度即为行高,如下图:

前端技术-PS切图

取色

2.4所有颜色都要取色

工具:

拾色器+吸管工具

取色内容:

边框色

背景色

文字色

尽量放大画布,获取实点、避免锯齿点。

2.5单独的文字图层可以直接获取颜色,其他的颜色用“拾色器+吸管工具”获取

前端技术-PS切图

特别注意的是由于图层的叠加效果,显示的颜色与实际颜色不相符,这是要用拾色器来获取颜色

2.6取色工具的巧用
2.6.1确定背景是否为纯色(拾色器+吸管工具)

不同区域不停的点击,看颜色是否变化

2.6.2确定是否是线性渐变(魔术棒)

先选定图层,再选择魔棒工具,点击选中最上面一行,显示如下:

前端技术-PS切图  

继续点击,一次向下选中一行

前端技术-PS切图  

确定为线性渐变。

三.切片

3.1 需要切片的内容

修饰性的(一般用在background属性):

图标、logo

有特殊效果的按钮、文字等

非纯色的背景

内容性的(一般用在img标签)

banner、广告图片

文章中的配图…

例如,下图,红色框内是需要切的,黑框内是从后台获取的不需要切

前端技术-PS切图

3.2 切出来的图片的保存类型

内容性的一般保存为.JPG,

修饰性的一般保存为.PNG8,.png24

其中PNG8和PNG24都支持全透明;PNG24支持半透明的(图片质量比较高),但ie6不支持PNG24半透明,需要做兼容。

3.3.切图

隐藏文字只保留背景

3.3.1文字独立图层(隐藏文字图层)

找到文字图层

去掉眼镜图标

前端技术-PS切图

3.3.2文字和图片合并(平铺背景覆盖文字)

背景图可以做拉伸

矩形选框工具选一块区域

自由变换 Ctrl+T

背景图不可以做拉伸(背景有纹理效果等)

矩形选框工具选一块区域

使用移动工具+Alt

3.3.3 获取切片

切图.PNG24

•移动工具选中所需图层(按住Ctrl多选)

•右键合并图层(Ctrl+E)

•再邮件制图层到新文件或直接拖至已有文件(新建:Ctrl+N )

切图.PNG8(带背景切)

•合并可见图层(Shift+Ctrl+E)
•矩形选框工具选择内容
•魔棒工具去除多余部分(从选取中减去:按住Alt)

3.3.4 可平铺背景的切图

矩形选框工具选一块区域

复制粘贴到新文件中

平铺内容充满文件的宽(x轴)或高(y轴):如,新建文件用于平铺x轴,切图的宽要与新建文件一致

前端技术-PS切图

3.4.切片工具(适用于可以一刀切的活动页)

拉参考线

前端技术-PS切图

▪选择切片工具

▪选项栏点击“基于参考线的切片”按钮

前端技术-PS切图

▪选择切片选择工具  

前端技术-PS切图  

双击切片,更改文件名等信息

▪保存

全选切片,统一设置存储格式

四、保存

存储所需内容(背景一般为透明)

▪复制、新建、粘贴(Ctrl+C、Ctrl+N、Ctrl+V,或拖动内容至新文件)

    独立的图层:直接拖动内容至新文件

    合并在一起:矩形选框工具选区,魔术棒提取,Ctrl+C、Ctrl+N、Ctrl+V

▪存储为Web所用格式(Alt+Shift+Ctrl+S)

4.1 保存类型一(JPG)

当图片色彩丰富且无透明要求时

建议保存为JPG格式并选择合适的品质

注:品质:60-80;不能为100,80已经很好

4.2 保存类型二(PNG8)

当图片色彩不太丰富时无论有无透明要求

保存为PNG8格式

注:保存时,需要重新设置无仿色和无杂边

前端技术-PS切图

4.3 保存类型三(PNG24)

当图片有半透明要求时

保存为PNG24格式

默认设置。

4.4 保存类型四(PSD)

为保证图片质量

保留一份PSD文件,以后任何的修改都在PSD文件上

五 修改与维护

随着项目的进展,我们可能想要改变图标的位置、添加新图标、删除旧的图标、修改画布的大小,所以要进行修改和维护。

5.1 更改画布大小
5.1.1 增加画布

图像-》画布大小,根据情况,选择定位点

前端技术-PS切图  

5.1.2 减小画布

第一种方法:矩形选择工具选中区域,图像-》裁剪进行画布的裁剪;

第二种方法:直接使用裁剪工具进行裁剪。

5.2 移动图标

若图标为独立层  

则用移动工具拖动即可

若图标为非独立  

用选区工具选中图标区域

用移动工具拖动图标

注:若图标为非独立,可用选区工具选中图标区域,按Ctrl+X剪切,然后再粘贴,将此图标变为独立的图层。

5.3 添加图标

将图标整理后,放入相应的位置即可。

注意事项:

修改PNG8的图片,需要更改颜色模式为RGB颜色,操作方法:图像-》模式-》RGB颜色。

六 使用

      图片合并方案:Sprite 图片

      CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。根据具体图标在大图上的位置,给背景定位。

      Sprite拼图好处:减少网络请求,提升网页加载速度。

前端技术-PS切图  

6.1 大小与质量(平衡与取舍)

压缩工具:

▪有损TinyPng:https://tinypng.com/

▪无损Minimage:https://github.com/NetEaseWD/minimage

6.2 合并
6.2.1 排列

图片之间必须保留合适空隙,(便于图片修改、Css代码编写)

图标排列方式:横排和竖排

前端技术-PS切图  

6.2.2 分类

▪把同属于一个模块的图片进行合并(功能化)

▪把大小相近的图片进行合并(节省空间)

▪把色彩相近的图片进行合并(降低颜色数,文件体积会相对的小)

▪综合以上方式合并

6.2.3合并推荐

▪只本页用到的图片合并

▪有状态的图片合并(鼠标经过状态的改变等)

前端技术-PS切图

 

七 浏览器兼容方案

7.1 IE6不支持PNG24半透明

解决方案:存两份sprite.png(24)和sprite_ie.png(8)

7.2 Css3

▪高级浏览器使用css3

▪低级浏览器使用切图

7.3 优雅降级

▪支持的显示效果

▪不支持没有效果


更多前端技术-PS切图相关文章请关注PHP中文网!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Photoshop最有用的是:常见任务和项目Photoshop最有用的是:常见任务和项目Apr 23, 2025 am 12:06 AM

Photoshop擅长图像编辑、图层和蒙版、数字绘画及多种设计应用。1)图像编辑与修复:去除瑕疵,调整色彩和亮度。2)图层与蒙版:非破坏性编辑和创作。3)数字绘画与插图:创作艺术作品。4)实际应用:平面设计、网页设计和数字艺术创作。

使用Photoshop:创意可能性和实际用途使用Photoshop:创意可能性和实际用途Apr 22, 2025 am 12:09 AM

Photoshop在实际应用中非常实用且具有创造性。1)它提供基本编辑、修复和合成功能,适合初学者和专业人士。2)高级功能如内容识别填充和图层样式可提升图像效果。3)掌握快捷键和优化图层结构能提高工作效率。

Photoshop:高级技术和工具Photoshop:高级技术和工具Apr 21, 2025 am 12:08 AM

AdobePhotoshop的高级功能包括高级选择工具、图层混合模式和动作与脚本。1)高级选择工具如快速选择工具和色彩范围选择工具可精确选择图像区域。2)图层混合模式如“叠加”模式能创造独特视觉效果。3)动作和脚本能自动化重复任务,提高工作效率。

Photoshop的主要功能:修饰和增强Photoshop的主要功能:修饰和增强Apr 20, 2025 am 12:07 AM

Photoshop在修图和增强方面的强大功能包括:1.使用“修复画笔工具”去除痘痘,2.使用“液化工具”瘦脸,3.使用“频率分离”技术进行精确修图,这些功能通过算法和图像处理技术实现,优化图像处理效果。

Photoshop的主要特征:深度潜水Photoshop的主要特征:深度潜水Apr 19, 2025 am 12:08 AM

Photoshop的关键功能包括图层与蒙版、调整工具、滤镜与效果。1.图层与蒙版允许独立编辑图像部分。2.调整工具如亮度/对比度可修改图像色调和亮度。3.滤镜与效果可快速添加视觉效果。掌握这些功能可以帮助创意专业人士实现创意愿景。

Photoshop和数字艺术:绘画,插图和合成Photoshop和数字艺术:绘画,插图和合成Apr 18, 2025 am 12:01 AM

Photoshop在数字艺术中的应用包括绘画、插图和图像合成。1)绘画:使用画笔、铅笔和混合工具,艺术家可创造逼真效果。2)插图:通过矢量和形状工具,艺术家可精确绘制复杂图形并添加效果。3)合成:利用蒙版和图层混合模式,艺术家可将不同图像元素无缝融合。

高级Photoshop教程:大师修饰和合成高级Photoshop教程:大师修饰和合成Apr 17, 2025 am 12:10 AM

Photoshop的高级修图与合成技术包括:1.使用图层、蒙版和调整层进行基础操作;2.通过调整图像像素值实现修图效果;3.利用多图层和蒙版进行复杂合成;4.应用“液化”工具调整面部特征;5.使用“频率分离”技术进行细腻修图,这些技术能提升图像处理水平并实现专业级效果。

使用Photoshop进行图形设计:品牌和更多使用Photoshop进行图形设计:品牌和更多Apr 16, 2025 am 12:02 AM

使用Photoshop进行品牌设计的步骤包括:1.使用钢笔工具绘制基本形状,2.通过图层样式添加阴影和高光,3.调整颜色和细节,4.使用智能对象和动作自动生成不同版本的设计。Photoshop通过图层和蒙版的灵活性,帮助设计师创建和优化品牌元素,从简单的标志到复杂的品牌指南,确保设计的一致性和专业性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!