DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> Photoshop制作CSS網頁制作的背景圖
Photoshop制作CSS網頁制作的背景圖
編輯:CSS詳解     

先來看圖:

blockquote

如何實現這樣的效果呢?

首先,要准備一張這樣的圖片:

quote

 

如何做出這樣的圖片呢?

一、打開Photoshop,新建一個640×480像素的文檔

step1

二、新建圖層,按D鍵將前景色和背景色恢復為前黑後白,再按X鍵交換前景色和背景色。選擇圓角矩形工具(快捷鍵U),半徑設置為10個像素,畫一個寬400像素,高50像素的圓角矩形。在圖上你不會看到任何變化,因為此時的圓角矩形和背景都是白色的,但是在圖層面板中的圖層1中,你會觀察到,其實圓角矩形已經畫好了。

step3

三、將圖層1復制一遍(Ctrl+J)

copy

四、選擇圖層1,在編輯菜單中選擇描邊命令,選擇#CBD99C顏色,在外部給圓角矩形描上1個像素寬的邊。

step4

結果如下圖:

result

四、選擇橡皮工具,調整畫筆大小,將流量設置為100%,擦去矩形邊框的右邊和下邊。

clear 

五、選擇圖層1副本,在圖層面板中的縮略圖上雙擊,彈出圖層樣式對話框,勾選漸變疊加,將漸變顏色設置為#FAFAFA到#FFFFFF,勾選反色,點擊確定。

style

六、合並圖層1副本和圖層1(Ctrl+E),再次選擇橡皮擦工具,將流量調整為10%,使用較大的畫筆,在合並後的圖層上塗抹,做出漸隱效果。

clear1

七、選擇文字工具,鍵出引號,調整引號大小和字體,我這裡使用了42個像素大小的幼圓字體,將引號顏色更改為#E7E7E7,調整引號位置。

final

好了,圖片的制作就完成了。下面使用CSS中的設置背景圖片屬性將此圖片應用到<blockquote>元素,調整其中的內邊距就可以了。代碼如下:

blockquote { color: #777; 
                   background: White url(img/quote.gif) no-repeat top left; 
                   padding-top: 10px;  
                   padding-left: 35px; }

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved