網(wǎng)頁(yè)設(shè)計(jì)需要學(xué)哪些軟件？

時(shí)間：2022-08-24 14:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-24 14:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

本文源于@酷coo豆的回答：

想要從事網(wǎng)頁(yè)設(shè)計(jì)，需要學(xué)習(xí)哪些軟件？我大一，因?yàn)閷I(yè)的問(wèn)題需要自學(xué)？

一、平面設(shè)計(jì)與網(wǎng)頁(yè)設(shè)計(jì)

自從

@酷coo豆 由平面設(shè)計(jì)，轉(zhuǎn)向了網(wǎng)頁(yè)設(shè)計(jì)后。感覺(jué)到兩者之間有著太多的共性，共同的基礎(chǔ)理論、常用的設(shè)計(jì)軟件都大同小異。其最大的不同就是承載媒介的區(qū)別——一個(gè)是“印刷紙張”，一個(gè)是電子屏幕。所以對(duì)于網(wǎng)頁(yè)設(shè)計(jì)需要學(xué)什么軟件，其主要還是以Photoshop為主，包括UI也是一樣。

另外由于是電子屏幕上的設(shè)計(jì)，相對(duì)傳統(tǒng)平面設(shè)計(jì)多了時(shí)間、空間兩個(gè)維度的變量。時(shí)間上的延伸，可以推演出更多的交互，和動(dòng)態(tài)效果；空間上：體現(xiàn)在其版面可以上下滾動(dòng)或左右切換，不受固定尺寸的約束。但其本質(zhì)還是平面設(shè)計(jì)！只是網(wǎng)頁(yè)設(shè)計(jì)在交互方面可以發(fā)揮更多的創(chuàng)意；而平面設(shè)計(jì)則可以在印刷工藝、材質(zhì)、印刷刀版上的變換，做出更多頗有創(chuàng)意，觸手可及的互動(dòng)效果來(lái)。

我在

《認(rèn)識(shí)一下什么是平面》一文中也分享了自己的觀點(diǎn)：廣告設(shè)計(jì)師、UI設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)師、等設(shè)計(jì)崗位，則正是朝著各自不同領(lǐng)域?qū)Ｑ屑?xì)分的發(fā)展結(jié)果，而廣義的平面設(shè)計(jì)則更像是對(duì)這些職位的一個(gè)更加籠統(tǒng)的稱謂。

二、網(wǎng)頁(yè)設(shè)計(jì)需要學(xué)什么軟件？

以下則是上述問(wèn)題是全部回答內(nèi)容。 ↓↓↓

1. 必學(xué)Photoshop軟件

既然是網(wǎng)頁(yè)設(shè)計(jì)，那么Photoshop自然是必須要學(xué)的咯。在寫代碼前，我時(shí)常用photoshop來(lái)完成網(wǎng)站內(nèi)頁(yè)效果圖的制作。學(xué)習(xí)Photoshop不是最終目的，其更需要的是：要懂一些視覺(jué)層面、設(shè)計(jì)理論以及交互設(shè)計(jì)相關(guān)的知識(shí)，以避免一些常識(shí)性錯(cuò)誤。

▼用PS完成的：網(wǎng)頁(yè)設(shè)計(jì)標(biāo)注圖

2.掌握Dreamweaver軟件

懂點(diǎn)HTML、CSS前段代碼，并掌握Dreamweaver（點(diǎn)擊下載DW），是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的標(biāo)配。DW是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開發(fā)工具，重設(shè)計(jì)、輕代碼所見即所得是初學(xué)的必備。因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)稿完成后，它只是一張靜態(tài)的圖片，此時(shí)還需要你配合web前段工程師，在瀏覽器中重構(gòu)設(shè)計(jì)稿，你的工作才算完成。


關(guān)于配合

雖然在實(shí)際工作中，寫代碼是由前段工程師負(fù)責(zé)，但掌握一些代碼知識(shí)是必須的。你必須明白你設(shè)計(jì)出來(lái)的東西，哪些該用代碼實(shí)現(xiàn)、那些該用圖片實(shí)現(xiàn)，方便你更好地切圖、以及圖片資源輸出以提高效率。相信在這樣的情況下，你會(huì)和Web前段配合得很愉快的。

每天工作時(shí)，我的Partner（前段工程師）就坐在我的旁邊，每天交流密切，感情甚好。還好我懂點(diǎn)代碼，偷笑:-D。

精通以上兩款軟件，對(duì)于從事網(wǎng)頁(yè)設(shè)計(jì)工作是足夠了的。如果需要更好的提升、以及團(tuán)隊(duì)協(xié)作?？蓪W(xué)習(xí)以下一些軟件。

3.illustrator軟件、CorelDRAW

處理矢量圖形、提取一些素材、同事之間協(xié)作，可能會(huì)用得到。CorelDRAW軟件同理。

4.After effect軟件

用于做一些網(wǎng)頁(yè)所需的動(dòng)畫效果制作，可導(dǎo)出為mp4、swf等多種格式。可能也有人會(huì)想到用Flash，不過(guò)感覺(jué)用flash有些過(guò)時(shí)，沒(méi)必再要學(xué)了。

以上就是 @酷coo豆 整理的有關(guān)“從事網(wǎng)頁(yè)設(shè)計(jì)需要學(xué)什么軟件？”問(wèn)題的全部?jī)?nèi)容，最后感謝你的閱讀。

——

三、拓展閱讀

網(wǎng)頁(yè)設(shè)計(jì)的核心技能是視覺(jué)、交互、代碼，這是網(wǎng)頁(yè)設(shè)計(jì)師自家技能的一畝三分田，值得我們?cè)谏厦嬉恢比ハ鹿Ψ虻模湎嚓P(guān)度由強(qiáng)到弱。

相關(guān)教程：

網(wǎng)頁(yè)設(shè)計(jì)自學(xué)教程（來(lái)自BAT網(wǎng)頁(yè)設(shè)計(jì)師的實(shí)力巨獻(xiàn)）

網(wǎng)站建設(shè)流程：

1. 解析需求——2. 交互設(shè)計(jì)——3. 視覺(jué)設(shè)計(jì)——4. 網(wǎng)頁(yè)重構(gòu)——5. 調(diào)試上線，其具體的內(nèi)容，過(guò)幾天我將在「平面設(shè)計(jì)學(xué)習(xí)日記 - 本站專欄」詳細(xì)分享一下其制作流程。

實(shí)例說(shuō)明：
▲瀏覽器測(cè)試 | 代碼撰寫 | PS輸出的設(shè)計(jì)稿。

上圖為 @酷coo豆 制作平面設(shè)計(jì)設(shè)計(jì)學(xué)習(xí)日記網(wǎng)（http://www.xxriji.cn）的過(guò)程截圖，像這種比較簡(jiǎn)單的網(wǎng)站就主要運(yùn)用到Photoshop、Dreamweaver軟件就可搞定。上圖中編寫代碼用的是件sublime_text（用Dreamweaver也行，看個(gè)人習(xí)慣）。

（完）

——

版權(quán)聲明

作者：@酷coo豆 ，公眾號(hào)：followdesign；

原文地址：https://zhuanlan.zhihu.com/p/24856761

主站：平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)（www.xxriji.cn/）

本文為@酷coo豆原創(chuàng)，首發(fā)于本站與平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)。非商業(yè)轉(zhuǎn)載請(qǐng)注明「作者」、「原文地址」，若需商業(yè)轉(zhuǎn)載或用于培訓(xùn)轉(zhuǎn)載請(qǐng)聯(lián)@酷coo豆 獲得授權(quán)。