Photoshop設計制作出簡潔大氣的電子商務網(wǎng)站首頁
站酷 發(fā)布時間：2012-06-16 09:38:36 作者：Wangyufeng_888 
我要評論
我要評論本教程介紹簡單的電子商務網(wǎng)站制作方法。網(wǎng)站大致由四大部分構成：頂部導航、中間橫幅、中間主要產品列、底部。中間部分最為重要，盡量要制作精美大氣一點，這樣才有吸引力。
12、有時候，做頁面切片時，你需要一些焦點狀態(tài)，表示當前鼠標操作時間。這就是接下來要做的，使用矩形工具創(chuàng)建按鈕，繼續(xù)使用黃色的圖層樣式。
13、向導航內添加一些文本。如下圖所示。
14、制作banner，隨著Apple網(wǎng)站UI設計的成功范例，越來越多的網(wǎng)站采用趕緊大版面的banner圖片吸引大家的注意力。所以，在導航欄中我將添加一個MacBook Pro筆記本電腦圖片。
15、然后在banner圖片內添加一些圓角矩形工具按鈕。
16、在banner下方，創(chuàng)建一個白色區(qū)域,用于添加一些產品。
17、在這個區(qū)域內展示出你要展銷的產品圖片，我隨機排列了一些圖片做例子。
18、在每個產品之間用直線工具畫一些線條做分割，這些線條用淺灰色即可。
19、接下來開始制作左側豎排導航。用圓角矩形工具制作黃色Title,黃色title之下制作一些灰色的形狀。如果你仔細看一下我的PSD文件,你會看到這些灰色形狀實際上是黑暗的形狀,但他們有一個非常低的透明度:大約20%。你可以在層調色板中改變透明度值。
20、使用圓角矩形工具,創(chuàng)建一些按鈕，在按鈕內添加一些文本。
21、創(chuàng)建一個簡單的頁腳。
22、最后一步，創(chuàng)建一個Logo樣式，如下圖所示，通常情況下，網(wǎng)站的logo下面會有對應的Tagline，看個人需求而定。
最終效果：
相關文章
今天我們繼續(xù)來介紹ps基礎教程，這篇我們主要講橡皮擦工具組和填充工具組，這兩個工具在修圖的時候是比較常用的，下面我們就來看看基礎教程2024-12-23
ps圖層是什么？簡單來說，ps軟件中的圖層就好比是一張“透明紙”，將圖像的各個部分繪制在不同的“透明紙”上，可以看到紙后的東西，而且每層紙都是獨立的，下面我們就來看2024-12-23- ps零基礎之圖層樣式的講解，在使用ps的時候，我們經常會在圖層上添加一些效果，這就是圖層樣式，該怎么應用呢？詳細請看下文介紹2024-12-23
ps如何把一張長圖切成幾張小圖片? ps把長圖切成短圖的技巧
有時候，我們希望能把一張圖片均勻地分成幾張圖片，就像拼圖一般的效果，需要某一部分隨時可以拿出來使用，該怎么操作呢？詳細請看下文介紹2024-09-10- PS調整字體大小是一個非?；A的操作，但也是非常實用的技能，在Photoshop中，調整字體大小的方式有多種，詳細請看下文介紹2024-02-02
- 但最近有用戶在使用photoshop時發(fā)現(xiàn)窗口界面的字體比較小，使用起來非常的不方便，因此有不少用戶想將其大小進行調節(jié)，具體該如何操作呢？詳細請看下文介紹2024-02-02
ps中圖層被父圖層鎖定怎么辦? 圖層被父圖層鎖定的解鎖技巧ps
ps中圖層被父圖層鎖定怎么辦？ps中圖層解鎖失敗，提示圖層被父圖層鎖定該怎么辦呢？下面我們就來看看詳細的解決辦法2023-12-19ps描邊最大只有288怎么辦? Photoshop描邊只能調到288像素的解決辦法
ps描邊最大只有288怎么辦？ps描邊在使用的過程中，發(fā)現(xiàn)只能調到288像素，該怎么操作呢？下面我們就來看看Photoshop描邊只能調到288像素的解決辦法2023-11-30PS工具欄中的工具有缺失怎么辦? Photoshop工具欄不全的多種解決辦法
PS工具欄中的工具有缺失怎么辦？ps工具欄中有很多工具，但是發(fā)現(xiàn)有些工具不見了，該怎么辦呢？下面我們就來看看Photoshop工具欄不全的多種解決辦法2023-11-30
Photoshop2024怎么下載安裝? ps2024安裝圖文教程
Photoshop2024怎么下載安裝？ps2024發(fā)布以后，很多朋友想要嘗試信工鞥，該怎么下載安裝呢？下面我們就來看看ps2024安裝圖文教程2023-11-30
