Photoshop 繪制漂亮的商業(yè)類型網(wǎng)站模板
發(fā)布時(shí)間:2010-01-20 19:25:42 作者:佚名
我要評(píng)論

首先要感謝的是你能夠訪問(wèn)這個(gè)教程。在這個(gè)教程中我將創(chuàng)建一個(gè)商業(yè)網(wǎng)站布局。如果你經(jīng)常訪問(wèn)我的網(wǎng)站的話,你將會(huì)看到創(chuàng)建一個(gè)好看的網(wǎng)站是多么容易。在這個(gè)博客里你會(huì)找到更多的布局教程。你會(huì)好奇這是為什么嗎?
我使用Photoshop已經(jīng)很長(zhǎng)時(shí)間了,從那個(gè)時(shí)候開(kāi)始我就為客戶創(chuàng)建網(wǎng)站,并因此掙了不少錢。我想要教給你如何創(chuàng)建網(wǎng)站的原因是因?yàn)閯?chuàng)建網(wǎng)站可比創(chuàng)建一個(gè)簡(jiǎn)單的Photoshop效果掙錢多了。如果你想開(kāi)始從網(wǎng)上掙錢的話,為你未來(lái)的客戶創(chuàng)建網(wǎng)站正是時(shí)候。我這里有一個(gè)例子,為一個(gè)logo或者一個(gè)照片效果你能付多少錢?也許是50美元至100美元?從我開(kāi)始設(shè)計(jì)至今我創(chuàng)建過(guò)數(shù)目上千的logo,上百個(gè)大的網(wǎng)站,我的大部分收入都是從設(shè)計(jì)網(wǎng)站布局中獲得的,這就是為什么我認(rèn)為你應(yīng)該開(kāi)始創(chuàng)建網(wǎng)站的原因。我將會(huì)盡可能的講述的簡(jiǎn)單易懂,我敢肯定通過(guò)我的方法會(huì)創(chuàng)建出漂亮的網(wǎng)站布局。
讓我們開(kāi)始我們的教程,在這個(gè)教程中,我將創(chuàng)建一個(gè)商業(yè)網(wǎng)站布局。
首先創(chuàng)建一個(gè)新的文檔
請(qǐng)使用如下設(shè)置
設(shè)置前景色為:#2b2724
選擇油漆桶工具,為畫(huà)布上色,選擇背景層
按住Ctrl+J(此快捷鍵將會(huì)復(fù)制選定圖層)
選擇“圖層1”,然后選擇“濾鏡”>“雜色”>“添加雜色”
然后使用如下設(shè)置
選擇圓角矩形工具,在顯示器的上方,設(shè)置如下設(shè)置
在你的布局上為導(dǎo)航創(chuàng)建兩個(gè)形狀,改變前景色為#e84502,然后我會(huì)使用圓角矩形工具
復(fù)制這兩個(gè)橙色的形狀。想要復(fù)制圖層,首先你需要選定你想要復(fù)制的圖層,然后按下CTRL+J鍵,在你復(fù)制完這兩個(gè)橙色的形狀之后,改變顏色為白色。改變顏色的方法是在圖層縮略圖上雙擊,然后選擇白色。
這是目前我所得到的結(jié)果
現(xiàn)在選擇移動(dòng)工具,將白色形狀向上移動(dòng)一點(diǎn)點(diǎn)
我會(huì)在這個(gè)布局上放置一些圖片
使用文字工具,我會(huì)加上一些文字
使用相同的工具,在導(dǎo)航條上加上一些文字
選擇線條工具,確保線條粗細(xì)為1個(gè)像素
在導(dǎo)航按鈕之間創(chuàng)建一個(gè)垂直線條
現(xiàn)在最重要的是要柵格化圖層,想要做到這一點(diǎn),你需要在圖層上點(diǎn)擊右鍵選擇“柵格化圖層”
選擇橡皮擦工具,改變畫(huà)筆到 60 Soft Mechanical 60 pixels
然后試著刪除線條的頂部和底部
復(fù)制這個(gè)圖層(選擇想要復(fù)制的圖層,然后在鍵盤上按下CTRL+J 鍵),選擇移動(dòng)工具,然后將復(fù)制好的線條放置在另外一個(gè)導(dǎo)航按鈕的右邊。
在整個(gè)布局的上方,我會(huì)創(chuàng)建一個(gè)簡(jiǎn)單的文字logo,在以后的教程中我會(huì)向你展示如何創(chuàng)建漂亮的logo
在圖層1的上方創(chuàng)建一個(gè)新的圖層
選擇畫(huà)筆工具,改變 to Soft Mechanical 60 pixels,在文字logo下面創(chuàng)建一個(gè)簡(jiǎn)單的白色點(diǎn)
想要效果好一點(diǎn)的話,可以將此圖層的透明度改變?yōu)?5%
最后的結(jié)果如下
希望你能喜歡最終的設(shè)計(jì),此設(shè)計(jì)的PSD文檔只對(duì)VIP會(huì)員開(kāi)放。
翻譯自:Clean Business Layout Tutorial
讓我們開(kāi)始我們的教程,在這個(gè)教程中,我將創(chuàng)建一個(gè)商業(yè)網(wǎng)站布局。

