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

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

時(shí)間:2024-03-06 22:31作者:下載吧人氣:21

效果圖制作并不難,都是一些常用的圖形及效果制作。不過需要很深的界面設(shè)計(jì)功底,要能根據(jù)用戶習(xí)慣,把一些最常用的功能用簡潔的實(shí)用的方式表現(xiàn)出來。

最終效果

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

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

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

2、選擇“矩形工具”,創(chuàng)建一個(gè)大矩形,填充顏色#920049。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面
3、創(chuàng)建一個(gè)新的圖層,并填充顏色#ffffff,減少填充到0%。添加模式,單擊圖層樣式>圖案疊加。點(diǎn)這里下載圖案。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

4、添加標(biāo)題文字「Tuesday」,顏色填充#ffffff。然后點(diǎn)擊圖層樣式>陰影,給文本添加一個(gè)細(xì)薄的影子。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

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

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

6、設(shè)置前景色為#ffffff并利用鋼筆工具來創(chuàng)建云形狀。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面
7、現(xiàn)在,點(diǎn)擊圖層樣式添加描邊、顏色疊加和投影。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

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

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面
9、現(xiàn)在讓我們開始細(xì)節(jié)面板。選擇一個(gè)新層,并將其置于圖案層后,選擇“矩形選框工具”創(chuàng)建一個(gè)小紙條,填充顏色#00bff3。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

10、點(diǎn)擊圖層樣式>漸變疊加,添加圖層樣式。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

11、創(chuàng)建另一個(gè)紙條,并填充顏色#1f2f4e。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

12、現(xiàn)在讓我們添加文本和細(xì)節(jié),第一條,所以選擇“橡皮擦工具”,調(diào)整畫筆的大小和形狀的刷板。參考底部的模式,選擇一個(gè)漂亮的樣式。

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

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

14、添加文字「Moredetails」,填充顏色#ffffff。現(xiàn)在在右邊添加「更多」圖標(biāo),然后給文字和圖標(biāo)添加一些陰影,設(shè)置如下。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

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

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

16、用“矩形工具”創(chuàng)建導(dǎo)航按鈕,在中間創(chuàng)建一個(gè)矩形,顏色#88022e,然后添加投影。如下圖。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面
17、添加導(dǎo)航文本,然后給文本添加一些投影。

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

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

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

最終效果:

UI界面設(shè)計(jì)教程:簡潔的手機(jī)天氣界面

標(biāo)簽Photoshop,制作,簡潔,大氣,手機(jī),天氣,展示,界面

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

主站蜘蛛池模板: 啊灬啊灬啊灬快灬深用力点| 女娃开嫩苞经历小说| 啦啦啦啦在线直播免费播放| 一个人看的片免费高清大全| 男生把女生桶爽| 在线资源天堂www| 亚洲av永久青草无码精品| 阿娇囗交全套高清视频| 幻女free性zozozoxxxxx| 亚洲综合视频在线| 免费在线观看h| 投资6000能开一个sf吗| 你懂得的在线观看免费视频| 18男同少爷ktv飞机视频| 日本高清乱理伦片| 免费香蕉依人在线视频久| 7777久久亚洲中文字幕| 日韩三级免费电影| 免费看一级性生活片| 男女一边桶一边摸一边脱视频免费| 日本爱恋电影在线观看视频| 免费无遮挡肉动漫在线观看| 1000部免费啪啪十八未年禁止观看| 日本高清乱理伦片中文字幕啊| 免费日本黄色片| 亚洲www在线观看| 成人动漫h在线观看| 亚洲成av人片在线观看无码不卡 | 中文字幕日韩精品一区二区三区 | 好大好硬好深好爽想要之黄蓉| 亚洲宅男天堂在线观看无病毒| 被cao的合不拢腿的皇后| 天堂а√中文最新版地址在线| 五月婷婷开心综合| 精品亚洲麻豆1区2区3区| 国产精品女同一区二区| 中文字幕国产专区| 欧美妇性猛交视频| 和朋友共享娇妻高hh| 香蕉网在线播放| 差差漫画在线登录入口弹窗页面|