網頁設計效果圖

1、網頁製作一定要先用photoshop製作效果圖嗎？

不一定，如果是製作簡單的表格式網頁或是有現成模板的就可以不用

【備注】

做網頁用Photoshop製作出效果圖，是為了能直觀的展現網頁，讓客戶了解網頁的排版和設計效果。

Photoshop製作效果圖能給程序員一個直觀的表達形式，不用再製作的過程中再去考慮排版和效果的展現。

2、網站設計效果圖是全新設計嗎

看你做怎麼樣的網站，如果是模板站，一般網路公司都是給找一些現有的圖片隨便美工一下，只有定製網站才會去設計效果圖

3、網頁效果圖怎麼製作？

　平面廣告和網站頁面設計的宗旨就是吸引眼球，符合平面視覺沖擊特點，如何設計一款有特色、另類能吸引眼球的作品是擺在平面設計人員和photoshop愛好者面前的難題

現在以一款網頁平面設計效果圖為實例，講解網頁設計方面的創意知識，從網頁效果圖布局創意、顏色選擇，裁減效果圖和製作網頁特效等方面來學習。下面我們就一起來學習吧。

首先聲明一下，這款網頁效果圖在得到朋友許可後拿來製作教程實例，切勿抄襲和用做其他用途。先看效果圖0。

一、 創意設計思路

一個網站在製作前需要確定網站風格、網站主題、和主色調，在沒有確切的方案之前，最好不要貿然動手製作，不然最後的結果很可能是以失敗而告終。

筆者決定從關鍵字"路行""獨自行走"加上是暗色系的要求上下手，敲定顏色採用沙漠黃，沙漠很容易讓人聯想到孤單；板式確定為戶外廣告的樣式沙漠黃配合生銹的廣告牌。符合"頹廢""艱辛路途"主題。

二、 網站效果圖及LOGO的製作。

1、LOGO的樣式採用的是圖形和字元的組合。漢字LOGO的字體不是下載的字體，是筆者用鋼筆工具畫出來的字體。如圖1和1-1。

　鋼筆工具勾勒出圖1的行走的人樣式，填充紅色，然後調整混合模式"斜面和浮雕"選擇浮雕效果、雕刻清晰、深度1、方向上、大小2，其他默認。這LOGO 的創意是，一個人在崎嶇不平的路上堅持自己的方向，配合網站的英文加中文名字，構成一個形象LOGO，剛好"路"字和"行"字採用紅色，突出了路行。

文字LOGO筆者用鋼筆工具勾畫出字的各個部件，然後拼接在一起，這里只給出"路"字的方法，"行"字方法如同。[next]

2、製作布局參考圖。如圖2

　3、根據布局效果圖，新建文件大小1000X765，填充黑色。布局中的"顯示區域"為廣告牌是要掛到牆上的，使用"石頭材質"放置在頁面最上方來製作石板牆；使用"銹跡皮革材質"製作"顯示區域""LOGO"區域的邊框（註：一些材質的製作方法省略，平時可自行製作也可去圖片站下載保存，用的時候方便），將LOGO區域的邊框復制一層，調整不透明度為60%放置到LOGO曾下方，這樣大體的框架就完成了。如圖3和3-1。

（圖5）

（圖6）

4、找來一張沙漠公路的圖片，把這張圖片進行聚焦處理。點圖4示例的按扭進入"以快速蒙版編輯模式"，選擇漸變，漸變模式為"徑向漸變"在圖中間向兩邊拉，屏幕會出現一團紅色；然後再點"以標准模式編輯"畫面會出現一個圓圈選擇區域，按"DELETE"刪除即可。如圖4和圖4-1。

（圖7）

（圖8）

　5、在"路"圖片上方新建一層，按住CTRL+"路"圖層，單擊新建的圖層，填充顏色4E341B，調整為暗系沙漠黃。如圖5。

（圖9）

