凡科微傳單的制作步驟 怎么做特別牛的720°全景H5?
怎么做特別牛的720°全景H5?制作全景的效果并不急切,我們可以制作只必須的力量意派Epub360專業(yè)H5工具中的全景容器組件,晚幾天準(zhǔn)備好2:1比例的背景素材圖,通過具體的要求直接添加出來就可以了。
怎么做特別牛的720°全景H5?
制作全景的效果并不急切,我們可以制作只必須的力量意派Epub360專業(yè)H5工具中的全景容器組件,晚幾天準(zhǔn)備好2:1比例的背景素材圖,通過具體的要求直接添加出來就可以了。
一、案例效果演示
二、組件結(jié)構(gòu)
全景容器組件我們簡單啊將其結(jié)構(gòu)拆為三個(gè)層級(jí)結(jié)構(gòu):
1.最外層元素/背景
2.中層元素/背景
3.最內(nèi)層元素(交互元素可以放置層,是由:交互層)
最外層元素/背景是由全景容器組件最外層的圖片元素層組成,在手機(jī)上直接看時(shí),距離我們的視線最遠(yuǎn);
中層元素/背景是由全景容器組件中層的圖片元素層橫列在手機(jī)上在線觀看時(shí),相比較最外層背景,距離視線較近,進(jìn)入最內(nèi)層與最外層中間。
最內(nèi)層元素,在手機(jī)上在線觀看時(shí),相比最外層背景,相距視線最近;像是我們用一個(gè)layer頁面來做這一層,可以不在這一層做一些交互操作能觸發(fā)的設(shè)置。
可以不可以使用最外層背景(2:1圖)作為全景容器本身的背景,也可使用中層背景(2:1圖),也可以不再用頁面才是全景容器的背景(其它滿屏尺寸740X1136分辨率72dpi也可以畫布)。
小技巧:層次之間在滑動(dòng)屏幕時(shí),會(huì)產(chǎn)生錯(cuò)位視覺差效果,做的層次越多,視覺差效果越十分豐富。
三、應(yīng)用場景
全景容器組件,可以將長寬比例為2:1的畫面,以Y軸為中心軸,使畫面首尾相連,360度旋轉(zhuǎn)欄里點(diǎn),目前均該組件案例供大家參考。
《這些聲音你聽過嗎?》
《烏蘭察布第二屆冰雪藝術(shù)節(jié)》
三、素材準(zhǔn)備
文末附件直接下載素材,非商用,內(nèi)容僅供參考學(xué)可以使用。
1.如要想讓最外層背景可見,中層背景不能不能是JPG格式的,也可以是帶有透明區(qū)域的PNG格式圖片;至于,layer層內(nèi)不能不能隨意放置尺寸比例為2:1的JPG格式大圖。
2.查找尺寸規(guī)范。設(shè)置成的大背景尺寸比例為2:1(2000x1000px分辨率72dpi),所有的元素其他的銀色元素全是在PS中設(shè)計(jì)什么好后逐個(gè)文件導(dǎo)入。注意一點(diǎn):PNG格式的圖片裁切出掉不不需要透明區(qū)域。大圖的尺寸而且總體減小,但應(yīng)該要壓制下大小,盡可能會(huì)壓解。
3.將所有的元素或則大圖在PS等設(shè)計(jì)軟件中能完成。將元素在PS等設(shè)計(jì)軟件中設(shè)計(jì)排版成功后輪流文件導(dǎo)出PNG或JPG后,再上傳到Epub360編輯器系統(tǒng)設(shè)置。PS中的設(shè)計(jì)示例如圖:
4.只需絕對(duì)的保證每個(gè)小的元素跟大背景的比例正常了即可解決,所有零散的PNG圖片全是放到全景容器的layer層里。如圖:
也也可以將多個(gè)小元素放在旁邊兩張PNG大圖(尺寸比例2:1)上導(dǎo)出,才是分開來的一層,裝在中層背景或Layer層里,看個(gè)人的需求。
四、組件教程
都差不多用法
1.再添加全景容器組件:有高級(jí)組件——交互組件——全景容器。
2.然后點(diǎn)擊全景容器直接添加組件
3.再點(diǎn)【建議使用中層背景圖片】和【在用外層背景圖片】的縮略圖,也可以替換后尺寸比例為2:1的圖片(2000x1000px分辨率72dpi),兩個(gè)背景層也可以不設(shè)置里。
4.點(diǎn)擊上圖中任意一層背景圖,會(huì)會(huì)顯示素材可以上傳界面,僅支持上傳JPG/PNG格式的圖片。
4.鼠標(biāo)雙擊Layer層設(shè)置,可真接切換到到layer頁面中去添加或直接修改素材。
5.直接點(diǎn)擊后剛剛進(jìn)入到Layer中的排版效果如圖,點(diǎn)擊左上角的小黑三角是可以直接切換回頁面。
交互層設(shè)置里。用戶最如此關(guān)心的問題在全景容器中參與一些交互操作系統(tǒng)設(shè)置,象主要注意那就是在Layer層(最內(nèi)層)中通過的。
h5是什么軟件?
H5在狹義和廣義上有兩層含義,狹義上的H5只不過是一種編程語言,而廣義上的H5則涵蓋面了互聯(lián)網(wǎng)上絕大多數(shù)可以使用了HTML5技術(shù)頁面。
狹義上的H5是一種編程語言,是HTML5的淺顯寫法。HTML又是英文中的“超文本標(biāo)簽語言”的縮寫,HTML5也就是虛擬軟件超文本標(biāo)記語言。非常有趣的是,導(dǎo)致HTML5本身已經(jīng)是一個(gè)縮寫,實(shí)際上將HTML5及時(shí)縮寫成H5在英語語法中是出現(xiàn)錯(cuò)誤的,所以只有在H5才會(huì)被當(dāng)做HTML5的縮寫,以英語為母語的人群反而并沒法再理解H5的意思。
廣義上的H5則完全不同,我們?yōu)g覽的網(wǎng)頁的網(wǎng)頁、建議使用的乃至于于手機(jī)中的軟件,大部分都有H5的功勞。所以H5在國內(nèi)互聯(lián)網(wǎng)圈涵蓋教育的范圍極高,但凡在用了H5技術(shù)的網(wǎng)頁頁面等頁面都也可以被稱作H5。H5技術(shù)也不僅僅局限于單純的HTML5了,涵蓋面了HTML5、CSS3、JavaScript等一系列前端技術(shù)。
參與優(yōu)就業(yè),學(xué)習(xí)更多IT知識(shí)。