Photoshop切图学习

简介:

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

clip_image001

自己想达到以下要求:

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

a).选中要操作的图层

clip_image002

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

clip_image003

clip_image004

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

clip_image005

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

clip_image006

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

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

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

clip_image007

然后工具栏如下图所示:

clip_image008

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

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

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

步骤:

a.新建一个photoshop文件

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

clip_image009

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

clip_image010

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

clip_image011

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

目录
相关文章
|
数据安全/隐私保护
五、用PhotoShop去图片的水印 | 微课系列教程
图片,是我们PPT、微课必不可少的素材。在之前的课程中,给大家讲过如何找大图、高清图等,但从网站上找到的一些图片,总是多多少少有一些水印之类的杂物,严重影响我们的使用,今天这一课,就跟着我来一起用Ps去掉图片中你不想要的部分吧!
116 0
Photoshop制作简洁清新的插画海报图片
Photoshop制作简洁清新的插画海报图片
71 0
|
存储 文件存储
切图技巧
切图前的准备 设置好显示的窗口,需要显示以下几个:字符、段落、属性、信息、历史记录、图层,其他的一律不要,如下图 勾选自动选择,然后选择图层,点击某个图标时会自动定位到图层,如下图 快捷键 V-移动工具 M-矩...
1240 0
|
前端开发
教你如何快速切图
在Web开发当中,前端开发充当着“承上启下”的重要角色:上“承”设计(切图),下“启”后端(数据交互)。那么,今天我就来跟大家讲讲切图~~~ 本人常用两种切图方式:“选框复制法”和“切片法”,在此只讲解选框复制法的快速切图方法。
1326 0