首先創(chuàng)建一個(gè)新的文檔

請(qǐng)使用如下設(shè)置

設(shè)置前景色為:#2b2724

選擇油漆桶工具,為畫(huà)布上色,選擇背景層

按住Ctrl+J(此快捷鍵將會(huì)復(fù)制選定圖層)

選擇“圖層1”,然后選擇“濾鏡”>“雜色”>“添加雜色”

然后使用如下設(shè)置

選擇圓角矩形工具,在顯示器的上方,設(shè)置如下設(shè)置

在你的布局上為導(dǎo)航創(chuàng)建兩個(gè)形狀,改變前景色為#e84502,然后我會(huì)使用圓角矩形工具

復(fù)制這兩個(gè)橙色的形狀。想要復(fù)制圖層,首先你需要選定你想要復(fù)制的圖層,然后按下CTRL+J鍵,在你復(fù)制完這兩個(gè)橙色的形狀之后,改變顏色為白色。改變顏色的方法是在圖層縮略圖上雙擊,然后選擇白色。

這是目前我所得到的結(jié)果

現(xiàn)在選擇移動(dòng)工具,將白色形狀向上移動(dòng)一點(diǎn)點(diǎn)

我會(huì)在這個(gè)布局上放置一些圖片

使用文字工具,我會(huì)加上一些文字

使用相同的工具,在導(dǎo)航條上加上一些文字

選擇線條工具,確保線條粗細(xì)為1個(gè)像素

在導(dǎo)航按鈕之間創(chuàng)建一個(gè)垂直線條

現(xiàn)在最重要的是要柵格化圖層,想要做到這一點(diǎn),你需要在圖層上點(diǎn)擊右鍵選擇“柵格化圖層”

選擇橡皮擦工具,改變畫(huà)筆到 60 Soft Mechanical 60 pixels

然后試著刪除線條的頂部和底部

復(fù)制這個(gè)圖層(選擇想要復(fù)制的圖層,然后在鍵盤上按下CTRL+J 鍵),選擇移動(dòng)工具,然后將復(fù)制好的線條放置在另外一個(gè)導(dǎo)航按鈕的右邊。

在整個(gè)布局的上方,我會(huì)創(chuàng)建一個(gè)簡(jiǎn)單的文字logo,在以后的教程中我會(huì)向你展示如何創(chuàng)建漂亮的logo

在圖層1的上方創(chuàng)建一個(gè)新的圖層

選擇畫(huà)筆工具,改變 to Soft Mechanical 60 pixels,在文字logo下面創(chuàng)建一個(gè)簡(jiǎn)單的白色點(diǎn)

