網(wǎng)絡(luò)有很多優(yōu)秀的設(shè)計(jì)和開發(fā)工具可能大家都不知道，因此這篇文章就向設(shè)計(jì)師推薦十款優(yōu)秀 HTML5 在線工具，這些工具能夠幫助設(shè)計(jì)師們?cè)O(shè)計(jì)出更有創(chuàng)意的作品。隨著 HTML5 技術(shù)的不斷成熟，網(wǎng)絡(luò)上涌現(xiàn)出越來(lái)越多的優(yōu)秀 HTML5 應(yīng)用，一起看看下面這些很棒的工具。

　　網(wǎng)絡(luò)有很多優(yōu)秀的設(shè)計(jì)和開發(fā)工具可能大家都不知道，因此這篇文章就向設(shè)計(jì)師推薦十款優(yōu)秀 HTML5 在線工具，這些工具能夠幫助設(shè)計(jì)師們?cè)O(shè)計(jì)出更有創(chuàng)意的作品。隨著 HTML5 技術(shù)的不斷成熟，網(wǎng)絡(luò)上涌現(xiàn)出越來(lái)越多的優(yōu)秀 HTML5 應(yīng)用，一起看看下面這些很棒的工具。

Online Sprite Box Tool

這款在線的 CSS Sprite 樣式生成工具，結(jié)合jQuery、CSS3和HTML5開發(fā)，能夠幫助你快速的生成CSS Sprite 樣式。

Online Pattern Generator Tool

這是一款在線紋理生成工具，當(dāng)設(shè)計(jì)師需要制作網(wǎng)頁(yè)背景的時(shí)候，它能夠幫上大忙。這款工具提供了很多的配置選項(xiàng)，使用非常簡(jiǎn)單，太棒了！

Online 3D Sketch Tool

這是一款很特別的繪圖工具，使用功能強(qiáng)大的 HTML5 Canvas 來(lái)實(shí)現(xiàn)3D繪圖功能。向讓畫布進(jìn)行立體選擇，你需要按住空格鍵并水平拖動(dòng)鼠標(biāo)，非?？?！

Online Font Testing Tool

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，選擇一款合適的字體是一個(gè)艱難的過程。這款非常棒的字體測(cè)試工具可以幫助設(shè)計(jì)師即時(shí)瀏覽新字體在頁(yè)面中的現(xiàn)實(shí)效果，不要修改任何的HTML或者CSS代碼，只需要把字體文件拖放的頂部的工具欄中，新字體就會(huì)出現(xiàn)在下拉列表中。

Online Velocity Sketch Tool

這是一款基于HTML5的在線素描工具，能在在線繪制一些奇特的東西，圖片顯示的就是我隨手畫的，我相信設(shè)計(jì)師們能夠畫出更加有創(chuàng)意的東西。

Online XRay Tool

通過這款工具，你可以查看到任何頁(yè)面上的元素細(xì)節(jié)， 類似于Firebug的元素查看工具，不過這個(gè)是在線的，不需要安裝插件，只需要把它們網(wǎng)站上的一個(gè)書簽項(xiàng)放到書簽欄，使用的時(shí)候點(diǎn)擊該書簽，然后再點(diǎn)擊需要查看的元素就可以了。

Online Automatoon (animation) Tool

Automatoon 是一款完全基于HTML5開發(fā)的在線工作制作工具，完全沒有使用Flash，制作的動(dòng)畫能運(yùn)行于 iPhones、iPad、Android設(shè)備以及各種常見瀏覽器。

Online HTML5 Audio Maker Tool

隨著HTML5發(fā)展，會(huì)有越來(lái)越多的HTML5網(wǎng)站開始使用強(qiáng)大的HTML5 audio標(biāo)簽功能。這個(gè)在線 audio 生成工具能夠幫助你了解HTML5 audio提供的各種新特性，還有一款類似的在線 HTML5 video 制作工具 。

Online SVG to HTML5 Canvas Tool

所有的矢量藝術(shù)包(Illustrator、Inkscape 等等) 都能夠?qū)С鰹?SVG (可縮放矢量圖形)，而這款工具幫助幫助你把SVG文件轉(zhuǎn)換成HTML5 canvas。

Chrome Ajax Animator Tool

這是一個(gè)跨平臺(tái)的動(dòng)畫工具，在線和離線都能使用。你只需要安裝有Chrome瀏覽器，然后通過快速指導(dǎo)教程引導(dǎo)入門，是一款對(duì)HTML5 動(dòng)畫初學(xué)者非常有用的工具。

您可能還喜歡

 

• 九個(gè)讓人難以置信的HTML5和JavaScript實(shí)驗(yàn)
• 讓人眼花繚亂的 HTML5 和 JavaScript 效果
• 推薦18個(gè)基于 HTML 5 Canvas 開發(fā)的圖表庫(kù)
• 29款基于 HTML5 Canvas 開發(fā)的網(wǎng)頁(yè)游戲
• 五大主流瀏覽器 CSS3 和 HTML5 兼容性大比拼

 

英文鏈接：10 Online HTML5 Tools For Web Designers

編譯來(lái)源：夢(mèng)想天空 ◆ 關(guān)注前端開發(fā)技術(shù) ◆ 分享網(wǎng)頁(yè)設(shè)計(jì)資源