製作文字LOGO牌。找來圖5-1中的灰色材質，在"LOGO邊框"下面新建一層，然後在其之上新建一層，放置沙漠圖片，將其混合模式修改為"顏色"然後打開一開始制

4、想知道一個網站的首頁效果圖製作的基本過程

在網頁效果圖的設計階段，應按照繪制結構草圖，在Fireworks中繪制輔助線、繪制結構底圖、添加內容、對效果圖進行切片、對切片進行優化、輸出切片刀Dreamweaver的順序來依次進行。下面將會介紹網頁效果圖設計中各個流程的作用。
在圖像軟體中設計網頁效果圖，總體可以分為7個步驟：（1）、創建畫布，添加輔助線來布局；（2）、繪制結構底圖；（3）、添加內容，包括圖像和文字；（4）、切片；（5）、優化；（6）、導出；（7）、布局。

1、創建輔助線
在具體設計前，應當考慮到網頁的布局形式，可以根據策劃階段確定下來的網頁布局草圖，在Fireworks的畫布中添加輔助線，這樣做的目的是為了明確頁面布局形式和面積。
需要注意的是，對於布局結構比較復雜的頁面，輔助線不是一次就能夠全部創建好的，而是一部分內容創建一部分否則輔助線過多會使頁面混亂。
2、繪制結構底圖
根據創建好的輔助線，使用Fireworks的工具或者是矩形選取框工具，把網頁效果圖中帶有底色的「矩形塊」依次繪制出來，形成一個整體的布局效果。
這里的「矩形塊『只是一個統稱，可以使任意的形狀。除了得到形狀以外，還可以直接對這些」矩形塊「配色，或添加紋理、濾鏡，從而在整體上對頁面的配色方案進行控制。

3、添加內容
結構底圖繪制完畢後，就可以開始在網頁效果圖中添加實際的內容了，包括文字和圖像，從而完成最終的效果圖方案。
添加圖像的時候，如何選擇最合適的圖像素材，如何對圖像素材進行處理是非常重要的，可以說網頁中圖像設計的好壞，直接影響到整體的頁面效果。

4、切片
效果圖製作完畢後，首先需要進行切片。把網頁比喻成一幅圖，而切片工具就像是剪刀，使用切片工具可以把一張大圖像裁剪成很多小圖像。這樣做目的之一是為了加快下載速度。因為IE瀏覽器是多線程的，同一時間可以下載3幅圖像。
切片的另外一個目的，也是最主要的目的是為了布局的需要。很多人不知道該如何對效果圖進行切片，這是因為對布局技術不了解。同一個網頁效果圖，按不同的方式布局就會得到不同的切片，並沒有說哪一個才是」標准」的，所以要想靈活運用切片，必須熟悉流行的布局技術。

5、一個網頁設計師主要是做什麼工作 是美工還是布局 還是效果圖都是自己做的

網頁設計師的工作：ps效果圖的設計 然後dw(div+css)的切片 會簡單的flash 俗稱網頁三劍客 最後一樣一般用的少
小公司一般要求你都做 大公司分得很細 ps設計和切片（布局）是分開的
初期的的網頁設計師叫美工 高級點後就叫設計師 只是不同能力水平的不同稱呼而已

6、求問為什麼在網頁設計之前要先進行效果圖設計呢？

