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

          軟件下載吧

          當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI界面設計教程:簡潔的手機天氣界面

          UI界面設計教程:簡潔的手機天氣界面

          時間:2024-03-06 22:31作者:下載吧人氣:25

          效果圖制作并不難,都是一些常用的圖形及效果制作。不過需要很深的界面設計功底,要能根據用戶習慣,把一些最常用的功能用簡潔的實用的方式表現出來。

          最終效果

          UI界面設計教程:簡潔的手機天氣界面

          1、打開Photoshop并新建一個600*800px 的新文件。

          UI界面設計教程:簡潔的手機天氣界面

          2、選擇“矩形工具”,創建一個大矩形,填充顏色#920049。

          UI界面設計教程:簡潔的手機天氣界面
          3、創建一個新的圖層,并填充顏色#ffffff,減少填充到0%。添加模式,單擊圖層樣式>圖案疊加。點這里下載圖案。

          UI界面設計教程:簡潔的手機天氣界面

          4、添加標題文字「Tuesday」,顏色填充#ffffff。然后點擊圖層樣式>陰影,給文本添加一個細薄的影子。

          UI界面設計教程:簡潔的手機天氣界面

          5、添加「溫度」,重復相同的過程,給溫度文本添加陰影。

          UI界面設計教程:簡潔的手機天氣界面

          6、設置前景色為#ffffff并利用鋼筆工具來創建云形狀。

          UI界面設計教程:簡潔的手機天氣界面
          7、現在,點擊圖層樣式添加描邊、顏色疊加和投影。

          UI界面設計教程:簡潔的手機天氣界面

          UI界面設計教程:簡潔的手機天氣界面

          UI界面設計教程:簡潔的手機天氣界面

          8、選擇「多邊形工具」調整頂部設置創建太陽,顏色為#fff691。并給下面這一層云添加描邊,填充顏色#ffba00。

          UI界面設計教程:簡潔的手機天氣界面
          9、現在讓我們開始細節面板。選擇一個新層,并將其置于圖案層后,選擇“矩形選框工具”創建一個小紙條,填充顏色#00bff3。

          UI界面設計教程:簡潔的手機天氣界面

          10、點擊圖層樣式>漸變疊加,添加圖層樣式。

          UI界面設計教程:簡潔的手機天氣界面

          11、創建另一個紙條,并填充顏色#1f2f4e。

          UI界面設計教程:簡潔的手機天氣界面

          12、現在讓我們添加文本和細節,第一條,所以選擇“橡皮擦工具”,調整畫筆的大小和形狀的刷板。參考底部的模式,選擇一個漂亮的樣式。

          UI界面設計教程:簡潔的手機天氣界面
          13、選擇“鋼筆工具”創建三角形,顏色#00bff3。并使用一個柔軟的圓形筆刷在底部描繪一個小的影子。

          UI界面設計教程:簡潔的手機天氣界面

          14、添加文字「Moredetails」,填充顏色#ffffff。現在在右邊添加「更多」圖標,然后給文字和圖標添加一些陰影,設置如下。

          UI界面設計教程:簡潔的手機天氣界面

          15、繼續我們的導航創建。首先,我們將創建一些分隔線。選擇「直線工具」,畫1px寬,前景顏色#00000的一直線。然后點擊圖層樣式>投影,樣式如下。

          UI界面設計教程:簡潔的手機天氣界面

          16、用“矩形工具”創建導航按鈕,在中間創建一個矩形,顏色#88022e,然后添加投影。如下圖。

          UI界面設計教程:簡潔的手機天氣界面
          17、添加導航文本,然后給文本添加一些投影。

          UI界面設計教程:簡潔的手機天氣界面

          18、將其余圖標(用以上相同的方式創建了云、太陽等)添加,并設置同樣的投影樣式,設置如下。

          UI界面設計教程:簡潔的手機天氣界面

          最終效果:

          UI界面設計教程:簡潔的手機天氣界面

          標簽Photoshop,制作,簡潔,大氣,手機,天氣,展示,界面

          相關下載

          查看所有評論+

          網友評論

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

          公眾號

          主站蜘蛛池模板: 日韩精品电影一区亚洲| 在线观看一区二区三区视频 | 怡红院一区二区三区| 伊人色综合一区二区三区| 无码人妻AⅤ一区二区三区水密桃 无码欧精品亚洲日韩一区夜夜嗨 无码毛片一区二区三区中文字幕 无码毛片一区二区三区视频免费播放 | 精品日产一区二区三区手机| 中日韩一区二区三区| 无码人妻精品一区二| 加勒比精品久久一区二区三区 | 无码毛片一区二区三区视频免费播放 | 国产不卡视频一区二区三区| 中文字幕一区二区在线播放| 日韩一区二区在线观看视频| 国产精品一区二区AV麻豆| 无码人妻精品一区二区蜜桃AV| 色婷婷一区二区三区四区成人网| 亚洲大尺度无码无码专线一区 | 78成人精品电影在线播放日韩精品电影一区亚洲 | 亚洲一区精品无码| 亚洲无线码一区二区三区| 国产福利一区二区三区在线观看| 日韩精品免费一区二区三区 | 欧美日韩精品一区二区在线观看 | 日本精品3d动漫一区二区| 美女一区二区三区| 国产精品第一区第27页| 国产日产久久高清欧美一区| 国产成人无码精品一区在线观看| 性色AV一区二区三区无码| 一区二区中文字幕| 国产美女精品一区二区三区| 日韩精品一区二区三区视频| 女女同性一区二区三区四区| 日韩一区二区久久久久久| 在线免费一区二区| 一本大道在线无码一区| 国产高清视频一区三区| 中文字幕永久一区二区三区在线观看| 国产主播一区二区三区在线观看| 一本大道在线无码一区| 亚洲AV无码一区二区三区鸳鸯影院 |