亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

首先小月在前面跟大家說一下，這篇教程講的是APP界面教程，操作步驟比較多，但是內(nèi)容比較詳細(xì)，所以大家不要著急，一步一步來，畢竟學(xué)習(xí)不是一成而就的，需要不斷的去操作、練習(xí)。謝謝大如果這篇教程讓你有所收獲，記得給小月點個贊哦，謝謝大家了~小月在B站發(fā)布了一些教學(xué)視頻，感興趣的童鞋可以去了解一下哦https://space.bilibili.com/334026226/#/

PART1：首先是展示效果圖

PART2：創(chuàng)建文件、設(shè)置背景

步驟一：文件-新建-進(jìn)行下面設(shè)置。

步驟2：從工具欄選“矩形工具”，尺寸設(shè)置為750*1334像素，然后對齊畫布，并設(shè)置背景顏色：#313952、#393f52。

PART3:狀態(tài)欄和導(dǎo)航欄部分 

步驟1：狀態(tài)欄就是手機(jī)電池電量那一部分，這個可以去網(wǎng)上下載。然后放到界面的頂部。先設(shè)置一個750*40px的矩形，然后把下載到的狀態(tài)欄條對這個矩形垂直居中、水平居中。（這里說一個技巧：可以按住Ctrl，在圖層面板上點擊這個矩形，這樣就會出來一個預(yù)選框。然后再點擊下載到的狀態(tài)欄進(jìn)行上面的對齊操作。）最后記把這個隱藏了或者刪除掉。

步驟2：畫導(dǎo)航欄，這里導(dǎo)航就很簡單了。一個漢堡菜單icon和一個錢包標(biāo)題。依然還是建一個待會兒要對齊的圖層（750*88px）。先預(yù)覽下效果。

步驟3：接下來繪制漢堡菜單icon。

a：先用矩形工具畫最上面那一條（24*4px），顏色：#FFFFFF。

b：再用工具欄的黑色箭頭選擇畫好的那一條，復(fù)制一層（Ctrl C，Ctrl V）然后往下移動10px（按住shift+↓），如下操作。

c：重復(fù)操作復(fù)制出第三條。

d：再將中間那條往左移動6px。

e：最后將這個畫好的icon放好位置。按住shift，點擊前面建好的高度88px，記得點一下工具欄的“移動工具”，然后再點擊icon圖層。頂部就會出現(xiàn)對齊的一些操作，選垂直居中和左對齊。

f：最后可以把預(yù)選框取消了（Ctrl+D），同時把背景條（我這里是黑色的）隱藏了。然后再按住shift+→(每次移動10px，我們要向右移動80px)。

步驟4：把標(biāo)題寫上去，同時記得水平居中，垂直居中。設(shè)置如下：

PART4：繪制頭部卡片部分。

步驟1：先做出中間的卡片。

a：矩形工具畫一個590*340px的矩形，圓角10px。填充漸變顏色#373f57、#4d5672，角度45°。 對整個背景畫布水平居中，依然是上面的方法，按住shift，點擊背景圖層，出現(xiàn)預(yù)選框，然后點這個卡片的圖層，再用移動工具（工具欄最上面那個），然后就可以水平居中了。 最后卡片設(shè)置圖層樣式-投影。 卡片設(shè)置如下圖。

b：選一個粗一點的字體，打出VISA字樣。圖層雙擊進(jìn)入圖層樣式設(shè)置，添加漸變色#8189a6、#eff1f6，角度0°。設(shè)置如下：

c：把透明度降為10%。文字距離卡片左邊和下面均為30px。

d：添加卡片里面的文字信息。顏色：#FFFFFF。

e：上面文字1和2部分透明度60%，文字3部分透明度40%。

f：網(wǎng)上找VISA的logo，保存完放到卡片上，縮放到合適大小。離下面卡號文字60px，上面和左邊均為30px。添加圖層樣式-顏色疊加（#ffffff）。透明度80%。

步驟2：接下來就可以把左邊的卡片畫出來了。這里直接復(fù)制一份上面這張卡片就行了。然后Ctrl+T，在上面縮放比例設(shè)置80%，80%。然后按住shift，移動到左邊且離中間卡片距離為40px。

