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

  刚刚学习了一下前端的入门课程,将设计师设计的logo等图片从PSD文件中切出来,并保存为PNG格式。PNG格式的主要优点就是背景色可以为空白,不同于普通格式的图片的白色。使用的工具是Photoshop

  首先先了解下ps中的基础概念,图层,选区,图层的合并,图层的移动。

0.ps的基本操作,Alt+左键可以放大图片,空格+左键可以移动图片

1,如何选中一个图层,我们首先将鼠标移动到选择工具,然后移动到我们要选中的图层上按住Ctrl+左键,会自动在图层中找到该对应的图层,找到该图层后我们再在该图层的图标上按住Ctrl+左键,这样就选中了我们想要选中的图层。

2.选中多个图层,我们还是按照上述步骤找到每个图层对应在图层中的位置,然后使用Ctrl选中我们想要的图层按住Ctrl+G来将这些图层们组合为一个组,有了组之后我们可以将组变换为一个图层,这样我们就可以像选中一个图层一样进行操作了。

3.吸管工具的使用,这个功能很简单我们可以通过该工具来确定设计师设计的颜色的RGB值,便于我们后期使用。

4,字符界面的打开,我们还需要在窗口上打开字符,信息面板,这样我们就可以知道设计师设计稿中的字体类型和大小等信息。

5.现在就到了最重要的一步了,切图了我一共了解了三种切图方式,各自有优缺点。自己觉得哪种合适就选择哪种。

  第一种,通过第2点教的选中多个图层的方法选中我们需要切的logo,然后通过选区工具来确定我们logo的具体大小,然后我们就可以新建一个图片大小和logo一样。我们可以直接通过手动拖拽来将该图层组移动到新的图片中,移动到新的图片中后我们要注意将移过来的图层居中放置。具体的居中方式如下:首先我们选中新图片的背景图层(这地方有可能他会上锁,你双击该图层后会出现一个面板,然后点击确定就可以解锁了)选中后我们在点击我们移动过来的图层在上方面板中会有一个上对齐,居中对齐等,选择自己想要的对齐方式。

  第二种是通过切片工具来实现的,首先选中切片工具(如果没有找到请选择裁剪工具长按后会出现)然后按照需要切取的地方手动拉取药裁剪的地方,完成后选择文件->存储为Web所用格式

  第三种就是通过新建参考线(首先Ctrl+R调出标尺,然后可以直接在标尺上拖出参考线)来将我们需要切取得部分分割出来,然后点击按照参考线切片。注意这里可以选择删除多余的切片,可以只留我们需要的部分进行切取。

原文地址:https://www.cnblogs.com/strshun/p/strshun.html

时间: 2024-11-10 00:30:12

前端学习第一步----切图仔的诞生的相关文章

mac 如何安装photoshop cc 2017 ?作为前端切图仔如何利用它来提高我们的工作效率?

作为前端切图仔一名,或多或少要与ps打上交到,你如果是大厂的话,可能不需要,小厂也有不需要的.这里是需要自己抠图的小伙伴的干活. 如何利用ps 提高我们的工作效率: 首先我们需要安装下载 photoshop cc 2014版本以上: window 下可直接在百度软件中心下载(这里我为聪明的朋友贴上地址): http://rj.baidu.com/soft/detail/40767.html 本屌是mac,搞起来就比较费劲,通常来说也是很简单的,但是我安装时候会发生201 错误,这就比较尴尬, 找

Java 学习第一步-JDK安装和Java环境变量配置