發布日期：2012-5-30 8:48:58 來源：伊索科技 我們在做網站之前，都會有一個規劃，比如說框架圖的搭建、效果圖的設計。目前網站建設行業很多公司採用模板建站的形式，直接交付客戶成品網站，也有部分公司以專業建站的形式為客戶先出設計效果圖，到底哪個好呢？我們說如果您只考慮價格，那麼選用模板建站肯定是比較便宜的，如果您重視網站對企業形象和產品的宣傳，那麼建議選用專業建站。今天我們只介紹對於專業建站來說，為什麼在網頁設計之前要先出效果圖設計呢？
假如您是房地產開發商，要蓋一座大廈，那麼您在建大廈之前會怎麼做？毫無疑問要先在建築圖紙上進行設計規劃。再比如您是一家高端婚慶公司的負責人，要為客戶布置婚禮現場，在布置之前該如何操作？當然是要先設計好婚禮現場的效果圖。所以網站建設也是一樣，要做出讓客戶滿意的網站，首先第一步就是要為客戶設計網站效果圖。
通過效果圖，建站服務商和客戶之間可以明確進行溝通，指出哪些地方的設計和預想有所差別，或者哪裡還不盡人意，不至於空手而談，憑想像設計。一旦雙方確認了設計圖，建站服務商就可以按照效果圖進行網站建設了。目前有能力開發專業建站的北京網站建設公司都會給客戶先出效果圖設計，這樣不會導致後期網站完成後卻發現不是客戶想要的，重新推翻來做，那麼不但耽誤雙方的時間，建站公司還可能因為無法支付二次開發的人力成本而導致合作終止。實際上，有了效果圖，也是對最終網站建設是否合格的一個考量標准。

7、怎樣去做一個網站的效果圖呢？求詳細。。。

做一個不但在於技術精還要在於設計理念有創意，所以如何設計好一個效果圖要從多方面去考慮，首先從你的需求方面去想去設計（即頁面內容），之後根據企業VI去定位頁面布局及顏色等等方面，最後根據布局再去用技術方面的東西去設計。既然你只是說如何布局，那麼根據經驗來說，應該從以下幾方面考慮。

一).確定頁面功能模塊
首頁的內容模塊是指你需要在頁面上實現的主要內容和功能。一般的站點都需要這樣一些模塊：
網站名稱(logo), 廣告條(banner), 主菜單(menu),
新聞(what『s new), 搜索(search), 友情鏈接(links),
郵件列表(maillist),計數器(count), 版權(copyright).
（當然這些只是常用而已。一般情況下，如果是企業設計一個網站的話，都會有網站設計方案，那麼可以根據方案去設計的。）

二).設計首頁的版面
在功能模塊確定後，開始設計首頁的版面。就象搭積木，每個模塊是一個單位積木，如何拼搭出一座漂亮的房子，就看你的創意和想像力了。設計版面的最好方法是：找一張白紙，一支筆，先將你理想中的草圖勾勒出來，然後再用網頁製作軟體實現。
1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

其實說來說去就是顏色搭配問題及圖片布局，一般一個網站效果圖都只是一個靜態的頁面而已，要圖片格式的話，直接截個圖就行了。所以只要知道布局及顏色搭配再就是懂設計技術基本上就可以做一個效果圖了。當然你自己感覺創意不夠的話，一般可以同過網路去搜索一下網站模板，可以去借鑒別人的設計風格之後在根據自己的要求加以修改就ok了，有很多是PS格式個模板，那麼就可以在ps裡面先修改在通過切片工具做都是可以的。這些需要一定的設計技術了。

根據樓主說提問的問題來看應該不太懂網頁設計，所以最好去下載一個網頁模板，百度里搜索有很多下載網站，之後看點網頁製作教程就可以了做了。一下是一些相關資料，如果鏈接過期請自行搜索
網頁模板下載地址：http://www.dabaoku.com/moban/geren/
網頁設計教程：http://www.enet.com.cn/eschool/zhuanti/dreamweavershili/

8、如何用PS做網頁效果圖

上次有空做了個。我用的是GIF的動態效果。你也可以直接做圖片然後保存網頁格式，尺寸什麼的自己調。不要在意這些細節。。

9、html網頁設計裡面怎麼平鋪背景圖片

html網頁設計裡面平鋪背景圖片的代碼如下：
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
網頁背景默認是平鋪整個屏幕的，可能有以下原因導致不能平鋪：

1、圖片不夠大，又background屬性不能拉伸圖片；
2、只能用個div，把其z-index值設為負，並使這個div大小為整個body大小，在div里用<img> ；
3、body的background屬性去掉，要不然會被遮住。