當前位置:首頁 » 網頁前端 » 前端設計師切圖
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端設計師切圖

發布時間: 2022-05-24 15:36:33

㈠ 有沒有朋友在大公司做前端工程師的,他們切圖一般都用什麼軟體哦,用什麼方法切的,這個有

我們用的專門的摹客PS插件,可以一鍵下載所有切圖。支持Sketch、Adobe XD、PS的設計稿,設計師只需在設計稿上進行切圖標記,然後上傳就可以了。

以PS為例,主要是這樣操作:
1.在摹客官網安裝並打開插件
插件安裝好後打開PS,在「窗口>擴展功能」找到摹客插件,選擇並打開。使用摹客平台賬號登錄。
2.標記切圖
在完成的設計稿上,選中需要切圖的圖層或編組,點擊「標記切圖」。將在名稱前增加「-e-」,「標記切圖」變為「取消切圖標記」,則標記切圖完成。
3.上傳至摹客
標記切圖後,一鍵將設計稿上傳至雲端項目中,開發工程師就可以自主下載切圖,只需在右側面板中選中切圖,點擊即可下載。

摹客切圖支持:
1.切圖壓縮:在右側面板中選中切圖
2. 切換平台和選擇倍率:iOS、Android、Web
3. 下載選中切圖,一步到位。

㈡ UI中的「切圖」是什麼意思為什麼要切圖

切圖是設計師交付給開發的產物之一,設計稿完成後,設計師需要將其切成便於製作成頁面的圖片。但因為開發經常需要不同平台不同尺寸的切圖,如果全部由UI來做,不僅費時費力,可能還會因為細微的差距造成開發不能很好的還原設計稿。

所以可以用摹客之類的專業工具來自動切圖。UI把Sketch、Adobe XD、PS的設計稿進行切圖標記,上傳至摹客後,開發就可以自主下載不同平台不同尺寸的切圖和使用了。

(2)前端設計師切圖擴展閱讀:

切圖用於完成html+css布局的靜態頁面,有利於交互,形成良好的視覺感。通俗來講,把一張設計圖利用到切片工具 把自己所需的切成一張張小圖,然後前端開發用DIV+CSS完成靜態頁面書寫,完成CSS布局。

切圖大家都有個誤區,覺得切圖就是把圖片切出來,其實並不完全是這樣,首先處理的是什麼類型的頁面圖片型(EDM 或活動著陸頁等)、圖文型(門戶網站或電商網站等)、界面型(Web App 等),把圖片切出來這個過程是叫切片。

㈢ UI設計師在完成界面設計後,切圖都改切哪些

網頁設計好後的切圖是將設計稿切成便於製作成頁面的圖片,並完成html css布局的靜態頁面,有利於交互,形成良好的視覺感。通俗來講,把一張設計圖利用到切片工具,把自己所需的切成一張張小圖,然後用DIV CSS完成靜態頁面書寫,完成CSS布局。
設計好的網頁都需要切圖,主流的是dreamweaver、photoshop軟體,還有sketch、firework等,低端QQ切圖,網頁切圖等。切圖為後端編程者帶來方便,提高效率,讓網頁稿有了交互性,實現平時看到的各種各樣的功能,畫面瀏覽速度快,有利於優化。

(3)前端設計師切圖擴展閱讀:
一般我們從設計師那得到的都是psd文件,裡面有幾十或者上百個圖層,一般會根據內容分好文件夾,有文字有圖片,有的只在特殊情況下顯示的,這時候就需要根據自己的需要導出不同的圖。
切圖的時候也會有許多考慮,比如把哪些內容壓縮成一張圖片,什麼時候用透明背景PNG,什麼時候用CSS Sprite(把瑣碎的小圖比如按鈕、logo復制到一張透明背景的圖上然後保存為一張圖,再用background position去提取。)文字是切成圖片,還是復制到HTML里。
一般情況下都不會把文字切成圖,除非用到比較特殊的字體或者變形等等,然後即使是photoshop保存為web格式導出的圖,有時候尺寸也是很大的,特別是PNG,這時要使用一些專業壓縮工具進行二次壓縮。
當然有些有前端經驗的設計師會把切好的圖片發給你,這樣就可以直接開始寫HTML和CSS了,但是建議還是盡量自己切,掌握熟練的切圖技巧也是一個前端應該有的技能。
參考資料來源:搜狗網路-切圖
搜狗網路-靜態頁切圖

