下載吧 - 綠色安全的游戲和軟件下載中心

          軟件下載吧

          當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > PS繪制簡單時尚的電子商務網站UI按鈕

          PS繪制簡單時尚的電子商務網站UI按鈕

          時間:2024-02-19 06:00作者:下載吧人氣:32

          在這個教程里,將和童學們分享如何使用photoshop制作一個簡單又時尚的UI按扭,這個按扭可以用在電子商務網站,或者是網店上。先來看下效果。

          PS繪制簡單時尚的電子商務網站UI按鈕

          1.新建一個文檔(ctrl+N)大小為:600*600(雖然我們按扭的大小:170*50,但是尺寸大方便我們的修改)

          PS繪制簡單時尚的電子商務網站UI按鈕

          2.選擇“圓角矩形工具”并設圓角“5px”繪制一個大小為:170*50 的圓角矩形。(可以使用標尺定位)

          3.新建一個圖層,按組合鍵“ctrl+enter”把路徑轉化為選區,并填充黑色。
          雙擊這個圖層給圖層添加“漸變疊加”和“描邊”樣式。

          PS繪制簡單時尚的電子商務網站UI按鈕

          漸變疊加樣式

          PS繪制簡單時尚的電子商務網站UI按鈕

          PS繪制簡單時尚的電子商務網站UI按鈕

          描邊樣式(描邊顏色:#2877ac)

          PS繪制簡單時尚的電子商務網站UI按鈕

          PS繪制簡單時尚的電子商務網站UI按鈕




          4.接下來要給按扭添加一個“斜線效果”

          新建文檔(ctrl+N)大小為:4*4。

          PS繪制簡單時尚的電子商務網站UI按鈕

          按ctrl+空格鍵,放大文檔到1600%。新建一個圖層并刪掉背景圖層。
          PS繪制簡單時尚的電子商務網站UI按鈕

          在工具箱選擇“鉛筆工具”并設置筆尖大小為1px;前景色為白色。畫出如下圖效果:

          PS繪制簡單時尚的電子商務網站UI按鈕

          在菜單欄找到,編緝>定義圖案;并給圖案命個名字:diagonal line pattern.
          PS繪制簡單時尚的電子商務網站UI按鈕

          返回主文檔,按“ctrl”鍵不放;并單擊按扭圖層,使按扭圖案變成選區。
          PS繪制簡單時尚的電子商務網站UI按鈕

          在按扭圖層上新建一個圖層,然后在菜單欄找到:編輯>填充,在彈出的對話框中,在下拉菜單中選擇“圖案”,在下面的自定義圖案選擇我們剛才自定義圖案“diagonal line pattern”。
          PS繪制簡單時尚的電子商務網站UI按鈕

          在菜單欄找到:選擇>修改>收縮,把選區收縮2px,接下來把選區反選(ctrl+shift+I);按delete鍵刪除邊緣部分,這樣就可以把描邊顯示出來。
          PS繪制簡單時尚的電子商務網站UI按鈕

          更改“混合模式”“柔光”并調不透明度:20%
          PS繪制簡單時尚的電子商務網站UI按鈕




          5.選擇“文字工具”并找一個你自己喜歡的字體,字體大小:24pt,顏色:#ffffff.輸入文字“Buy Now”。
          雙擊文字圖層,添加一個“投影”樣式(投影顏色:#2877ac)。

          PS繪制簡單時尚的電子商務網站UI按鈕

          PS繪制簡單時尚的電子商務網站UI按鈕

          6.在工具箱選擇“自定形狀工具”,并在選項欄找到如下的圖形。
          繪制出大小:13*13;并填充白色,添加一個和文字一樣的樣式。

          PS繪制簡單時尚的電子商務網站UI按鈕

          PS繪制簡單時尚的電子商務網站UI按鈕




          7。創建hover狀態
          在圖層面板上新建一個組:Normal,把除背景外圖層全部拉到這個組里面。

          PS繪制簡單時尚的電子商務網站UI按鈕

          使用“移動工具”把組“Normal”拖到“新建圖層按扭”上,復制出一個組并命名:Hover
          PS繪制簡單時尚的電子商務網站UI按鈕

          雙擊組“Hover”中的“黑色圖形”圖層,更改其"漸變疊加"樣式:

          PS繪制簡單時尚的電子商務網站UI按鈕

          接下來,我們開始切片。
          使用“切片工具”把按扭的范圍選中。在菜單欄找到:文件>另存為Web所用格式,另存為gif格式。

          PS繪制簡單時尚的電子商務網站UI按鈕

          8。創建html

          下面是按扭的鏈接代碼
          ========================

          <a id="web_button" href="">Buy Now</a>


          ========================

          按扭的CSS樣式
          =====================
          <style type="text/css">
          #web_button {
          display: block;
          width: 170px;
          height: 50px;
          background: url(web_button.png) no-repeat 0 0;

          text-indent: -9999px; /* 隱藏文字 */

          outline: none;
          }

          a:hover#web_button, a:focus#web_button {

          background: url(web_button.png) no-repeat 0 -50px; /* -50px是為了讓圖片上升以顯示hover狀態 */
          }
          </style>

          標簽商務網站,UI,按鈕,電子,時尚,教程,繪制,簡單,PS

          相關下載

          查看所有評論+

          網友評論

          網友
          您的評論需要經過審核才能顯示

          公眾號

          主站蜘蛛池模板: 三上悠亚日韩精品一区在线| 亚洲一区二区三区在线 | 久久久久一区二区三区| 精品乱码一区二区三区在线| 丝袜人妻一区二区三区| 日本精品一区二区久久久 | 在线免费视频一区| 亚洲爆乳无码一区二区三区| 美女视频一区二区| 99国产精品欧美一区二区三区| 中文字幕一区二区三区在线不卡| 久久se精品一区精品二区国产| 一夲道无码人妻精品一区二区| 国产成人一区二区三区在线| 国产一区二区三区内射高清| 亚洲AV成人一区二区三区观看| 视频一区视频二区制服丝袜| 国产精品久久一区二区三区| 日韩亚洲AV无码一区二区不卡| 亚洲av无码一区二区三区四区 | 国产精品日本一区二区不卡视频| 久久久久人妻一区二区三区vr| 亚洲性无码一区二区三区| 精品无码人妻一区二区三区品| 色屁屁一区二区三区视频国产| 视频一区二区在线观看| 国产aⅴ一区二区三区| 在线视频国产一区| 高清一区二区三区| 国产一区二区视频在线观看| 2021国产精品视频一区| 国产精品第一区揄拍| 欧美日本精品一区二区三区| 日韩视频一区二区在线观看| 国产成人一区二区三区电影网站 | 四虎成人精品一区二区免费网站 | 老熟妇仑乱视频一区二区| 无码日韩精品一区二区三区免费| 国产一区在线mmai| 国产精品一区二区久久国产| 东京热无码av一区二区|