程序員PS技能(四):程序員創建PSD文件、展示簡單PSD設計流程,上傳PSD至藍湖,並下載Demo切圖


前言

  本篇是程序員仿照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源文件切圖
下一篇:敬請期待…


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM