<form id="933nb"><th id="933nb"><track id="933nb"></track></th></form><noframes id="933nb"><form id="933nb"><th id="933nb"></th></form>

      <address id="933nb"><address id="933nb"></address></address><sub id="933nb"></sub>
      <address id="933nb"><listing id="933nb"><meter id="933nb"></meter></listing></address>
      <form id="933nb"></form><address id="933nb"><listing id="933nb"><meter id="933nb"></meter></listing></address><form id="933nb"><nobr id="933nb"><progress id="933nb"></progress></nobr></form>

      <address id="933nb"><address id="933nb"><nobr id="933nb"></nobr></address></address>
      <noframes id="933nb"><address id="933nb"></address>

        <address id="933nb"></address>
        <form id="933nb"></form>
        <form id="933nb"><th id="933nb"></th></form>

        當前位置:主頁 > 網頁教程 > 網頁制作 > 制作技巧 > 內容歡迎大家投稿

        從零開始設計一個漂亮的網頁

        時間:2009-11-05 19:07來源:未知 作者:大寶庫 點擊:讀取中
        閱讀工具:字體:

        難得國外有這樣好的教程,我就用我僅有的英文水平翻譯一下啦。建議將本博客的中欄和右欄隱藏后觀看本文。

        轉載請注明:

        譯者:Joe

        譯文來源:http://xiebiji.com/2009/09/design_a_beautiful_website/

        原文來自:Design a Beautiful Website From Scratch

        引言

        你是否曾經想過設計一個漂亮的網頁,但是卻不知道怎樣入手?說實話,幾年前我也是這樣。當我瀏覽網頁的時候我看到這么多好看的網頁,我就希望自己有技術創作這樣的設計作品。

        今天我可以這么做了,而且我將教你怎么做這樣的設計!從根本上,對于這種設計你需要一點photoshop的操作技能和觀察細節的能力。通過以下的教程,我將會指出其中極細微的細節之處,而這些細節講使你的網頁設計漂亮起來。打開photoshop,我們開始啦!

        正文

        先看效果圖

         

        第一步:下載960網格模板

        我一直以來做的設計幾乎全部是基于960網格模板的。 因此在我們開始創作之前,先下載這個模板。 你能在960.gs上找到這些模板。 下載之后解壓zip里面關于PSD的模板。 你會發現有兩種規格: 一個是12欄式的而另一個是16欄式的。 他們的區別就像名字所說的,一個是按12欄分布一個按16欄。 更詳細的介紹一下吧, 如果你的設計里面分3個區塊你就選擇12欄式的,那是因為12能被3整除; 同理假如你的設計分四個區塊, 你可以選12欄式或者16欄式,那時因為12和16都可以被4整除。 你會發現這個技巧將用于下面教程。

        第二步:構造你想象的結構

        在我們打開PSD網格模板創作前, 我們首先需要先構造一下想象中的結構。 從上面的這張圖,你可以看出來:因為在一個排版中又有排版,所以這是一個有點復雜的結構。

        第三步

        構造了結構之后我們繼續。 打開16欄式的PSD模板文件。 打開 “圖像 》畫布大小” 。 把畫布的寬度設置為 1200px 高度設置為 1700px 。把背景色設置為 #ffffff 既白色。

        第四步

        用長方形工具在頂部畫一個寬100%高大概80px的長方形。 用顏色: #dddddd 填充它。

        第五步

        在長方形那層上面創建一個新層。 按住CRTL鍵鼠標點擊長方形層。 長方形就被選中了,然后把目標移至剛建的新層上。 選擇半徑 600px 的軟筆刷(如圖), 把其顏色設置為白色, 然后就像圖片所示那樣在選框上邊緣點幾下。 通過這個技巧你畫出了一個微妙的照亮效果。 你現在可以把這兩層聯合起來了。

        第六步

        建一個新層,再用長方形工具如圖所示在上端畫一個深灰色的小長方形。

        第七步

        在距離上端長方形500px處開始畫一個寬 100% 高 575px 的長方形。 設置其由 #d2d2d0到 #ffffff 的漸變色, 角度為-90,縮放為100%

         

        第八步

        現在我們如第五步那樣添加照亮效果。 這個技巧我們將很頻繁地使用;因此下次用到的時候我只提示是第五步的效果 。

        在當前層之上簡歷一個新層。 Ctrl+鼠標點擊這個大的長方形。 選擇 600px的軟筆刷, 設置顏色為白色,如圖所示對選區的邊緣點擊多下。

        第九步

        創建一個新層畫一個400px高的長方形。 這是用作我們網頁頁頭的。 給它設置一個線性漸變,由顏色 #2787b7 to #258fcd.

        以下展示顏色的微妙變化:

         

        第十步

        在頁首長方形塊底端畫一條1px的灰藍色的線, 混合屬性中添加陰影效果。 陰影參數: 正底疊加, 透明度: 65%, 方向: -90, 距離: 1px , 寬度: 6px. 之后再建一個新層,在灰藍色線下面畫一條1px的白線。通過這種方式,我們就可以創建一個輪廓鮮明的邊緣。 可以說在你的設計中,你可以把這個技巧用于其他色塊。

        第十一步

        創建一個新層,在畫布頂端用“長方形”工具化一個50px高的長方形,就如圖所示,這個長方形是用作導航的。(責任編輯:大寶庫)



        ------分隔線----------------------------
        推薦內容
        • 2010年網頁設計的流行趨勢

          網頁設計就像時裝,每一年都會流行新的設計。一起來看看2010年,網頁設計師們將會有什...

        • 專業網頁設計教程

          看過很多網頁設計教程文章,但不是說的太高深,對我們實際設計工作并無什么用處,就是...

        • 全面解答:如何進行網頁設計

          在網頁設計的認識上,許多人似乎仍停留在網頁制作的高度上。認為只要用好了網頁制作軟...

        • 網頁設計經驗和技巧總結

          ■ 網站主題規劃 注意不要讓你的網站主題過于分散。因為網站主題越集中,一般情況下網...

        • 專業主頁設計原則

          在任何Web站點上,主頁是最重要的頁面,會比其他頁面有更大的訪問量。主頁對公司收入...

        • 2009年不要制作的幾種網站

          這六種網站內千萬不能做,最先被淘汰的肯定是這六種網站: 第一種:大打擦邊球的網站 ...

        贊助商鏈接
        贊助商鏈接


        彩37