當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

程序员PS技能（四）：程序员创建PSD文件、展示简单PSD设计流程，上传PSD至蓝湖，并下载Demo切图

發(fā)布時(shí)間：2023/12/15 综合教程 28 生活家

生活随笔收集整理的這篇文章主要介紹了程序员PS技能（四）：程序员创建PSD文件、展示简单PSD设计流程，上传PSD至蓝湖，并下载Demo切图小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

??本篇是程序員仿照ui設(shè)計(jì)創(chuàng)建psd且切圖五個(gè)按鈕效果上傳至藍(lán)湖，本篇篇幅較長(zhǎng)，整體完成一個(gè)目標(biāo)，沒有分篇幅了。

前提條件

??已經(jīng)安裝了PS，已經(jīng)在PS上安裝了藍(lán)湖插件，并且曾經(jīng)已經(jīng)上傳過，若沒有裝PS的則自己裝PS，沒有裝藍(lán)湖插件請(qǐng)去藍(lán)湖官網(wǎng)查詢一下，可以安裝插件一鍵上傳。

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

??以下技能，就是算裝了PS，會(huì)一些基本的調(diào)圖，但是實(shí)際不熟，需要將PS的幾個(gè)與切圖相關(guān)的功能熟練。

指定大小：在PS中，將新建圖標(biāo)切換成指定大小，并且切圖導(dǎo)出。
縮放：在PS中，將新建圖標(biāo)進(jìn)行縮放后，再切，并且切圖導(dǎo)出。
透明背景：在PS中，將新建圖標(biāo)除了圖標(biāo)本身外，其他切成透明背景
圓角: 在PS中，將新建圖標(biāo)的背景做成圓角，結(jié)合透明背景，實(shí)現(xiàn)立體的按鍵。
陰影：在PS中，將立體的按鍵背景加上陰影。

本篇目標(biāo)

操作：新建一個(gè)PSD文件

步驟一：打開PSD軟件

步驟二：新建PSD文件

??
??
??

步驟三：保存PSD文件

??
??

操作：繪制一個(gè)按鈕五種狀態(tài)

步驟一：拖一個(gè)矩形框

步驟二：修改為200x60像素

步驟三：復(fù)制5個(gè)圖層

??將該圖層復(fù)制5個(gè)
??
??點(diǎn)擊確認(rèn)，就會(huì)在原有同樣位置新增一個(gè)圖層，這樣新建五個(gè)，如下圖：
??
??然后對(duì)圖層進(jìn)行改名字，雙擊名字即可，如下：
??
??校準(zhǔn)下位置，方法為先點(diǎn)擊圖形，然后點(diǎn)擊移動(dòng)，如下圖：
??
??調(diào)整完成后，如下圖：
??

步驟四：調(diào)整顏色

??直接對(duì)整個(gè)圖層，進(jìn)行調(diào)色，如下圖：
??

步驟五：調(diào)整顏色漸變

??
??對(duì)于漸進(jìn)色調(diào)整的方法：

修改漸進(jìn)點(diǎn)顏色：顏色會(huì)彈出顏色的選擇
??

新增漸進(jìn)點(diǎn)：點(diǎn)擊中間區(qū)域：新增漸進(jìn)點(diǎn)
??

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

操作：繪制第四種，五種狀態(tài)的圖標(biāo)

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

步驟一：先繪制2個(gè)橢圓條

步驟二：調(diào)整顏色

??
??調(diào)整完效果如下圖：
??

步驟三：合并組

??第四五個(gè)按鈕實(shí)際上是一個(gè)組的（為了后續(xù)上傳藍(lán)湖會(huì)一個(gè)圖片）
??
??然后將上面的按鈕拖入組，注意顯示在上面的必須在前面，最后如下圖：
??
??可點(diǎn)擊組旁邊的“眼睛”去查看實(shí)際效果，如下圖：
??

操作：添加圓角

步驟一：設(shè)置圓角矩形半徑

步驟二：依次都設(shè)置好，圓角為5

操作：添加漸進(jìn)描邊

步驟一：選擇圖層

步驟二：右鍵“混合選項(xiàng)”

步驟三：選擇“樣式”

步驟四：調(diào)整到相似的效果

??
??如下圖：
??

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

??最終效果如下：
??

操作：上傳PSD至藍(lán)湖

步驟一：選擇藍(lán)湖插件

步驟二：登錄

步驟三：選擇上傳到的團(tuán)隊(duì)和項(xiàng)目

步驟四：上傳成功，查看藍(lán)湖

??
??下圖是沒有標(biāo)記切圖的情況下上傳的：
??

步驟五：標(biāo)記切圖，重新上傳，查看藍(lán)湖