js科技感樣式（js 樣式）

本文目錄一覽：

• 1、我用html, css, JavaScript 製作了如下圖標，如何將這圖標轉化成圖片（JPG或PNG格式）？詳情見下：
• 2、科技感強的文字字體
• 3、大神們幫幫忙 誰知道下面這種科技感的裝飾線條是怎麼做出來的 能用CDR做么？ 如果可以請說下大致步驟.
• 4、幻覺科技感風格的字體設計如何繪製
• 5、帶有科技感的信息圖表用什麼軟體做比較方便？

我用html, css, JavaScript 製作了如下圖標，如何將這圖標轉化成圖片（JPG或PNG格式）？詳情見下：

你不想用 canvas、svg 和任何圖片格式的文件，那你只有將圖片轉換成 Base64 編碼來進行讀取。

但是 Base64 的圖片不宜超過200k，否則不容易被顯示，也不建議這麼做，圖片是可被緩存的，而網頁代碼不能，因此也代表著這個代碼會隨著每次訪問都被載入一遍，增加不必要的流量和耗時。

Base64工具網站：網頁鏈接

科技感強的文字字體

1、逼格銳線體簡4.0

逼格銳線體簡4.0是一款無線襯托的裝飾體，也是亞洲字體的一個首創字型。該字體應用性強，可以拉伸使用，沒有弧線，線條富有節奏與靈氣，灰度均勻，穿插合理，具有現代感和科技感，字型飽滿，適合橫排和豎排。

2、銳字逼格青春體

銳字逼格青春體是一款由銳字工房製作的漢語簡體字體，可以快速安裝到電腦本地字體庫中使用，銳字逼格青春字體擁有字體飽滿、字形勻稱、設計合理等特點，非常具有現代感和青春感，適合應用到手機字體、平面設計、字體列印中。

3、銳字銳線極限黑簡

銳字銳線極限黑簡是一款以線體為原型設計的中文藝術字體，字體簡潔漂亮，效果非常出色，GBK編碼收字更全，適合應用於廣告設計、名片設計、包裝印刷、產品設計等應用。

4、蘭亭超細黑簡體

蘭亭超細黑簡體是一款電腦簡體字體，這種字體最大的特點就是寫出來的字非常的細，而且很端正，可以用於印刷、廣告設計方面。

5、漢儀旗黑字體

漢儀旗黑共由三個系列字體組成，從最細的25到最粗的105，共計15個字重，是迄今為止國內最大、最豐富的字重的家族字體，可以滿足企業多渠道，全方位的內容設計。

大神們幫幫忙 誰知道下面這種科技感的裝飾線條是怎麼做出來的 能用CDR做么？ 如果可以請說下大致步驟.

用CDR是可以做到的..但首先要知道這個圖形的參數數據才可以.

也就是說,要完全做到和圖中形狀一模一樣的,只有原設計者才可以.別人也只能做到相似.

(如果只是一個人隨機做出來的,並不是特別按要求來做的.那麼就算是原設計者也不可能重新做一次)

你可以用調和工具和封套工具試著做一下.不斷調整.應該是可以的.

下面我只是簡單把原理示範一次給你,並不是按圖中的樣式做的..

你圖上只是做出一個圖形,然後再複製4個,按不同位置交錯組合擺上去就是了.

幻覺科技感風格的字體設計如何繪製

方法/步驟

1

新建 1280*720圖層

2

填充黑色背景使用文字工具打出你想要的字。

雙擊文字圖層(也可以右鍵選擇混合模式）進去圖層樣式，我們這裡就調整內發光和外發光。

按M用矩形選擇工具選擇字體然後CTRL左鍵點擊添加適量蒙版。如圖所示：

如果文字外發光太尖銳，鋒利了我們可以給文字添加一個高斯模糊，重要的來了，可是我們又不想柵格化文字圖層，如果柵格化了後面的步驟就完成不了，那麼我們就給它轉化為智能濾鏡！選擇濾鏡–轉換為智能濾鏡！

這裡就可以給文字進行高斯模糊了，我這裡就模糊了1像素。

我們新建一個大小為14*14像素的畫布。

畫布太小你可以把它放大，設置前、背景色為黑白色，G漸變工具，預設選第一個。按住鍵盤上Shift從上往下拉。

編輯-定義圖案，保存這個圖案

回到我們的文字畫布。進圖層樣式–圖案疊加-選擇剛剛我們保存的圖案，模式改為強光，不透明度50%

給文字羽化矩形選擇工具選擇，Shift F6進行羽化，我這裡設置20像素。(我建議大家能多記住些快捷鍵這樣工作效率比較高）

按住CTRL，滑鼠點擊矢量蒙版給文字添加蒙版。

13

最後就可以了，但是看起來有點暗，這裡你可以改變圖層模式或者給文字加一個色階，反正方法很多大家可以多做做這樣自己記得比較深。我這裡給它加了一個色階。

帶有科技感的信息圖表用什麼軟體做比較方便？

這是一套專門用來做數據可視化的字體：FF Chartwell Font Family。這套字體包含七種字體，分別可以做柱狀圖、餅狀圖、雷達圖、玫瑰圖等7類。如黑科技一般，只要使用了這套字體，輸入數字後就能馬上得到漂亮的圖表。首先想說的是，能轉變為圖表是因為這套字體支持 OpenType ，如果你所用的軟體不支持 OpenType 的話，那你就無法享受到這套字體帶來的快感。（所有 Adobe 系列的軟體都支持 OpenType，而 MS Office 應該是不支持的）在這裡，我用 Ai 為例，畫一個簡單的條欄圖。第一步，用文字工具輸入「10+20+30」，並將其字體設置為ChartwellBars，即條欄圖字體。第二步，給三個數字分別改一個顏色，以獲得一個好的數據呈現。第三步，重點來啦！！轉到 OpenType 屬性窗口（如果沒有可以在窗口屬性欄里找到並打開），點擊兩個圈住的按鈕中的任意一個，這三個數字瞬間就變成了一個條欄圖了。然後我再重新變回數字的樣式，再次更改數值，並加入一個等於號。在ai中創建如圖的bar，數據比例按需求改變。拖到brush里，選擇pattern brash畫一個圓，然後點擊剛才新建的brush旋轉再加個背景，間距比例可以通過之前的筆刷圖案調整，在AI中選擇散點圖，創建如下坐標系，略加編輯，再改改細節，畫上圖表加上背景充分修改細節，畫個圓圈畫個方塊，點這個連一起再加個圓圈，最後加上線和圓圈即可。