大連網站設計|大連網站優化|大連網絡營銷
所在位置:大連網站建設 > 中酷觀點 > 網站設計 > 正文
網站建設 / 網站策劃 / 網站優化 / 網絡營銷 / 網站設計 / 常見問題

Ps設計簡潔網頁界面

時間:2013年05月11日 來源:互聯網

今天,我將介紹如何創建一個干凈的網絡布局、一個漂亮的背景。開門見山,咱直接切入正題吧,菇涼帥哥們有興趣的話,可以打開PS跟著做喲。

Ps設計簡潔網頁界面

開始設置的文件

打開一個新的文檔:外形尺寸1200×1640像素,分辨率為72像素/英寸。

我們要創建基本的背景層。簡單的在草稿上勾畫出大概的布局與結構,可以看出頁面最終的雛形,不過

在設計過程中,我們可能會添加新的元素。

Ps設計簡潔網頁界面

草稿上可以看出,我們將創建5個分欄,在這里我們將添加的內容。

添加的第一層,這將是我們的背景,顏色#ededed。

在頁面頂部繪制一個矩形命名為top1(使用矩形柵格化的圖層(顏色#ededed),并添加雜色(濾鏡>雜色>添加雜色0.5 – 0.8;高斯分布和單色)。再次繪制矩形,顏色#cddcec),柵格化的形狀和添加雜色(濾鏡>雜色>添加雜色0.5 – 0.8;高斯分布和單色)。添加一個漸變疊加(柔光,54%,從黑到白的90%,角度和縮放75%)。

接下來添加矩形(U),在中間新建一個矩形(顏色為#608bb6,高度400像素左右),設置混合模式為顏色加深,并填充為75%,然后添加一個白色的描邊1像素(圖層樣式)。

最后的底部頁腳添加一個矩形形狀,使用相同的工具和色彩,但現在設置混合線性光,不透明度為70%。

下面的最終結果。

Ps設計簡潔網頁界面

步驟2 – 背景

給我們的背景添加紋理。

添加一個新層(CTR + SHIFT + N),使用選框工具在畫布頂部添加一個1像素的白線。(仔細看下圖頂部有條白線)

Ps設計簡潔網頁界面

現在打開一個新的文檔12×1像素,背景層解鎖并隱藏它。放大到3200%(最大),添加一個新圖層,使用矩形選框工具添加兩個1×1像素的正方形,填充顏色為#FFF和其他#000,如下圖所示。然后選擇菜單>編輯>定義圖案。

Ps設計簡潔網頁界面

我們制作了一個新的圖案效果即將使用(這也是一個制作樣式圖案方法哦)

回到我們的主要文件。創建一個新的圖層,用矩形選框工具繪制一個整個畫布那么大的選區,填充前景色,設置填充為0%,然后添加圖層樣式里的圖案疊加。

Ps設計簡潔網頁界面

現在是時候繪制云了!

您可以拉出5條輔助線(如圖,方法,菜單>視圖>新建參考線分別輸入位置84px – 186px – 600px的- 1014px – 1118px),以劃分工作區,然后使用橢圓工具添加一些形狀(如圖),然后把這幾個形狀圖層都選中并編組。

Ps設計簡潔網頁界面

復制這個組

并將復制出來的組轉化為智能對象(點組然后右鍵即可看到),添加雜色。

現在,你必須使用一個圖層蒙版隱藏超出部分的云(認真看下面的方法):Ctrl +單擊“圖層top1”那個圖層縮覽圖(在“圖層”面板中),出現選區,然后單擊選擇已經添加雜色那個云的圖層,關鍵的一步,單擊添加矢量蒙版。

[img]/jzxy/UploadFiles_333/201303/20130318212842461.jpg[/img]

[img]/jzxy/UploadFiles_333/201303/20130318212842461.jpg[/img]

[img]/jzxy/UploadFiles_333/201303/20130318212842461.jpg[/img]

[img]/jzxy/UploadFiles_333/201303/20130318212842461.jpg[/img]

[img]/jzxy/UploadFiles_333/201303/20130318212842461.jpg[/img]

Ps設計簡潔網頁界面

然后應用下面的樣式。內陰影:混合模式選擇疊加,白色,透明度55%,全局光角度120°,距離5大小0。

出現云的白色投影。

Ps設計簡潔網頁界面

現在,我們畫個漂亮的云彩陰影。復制云那圖層,先清除圖層樣式,調整位置向右側下移低于原來的層,設置填充為0%,再添加下面的樣式。

漸變疊加,線性,混合模式正常,角度90°。

Ps設計簡潔網頁界面

如果成功出現了,那么使用相同的方式來繪制他的云。

Ps設計簡潔網頁界面

第3步 – 頂部配飾繪制

添加logo。使用鋼筆工具(顏色#79a7db),勾畫出下面的圖形,使用直線工具繪制兩個白色線段。然后添加圖層樣式。

投影,混合模式為正片疊底,透明度46%,取消全局光,調整角度為140°,距離7px大小0。描邊,白色大小3px,位置內部,透明度55%,混合模式正常。確定

Ps設計簡潔網頁界面

然后為兩條白線也應用相同的陰影。

添加文字(找個類似的字體吧)圖中使用 Ballpark 字體,然后添加陰影和漸變疊加。圖層樣式如下圖。

Ps設計簡潔網頁界面

我們要使用縮放,鋼筆工具,橢圓工具,圓角矩形工具繪制一個賣萌,簡單的機器人。這里不多描述如何繪制這個機器人了,看圖吧。

Ps設計簡潔網頁界面

把繪制成功的機器人群組,ctrl+鼠標點擊云層的縮略圖,再選中機器人的t添加一個圖層蒙版,目的是把他藏到云后面,蒙版的方式上面介紹過,重溫下吧。

Ps設計簡潔網頁界面

現在我們就來畫鳥和徽章。我們使用鋼筆工具,畫筆工具和橫排文字工具。如何,有詳細的繪制過程。

用自己的方式繪制出來也可以哦。

Ps設計簡潔網頁界面

第4步 – 第一個分欄繪制

首先,創建一個區域框,我們將添加團隊成員的信息。使用矩形工具繪制一個480×425白色矩形,上下添加兩個灰線(這里可以使用剪切蒙版,不會的同學把尺寸對齊就好了),并添加一段文字 圖中字體為Delicious。為文字和白色矩形添加圖層樣式如圖

混合模式為正片疊底,透明度4%黑色,取消全局光角度42°,距離3px,大小0px。

Ps設計簡潔網頁界面

接著來,在輔助線的幫助下,添加照片和資料,自己找圖占位吧。

Ps設計簡潔網頁界面

下面是每個字體的樣式,尺寸,顏色

Ps設計簡潔網頁界面

還記得上面我們繪制過相同的箭頭了么。同樣的方式,再繪制一個。用矩形工具,然后再輔助線的幫助下,創建一個矩形的形狀圖層arrow,添加錨點工具和直接選擇工具。

Ps設計簡潔網頁界面

為他添加陰影。復制這個圖層得到arrow副本,這里你可以隱藏圖層arrow,設置顏色為#000,不透明度為5%。ctrl+t然后右鍵選擇變形徑,稍作調整,得到以下圖形。

Ps設計簡潔網頁界面

好了,現在顯示剛才隱藏的圖層arrow,并提到副本那層上面。

Ps設計簡潔網頁界面

使用橫排文字工具來創建一個“——–”字符串,你可以柵欄化和變形得到下面的效果,還添加了柔軟的陰影。(憑感覺吧)

Ps設計簡潔網頁界面

最后添加文本(有點小投影哦)。

Ps設計簡潔網頁界面

現在創建三個街區,該工作室提供的服務的描述。在本節中,我們使用真棒圖標集,創造了由灰粉阿巴斯為WeGraphics,WAPP卷。2和WAPP卷。

記。涸谶@種情況下,導游是真正有用的,以填補圖標和文字部分。

Ps設計簡潔網頁界面

添加三個“點”(一個不錯的陰影),提高1px的白色陰影的文字,如下圖所示。

Ps設計簡潔網頁界面

我們創建也是一個不錯的菜單,只需在下面的白框,它應該是在這一點上,清楚如何實現這個菜單。我們增加了一剛一柔內陰影“箭頭”。

Ps設計簡潔網頁界面

第5步 – 中間帶

中間的元素,我們的設計是一個內容豐富的信息圖表中引入的一大功能區,其中包含一個口號。為了實現這一功能區,我們將創建5個自定義形狀使用鋼筆工具,像往常一樣,(我再次提醒的是,如果你是一個初學者,你可以閱讀入門:Photoshop的鋼筆工具,以了解更多有關如何使用這工具)。一起來看看究竟是什么樣的形狀,我們需要繪制(注:主要形狀和#798ea4為較深的形狀),我們將使用#497287。

Ps設計簡潔網頁界面

怎么樣的風格呢?好了,我們申請的“前端形狀相同的風格,”你可以看到下面(的模式,我們要使用,是從舊紙上WeGraphics 模式)。

Ps設計簡潔網頁界面

對于兩個小三角形,應用以下樣式:

Ps設計簡潔網頁界面

啟動子添加的口號。

Ps設計簡潔網頁界面

第6步 – 信息圖表

需要合成的我們的fictionary設計工作室的創作過程中加入少許的信息圖表新生兒從的想法。下面你可以看到大結局的結果(明顯的,它只是一個簡單的例子,如何發展背后的一個項目,你可以描述一個創造性的過程)。

Ps設計簡潔網頁界面

開始設計的兩個圓(按住Shift鍵畫一個完美的圓周,顏色為#3d3d3d)。設置,左側的形狀,填充為0%;合適的形狀,設置混合模式為亮光,填充為35%。添加樣式,如下所示(為圖案疊加為左側的形狀的形狀,除了它是相同的)。

Ps設計簡潔網頁界面

需要注意的是左邊的圓圈中使用自定義的模式,我們可以采取的步驟2相同的技術來創建此模式。

使用橢圓工具(白色的小圓圈一次,然后把它復制到再次使用)和線工具(重量:3px的,顏色為#FFFFFF)設計圖在左側。集團所有創建的形狀和線條,重復的組,將其轉換為智能對象,然后柵格化了,F在,您可以將樣式添加到該層。

Ps設計簡潔網頁界面

使用鋼筆工具繪制一些標簽(使用鮮艷的色彩:#d82f4c,#edcd59,4d85a2#598b3b),然后將它命名使用橫排文字工具,您可以申請一個的軟降shadwo到,標簽和文字。

Ps設計簡潔網頁界面

在正確的圈等三個圓圈,設置填充為20%,添加文字(你可以申請一個軟陰影的字符串),如圖所示。

Ps設計簡潔網頁界面

現在,我們要隱藏超出部分的“設計”與“發展”界。正如已經看到的,我們將使用圖層蒙版。

按Ctrl +單擊在“圖層”調板中的“創意”圓的形狀,然后去選擇>修改>擴展的值設置為3個像素。

Ps設計簡潔網頁界面

按Ctrl + Shift + I反選,然后將圖層蒙版的形狀命名為“設計”。

Ps設計簡潔網頁界面

重復上述操作,創建一個新的選擇和擴大它所示。您可以使用Ctrl + Shift +點擊,當你需要添加矢量蒙版縮覽圖從兩個或兩個以上的選擇,通過點擊“設計”和“創意”的形狀,在這種情況下,我們創建了選擇。

Ps設計簡潔網頁界面

按Ctrl + Shift + I反選,然后將圖層蒙版的形狀命名為“發展”。

Ps設計簡潔網頁界面

應用軟陰影的三個圓圈,得到以下結果。

Ps設計簡潔網頁界面

繪制一個新的循環。

Ps設計簡潔網頁界面

設置填充為0%,并添加一個白色的行程(尺寸3PX)。

Ps設計簡潔網頁界面

轉換為智能對象,柵格化,并添加陰影(相同的陰影圖“第三步”)。最后,完成增加其他線路和標簽,在下面的圖片所示的信息圖表。

Ps設計簡潔網頁界面

第7步 – 底部

您可以復制本教程中的第4步使用相同的方式。

Ps設計簡潔網頁界面

第8步 – 版權

添加底部版權文字。

Ps設計簡潔網頁界面

ok!所有步驟都已經結束,希望本教程可以幫助你了解布置頁面的方式,你可以在設計網絡布局,提高自己的技能中運用這些方法。

下一篇:一個設計師的PS經驗技巧及設計心得

提交網站建設需求
17147期胜负彩投注率 赛马会正版四不像彩图 最准平特一肖免费资料 网络bg视讯猫腻 体彩p5中奖样票 体彩p5走势图带连线图 山西快乐十分兑奖规则 青海福彩快3走势图 吉林快3计划网站 吉林快3专家分析 mg真人官网 - 值得信赖 什么叫特马 旺旺一肖一码发布区 BBIN电子游戏规则—点击登陆 DG视讯|官网 重庆时时彩天天计划—点击进入 贵州快3开奖号码查询走势图