要想充分利用好Photo Shop來設計網頁,就要了解一些網頁的基本知識,例如網頁構圖。通常網頁包括以下幾部分: Logo、導航、正文等等,因此,要規(guī)劃好整個頁面的構圖,就需要網頁設計者把握好Logo放在哪個區(qū)域,導航放在哪個區(qū)域,正文在什么位置更能吸引讀者等,我們在瀏覽網頁第一眼的時候,就能判斷出這個網頁是否布局合理,因為在構圖不合理的情況下,人們會感到不舒服,觀看起來別扭,這就是頁面布局不合理導致的結果。
網頁布局通常有以下幾種類型:第一,方向式布局。電子科技、旅游自駕、商務通、汽車汽修等通常都用方向式布局,方向式布局又分為水平型、垂直型、斜向型三種框架。水平型框架是指將頁面分為左右結構,左邊是企業(yè)的Logo,導航等,右邊是關于企業(yè)的正文。它的優(yōu)勢在于人們?yōu)g覽頁面時具有很強的整體感,布局簡單大方,結構清晰,便于讀者觀看,節(jié)約時間。垂直型框架與水平型框架優(yōu)勢基本相同,唯一不同的就是它是上下結構。斜向型框架就比較個性些,有很多種情況,舉一例說明,有的網頁最上面是標題以及重要標志,而在網頁的左右兩側確是關于網頁內容的鏈接或者圖片,中間是正文,在網頁的最下面則是一些聯(lián)系方式等輔助信息,這樣的結構優(yōu)勢在于讀者在瀏覽網頁時,可操作性強,主次分明。第二,曲線式布局。曲線比較柔和,適合抒情,能夠表達出一種浪漫的情懷, 因此,它的優(yōu)勢是具有一種藝術感,適用于交友網站、教育教育等方面。第三,其他結構式布局。這樣的布局相對沒有規(guī)則, 優(yōu)勢在于趨向表現(xiàn)自己的特性,適用于建筑設計、美術設計等方面。
在了解網頁構圖后,就能合理布局,這時候就需要進一步細致的處理圖片,將圖片布置到網頁中去。網頁設計里面很多時候都會用到圖片的某一部分,需要網頁設計者掌握如何截取圖片^[5]。截圖的方法有很多種,如果使用Photo Shop,那將會更加簡便。首先,打開Photo Shop,然后找出原圖片,在工具欄中選中所需要的工具,截取圖片。倘若需要更加準確的截取,就在工具選項欄中找到“樣式”,在“樣式”里就可以設定需要的尺寸,例如“固定大小”,設定固定的寬度和高度,單擊圖像即可確定選區(qū),用鼠標拖住選區(qū)移動到要截取的地方,即可獲得截取的圖片。單擊“菜單-編輯-拷貝”,就可以復制圖片,單擊“菜單-文件-新建”,就可以新建畫布,將剛剛復制的圖片粘貼到新建的畫布上,單擊“菜單-編輯-粘貼”即可,最后保存圖片。利用Photo Shop截圖就算是完成了。
運用Photo Shop處理圖像,使其背景透明在網頁設計中應用特別廣泛,舉一例說明,有些時候需要將一張圖片中的人物摳出來放到另一個背景中,這就需要將人物圖片的背景透明, 只有這樣,才能將這張人物圖片中的人物與另一個背景融合, 成為一體。網頁設計者可以這樣應用Photo Shop:首先打開Photo Shop,找出原圖片,利用選取工具選中需要的圖像,保留下來,倘若原圖片是單一的背景顏色,那就能用魔棒工具選中背景顏色,單擊“菜單-選擇-反向”,利用反向選中需要保留的圖片,然后同上述Photo Shop處理圖像中復制的操作一樣開始復制圖片,新建畫布,在畫布的“背景內容”項中選擇“透明”,其次粘貼圖片,這樣就將所需要的內容從原圖片中摳出來了,調整尺寸,最后保存圖片。
網頁設計者在給網頁做背景圖片或者做banner圖像時會發(fā)現(xiàn),很多情況下都需要將兩張或者兩張以上的圖像進行合成,成為一張圖片,這時候,如果應用Photo Shop,會使合成圖片更容易一些。舉一例說明,將兩張高度相同的圖片進行合成, 其操作如下:首先在Photo Shop中打開第一張圖片,找到第二張圖片,用鼠標將其拖進來,調整放置的位置,倘若兩張圖片有不協(xié)調的地方,可以利用工具欄中的工具一一進行調整,使其統(tǒng)一,然后在第二張圖片所在的圖層建立蒙版,選擇漸變工具,拖拽兩張圖片的結合處,使其變成黑白漸變,其次調整其不透明度,最后保存圖片,兩張圖像的融合就完成了。
網頁設計中最基本的要素就是文字與圖像,上面已經對如何應用Photo Shop處理圖像的技巧做了簡單敘述,接下來我將著重敘述如何在Photo Shop中將特殊字體寫在圖片上。在眾多網頁設計中,單單是一種字體已經滿足不了人們的需求,大家更希望出現(xiàn)一些另類的字體吸引人們的注意,但是計算機在默認情況下大都是沒有這些字體的,這就需要我們上網下載并安裝到計算機中去方可使用。舉一例說明,在圖片上添加一種特殊字體—“方正清刻本悅宋簡體”,這種字體一般情況下計算機上是沒有的,這就需要我們采取以下操作:首先,在網上下載 “方正清刻本悅宋簡體”字體并安裝到電腦上,下載的字體一般都是.ttf格式的文件,復制該文件,粘貼到c盤的Windows文件夾下的Fonts文件夾下,這樣就完成了字體的安裝工作,然后關閉Photo Shop并重新啟動,就可以看到字體列表中有了“方正清刻本悅宋簡體”,其次在圖片上輸入要寫的內容,最后保存即可。
網站Logo指的是網站的標志,它的設計在網頁設計中占有十分重要的地位。讀者在瀏覽網頁的時候,最先看到的就是網站的Logo,一個好的網站,其Logo必定能展現(xiàn)出網站的內涵以及重要的信息或者理念,體現(xiàn)其獨特的風格,才能夠吸引大家的目光,增加點擊量。熟練地應用Photo Shop繪制網站Logo,會使網頁設計更加成功,其操作過程如下:首先,在Photo Shop中新建畫布,使用鋼筆工具勾勒出網站Logo的輪廓,利用“轉化點工具”將某些直線變成曲線,增加柔和度,利用“直接選擇工具” 調整曲線弧度,然后按Ctrl+Enter鍵,將路徑變?yōu)檫x區(qū),填充選區(qū),其次開始添加重要的文字,最后保存即可。