Java学习第一步——JDK安装及Java环境变量配置 [原文] 2014-05-30 9:09  Java SE  阿超  9046 views Java作为当下很主流的编程语言,学习Java的朋友也越来越多了,作为一门面向对象的编程语言,Java也有着安全.高效等诸多有点.从TIOBE(TIOBE排行榜是根据互联网上有经验的程序员.课程和第三方厂商的数量,并使用搜索引擎(如Google.Bing.Yahoo!.百度)以及Wikipedia.Amazon.YouTube统计出排名数据,只是反映

一个切图仔的工作日常

1.拿到公司设计师给的PSD图(PC端给的是1920px的设计稿,移动端给的750px的设计稿). 2.自己新建一个项目目录(默认有css,js,images文件夹以及一个index.html文件). 3.分析设计图,使用PS切图工具进行切图(分析哪些内容需要切成图片,设计稿的图标,可以向设计师要这些图标的SVG图,或者到http://www.iconfont.cn/阿里巴巴矢量图网站找相应的图标svg). 4.切的图片需要透明的选择png-24格式,颜色多样且不需要透明的选择jpg品质60,切

Qt 学习第一步 做计划和确定目标

接下来開始一步步深入学习Qt. 学习的第一步是整理资料,也就是找书和sample. 逛了一些论坛,推荐以下3本书 1> C++ GUI programming with Qt 4(2nd Edition) 2> Fundations of Qt development. 3> The art of Building Qt Application 有了资料后.还必须制定学习目标. 依照难易,分为初,中,高 0基础:(入门) 目标: 1> 学会SDI框架 2> 学会文字,图片基本

spring学习第一步:导入项目至eclipse

第一步:下载安装gradle gradle下载地址:http://www.gradle.org/downloads 配置GRADLE_HOME到,将gradle的bin目录配置到系统环境变量的path中去.其实只需配置path不一定要配置GRADLE_HOME. 第二步:执行gradle 这步会经历很长时间,需耐心等待,执行也可能会出错,我遇到执行错误的情况,选择重新执行一次.第二次执行成功,大概花了2个小时. 首先打开cmd进入到spring源码目录,也就是以下目录: 然后执行命令gradle

Java学习第一步: Win7配置JDK环境

转摘"专注JavaWeb开发":http://www.javaweb1024.com/java/Javajichu/2015/03/02/353.html 下载JDK并安装到本机 , 附下载地址: JDK下载 第一步: 右键桌面我的电脑属性,点击”高级系统设置”   第二步: 在系统属性中,找到环境变量(默认为打开状态) 第三步: 然后点击环境变量   第四步: 点击新建,变量名为JAVA_HOME,变量值为JDK安装路径,我安装在D盘里的 环境变量值为 : D:\program fi

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

切图的主要目的是从设计师提供的psd中获取网页制作所要的资源 一.界面设置 1. 新建文件,调整界面大小,背景设置为透明 2. 自动选择,把组切换为图层 3. 添加窗口内容,一共四项:图层.历史纪录.信息.字符,之后在右上角调整信息面板选项 4. 新建并保留该工作区,出问题可以直接恢复 5. 首选项各内容单位都设置为像素 到此,准备工作完成完成 二.基本操作 这部分视频里主要讲解了一些ps的常见操作,记录几个个人觉得有用的点 1. shift & alt 的灵活使用 2. 多个工具(套索.魔棒等

web前端学习之轮播图实现(原生js)

很久前接触过html css js 但自己在工作中用的少,简单的需求直接vue 走起,没有静下心好好写点js css 什么的,现在想要好好学习下 大前端的知识了,第一个小练习,做了个轮播图 网上有很多轮播图的实现过程,每个人都有自己不一样的思路,自己只要实现了就行.当然有些思路确实比我的要好,后续借鉴学习. 逻辑:将要展示的图片全部放在盒子里,超出部分隐藏,然后设置定时器,没两秒循环一次 img 标签,如果display 为block 就将 display 设置为none  那么后面的图片就到当

Linux学习第一步_CentOS系统安装

突然对Linux很感兴趣,于是就在自己的虚拟机环境上安装了一个CentOS6.0的系统,开始准备学习Linux可能写一篇Linux部署会让别人觉得很菜,但是写博客的习惯还是好的把我的步骤写出来,一呢,增强记忆,二呢,大神们如果看到哪里有错误,指点一下 ===VMware Workstation创建虚拟机 1)选择典型(推荐),虚拟机版本会继承VMware Workstation的版本,如果要自定义SCSI控制器类型\虚拟磁盘类型\虚拟机版本等信息选择自定义(高级) 2)暂时不选择光盘映像文件,这