Photoshop設(shè)計(jì)簡(jiǎn)潔的商業(yè)網(wǎng)站應(yīng)用實(shí)例(6)

來源:網(wǎng)頁教學(xué)網(wǎng) 作者:admin 學(xué)習(xí):704人次

首先要感謝的是你能夠訪問這個(gè)教程。在這個(gè)教程中我將創(chuàng)建一個(gè)商業(yè)網(wǎng)站布局。如果你經(jīng)常訪問bbs.16xx8.com的話,你將會(huì)看到創(chuàng)建一個(gè)好看的網(wǎng)站是多么容易。在這個(gè)教程里你會(huì)找到更多的布局教程。你會(huì)好奇這是為什么嗎?

聲明:本文不是原創(chuàng),而是編譯!原文地址:http://smashingpoint.com/clean-business-layout-tutorial.html

我使用Photoshop已經(jīng)很長(zhǎng)時(shí)間了,從那個(gè)時(shí)候開始我就為客戶創(chuàng)建網(wǎng)站,并因此掙了不少錢。我想要教給你如何創(chuàng)建網(wǎng)站的原因是因?yàn)閯?chuàng)建網(wǎng)站可比創(chuàng)建一個(gè)簡(jiǎn)單的Photoshop效果掙錢多了。如果你想開始從網(wǎng)上掙錢的話,為你未來的客戶創(chuàng)建網(wǎng)站正是時(shí)候。我這里有一個(gè)例子,為一個(gè)logo或者一個(gè)照片效果你能付多少錢?也許是50美元至100美元?從我開始設(shè)計(jì)至今我創(chuàng)建過數(shù)目上千的logo,上百個(gè)大的網(wǎng)站,我的大部分收入都是從設(shè)計(jì)網(wǎng)站布局中獲得的,這就是為什么我認(rèn)為你應(yīng)該開始創(chuàng)建網(wǎng)站的原因。我將會(huì)盡可能的講述的簡(jiǎn)單易懂,我敢肯定通過我的方法會(huì)創(chuàng)建出漂亮的網(wǎng)站布局。

讓我們開始我們的教程,在這個(gè)教程中,我將創(chuàng)建一個(gè)商業(yè)網(wǎng)站布局。

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站003

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站004bbs.16xx8.com網(wǎng)

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站005

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站006webjx.com

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站007bbs.16xx8.com網(wǎng)


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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站009

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站011bbs.16xx8.com網(wǎng)

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站013

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站015

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站017bbs.16xx8.com網(wǎng)

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站019webjx


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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站021

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站023

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站025

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站027webjx.com

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站029wbbs.16xx8.com網(wǎng)

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站031webjx.com


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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站033

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站035

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站037bbs.16xx8.com網(wǎng)

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站039

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站041

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站043


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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站045webjx.com

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

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站047

最后的結(jié)果如下

Photoshop制作網(wǎng)站教程:簡(jiǎn)潔商業(yè)網(wǎng)站049webjx.com

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



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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無評(píng)論,交個(gè)作業(yè)支持一下吧~

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

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