當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁模板>教程內(nèi)容

photoshop與網(wǎng)頁布局設(shè)計的關(guān)系(2)

來源:未知 作者:福特少普ps 學(xué)習(xí):12094人次

  二、用photoshop設(shè)計網(wǎng)頁布局應(yīng)注意的幾個問題
  1、 網(wǎng)頁文檔尺寸與分辨率。網(wǎng)頁文檔一般為1007*600和708*800像素,分辨率為72像素,這是屏幕分辨率,太高的分辨率并不能增強(qiáng)效果,反而會降低下載速度。一般情況下,大型網(wǎng)站不要超過3屏。
  2、 顏色:網(wǎng)站背景顏色與文件顏色要統(tǒng)一協(xié)調(diào),一般不要超過兩種,一些網(wǎng)站被批評為臟、亂、差,其要害是顏色搭配不合理,或者太多,給人一種不舒服的感覺。
  3、 字體,標(biāo)題。導(dǎo)航字體一般用黑體,正文一般用宋體,其它字體瀏覽器不兼容,可能造成調(diào)試時出錯,給工作帶來麻煩。如果為增強(qiáng)頁面效果用到其它字體,則最好在用Dreamweaver前在photoshop切分及圖片,字體的顏色設(shè)置要考慮到整個頁面效果。
  4、布局格式:雖然效果圖是用photoshop設(shè)計的,但一定要兼顧到Dreamweaver對頁面布局的要求,Dreamweaver下網(wǎng)頁布局是使用‘國’字形,還是其他模式,是否使用框架,使用框架的類型是哪一種,都是在設(shè)計前要考慮到的。否則會造成效果圖與最后的網(wǎng)站布局出現(xiàn)出入,給客戶和自身帶來麻煩和損失。
  5、圖文搭配:一個好的網(wǎng)站是圖片多好還是文字多好,這要視網(wǎng)站的功能、行業(yè)、目的而定,但有個原則就是圖文合理配置,而圖片則要按一定的空間分布進(jìn)行和諧分布。另外,圖片大小要合乎美學(xué)原則,不能太大,一般用縮略圖較好,如果要顯示更多的圖片細(xì)節(jié),不妨給縮略圖鏈接一個大的圖片。
  6、科學(xué)使用參考線。參考線是設(shè)計頁面布局的有效輔助工具,我們可以先用橫參考線將網(wǎng)頁布局分成幾大版塊,然后用豎參考線將每個板塊按我們的思路分為幾個小板塊,最后再整體觀察一下。要精確定位網(wǎng)頁元素,可用對齊參考線的方法來實現(xiàn):“視圖”—“對齊到”—“參考線”,而參考線的精確定位可以借助標(biāo)尺和網(wǎng)格來實現(xiàn),這里要注意的是網(wǎng)站的Logo和Banner或者導(dǎo)航條等都是事先設(shè)計好的,有固定大小,在做這些區(qū)域時尺寸一定要按照這些元素尺寸設(shè)計,不能有絲毫差錯,否則進(jìn)入DreamWeaver整合時,則可能出現(xiàn)空邊或撐開表格的現(xiàn)象。
  三、“切片”工具是photoshop通向DreamWeaver的橋梁。
  利用photoshop效果圖最終與客戶簽合同后,還不是photoshop設(shè)計網(wǎng)頁布局的終結(jié),而還有關(guān)鍵的一步,就是“切片”,只有正確地切片后,DreamWeaver才能對效果圖進(jìn)行有效的整合,photoshop在網(wǎng)頁布局中的積極作用才發(fā)揮到了極致。要完成“切片”這關(guān)鍵的一步,應(yīng)遵循以下原則:
  1、必須依靠參考線。設(shè)計時用到參考線,切圖時更要用好參考線。參考線能保證我們切出圖在同一表格中的尺寸統(tǒng)一協(xié)調(diào),有效避免“留白”和“爆邊”。
  2、Logo和Banner必切。如果效果圖中存在Logo和Banner,我們必須切片這部分,主要是為預(yù)先設(shè)計的Logo和Banner留下空間,在DreamWeaver整合時最好不用Logo和Banner的切片,而是直接用Logo和Banner原文檔,這是提高Logo和Banner效果的需要。
  3、虛線和轉(zhuǎn)角形狀必切。虛線和轉(zhuǎn)角形狀在DreamWeaver 不能實現(xiàn),只能使用photoshop切片。
  4、漸變必切。這也是Dream Weaver實現(xiàn)不了的。
  5、大圖必切。大的圖像必須切分成均勻圖,這樣可以提高網(wǎng)頁下載速度。
  6、特殊文字效果必切。除黑體和宋體外,其他字體必須切片。DreamWeaver下最有效的字體只有宋體和黑體,其它字體瀏覽器也要能不兼容。
  7、導(dǎo)航條必切。一般情況下導(dǎo)航條都是特別設(shè)計的,其效果在Dream Weaver下不能實現(xiàn),因此必須形成切片供后期使用。
  8、有效存儲切片。存儲切片的文件夾必須位于站點的根目錄下,文件夾名必須是英文名字。存儲切片時用“文件—存儲為web所用格式”命令。切片存儲格式要求一般存為Gif格式。Gif占用體積小。要求較高的圖像存儲為JPEG格式,JPG格式顯示更多的圖片細(xì)節(jié)。

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
海盜十二郎2011-03-10 11:36
<給力>
帥帥來了2010-12-08 06:26
正在學(xué)網(wǎng)頁制作呢
GOGOW2010-11-25 05:41
謝謝分享
朝朝暮暮2010-10-29 10:28
這篇文章挺好的!
wangxiaoyu2010-10-29 05:41
<給力>
沒哥2010-10-23 12:04
恩,好東西,收獲良多

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!