前端开发使用Photoshop切图详细步骤

切图的主要目的是从设计师提供的psd中获取网页制作所要的资源

一、界面设置

1. 新建文件,调整界面大小,背景设置为透明

2. 自动选择,把组切换为图层

3. 添加窗口内容,一共四项:图层、历史纪录、信息、字符,之后在右上角调整信息面板选项

4. 新建并保留该工作区,出问题可以直接恢复

5. 首选项各内容单位都设置为像素

到此,准备工作完成完成

二、基本操作

这部分视频里主要讲解了一些ps的常见操作,记录几个个人觉得有用的点

1. shift & alt 的灵活使用

2. 多个工具(套索、魔棒等)可以配合使用以得到精确的选区

3. 裁剪时先用选择工具选择,然后转为裁剪,可以获取精确大小

4. 历史记录画笔的使用,人脸调整

5. 去掉文字间的底色,显影模式 (alt+单击图层显示按钮)

6. 钢笔曲线上添加文字

7. 隐藏参考线(ctrl + ; )

三、传统/精准切图

传统切图与切片

1. 先分析一下,哪些是开发能实现的,哪些是需要切片的内容

2. 切片(裁剪选项右键),有主动切片与被动切片之分,裁剪速度较慢

3. 基于参考线的切片,能够同时切出多个类似瓦片,需要删除切的过细的切片

4. 可以先裁剪出一个区域,再结合切片,最后导出存储为Web格式

基于脚本的精准切图

1. 文件 >脚本切图,可以保留阴影,方便快捷,各切片的名称与图层名相同

2. 首选项 >增效工具,启用生成器,文件 >生成 >图像资源,更改图层的名称,添加后缀即可(jpg、png等)

四、小结

其实主要还是讲ps,对像素的概念强调的比较多,之前大四自学过的好多操作都忘了.....emmmm不经常用就是这样

最后附上课程地址:https://www.imooc.com/video/9813

原文地址:https://www.cnblogs.com/sleeping-dog/p/8458156.html

时间: 2024-10-10 06:51:26

前端开发使用Photoshop切图详细步骤的相关文章

@注解时代的photoshop切图插件构想

如今各大语言提供了注解机制,极大的简化了开发人员的配置工作. 然而photoshop切图工作一直在由人机械式的去执行,为什么不能交由机器去完成这项苦逼的工作,缺的其实仅仅是一种规范,通知photoshop如何去做这件事情,其实只要adobe公司在photoshop的新建图层面版中加入一个多行文本框,用于存储@Annotation注解就行了,剩下的看我如何道来: 图层嵌套对应HTML标记嵌套 默认是div标记嵌套 如果想要使用其他标签,那么: 设置为: { tagName:"span"

项目管理甘特图是什么?怎么做才能更高效?(EXCEL制作甘特图详细步骤)

项目管理甘特图是什么?甘特图即Gantt chart,又被称之为横道图.条状图.其命名是由提出者亨利·L·甘特(Henrry L.Ganntt)先生的名字而来的.甘特图是以图示的方式,并通过活动列表和时间刻度,来形象地表示出某些特定项目的活动顺序和持续时间. 关于项目管理甘特图是什么?怎么做才能更高效?(EXCEL制作甘特图详细步骤)可以加群647240543,自己去下载. 甘特图是项目管理中常用的一种图表,与平时常见的统计表格略有不同,它的内容更加复杂,绘制起来也更费力一些.管理项目不容易,可

前端学习第一步----切图仔的诞生

刚刚学习了一下前端的入门课程,将设计师设计的logo等图片从PSD文件中切出来,并保存为PNG格式.PNG格式的主要优点就是背景色可以为空白,不同于普通格式的图片的白色.使用的工具是Photoshop 首先先了解下ps中的基础概念,图层,选区,图层的合并,图层的移动. 0.ps的基本操作,Alt+左键可以放大图片,空格+左键可以移动图片 1,如何选中一个图层,我们首先将鼠标移动到选择工具,然后移动到我们要选中的图层上按住Ctrl+左键,会自动在图层中找到该对应的图层,找到该图层后我们再在该图层的

photoshop切图介绍 && photoshop下载与破解

第一部分:界面设置 1.点击"文件-新建"(或者ctrl+n)打开一个新建对话框.名称可随意填写."预设"设置为自定,"宽度"一般选择1920,"单位"选为像素."高度"可选择为2000,"单位"选为像素."分辨率"设置为72px;"颜色"设置为RGB颜色,8位."背景内容"为透明.之后点击确定即可打开.这里建议最好"

PhotoShop切图

1.传统切图 传统切图使用photoshop自带的切图工具,根据需求进行切片.但是,这种切图方式效率低下. 2.快速切图 使用photoshop自带的功能进行切图,非常高效. 3.小技巧 3.1> 首选项-->增效工具-->启动生成器 文件-->生成-->图像资源,勾选 对图层或者分组进行重命名,如XX.png,在工作目录就会生成相应的图片文件.

页面制作学习笔记:D2.Photoshop切图

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

web前端开发 初学者 学习路径图

      第一阶段   web前端工程师课程 HTML语句,HTML页面结构.css语法.style属性.link和style标签.id属性.等HTML语句中的相关属性: 通过Dreamweaver制作出跨越平台限制和跨越浏览器兼容性的页面,掌握Dreamweaver成为Web前端工程是的关键. 浏览器兼容性问题处理:XHTML与CSS校验,XHTML校验器,CSS校验器:解决如:Chrome.Safari.firefox.opera 等主流浏览器的兼容问题. 第二阶段 WEB前端移动端+响应

photoshop切图介绍

第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为像素.“分辨率”设置为72px;“颜色”设置为RGB颜色,8位.“背景内容”为透明.之后点击确定即可打开.这里建议最好“存储预设”,这样以后就可以直接打开用了.如下: 2.将移动工具的“自动选择”不要打勾,后面的选择使用“图层”.如下: (技巧:如果我们需要选择psd的某一个图层,可直接ctrl+点

关于Photoshop 切图

1. 打开Photoshop软件,进入软件的主界面.点击文件菜单,选择打开,选择并打开对应的图片文件或者psd格式文件,如下图所示. 2. 在右下角图层栏下,选择要显示或隐藏的图层,然后设置好对应的参考线,可以通过"ctrl + '+' "与"ctrl + '-' "来控制视图的大小.如下图所示. 3. 选择左侧快捷工具栏中的裁剪工具,右键选择切片工具.然后按住鼠标左键,从左上角向右下角滑动来选择你所需要切片的地方.如果要选择取消,只需鼠标移动到切片的区域,单击鼠标