步驟3：復(fù)制出右邊的卡片。方法同步驟2。只留下卡片就行，文字啥的都刪掉。會發(fā)現(xiàn)太黑了，需要反向漸變顏色（屬性欄）。

PART5：繪制中間的卡片。

步驟1：先把小標(biāo)題輸進(jìn)去。設(shè)置參考如下，透明度40%。距離上面卡片60px，和卡片左對齊。

步驟2：先把第一個卡片做好，其他卡片改改顏色，改改數(shù)字就行了。

a：新建一個矩形220*273px，圓角10px。填充顏色：#4d5672。設(shè)置投影，最后左對齊上面文字。

b：新建一個橢圓工具80*80px。描邊6px，顏色#373f57。上距離30px，左距離30px。透明度降為80%。

c：復(fù)制一層，然后透明度改回來（100%）。把屬性面板的“設(shè)置描邊線段的端點”改成圓的。否則等會我們要截掉這個圓圈的部分端頭就會是平的。描邊設(shè)置為8px。并修改描邊顏色為漸變色（#f4b962、#f462a0），角度60°。

d：選擇鋼筆工具里（鼠標(biāo)長按）的添加錨點工具（圖層面板選的是上面這個漸變?nèi)θΓ?/p>

f：再點一下上圖2的位置，鍵盤Delete鍵，刪除。剩下的線段會是端點圓頭的，還記得前面讓大家設(shè)置的吧。

e：給它加一個高光：新建一個8*8px圓，顏色用吸管吸一下末端顏色。然后雙擊進(jìn)入圖層樣式添加外發(fā)光，里面的顏色還是你吸到的顏色。最后把這個高光圖層放到線段圖層的下面。然后調(diào)整好界面顯示的位置，讓它們看起來是一個整體

步驟3：接下來就好辦了，把文字添加進(jìn)去。

a：下圖為“1680”的字符設(shè)置，美元符號$和1680一樣，只需要把字號改成22即可。最后調(diào)整位置，左邊距離30px，上距離60px。

b：第一個卡片的就剩最后一步啦。新建文字圖層把日期打進(jìn)去，下面是字符設(shè)置。透明度改為40%。上距離20px，左和下距離都為30px。

步驟4：第二個卡片，現(xiàn)在只需要復(fù)制剛才做好的那個卡片就行了。然后調(diào)整卡片與卡片的距離為30px。最后改改文字，改改顏色#5ae0cf、58a3e1。

步驟5：同步驟4，顏色：#ec5a6f、#ac5aec。最后效果如下:

PART6：最后一個版塊。

步驟1：首先把上面的文字一個一個（分三個圖層）打進(jìn)去。字符串間的距離為40px。選中的字符串“monthly”底下加一藍(lán)綠色條強(qiáng)調(diào)一下。色條長度和文字長度一樣就行，高度2px，顏色：#5addcf，向上距離文字10px。

步驟2：接下來畫出5條豎線（間距100px），顏色#FFFFFF，寬度1px，高度到頁面的底。透明度20%。打出文字，注意文字和線兩邊的距離還有和兩邊文字的距離，一定要是對稱的。最后把文字打包建一個組，整組透明度40%。

步驟3：最后一步啦，搞定就完美了。先來看下下最后效果：

a：用鋼筆工具，勾勒出形狀。采用描邊6px，不要用填充哈。添加一個漸變色：#5abce0、#5ae0cf，并把第一個顏色的透明度改成20%。如下：

b：最后一個小東西啦，畫一個14*14px的圓，填充：#5ae0cf，描邊4px，顏色：#FFFFFF。放在線段的末端。如下：

c：給這個圓加一個外發(fā)光的圖層樣式。如下：

d：一起來看一下這部分做完的整體效果：

e：預(yù)覽整個頁面最終設(shè)計效果：

PART7：總結(jié)

做完之后，有沒有覺得雖然簡單，但是也是有學(xué)到一些知識呢。界面要注意規(guī)范問題，比如間隙的把控，字體字號的選擇，什么是重點什么是輔助，怎么來區(qū)分，以及真?zhèn)€界面的穩(wěn)定性還有顏色色彩的選擇，這些你都明白嗎？多做練習(xí)，如果有想法可以自己修改。