想要效果好一點(diǎn)的話,可以將此圖層的透明度改變?yōu)?5%

最后的結(jié)果如下

希望你能喜歡最終的設(shè)計(jì),此設(shè)計(jì)的PSD文檔只對(duì)VIP會(huì)員開(kāi)放。

翻譯自:Clean Business Layout Tutorial
相關(guān)文章
PS基礎(chǔ)教程之橡皮擦工具組和填充工具組使用知識(shí)
今天我們繼續(xù)來(lái)介紹ps基礎(chǔ)教程,這篇我們主要講橡皮擦工具組和填充工具組,這兩個(gè)工具在修圖的時(shí)候是比較常用的,下面我們就來(lái)看看基礎(chǔ)教程2024-12-23photoshop圖層初識(shí) ps圖層相關(guān)概念與基本操作
ps圖層是什么?簡(jiǎn)單來(lái)說(shuō),ps軟件中的圖層就好比是一張“透明紙”,將圖像的各個(gè)部分繪制在不同的“透明紙”上,可以看到紙后的東西,而且每層紙都是獨(dú)立的,下面我們就來(lái)看2024-12-23PS基礎(chǔ)教程之學(xué)習(xí)應(yīng)用圖層樣式的基本方法
ps零基礎(chǔ)之圖層樣式的講解,在使用ps的時(shí)候,我們經(jīng)常會(huì)在圖層上添加一些效果,這就是圖層樣式,該怎么應(yīng)用呢?詳細(xì)請(qǐng)看下文介紹2024-12-23ps如何把一張長(zhǎng)圖切成幾張小圖片? ps把長(zhǎng)圖切成短圖的技巧
有時(shí)候,我們希望能把一張圖片均勻地分成幾張圖片,就像拼圖一般的效果,需要某一部分隨時(shí)可以拿出來(lái)使用,該怎么操作呢?詳細(xì)請(qǐng)看下文介紹2024-09-10- PS調(diào)整字體大小是一個(gè)非?;A(chǔ)的操作,但也是非常實(shí)用的技能,在Photoshop中,調(diào)整字體大小的方式有多種,詳細(xì)請(qǐng)看下文介紹2024-02-02
ps窗口字體太小怎么調(diào) PS窗口字體大小調(diào)節(jié)技巧
但最近有用戶在使用photoshop時(shí)發(fā)現(xiàn)窗口界面的字體比較小,使用起來(lái)非常的不方便,因此有不少用戶想將其大小進(jìn)行調(diào)節(jié),具體該如何操作呢?詳細(xì)請(qǐng)看下文介紹2024-02-02ps中圖層被父圖層鎖定怎么辦? 圖層被父圖層鎖定的解鎖技巧ps
ps中圖層被父圖層鎖定怎么辦?ps中圖層解鎖失敗,提示圖層被父圖層鎖定該怎么辦呢?下面我們就來(lái)看看詳細(xì)的解決辦法2023-12-19ps描邊最大只有288怎么辦? Photoshop描邊只能調(diào)到288像素的解決辦法
ps描邊最大只有288怎么辦?ps描邊在使用的過(guò)程中,發(fā)現(xiàn)只能調(diào)到288像素,該怎么操作呢?下面我們就來(lái)看看Photoshop描邊只能調(diào)到288像素的解決辦法2023-11-30PS工具欄中的工具有缺失怎么辦? Photoshop工具欄不全的多種解決辦法
PS工具欄中的工具有缺失怎么辦?ps工具欄中有很多工具,但是發(fā)現(xiàn)有些工具不見(jiàn)了,該怎么辦呢?下面我們就來(lái)看看Photoshop工具欄不全的多種解決辦法2023-11-30Photoshop2024怎么下載安裝? ps2024安裝圖文教程
Photoshop2024怎么下載安裝?ps2024發(fā)布以后,很多朋友想要嘗試信工鞥,該怎么下載安裝呢?下面我們就來(lái)看看ps2024安裝圖文教程2023-11-30