<option id="ny7ud"><span id="ny7ud"></span></option>

        <nobr id="ny7ud"></nobr>

           找回密碼
           注冊

          掃一掃,訪問微社區

          QQ登錄

          只需一步,快速開始

          查看: 96117|回復: 67
          打印 上一主題 下一主題

          [其他作品] 銳普首發|新擬態風格PPT模板,限時免費下載!

          [復制鏈接]

          普通賣家

          2406

          主題

          4789

          帖子

          26萬

          銳幣

          積分
          36811
          跳轉到指定樓層
          樓主
          rapidppt賣家認證 微競賽 發表于 2020-2-27 19:27:42 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
          PPT作品
          版本: 其它版本
          各位好,今天繼續和大家分享有關新擬態風格的知識。


          在上一篇新擬態推文中介紹了其處理方式,大概有以下幾點:
          ❶ 有且只有一個光源照射❷ 元素與背景對比度比較弱❸ 常常用于按鈕組件和卡片❹ 按鈕狀態,視覺上凸出代表未選中,凹進去表示已選中狀態
          以上四點在之前的推文中介紹過,今天重點介紹第一點和第二點。


          目 錄 / Contents

          1 | 有且只有一個光源照射2 | 元素與背景對比度比較弱2.1 | 色值分析2.2 | CSS代碼分析2.3 | sketch源文件分析2.4 | 章節小結3 | 新擬態技法優化3.1 | 未選中狀態制作步驟3.2 | 選中狀態制作步驟3.3 | 制作心得3.3.1 | 巧用CSS代碼自動生成配色3.3.2 | 在暗色模式下不需要調整陰影透明度3.3.3 | 放大,遮住“漏光”4 | 新擬態PPT模板練習4.1 | 新擬態PPT模板免費獲取方式參考文獻


          1 | 有且只有一個光源照射


          | 圖片源自Dribble  @MazePixel
          通過觀察不難發現,光源定在左上角,從左上向右下照射。左上角亮色投影,右下角深色投影。

          所以,越靠近光源的部分,越亮,遠離光源的越暗。




          2 | 元素與背景對比度比較弱

          在上一篇推文的實操部分,高光和陰影投影我用的是純白和純黑,對比度太強,柔化邊緣參數要設置很大才能讓色彩過渡更柔和。
          經過色值與CSS代碼分析,我發現全部使用純白與純黑做投影并不好。

          2.1 | 色值分析

          以上次推文中的這三張案例為例進行色值分析,最終發現,無論在亮色模式下還是在暗色模式下,對比度都是很低的。



          2.2 | CSS代碼分析



          將以上三個案例的背景色放到https://neumorphism.io,根據CSS代碼分析默認狀態下的色值。


          完整版CSS代碼:


          | 代碼源自孟坤博客  @mengkun




          | 代碼運行后的效果

          根據代碼提取色值(外陰影)


          根據代碼提取色值(內陰影)




          2.3 | sketch源文件分析




          | 源文件源自站酷  @Frannnk

          2.4 | 章節小結



          通過色值與CSS代碼分析,確實了上一篇推文中的各種結論。其中要再強調一下新擬態風格元素的組成:1個形狀+2個投影。
          其中,形狀與背景色一致,當然也可以添加漸變。投影分為內投影與外投影,凹進去(選中狀態)多使用內投影。凸出(未選中)多使用外投影。
          所以在PPT中用柔化邊緣的方法添加兩個投影的方法是正確的。只需要注意不要使用純黑或純白,選取與背景色對比弱的色值即可。


          3 | 新擬態技法優化




          通過CSS代碼分析,投影大都是呈45°位移,而且受光與背光投影與頂層圖形呈中心對稱。

          在上一篇推文中,我們是通過柔化邊緣畫出兩個投影,然后通過調整位置實現新擬態效果。這種方法有兩個缺點:
          ❶ 形狀轉圖片后不便于二次修改❷ 很難手動調整到完全中心對稱

          基于這兩個缺點,我們來繼續優化。新方法:使用陰影。



          3.1 | 未選中狀態制作步驟

          ❶ 插入一個與背景顏色一致的圓角矩形,然后復制兩份,重合。

          ❷ 為方便選取元素,在「選擇窗格」中對三個矩形進行重命名。為方便識別,我將受光和背光部分用箭頭表示。



          ❸ 設置形狀格式,添加「陰影」效果。




          3.2 | 選中狀態制作步驟



          通過對源文件拆解,可以發現選中狀態下的按鈕需要用內陰影制作。


          在PowerPoint軟件中雖然也有內陰影,但兩元素不能重合,所以不能在PPT中使用內陰影制作。



          再找辦法——障眼法。在PPT中只能做出一道內陰影,另一道陰影我們可以通過「漸變」來彌補。效果如下圖所示:



          ❶ 添加內陰影



          注:以上參數不是唯一,需要根據具體形狀大小進行調整。

          一定要設置距離,因為如果距離為0,四周就會有陰影,影響第二個內陰影的制作。


          ❷ 添加陰影


          經驗一每個滑塊的顏色與背景色一致
          經驗二第一個滑塊(高光顏色),亮度提高10%~20%。




          經驗三第二個滑塊(陰影顏色),由于高光投影面積要超過對角線,所以滑塊位置建議放在60%~70%之間。

          這里要特別感謝《好PPT 壞PPT》讀者群一位熱愛鉆研的伙伴@河北小帥幫我驗證了以上幾點經驗。



          | PPT模仿案例  @河北小帥

          ❸ 添加漸變線



          注:以上參數不是唯一,需要根據具體形狀大小進行調整。
          經驗兩個滑塊顏色與背景色一致。第一個滑塊提高亮度(5%~15%),第二個滑塊降低亮度(-5%~-10%)。
          ❹ 順時針旋轉180度
          選中狀態下的形狀是一個有深度的圓角矩形,假如光源定在左上角不動。在地上看,左上角亮,右下角暗。從地下看,則相反。
          做了一個粗糙的3D動畫供大家理解。



          所以最后,為了讓陰影符合現實規律,需要把形狀順時針旋轉180°。



          當然,你也可以一開始就按照這樣的正確順序進行操作(具體操作順序因人而異)。

          3.3 | 制作心得



          3.3.1 | 巧用CSS代碼自動生成配色

          https://neumorphism.io輸入背景顏色,代碼會自動計算出兩個投影的色值。



          將生成的色值復制粘貼到最上面的背景顏色框中,直接用PPT中的「取色器」取色即可。
          3.3.2 | 在暗色模式下不需要調整陰影透明度


          3.3.3 | 放大,遮住“漏光”

          在暗色模式下會出現“漏光”現象,怎么辦?

          將最上層圖形放大一圈,遮住漏光部分即可。




          4 | 新擬態PPT模板練習



          PPT主題歐美商務總結匯報PPT模板
          配色方案
          字體方案
          思源黑體B\L\R
          這里要特別感謝銳普首席設計師 @吳建 對模板細節的審核。成品如下所示:

          《新擬態風格PPT模板》下載鏈接

          https://pan.baidu.com/s/1dTSAhnPD6catPCPDsms8rA

          提取碼:xyqn



          僅供個人學習使用,嚴禁商用!




          注:本模板部分頁面來自國外PPT模板(已購買版權)與網頁設計靈感,僅供個人學習使用,任何人不得對外銷售,若發現希望大家積極舉報。




          結論

          標準的新擬態風格,其內投影或外投影為了增加質感,都會添加投影漸變,由于在PPT中圖層不能疊加,所以這一點在PPT中是很難做出來的。



          要制作更精致的新擬態風格素材,推薦使用專業的UI設計工具,比如當下比較受歡迎的Sketch軟件。http://www.sketchcn.com


          注:目前這款軟件只有Mac版本,無Windows版本。

          如果在Windows上打開.sketch格式文件,推薦使用Lunacy。
          https://icons8.com/lunacy



          新擬態風格的使用場景和形狀元素可以靈活變動,但需要保證光影的統一。以上數值只是一個參考,不能作為唯一標準。具體細節還是需要多練,多觀察。


          參考文獻


          01.《趨勢 I 解析新擬態風格最全指南》https://www.zcool.com.cn/article/ZMTEwMjQ3Ng==.html
          02.Neumorphism(新擬態)UI設計趨勢嗎?https://www.zcool.com.cn/article/ZMTA5ODAwNA==.html


          新的一年,你的PPT也該升級一下啦,聯系我,讓你的PPT大變樣!











          點評

          請看x.co/3339(網址) 肺炎各地的嚴重程度不斷地升級,關注海外真實報道...... git.io/ghhhh (網址)  發表于 2020-5-26 19:55
          分享到:  微信微信 QQ好友和群QQ好友和群 QQ空間QQ空間 騰訊微博騰訊微博 騰訊朋友騰訊朋友
          收藏收藏8 轉播轉播 分享分享 分享淘帖 頂1 踩
          銳普PPT-專注高端PPT設計! http://www.rapidppt.com
          回復

          使用道具 舉報

          普通賣家

          2406

          主題

          4789

          帖子

          26萬

          銳幣

          積分
          36811
          沙發
           樓主| rapidppt賣家認證 微競賽 發表于 2020-2-27 19:28:08 | 只看該作者
          《新擬態風格PPT模板》下載鏈接

          https://pan.baidu.com/s/1dTSAhnPD6catPCPDsms8rA
          提取碼:xyqn

          僅供個人學習使用,嚴禁商用!

          [發帖際遇]: 一個袋子砸在了 rapidppt 頭上,rapidppt 賺了 10 元 銳幣. 幸運榜 / 衰神榜
          銳普PPT-專注高端PPT設計! http://www.rapidppt.com
          回復 支持 反對

          使用道具 舉報

          0

          主題

          13

          帖子

          224

          銳幣

          積分
          70
          板凳
          Tim3toNe 發表于 2020-2-29 12:07:13 | 只看該作者
          感謝分享,第一次知道ppt可以這么做
          [發帖際遇]: Tim3toNe在銳普PPT高手培訓課堂認真聽課,獎勵 6 元 銳幣. 幸運榜 / 衰神榜
          回復 支持 反對

          使用道具 舉報

          597

          主題

          2萬

          帖子

          16萬

          銳幣

          銳普守護者

          積分
          110572

          灌水精英勛章優秀會員勛章致富精英勛章優秀版主勛章守衛精英勛章智慧精英勛章2015奉獻楷模勛章推廣精英勛章

          報紙
          chinakui賣家認證 微競賽 發表于 2020-3-3 09:30:08 | 只看該作者
          這個風格在國外大火,期待在PPT領域也能有所表現
          銳意進取,普及精品——中國專業PPT領跑者
          回復 支持 反對

          使用道具 舉報

          0

          主題

          14

          帖子

          485

          銳幣

          積分
          82
          地板
          勵銘 發表于 2020-3-3 21:24:50 | 只看該作者
          厲害。。。!
          回復

          使用道具 舉報

          0

          主題

          4

          帖子

          182

          銳幣

          積分
          25
          6#
          zhousenlin 發表于 2020-3-4 12:43:50 | 只看該作者
          好東西值得分享
          回復 支持 反對

          使用道具 舉報

          1

          主題

          23

          帖子

          184

          銳幣

          積分
          144
          7#
          西瓜太涼 發表于 2020-3-5 20:54:46 | 只看該作者
          看來PPT已經盡力了
          回復 支持 反對

          使用道具 舉報

          0

          主題

          4

          帖子

          218

          銳幣

          積分
          21
          8#
          謎一樣的意識流 發表于 2020-3-6 17:26:44 | 只看該作者
          這也太絕了!
          回復 支持 反對

          使用道具 舉報

          7

          主題

          23

          帖子

          817

          銳幣

          積分
          121
          9#
          OneSurprise 發表于 2020-3-8 20:52:58 | 只看該作者
          感謝分享
          回復

          使用道具 舉報

          0

          主題

          11

          帖子

          215

          銳幣

          積分
          60
          10#
          張繁繁 發表于 2020-3-12 10:05:23 | 只看該作者
          大佬新年快樂
          回復 支持 反對

          使用道具 舉報

          您需要登錄后才可以回帖 登錄 | 注冊

          本版積分規則

          快速回復 返回頂部 返回列表
          挺进新婚少妇雪白的肉体

            <option id="ny7ud"><span id="ny7ud"></span></option>

              <nobr id="ny7ud"></nobr>