資訊專欄INFORMATION COLUMN
摘要：切圖主要是用的工具就是等等，除此之外，在開發(fā)過程中我們也會(huì)用到其他工具，以下介紹一些有關(guān)于圖片處理的操作。是打開文件捕捉活動(dòng)窗口捕獲窗口捕獲矩形區(qū)域，可自行截圖。新版的比之前那些版本增加了一鍵導(dǎo)出功能，這個(gè)功能很大程度方便了我們拆分圖片。
在寫頁面之前，很重要的一個(gè)技能是切圖，根據(jù)UI設(shè)計(jì)的設(shè)計(jì)圖，在了解頁面結(jié)構(gòu)和操作后進(jìn)行分割，取出自己在開發(fā)過程中是用到的圖片資源。
切圖主要是用的工具就是PS、XD等等，除此之外，在開發(fā)過程中我們也會(huì)用到其他工具，以下介紹一些有關(guān)于圖片處理的操作。
（1）圖片轉(zhuǎn)Base64：https://tool.css-js.com/base6...
（2）圖片格式轉(zhuǎn)化：https://jinaconvert.com/cn/
（3）少量圖片壓縮不失真：https://tinypng.com/
（4）免費(fèi)圖標(biāo)素材：http://669pic.com/
（5）平面設(shè)計(jì)工具:https://www.chuangkit.com/
這是一款非常實(shí)用的屏幕截圖抓取軟件，占用空間小，安裝啟動(dòng)后是這樣的。
（1）是打開文件
（2）捕捉活動(dòng)窗口
（3）捕獲窗口
（4）捕獲矩形區(qū)域，可自行截圖。
（5）捕獲手繪區(qū)域
（6）捕獲全屏
（7）捕獲滾動(dòng)窗口，就像手機(jī)滾動(dòng)截屏
（8）捕獲固定區(qū)域
（9）視頻錄像機(jī)
（10）輸出
（11）設(shè)置實(shí)用小工具
我個(gè)人比較喜歡使用的工具就是（7）、（9）、（11）里面的小工具，想拾色器、放大鏡等。
1、Photoshop：切圖仔必備，在慕課網(wǎng)上有一個(gè)詳細(xì)的視頻講解：https://www.imooc.com/learn/506
切圖是開發(fā)中很重要的一步，圖片切好了對(duì)于后面我們寫頁面會(huì)是事半功倍，在切圖中我們需要注意的是怎么切，是不是把每一行張圖都很仔細(xì)的切下來呢，不是的，是根據(jù)頁面結(jié)構(gòu)，有目的的切，要想想切出來的圖是否符合頁面的需求。新版的CC比之前那些版本增加了一鍵導(dǎo)出功能，這個(gè)功能很大程度方便了我們拆分圖片。
2、XD：Adobe公司的另一個(gè)產(chǎn)品，原型設(shè)計(jì)工具，現(xiàn)在UI同事使用的設(shè)計(jì)軟件是這個(gè)，所以我就直接使用這個(gè)軟件切圖了，這個(gè)軟件帶有一件導(dǎo)出功能，一般直接選擇我們需要的圖片導(dǎo)出就行了，需要注意的一點(diǎn)就是要安裝與設(shè)計(jì)圖相同的網(wǎng)絡(luò)字體，以免和設(shè)計(jì)圖效果不一致。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113925.html
摘要：切圖主要是用的工具就是等等，除此之外，在開發(fā)過程中我們也會(huì)用到其他工具，以下介紹一些有關(guān)于圖片處理的操作。是打開文件捕捉活動(dòng)窗口捕獲窗口捕獲矩形區(qū)域，可自行截圖。新版的比之前那些版本增加了一鍵導(dǎo)出功能，這個(gè)功能很大程度方便了我們拆分圖片。 在寫頁面之前，很重要的一個(gè)技能是切圖，根據(jù)UI設(shè)計(jì)的設(shè)計(jì)圖，在了解頁面結(jié)構(gòu)和操作后進(jìn)行分割，取出自己在開發(fā)過程中是用到的圖片資源。切圖主要是用的工具...
摘要：一引言前端的高性能部分，主要是指減少請(qǐng)求數(shù)減少傳輸?shù)臄?shù)據(jù)以及提高用戶體驗(yàn)，在這個(gè)部分，圖片的優(yōu)化顯得至關(guān)重要。 Web 發(fā)展的速度讓許多人嘆為觀止，層出不窮的組件、技術(shù)，只需要合理的組合、恰當(dāng)?shù)脑O(shè)置，就可以讓 Web 程序性能不斷飛躍。所有 Web 的思想都是通用的，它們也可以運(yùn)用到 Java Web。這一系列的文章，主要講解網(wǎng)頁前端性能優(yōu)化，是與用戶最直接接觸的。事實(shí)證明，與其消耗...
摘要：前端通用國(guó)際化解決方案背景前端技術(shù)日新月異，技術(shù)棧繁多。接下來針對(duì)這幾塊內(nèi)容并結(jié)合日常的開發(fā)流程說明國(guó)際化的通用解決方案。 文章首發(fā)于個(gè)人blog，歡迎大家關(guān)注。 DI18n 前端通用國(guó)際化解決方案 背景 前端技術(shù)日新月異，技術(shù)棧繁多。以前端框架來說有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等構(gòu)建工具去滿足日常的開...
摘要：楊冀龍是安全焦點(diǎn)民間白帽黑客組織核心成員，被浪潮之巔評(píng)為中國(guó)新一代黑客領(lǐng)軍人物之一他在本文中依次分享了對(duì)于黑客的定義如何從黑客成為一名安全創(chuàng)業(yè)者技術(shù)創(chuàng)業(yè)踩過的坑給技術(shù)創(chuàng)業(yè)者建議等內(nèi)容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為...
摘要：本文會(huì)介紹位圖處理，矢量圖和圖像處理，重點(diǎn)是，并且最后會(huì)附上一個(gè)小應(yīng)用。以上列舉部分，更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動(dòng)畫元素上應(yīng)用非常廣范。 計(jì)算機(jī)圖像處理是一門很成熟的技術(shù)，任何一門可操作系統(tǒng)接口的語言都能很輕易的實(shí)現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制，處理起來會(huì)有諸多不便，這里所說的前端圖像處理，是真的指不借助任何后端服務(wù)純前端實(shí)現(xiàn)的圖像...
閱讀 1686·2021-11-15 11:38
閱讀 4543·2021-09-22 15:33
閱讀 2346·2021-08-30 09:46
閱讀 2192·2019-08-30 15:43
閱讀 837·2019-08-30 14:16
閱讀 2086·2019-08-30 13:09
閱讀 1264·2019-08-30 11:25
閱讀 714·2019-08-29 16:42
