Photoshop在網(wǎng)頁美工設(shè)計中的應(yīng)用研究

張莉

摘 要 在我國經(jīng)濟飛速發(fā)展的今天，科學(xué)技術(shù)的發(fā)展日新月異。在我們的日常生活中，對網(wǎng)絡(luò)技術(shù)的運用更是滲透到了各個方面。人們通過互聯(lián)網(wǎng)進行交流、購物、工作以及學(xué)習。越來越廣泛的使用也對網(wǎng)頁自身有了更高的要求，更加精美的設(shè)計才是吸人眼球的第一步。因此，文章就網(wǎng)頁美工設(shè)計中對Photoshop的運用進行研究和分析，希望能為網(wǎng)頁美工設(shè)計提供一些有價值的參考。

關(guān)鍵詞 網(wǎng)頁美工設(shè)計；Photoshop；應(yīng)用

中圖分類號 J913 文獻標識碼 A 文章編號 1674-6708（2016）162-0091-02

對網(wǎng)站訪問率造成影響的因素有很多種，但是網(wǎng)頁的設(shè)計也是關(guān)鍵的因素之一?，F(xiàn)在的網(wǎng)站早已改變過去只注重單一功能性的缺點，對于網(wǎng)頁的美觀設(shè)計成為了未來網(wǎng)頁設(shè)計的重要發(fā)展方向。在以往的網(wǎng)站設(shè)計中最多使用的是Dreamweaver，但是其在進行美工設(shè)計時卻存在一定的缺陷。Photoshop的出現(xiàn)就為網(wǎng)頁設(shè)計師帶來了更加寬廣的空間。

1 網(wǎng)頁美工設(shè)計中Photoshop的應(yīng)用表現(xiàn)

網(wǎng)頁設(shè)計的最主要目的就是能讓人們獲得最直觀的信息，而信息的獲取方式自然就是利用網(wǎng)頁的美工設(shè)計。這樣人們不僅能夠獲得自己想要的信息，還能從中體會到美的享受，而Photoshop，也就是Adobe Photoshop就是完成這一要求的重要平臺[ 1 ]。

1.1 完成更加合理的布局

從網(wǎng)頁設(shè)計師的角度來說，從拿到項目的那一刻就要開始思考應(yīng)該進行怎樣的布局，是采用三欄布局好還是二欄布局好？自由式結(jié)構(gòu)的效果更好還是普通框架結(jié)構(gòu)更好？應(yīng)該以圖片為主還是文字為主？這些也是設(shè)計的關(guān)鍵所在。使用Photoshop軟件就能讓設(shè)計師在不斷調(diào)整和確認工程中完成更好的設(shè)計思路。這種方式無疑要好過手繪草稿很多倍，因為這不僅更加的貼合實際還讓設(shè)計變得更加生動。如果是使用以往的Dreamweaver，就需要制作出實際的網(wǎng)頁，不僅會浪費很多時間，更不方便修改。在Photoshop軟件中的圖層功能就能將想要使用的不同元素進行靈活的擺放和轉(zhuǎn)換，各個圖層之間是具有很強獨立性的，當然如果想，也可以進行鏈接。圖層本身就具有可以修改的屬性。功能上的靈活性就能讓設(shè)計師在進行創(chuàng)作時不受任何束縛，然后根據(jù)各方面意見進行及時的調(diào)整和修改，最終完成一個成功的設(shè)計[2]。

1.2 讓元素可以更加細致

按照標準的網(wǎng)頁來說，其中所要設(shè)計的元素有很多，例如，最基本的導(dǎo)航條、圖標、標志、頁眉與頁腳等等，對于這些細碎的元素，在進行處理時會對整個頁面效果造成非常大的影響，不僅如此，元素的設(shè)計風格也會影響到頁面的主題，如果處理到位就會為頁面增色。反之，不僅會造成頁面的繁亂，更會影響頁面的整體布局。這時對于Photoshop軟件的運用就能為各種素材提供方便，這也是Photoshop軟件的強大之處，關(guān)于元素，可以制作成不同的質(zhì)感和效果，進而讓網(wǎng)頁能夠有更加多樣的選擇，更能將設(shè)計師的創(chuàng)意想法進行相對完美的實現(xiàn)。

1.3 讓色彩更加豐富

在網(wǎng)頁的美工設(shè)計中，色彩搭配相當關(guān)鍵。而Photoshop軟件中對圖層的運用就能為網(wǎng)頁美工設(shè)計中的色彩搭配提供相當方便的路徑。首先是對元素的基本確定，然后就是進行各區(qū)域以及各圖層的單獨調(diào)整。這樣只要進行一個簡單的操作就能夠完成想要的顏色搭配，不僅如此，還能對顏色進行一個實時的分析，方便合理。更重要的是Photoshop軟件具有網(wǎng)頁安全色功能，這樣就夠在色板里挑選web安全顏色、web色相命令以及Web色譜，放入調(diào)色板中的任何一個顏色都會在不同操作系統(tǒng)、不同硬件環(huán)境以及不同瀏覽器中呈現(xiàn)最為正常的顏色，不論顏色有何不同，用戶在進行終端瀏覽時設(shè)備所呈現(xiàn)的效果沒有差別。

1.4 讓動畫變得更加精巧