㈣ 網頁設計好後的切圖是什麼意思呢

切圖就是把用設計軟體設置好的圖片切成相應的大小,切圖後再把圖片上傳就可以可以加快顯示速度,不用等整個圖片都下載以後顯示。

PS切圖步驟:

1、打開PS,然後點擊切片工具。

㈤ 能否用通俗語言講一下web前端講的「切圖」到底是什麼意思

簡單說就是把一張大圖裁成若干張小圖

一張完整的web設計圖包括了很多元素,Logo、圖標、背景圖等等
設計師通常給的是Ps的分層設計文件,或者是Ai,當然這樣是最好的,當然也有設計師用的素材不是透明分層的,這個時候就需要我們自己摳圖了(這又是另外一個話題了,不談)
這時候就需要把我們需要的Logo、圖標、背景圖這些一一單圖提取出來使用到前端項目中,於是我們用到了Ps或Ai中切圖這個功能

㈥ 前端切圖切到很高的境界是怎樣一種體驗

就我個人的一點經驗分享一下,談不上很高的境界,只說是一點心得,我認為比較好的切圖的同學是,如何在眾多林立的需求之間取得一個平衡。說到底還是眼界的問題,剛開始可能糾結如何命名css比較易用,過後可能糾結html結構是否合理,然後頁面是否兼容,可復用,再往後頁面功能設計是否合理,頁面體驗是否符合人的基本心理需求。做的時間長了,就有空琢磨這個產品到底如何,能否真的佔有一定的市場或用戶量,然後做失敗幾個產品之後,看看其它行業是否還有潛力的機會,是否有與互聯網接合的切點。然後在跨地區看看,地球那邊的行業是怎麼樣的?所以,下午去巴黎看看那邊是否有訂餐需求不是一個夢。然後在每個階段下對前端的審視或要求是不一樣的,也談不上很高的境界,只是公司或人原來的目標或需求變了,所以就像我以前提到一樣,這個點永遠都達不到,只有無限可能的接近。

然後在分享點目前我接觸到具體的體驗:
1. 滿足UI同學的視覺需求。
無論是css hack還是通過js進行差異化處理,從技術手段上無底線的實現UI同學的視覺要求。這是工作負責的態度,也是自我需求突破的一個手段。從UI同學來說,做的設計稿沒有達到要求,是對其本身工作成果的不尊重。

2. 控制好後端同學的數據顯示。
前端做為後端同學的代言人,無趣的數字通過有趣的交互或界面展現出來,本身是一件很美好的事情,通過合作的方式讓整個流程完美無瑕,但總是在外界因素的影響下,把握不好。

3. 在這有限的條件下提高自己的效率或代碼質量。
這就要提到一般頁面的 頁面的健壯性,擴展性,復用性。

a. 健壯性:
這個怎麼說呢,UI出的psd圖是一個頁面理想狀態下的形態,而頁面有數據,會出現兩種極端狀態,一,數據極多,二,數據極少。所以在頁面排版的時候,考慮這兩種狀態,以免數據太多的時候,撐破頁面,以免數據太少,頁面部分元素會出現收回去狀況,這樣的頁面會出現一些細節沒有處理的常規失誤。

b. 擴展性:
可以說,這個也是第一條的擴充,擴展性的意思為,在頁面的模塊很少的時候,要考慮未來添加子模塊或兄弟模塊的狀態,為將來留好html介面。在將來添加模塊的時候,盡可能少的去動原來的html結構,使html易於擴展。這個具體情況,具體處理。一般的處理就是如果有可能會有兄弟元素就多套一層,為後台添加兄弟元素盡可能的不影響現有結構。這個點乍看起來很小,其實如果擴充到整個項目,多個項目就有可觀的效應了。

