Photoshop在網(wǎng)頁(yè)美工設(shè)計(jì)中的運(yùn)用研究

劉俊 成都職業(yè)技術(shù)學(xué)院

今年來(lái)，隨著社會(huì)經(jīng)濟(jì)的迅猛發(fā)展，以及互聯(lián)網(wǎng)技術(shù)的不斷提高，我們可以通過(guò)互聯(lián)網(wǎng)技術(shù)可以隨時(shí)發(fā)布一些通知和決策信息，大大方便了人們的生活。另外，隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)購(gòu)也成為了當(dāng)下最流行的一種購(gòu)物形式，天貓、淘寶、京東、拼多多等眾多網(wǎng)購(gòu)平臺(tái)受到了消費(fèi)者的青睞。由此可見(jiàn)，網(wǎng)絡(luò)營(yíng)銷給我們的生活和工作發(fā)揮著很重要的作用，而在網(wǎng)站中最重要的部分就是網(wǎng)絡(luò)設(shè)計(jì)，對(duì)提高網(wǎng)站的瀏覽量有著關(guān)鍵性作用，但是因?yàn)槎喾矫嬖虻南拗?，影響了網(wǎng)站點(diǎn)擊率的提升，其中網(wǎng)頁(yè)設(shè)計(jì)也是重要影響因素之一。因此，想要提高網(wǎng)站的瀏覽量，需要從多方面入手，特別是要注重網(wǎng)頁(yè)設(shè)計(jì)，而Photoshop作為強(qiáng)大的圖像處理軟件，在設(shè)計(jì)方面可以說(shuō)具有得天獨(dú)厚的優(yōu)勢(shì)，將其應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，不僅能夠提供精美的設(shè)計(jì)內(nèi)容，而且還能夠優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)師的技巧，保證美工設(shè)計(jì)的正常運(yùn)行。

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

網(wǎng)頁(yè)設(shè)計(jì)最主要的目的就是讓人們能夠清晰的了解到所需要的信息，而信息的獲取方式自然就是通過(guò)網(wǎng)頁(yè)的美工設(shè)計(jì)。如此一來(lái)，人們不僅能夠獲得自己想要的信息，還能夠從中得到美的享受，而Photoshop就是完成這一要求的重要平臺(tái)。

（二）布局更加合理

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師而言，從拿到項(xiàng)目的那一刻起，就要開(kāi)始思考如何進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)和布局，是采用分欄的方式，還是采用不分欄的方式；是選擇自由式結(jié)構(gòu)框架，還是選擇普通框架結(jié)構(gòu)；內(nèi)容以文字為主，還是以圖片為主，這些因素都是網(wǎng)頁(yè)設(shè)計(jì)師必須要在網(wǎng)頁(yè)設(shè)計(jì)開(kāi)始前需要思考的，只有在前期做好規(guī)劃，才能夠在具體的設(shè)計(jì)當(dāng)中更為順利。使用Photoshop進(jìn)行設(shè)計(jì)能夠使網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)當(dāng)中通過(guò)不斷的調(diào)整來(lái)得到更為完美的設(shè)計(jì)方案。這種方式無(wú)疑比畫手稿要方便的多，因?yàn)橥ㄟ^(guò)Photoshop可以建立與網(wǎng)頁(yè)相同尺寸的文檔進(jìn)行設(shè)計(jì)，無(wú)論是在整體設(shè)計(jì)還是在局部設(shè)計(jì)上，都可以將網(wǎng)頁(yè)設(shè)計(jì)想要達(dá)到的效果提前用Photoshop展現(xiàn)出來(lái)，使設(shè)計(jì)變得更加生動(dòng)。如果是使用Dreamweaver來(lái)進(jìn)行設(shè)計(jì)制作，則需要耗費(fèi)更多的時(shí)間，而且也不利于修改。在Photoshop中各個(gè)圖層都是相對(duì)獨(dú)立的，可以將其進(jìn)行隨心所欲的擺放和進(jìn)行大小的調(diào)整，從而找到一個(gè)最為恰當(dāng)?shù)慕M合方式。同時(shí)，圖層本身就帶有可以修改的屬性，無(wú)論是顏色還是形狀，都是可以根據(jù)設(shè)計(jì)師的想法來(lái)進(jìn)行變換的，功能上的靈活性使得網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)時(shí)可以不受約束，根據(jù)各方面的意見(jiàn)進(jìn)行及時(shí)的調(diào)整和修改，進(jìn)而完成最終的設(shè)計(jì)。

（二）將元素表現(xiàn)得更為準(zhǔn)確