網(wǎng)頁美工設(shè)計中，網(wǎng)頁的趣味性也可以依靠動畫來加以提升，以便能吸引更多訪問者的興趣。Photoshop軟件可以制作一些相對簡單的“幀動畫”這些都可以保存為GIF格式[ 3 ]。這種格式的實質(zhì)就是將多幅圖片合并為一個圖像文件，進而形成一種動畫，這種格式的特點就是瀏覽器支持相對穩(wěn)定以及較小的文件體積的優(yōu)勢，目前在網(wǎng)絡(luò)上有非常廣泛的使用。

1.5 讓速率變的更快

網(wǎng)頁的美工設(shè)計如果不精美就無法吸引人們的眼球。而相應(yīng)的，如果網(wǎng)站的打開速度過慢也會讓瀏覽者逐漸消失。目前我們正處于一個互聯(lián)網(wǎng)高速發(fā)展的時代，同種類型的網(wǎng)站也如雨后春筍，層出不窮。據(jù)相關(guān)調(diào)查就能夠看出，人們對網(wǎng)站的等待耐心不會超過十秒。造成網(wǎng)頁打開過慢的原因有很多，但是外在條件基本相同時，網(wǎng)頁元素的配置和優(yōu)化以及網(wǎng)頁大小是影響速度的關(guān)鍵因素。而進行Photoshop軟件的應(yīng)用就能夠?qū)⑦@些圖片進行一定的縮小。例如，可以進行圖片的減色處理，也就是在不影響圖片質(zhì)量的前提下對圖片的顏色進行刪減。讓圖片體積更小，還可以進行大塊圖像的分塊，將大圖像切分成不同的小圖像，完成多圖的同時傳送，將網(wǎng)頁的下載速度加以提高。要注意的是，在運用Photoshop進行切片后，應(yīng)將圖片的形式儲存為web形式，Dreamweaver也能完成對圖片的有效整合。對于切片的存儲格式可以用Gif，其占用的體積較小，如果有一定較高的要求，那圖片就可以存儲為JPEG格式，其能夠進行圖片更多的細節(jié)展示。如此進行過合理存儲之后，網(wǎng)頁就能夠被大大減小，進而也就將傳輸速率提高了上來。

2 在網(wǎng)頁美工設(shè)計中應(yīng)用Photoshop的注意事項

對網(wǎng)頁的美工設(shè)計來說，對Photoshop軟件加以應(yīng)用，不僅能創(chuàng)造出更好的頁面輪廓，更可以通過美工對Image Ready的運用來完成動畫效果的創(chuàng)建，當然也可以進行FrontPage、Dreamweaver的聯(lián)合設(shè)計，來幫助美工設(shè)計完成更好的頁面創(chuàng)作。但是在運用Photoshop進行網(wǎng)頁的美工設(shè)計時有一些基本問題是必須掌握的。例如，在網(wǎng)頁設(shè)計的初始階段，要注意網(wǎng)頁尺寸與分辨率的關(guān)系。通常來說網(wǎng)頁的文檔尺寸都會設(shè)為708×800像素，而分辨率則為72即可。進行設(shè)計時也不能忘記對分辨率的調(diào)整，要保證分辨率的適當。當然，對于參考線的運用也是非常重要的，網(wǎng)頁設(shè)計中如果能合理的使用參考線，那將會讓網(wǎng)頁有更加清晰明確的規(guī)劃與布局。在最初使用參考線時，將頁面進行一個按比例分割，主要內(nèi)容一定要在分割點上，其目的就是吸引更多人的視線。不僅如此，Photoshop軟件還具有鏈接的優(yōu)勢，適當?shù)氖褂面溄?，給訪問者們展示更多的圖片以及信息，也是其他制作軟件所不能取代的優(yōu)勢。

3 結(jié)論

綜上所述，在網(wǎng)頁的美工設(shè)計中對Photoshop進行應(yīng)用是未來的發(fā)展趨勢。不管是網(wǎng)頁設(shè)計還是其他的設(shè)計，表達永遠是第一目的。只有能將本網(wǎng)站的內(nèi)容與主題進行完整表達的網(wǎng)站界面才算的上是專業(yè)，因為設(shè)計者想要表達的內(nèi)容都呈現(xiàn)在了眼前。精美并具有特色的網(wǎng)頁美工設(shè)計能為訪問者帶來非常好的體驗感受，第一觀感通常是成功的最關(guān)鍵部分，進入網(wǎng)站的瞬間就決定了潛在客戶的人群以及是否能獲取他們的信任?？梢娋W(wǎng)站的美工設(shè)計是多么的重要，希望未來的網(wǎng)頁設(shè)計師們能夠通過對Photoshop的應(yīng)用而完成一次又一次更好的設(shè)計。

參考文獻

[1]馬綏莉.基于藝術(shù)設(shè)計中Photoshop軟件的應(yīng)用仿真研究[J].電子設(shè)計工程，2015（16）：56-58.

[2]古韻婷.有關(guān)網(wǎng)頁設(shè)計中Photoshop和Flash的應(yīng)用探析[J].科技致富向?qū)В?014（9）：242.

[3]李娜.高職Photoshop網(wǎng)頁美工課程教學(xué)方法改革及實踐應(yīng)用探究[J].科教文匯旬刊，2014（13）：162.