前言

??本篇是程序員仿照ui設計創建psd且切圖五個按鈕效果上傳至藍湖，本篇篇幅較長，整體完成一個目標，沒有分篇幅了。

前提條件

??已經安裝了PS，已經在PS上安裝了藍湖插件，并且曾經已經上傳過，若沒有裝PS的則自己裝PS，沒有裝藍湖插件請去藍湖官網查詢一下，可以安裝插件一鍵上傳。

程序員切圖要突破的必要技能

??以下技能，就是算裝了PS，會一些基本的調圖，但是實際不熟，需要將PS的幾個與切圖相關的功能熟練。

指定大小：在PS中，將新建圖標切換成指定大小，并且切圖導出。
縮放：在PS中，將新建圖標進行縮放后，再切，并且切圖導出。
透明背景： 在PS中，將新建圖標除了圖標本身外，其他切成透明背景
圓角: 在PS中，將新建圖標的背景做成圓角，結合透明背景，實現立體的按鍵。
陰影：在PS中，將立體的按鍵背景加上陰影。

本篇目標

??

操作：新建一個PSD文件

步驟一：打開PSD軟件

??

步驟二：新建PSD文件

??
??
??

步驟三：保存PSD文件

??
??

操作：繪制一個按鈕五種狀態

步驟一：拖一個矩形框

??

步驟二：修改為200x60像素

??

步驟三：復制5個圖層

??將該圖層復制5個
??
??點擊確認，就會在原有同樣位置新增一個圖層，這樣新建五個，如下圖：
??
??然后對圖層進行改名字，雙擊名字即可，如下：
??
??校準下位置，方法為先點擊圖形，然后點擊移動，如下圖：
??
??調整完成后，如下圖：
??

步驟四：調整顏色

??直接對整個圖層，進行調色，如下圖：
??

步驟五：調整顏色漸變

??
??對于漸進色調整的方法：

修改漸進點顏色：顏色會彈出顏色的選擇
??

新增漸進點：點擊中間區域：新增漸進點
??

刪除漸進點：將漸進點擊不送，拖出去即可刪除漸進點。
??
??操作如下圖：
??調整第一張，如下圖：
??
??逐一，抓色然后調整，最終如下圖：
??
??重新校準下大小（參照本操作的步驟二）：
??
??把背景圖層的顏色也改成一樣的，如下圖：
??

操作：繪制第四種，五種狀態的圖標

??在原來的圖層上，需要增加新的繪制，那么實際上是新增圖層，并將圖層合并到組，這樣第四五種就變成了圖層組了。

步驟一：先繪制2個橢圓條

??

步驟二：調整顏色

??
??調整完效果如下圖：
??

步驟三：合并組

??第四五個按鈕實際上是一個組的（為了后續上傳藍湖會一個圖片）
??
??然后將上面的按鈕拖入組，注意顯示在上面的必須在前面，最后如下圖：
??
??可點擊組旁邊的“眼睛”去查看實際效果，如下圖：
??

操作：添加圓角

步驟一：設置圓角矩形半徑

??

步驟二：依次都設置好，圓角為5

??

操作：添加漸進描邊

步驟一：選擇圖層

??

步驟二：右鍵“混合選項”

??

步驟三：選擇“樣式”

??

步驟四：調整到相似的效果

??
??如下圖：
??

步驟五：其他按鍵圖層依次操作

??最終效果如下：
??

操作：上傳PSD至藍湖

步驟一：選擇藍湖插件

??

步驟二：登錄

??

步驟三：選擇上傳到的團隊和項目

??

步驟四：上傳成功，查看藍湖

??
??下圖是沒有標記切圖的情況下上傳的：
??

步驟五：標記切圖，重新上傳，查看藍湖

??
??
??

下載切圖測試

??

上一篇：《程序員PS技能（三）：程序員使用PSD源文件切圖》
下一篇：敬請期待…

總結

以上是生活随笔為你收集整理的程序员PS技能（四）：程序员创建PSD文件、展示简单PSD设计流程，上传PSD至蓝湖，并下载Demo切图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。