前端開發(fā)中，之前都是Designer給我們切好圖，給出readline，所以我們前端工程師基本不自己動(dòng)手切圖，現(xiàn)在換了新的公司，需要我們自己手動(dòng)切一些圖。Designer制作好的psd的圖片如下：

自己想達(dá)到以下要求：

1.將“Sign in”按鈕填充放大，文字也放大并且居中顯示

a).選中要操作的圖層

b).選擇右下角進(jìn)行拖動(dòng)，可以看到圖片變大了。也可以在工具欄中直接設(shè)置圖片的x，y坐標(biāo)和width、height值。

c).如果文字不是居中顯示的話，我們可以選中文字的圖層，然后點(diǎn)擊

T字區(qū)域。工具欄會(huì)顯示文字設(shè)置。

在這里可以調(diào)整文字的字體family和字體大小，消除鋸齒的方法等。

d).放大或縮小字體之后，文字不會(huì)水平和垂直居中，需要調(diào)整。

選中文字和按鈕背景的圖層：

然后工具欄如下圖所示：

可以設(shè)置水平對(duì)齊和垂直對(duì)齊方式。

2.如何快速從一個(gè)大圖中切出需要的那個(gè)小圖(Sign in按鈕)

通過上述方法，我們制作了一個(gè)簡單的放大版的登錄按鈕，現(xiàn)在要裁剪下來，給前端開發(fā)使用。所以要了解如何從一張很大的圖（就是說有很多圖層構(gòu)成的圖）切出那個(gè)小圖（當(dāng)前就是制作好的登錄按鈕）

步驟：

a.新建一個(gè)photoshop文件

然后直接將選中的登錄按鈕拖放到新的文件上。效果如下：

b.在新的文件中，點(diǎn)擊“圖像”->“裁切”。彈出的對(duì)話框如下：

點(diǎn)擊確定就可以將透明的背景去掉，只剩下我們需要的登錄按鈕。將文件另存為就好了。

PS：Photoshop中“裁剪”和“裁切”的區(qū)別

參考網(wǎng)址：

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

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

?

總結(jié)

以上是生活随笔為你收集整理的Photoshop切图学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。