c. 復用性:
由於頁面中風格相似的模塊很多,或頁面中與頁面中相似的模塊很多,但是總會有那麼一丁點的差異,這是設計師認識世界然後在表達世界的產物,我們理解設計師的職業操守,所以只能在前期做一些技術處理,免得後期問候某崗位的親人。具體的有的模塊高點有的模塊低點,還有結構完全一樣,但底紋不一定。這樣建議把表現形式的樣式放在一個class中,物理屬性放在一個class中。還有就是裝飾性的圖片決不不以明標簽的方式插入到頁面中,內容式的內容絕對以<img src="" />的方式插入中去,以免將來多主題,多語言版本的實現。

可能有時候還有的情況是,頁面完全切不出來,html,css完全不知道怎麼寫了。但基礎掌握良好,概念基本清楚。這時候我個人建議應該是吸收別人好的東西時候到了,也是個人水平瓶頸的時候,需要在堅持一下完全的突破。具體的方式就是,用firebug去分析先有的bat各個項目的各個頁面,總有你可以借鑒的地方。

㈦ 前端工程師,請問切圖是什麼意思我會寫div﹢css已經比較熟練了,js也、jquery這些也學完

是的,做前端必須必須會切圖,但是 切圖 就是PS裡面的一步操作,十分簡單。QQ截圖和PS切圖是動作不一樣,但是基本上是一樣的,QQ是截取,而PS裡面有個工具張的像 刀 ,拿著這個刀在圖上面畫,所以叫切圖。

選擇選中的切片,在點擊保存,就這么先切,在選擇,在保存,就完成了切圖,但是PS切圖比qq截圖用著爽多了,因為在PS裡面可以將圖片放大N倍,在切,在小的圖也能切,而且可以一次切很多,也能一次保存很多,所以比QQ截圖用著爽。總體來講比QQ截圖專業吧。

㈧ 網站前端切圖是什麼意思,主要做什麼

我們做網站的時候是要根據程序化來進行實現的,特別是做一個精品網站的時候,首先第一步就是設計網站,網站設計好之後即是切圖,切圖完就要加入div+css實現效果圖,以及flash動畫等功能了,切圖完成之後才到下一步開發程序,這就是從前端的設計、切圖到網站程序開發的一個過程。
網站的好壞,前端很重要,這是我們重視的一部分,前段必須把div+css做好,不能有多餘的代碼程序在裡面,前端要是沒有做好,往後的程序很影響seo的推廣,這是很多企業做網站的時候忽略掉的問題,我們應該一手抓,俗話說的好,贏在起跑線上,只有系統化的前端div+css,設計,切圖功能實現之後才有後面的程序製作,很多網站前端div+css做的亂七八糟的,不說兼容性行不行了,就是網路蜘蛛來獲取頁面的時候都很排斥的,所以說,切圖是一個精品網站必備的,重中之重,不可忽視。

我們經過美工的設計頁面,從每一張圖片的整合到功能的實現都是切圖來做的,切圖人員必須具備有細心的品性,要嚴格要求每一步的到位,否則將會給後面的程序帶來麻煩,一個精品網站的建設是要分為四個大的步驟進行的

第一、網站設計

第二、網站切圖+div+css+功能美化
第三、網站程序製作
第四、後台的調用

㈨ 前端中所說的切圖到底指的是什麼意思

切圖是指將設計稿切成便於製作成頁面的圖片,並完成html+css布局的靜態頁面。

㈩ 前端開發發展到今天,前端程序員們還需要切圖嗎

切圖本應該是前端工程師的工作吧,設計師切的圖往往不專業,他們不知道把圖片壓縮,不知道把圖片合並,更不知道給圖片更好命名,這樣前端拿到切圖還是要重新處理。優秀的設計師會把圖層分類做的很好,圖層按照模塊化設計,很方便前端工程師來使用的。不會切圖的前端不是合格的前端。圖層亂七八糟的設計師也不是個合格的設計師