最近在整合App更新模塊，完成後瞬間覺得整個人都輕鬆了不少。雖然代碼這塊完成了，但整個樣式還需要再打磨打磨。看到別人家的更新界面，再看看自己的，簡直不忍直視啊...
這裡大致說下製作思路，需要psd文件的可以私信。
更新提示
更新提示
你們肯定猜到哪個是我的~
經過設計包裝，看看新的樣式
新更新界面
瞬間高大上，有沒有。
由於個人對設計還是有點興趣，就本著自己動手豐衣足食，為了節省時間，部分資源從網上拿來改造使用。這次用到的工具有Ps和Ai，Ps用來P圖的，Ai主要是處理svg矢量文件。
今天要製作的就是這塊，暫且叫banner了。
Banner
其實這個banner整體不是太複雜，就火箭、雲朵、文字、背景漸變及個別點綴。看到這些元素我們先別急，除了火箭稍微複雜點，其他的我們可以通過Ps自己做。當然火箭也是有方法的，阿里有個矢量圖庫（Iconfont），我們可以去那裡找找。
移動鼠標至目標圖片，選擇下載，根據需要進行選擇。
Iconfont
如果不需要調整可以直接下載png格式，我們這裡下載svg，方便後續調整。其他資源可以這裡搜搜看，還是挺豐富的，話說找資源也是個技術活。
圖標下載
Ps工程建立後，我們先使用圓角矩形工具畫好背景，圓角半徑跟進需要調整。然後調整圖層，增加漸變效果，然後下移圖層，給火箭留點空間。
背景製作
接下來畫雲朵，從路徑上看是很多大圓小圓合併的。
雲朵製作
然後是火箭和點綴，如果不怕麻煩都可以用Ps進行布爾運算來製作，我們這裡就用前面找的資源了，需要用到Ai，打開下載的svg文件，可以使用Ai進行顏色調整。
Ai打開svg文件
調色
在Ai中Ctrl+A，全選圖層，Ctrl+C進行拷貝。切換至Ps中Ctrl+V進行粘貼，選擇智能對象。然後按Ctrl+Enter確認。拖動圖層到需要的位置。類似橫H的也類似操作，完善後大致效果如下。
粘貼Ai資源
圖標智能對象
細節調整，加上提示文字。然後將做好的圖片放置項目中。
軟件設計
這裡操作複雜，主要是用了Ps的矢量技術，可以根據需要進行放大（調整圖像大小），下圖是調整了一倍，依然很清晰。僅僅是位圖的話操作要簡單不少。
放大效果
當然肯定還有其他操作方式，這裡僅分享個人思路，謝謝大家。
閱讀更多 鋅樂網訊 的文章
