搜索
Hype九九自拍 首頁 學習 教程 查看內容

Mike手把手系列之 (四) 如何在hype中導入圖片不模糊

2015-8-26 21:58| 發布者: MIke| 查看: 8697| 評論: 1|原作者: Mike

這個問題在我們的學習交流群中頻頻有人問及,那在下面的文章中,我就給大家介紹一下具體的解決方法把

最近群里時常有人問:為什么在hype中導入的圖片,預覽的時候會模糊呢?

于是在晚上的時候,我嘗試了用不同尺寸倍數的圖片導入到hype中,然后在電腦瀏覽器和手機中都預覽了一遍。得出了一個結論:如果要在hype中導入的圖片不模糊,圖片必須為hype內置尺寸的2倍基準圖(為了支持retina的屏幕),后綴需要以@2x結尾(這里需要注意一點,圖片不能用中文命名)。如果你覺得圖片比較大,tinypng.com中壓縮一下大小(很好用的在線圖片壓縮工具)。

這里我們都知道hype和sketch一樣都是用的一倍基準圖來設計的。也知道,導入到web代碼的尺寸剛好是實際設計尺寸的一半。因為大家后面是需要把動效以html5輸出的,所以導入到hype中的尺寸需要為2倍的基準圖。這個和平時大家切圖給程序員是一樣的(就相當于你切圖給了hype)。

考慮到使用不同軟件的設計人群,這里我們可以分兩種(sketch/photoshop)情況來講。(一)1.當你在sketch設計界面的時候,就拿手機頁面交互動效來說吧。在新建畫板的時候,我們就可以發現sketch各類手機的設計尺寸,很明顯他是以一倍圖作為設計基準的。例如我們在iphone6的尺寸上做設計(375*667px),那么按照之前得出的結論的方法,我們需要導入到hype的尺寸為750*1334(iphone6的實際尺寸),并且后綴以@2x結尾。不過在sketch中有方便的切圖導出工具:

我們只需要將size(尺寸)的下拉選項中選擇2x-也就是2倍的尺寸,我們發現后面緊跟著的suffix(后綴)自動會命名成@2x。那么format(格式)就大家根據自己需求選擇吧。2.如果你在sketch中是按實際尺寸設計的,那么切圖導出時候的選項應該是這樣的:

尺寸保持1倍不變,但我們的后綴名還是需要設置成@2x。

(二)當你在photoshop中設計的時候,因為我們知道,ps中設計界面,一般都是用的實際尺寸(比如iphone6,我們就直接在新建的時候將尺寸設置為750*1334)。如果你安裝了ps的切圖插件(cutterman)那么你可以很方便地導出@2x的圖。因為我們是按實際尺寸設計的界面,所以這里的@2x圖也就是我們需要的實際尺寸圖.

那么如果你沒有安裝cutterman的話,就需要手動來命名了。不過其實也簡單,我們將導出的的實際尺寸圖片的名字后面加上后綴@2x就ok了。例如一張名為bg的圖片,我們的命名方式為:bg@2x.jpg

那么我們怎么看導入的@2x圖片是否已經生效呢?打開資源庫,在以123命名的圖片下面會有2種圖片型號,一種是標準的@1x圖,另一種是retina@2x。然后我們發現,我們導入的圖片已經覆蓋在了retina@2x上,而且名字的后綴也剛好是@2x。那就說明已經成功生效了。

按照以上的幾種設置方式,你可以在瀏覽器種預覽一下圖片效果,這時你會發現圖片不再模糊了,那就這樣愉快滴解決了。

過程中如果遇到問題的話可以在hype社區中()發帖留言,或者在hype3學習交流群(455806127)中留言。

歡迎關注微信公眾號design_bar,第一時間得知hype的最新動態和hype教程的更新

1

鮮花

握手

雷人

路過

雞蛋

剛表態過的朋友 (1 人)

發表評論

最新評論

引用 壁花demon 2015-10-1 19:19
我遇到個問題:首頁點擊菜單按鈕跳轉到設置菜單B(成功),設置菜單B頁面上點擊首頁按鈕跳轉回首頁A(成功),但再次點擊重復剛才操作時(點擊菜單按鈕)會重復執行剛才的時間線動畫但就是不會跳轉到設置菜單B頁面,這是什么原因 是需要加一個暫停的幀嗎

查看全部評論(1)

為廣大Hype愛好者提供一個學習交流的平臺

正在努力制作Hype教程,盡可能為大家帶來最新的體驗!

Copyright © 2015 Comsenz Inc. Powered by Discuz! X3.1

返回頂部