對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)，其包含的元素眾多，例如最為基本的導(dǎo)航條、圖標(biāo)、標(biāo)志等等，對(duì)于這些瑣碎的元素，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)如果不能夠進(jìn)行合理的安排，也會(huì)對(duì)整個(gè)頁(yè)面的美觀造成較大的影響，元素的設(shè)計(jì)風(fēng)格對(duì)于頁(yè)面主題也有重要的影響，處理的好則能夠?yàn)檎麄€(gè)頁(yè)面增添很多美感，否則會(huì)使整個(gè)頁(yè)面顯得很難受，我們?cè)谄綍r(shí)也會(huì)看到很多的網(wǎng)站在設(shè)計(jì)時(shí)不注意這些小元素的設(shè)計(jì)，從而使得整個(gè)網(wǎng)頁(yè)顯得沒(méi)有活力，感覺(jué)比較“土”。采用Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，則能夠?qū)ζ渲懈鞣N元素進(jìn)行宏觀和微觀的把控，這也是Photoshop軟件的強(qiáng)大之處，對(duì)于網(wǎng)頁(yè)上的各種元素，Photoshop可以根據(jù)需要進(jìn)行適時(shí)地調(diào)整，并且該軟件還能夠與Adobe公司的其他設(shè)計(jì)軟件進(jìn)行聯(lián)動(dòng)，例如Illustrator等軟件，從而使各個(gè)元素能夠與整個(gè)網(wǎng)頁(yè)進(jìn)行更好的融合，將設(shè)計(jì)師的創(chuàng)意想法進(jìn)行相對(duì)完美的實(shí)現(xiàn)。

（三）讓色彩更為豐富

在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，色彩搭配是非常重要的，如果色彩搭配不好，也會(huì)使得整個(gè)網(wǎng)頁(yè)顯得黯然失色。而Photoshop軟件當(dāng)中的圖層運(yùn)用能夠?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)當(dāng)中色彩搭配提供便捷的路徑。網(wǎng)頁(yè)設(shè)計(jì)中，當(dāng)各個(gè)元素都確定了之后就會(huì)進(jìn)行顏色的搭配，這對(duì)于Photoshop來(lái)說(shuō)相對(duì)較為容易，其可以將多個(gè)元素選中統(tǒng)一進(jìn)行調(diào)色，還能夠分析各個(gè)顏色的色值，進(jìn)而選擇與之相配合的顏色，通過(guò)數(shù)值的控制能夠得到一個(gè)更準(zhǔn)確的顏色。另外，Photoshop軟件還具有網(wǎng)頁(yè)安全色的功能，這樣就可以在色板里面挑選web安全顏色，采用這種顏色將不會(huì)受到計(jì)算機(jī)軟硬件的限制，進(jìn)而能夠?qū)⒆钫_的顏色顯示出來(lái)，不論顏色存在什么區(qū)別，用戶都能夠在終端瀏覽時(shí)看到無(wú)差別的顏色。

（四）讓速率變得更快

網(wǎng)頁(yè)的美工設(shè)計(jì)如果不夠精美，很難吸引瀏覽者的目光，當(dāng)前網(wǎng)站眾多，據(jù)相關(guān)機(jī)構(gòu)統(tǒng)計(jì)我國(guó)網(wǎng)站已經(jīng)超過(guò)500萬(wàn)個(gè)，在眾多的網(wǎng)站當(dāng)中想要使瀏覽者在網(wǎng)頁(yè)上停留更多的時(shí)間除了要在內(nèi)容上下功夫之外，還必須要注重網(wǎng)頁(yè)的設(shè)計(jì)工作。另外，除了內(nèi)容與設(shè)計(jì)之外，打開(kāi)網(wǎng)站的速度也是網(wǎng)友關(guān)注的一個(gè)重要因素，如果網(wǎng)站打開(kāi)的速度較慢，也可能導(dǎo)致瀏覽者逐漸消失。當(dāng)前，我國(guó)處于一個(gè)互聯(lián)網(wǎng)高速發(fā)展的時(shí)期，同種類型的網(wǎng)站比比皆是。根據(jù)相關(guān)機(jī)構(gòu)調(diào)查，人們?cè)跒g覽網(wǎng)站時(shí)，網(wǎng)站打開(kāi)速度超過(guò)十秒，就會(huì)“勸退”大部分的瀏覽者。造成網(wǎng)頁(yè)打開(kāi)較慢的原因是多方面的，但是在外部條件基本相同的情況下，網(wǎng)頁(yè)元素的配置以及優(yōu)化網(wǎng)頁(yè)大小就成為影響網(wǎng)頁(yè)打開(kāi)速度的重要印象因素。而Photoshop軟件的應(yīng)用就能夠?qū)⑦@些圖片進(jìn)行一定程度的縮小。

