Photoshop切图学习

前端开发中，之前都是Designer给我们切好图，给出readline，所以我们前端工程师基本不自己动手切图，现在换了新的公司，需要我们自己手动切一些图。Designer制作好的psd的图片如下：

自己想达到以下要求：

1.将“Sign in”按钮填充放大，文字也放大并且居中显示

a).选中要操作的图层

b).选择右下角进行拖动，可以看到图片变大了。也可以在工具栏中直接设置图片的x，y坐标和width、height值。

c).如果文字不是居中显示的话，我们可以选中文字的图层，然后点击

T字区域。工具栏会显示文字设置。

在这里可以调整文字的字体family和字体大小，消除锯齿的方法等。

d).放大或缩小字体之后，文字不会水平和垂直居中，需要调整。

选中文字和按钮背景的图层：

然后工具栏如下图所示：

可以设置水平对齐和垂直对齐方式。

2.如何快速从一个大图中切出需要的那个小图(Sign in按钮)

通过上述方法，我们制作了一个简单的放大版的登录按钮，现在要裁剪下来，给前端开发使用。所以要了解如何从一张很大的图（就是说有很多图层构成的图）切出那个小图（当前就是制作好的登录按钮）

步骤：

a.新建一个photoshop文件

然后直接将选中的登录按钮拖放到新的文件上。效果如下：

b.在新的文件中，点击“图像”->“裁切”。弹出的对话框如下：

点击确定就可以将透明的背景去掉，只剩下我们需要的登录按钮。将文件另存为就好了。

PS：Photoshop中“裁剪”和“裁切”的区别

参考网址：

http://helpx.adobe.com/cn/photoshop/using/adjusting-crop-rotation-canvas.html

http://yiliyumili.blog.163.com/blog/static/972595220132203171165/

Photoshop切图学习相关推荐

Photoshop切图----学习笔记
只是个人学习过程中的一些小笔记,不具备完整性,旨在发布到博客的同时能进达到复习的目的! 一.PS设置: 1.编辑>首选项>单位与标尺:将标尺.文字的单位设置为像素(px): 2.调出与切图 ...
如何用photoshop切图并去掉图片上面的文字
公司没有美工,最近一个页面要做样式,只有自己上了,从来没做过,这下可就头大了.去网上查了一下,再加上问了一些人,现在总结一下. 一.如何用photoshop切图. ps里面有一个切片工具(slice ...
ps怎样导出dw的html,Photoshop切图怎么导入dreamweaver？
回答: PS自带有切片工具,不过用起来比较麻烦,如果是交付UI设计稿,可以用摹客这样的免费在线切图工具,可以自动生成不同尺寸不同分辨率的切图,也支持切换不同的平台,对于设计师来说比较省时省力. 以下介 ...
【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇插件 | 使用插件进行切图 )
文章目录一. PhotoShop 切图插件 - Cutterman 1.下载 Cutterman 插件 2.安装 Cutterman 插件 3.启动 Cutterman 插件 4.注册 Cutter ...
photoshop切图
1.传统切图 (1)打开一个psd文件,选择ps左边菜单栏的裁剪工具,选择切片工具.首先我们对这个psd文件进行分析,有意识的将其划分成几个选区,然后通过鼠标的拖拽用切片工具将我们所需要的图案切下来 ...
利用photoshop切图
首先,今天不用再p什么海报之类的东西了,哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈,好开心.嗯...接下来切入正题.(严肃脸) 在网页设计过程当中,必定会遇到需要往页面中插入图片的情况,这个时候,就要会用p ...
Photoshop——切图小技巧
准备工作把Photoshop功能面板设置成我们前端常用的并保存下来,这样就不用我们每次使用的时候都要花时间再去设置一次了. 1.设置标尺单位 --CSS里面用的最多的单位是像素(px),测量和读取的 ...
Photoshop切图简单设置+工具介绍+以及切图方法
一,photoshop的基本设置 1*将点选上的拖动到右侧工具栏中进行调整以及待用 2*视图(下的) ---显示---智能参考线打开 ----标尺将库 / 颜色 / 通道 /路径*********关 ...
【CSS】PhotoShop 切图 ② ( PhotoShop 切片选择工具 | 清除切片 | 新建基于图层的切片 | 透明背景图片切图 | 根据参考线选择切片 )
文章目录一. PhotoShop 切片选择工具二.清除切片三.新建基于图层的切片四.透明背景图片切图五.根据参考线选择切片一. PhotoShop 切片选择工具如果之前使用切片工具设 ...

Photoshop切图学习

Photoshop切图学习相关推荐

最新文章

热门文章