search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

【 PS創意設計 】Photoshop簡單網頁效果圖教程-PS筆刷工廠

Photoshop簡單網頁效果圖教程

這一次的教學是屬於PS教程領域中的設計教程的相關教學。

文章出處是來自talk-mania的PS教程類文章,寫教學的作者是蘇打蘇塔 設計量販鋪,感謝蘇打蘇塔 設計量販鋪提供設計教程的實作教學。

教學大綱:

本教程主要用Photoshop簡單設計數碼風格的網頁模板,下面我們將教給大家如何利用圖片資源來繪製一張網頁效果圖。想學習網頁美工的同學記得一起來學習吧.


設計教程教學開始

下面是我們這次教程的最終結果。設計的主題是照片作品集。在生成頁面之前,我們都會在photoshop中繪製出網頁效果圖以便進行討論,今天我們要做的就是這麼一件事情。

Photoshop簡單網頁效果圖教程

新建文檔760 x 770 pixels ,白色背景。因為這一次設計的主題是照片作品集,所以我們需要一張照相機的照片。我們把這張照片放在我們的工作圖層中。

Photoshop簡單網頁效果圖教程

點擊濾鏡>渲染>鏡頭光暈,按照下圖的參數設置。

Photoshop簡單網頁效果圖教程

結果如下:

Photoshop簡單網頁效果圖教程

好了,下載一張草地的素材。在photoshop中打開,放在照相機圖層的下面,用橡皮擦工具(稍微軟一點的筆刷),刪除不必要的地方。好了,現在是下面這個效果:

Photoshop簡單網頁效果圖教程

在草地圖層的上面,新建一個圖層。在這個圖層上面我們要添加一些雲彩。這裡,我們用的是一些雲彩筆刷,你可以在下面的地址中下載到他們 Photo-shop-Brush.com 。好了,載入筆刷以後,選擇一些雲彩筆刷輕輕的塗在圖層中,我用的顏色是#2a6c9c。你應該會得到下面的結果:

Photoshop簡單網頁效果圖教程

好了,現在在相機的旁邊添加一些花:

Photoshop簡單網頁效果圖教程

如果你仔細觀察,其實我們僅僅引用了3-4朵不同的花,下載一些花的素材,改變它們的大小透明度。讓它們看起來更有層次感。一些花在相機的前面,一些在相機的後面,你可以通過調整圖層來實現這樣的效果。

Photoshop簡單網頁效果圖教程

好了,現在看起來已經相當不錯了,但是我想要添加一些葉子讓她看起來更豐富。

Photoshop簡單網頁效果圖教程

好了,現在基本上網頁的頭部已經設計好了。我們會在之後添加更多的細節,不過現在,讓我們開始繪製網頁的主體部分和底部。在這裡,我建立了兩個簡單的形狀。

Photoshop簡單網頁效果圖教程

光柵化形狀,右鍵點擊你想要光柵化的形狀,在菜單中選擇即可。

Photoshop簡單網頁效果圖教程

選擇橡皮擦工具,用一個較軟的原型筆尖,刪除形狀的頭部。我的目的是讓我們的頭部看起來有更多的層次感,不會太過生硬。

Photoshop簡單網頁效果圖教程

好了,這就是我們的效果。

Photoshop簡單網頁效果圖教程

我在我們的圖層中添加了一些文字。

Photoshop簡單網頁效果圖教程

你可以從網上下載一個彩虹的圖片,按照下圖進行放置。

Photoshop簡單網頁效果圖教程

點擊濾鏡>模糊>高斯模糊。

Photoshop簡單網頁效果圖教程

降低透明度到33%。

Photoshop簡單網頁效果圖教程

好了,這就是我現在的效果。我希望你會喜歡。

Photoshop簡單網頁效果圖教程

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Photoshop簡單網頁效果圖教程



熱門推薦

本文由 wwwfreebrushscom 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