二、Photoshop在網(wǎng)頁(yè)制作中的應(yīng)用措施

（一）圖像的截取和尺寸的調(diào)整

在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，勢(shì)必要對(duì)其中的一些圖像進(jìn)行裁剪，這就需要設(shè)計(jì)人員截取圖像的局部，此時(shí)Photoshop軟件的靈活性就得到了充分的凸顯。首先，在Photoshop軟件當(dāng)中打開(kāi)原圖片。其次，為了保證選取圖片的準(zhǔn)確性，設(shè)計(jì)人員可以使用矩形或者橢圓形等需要截取的顏色形狀，設(shè)定好相關(guān)數(shù)值，從而包裝截取到所需要的準(zhǔn)確圖片。再次，在完成準(zhǔn)確的選取之后，將所用圖片進(jìn)行復(fù)制或者存儲(chǔ)。最后，在文件中新建一個(gè)畫布，并設(shè)置好選取的尺寸，將之前截取出來(lái)的圖片粘貼或者置入進(jìn)來(lái)，完成最終的圖片截取。在新文件圖片文件做好之后，還可以進(jìn)行文字的添加等等，當(dāng)所有操作完成，則將文件儲(chǔ)存，等待下一步的調(diào)用。

網(wǎng)頁(yè)制作當(dāng)中還存在一些常見(jiàn)性的操作技巧，即圖片尺寸的調(diào)整，就是說(shuō)圖像大小在縮小時(shí)，維持其清晰度，這樣才不會(huì)影響后續(xù)的打開(kāi)速度。對(duì)應(yīng)的操作方法就是在Photoshop中打開(kāi)圖片，之后在圖像調(diào)整當(dāng)中調(diào)整圖像的尺寸，調(diào)整完畢之后儲(chǔ)存圖片。

（二）透明圖像的設(shè)計(jì)

在網(wǎng)頁(yè)設(shè)計(jì)中，有些情況下為了取得一定的視覺(jué)效果，會(huì)使背景色保持在透明的狀態(tài)下，例如在保留背景色的位置插入一張其他類型的圖片，這種情況下，就只有在透明的背景下才能夠使整個(gè)設(shè)計(jì)更為融合。Photoshop軟件在透明背景圖的制作當(dāng)中具有顯著的優(yōu)勢(shì)，無(wú)論是采用套索工具、魔棒工具、顏色識(shí)別、通道等眾多工具都可以實(shí)現(xiàn)透明背景圖的制作，而且各種工具的搭配還能夠使圖片更為精確，這一操作也就是我們常說(shuō)的摳圖。對(duì)于一些較為簡(jiǎn)單的圖片，則是可以直接采用套索及快速選擇之類的工具進(jìn)行圖片摳取，并且能夠達(dá)到較好的效果。

三、Photoshop在網(wǎng)頁(yè)美工設(shè)計(jì)中的注意事項(xiàng)

Photoshop軟件在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用能夠?yàn)樵O(shè)計(jì)師帶來(lái)巨大的便利，促進(jìn)網(wǎng)站效果的提升，但是對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，他們追求的是網(wǎng)頁(yè)頁(yè)面創(chuàng)作作品的完整性，這就需要設(shè)計(jì)師能夠充分了解Photoshop軟件使用的注意事項(xiàng)，在設(shè)計(jì)當(dāng)中有效規(guī)避Photoshop對(duì)網(wǎng)頁(yè)的不良影響。例如，設(shè)計(jì)師在進(jìn)行網(wǎng)站設(shè)計(jì)時(shí)，要充分考慮到網(wǎng)頁(yè)的尺寸大小以及網(wǎng)站的分辨率，一般情況下web圖像的分辨率都采用72，還要在顏色方面也要注意，在平時(shí)的設(shè)計(jì)中打印一般用CMYK格式，而web設(shè)計(jì)則采用RGB格式，有的設(shè)計(jì)師在設(shè)計(jì)時(shí)前期不注意這些設(shè)置，最終做好后發(fā)現(xiàn)有問(wèn)題再去修改就會(huì)耗費(fèi)大量的時(shí)間和精力，因此，做好前期準(zhǔn)備才能夠真正做到事半功倍。

四、結(jié)語(yǔ)

Photoshop軟件在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用能夠更好地優(yōu)化網(wǎng)站網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容，同時(shí)還能夠提升網(wǎng)頁(yè)打開(kāi)的速度，通過(guò)合理的布局及色彩搭配能夠提升網(wǎng)站的“檔次”，從而吸引更多的瀏覽者，進(jìn)而實(shí)現(xiàn)經(jīng)濟(jì)效益最大化的目標(biāo)。