網(wǎng)頁的切圖及切片的屬性設(shè)置(全)

1、Photoshop CS3實例教程：網(wǎng)站首頁之主體的制作2008-08-04 09:07:34 作者：薛欣 來源： 瀏覽次數(shù)：8550 評論畔日.:；;曼中國壽尺文心專 * * wr wt五輯花H 擊呻覽的陽耳耳吐脅、甘聖.! 遼 禪花驀睥*肝專蒞耳令瞎書可議現(xiàn)其創(chuàng)=fffjirni卉代沖.主IFm*Hr 4*JI. 音JH.卜肛 TK1U1Ir* - flHLWiE 土if 席莓 蓉常UV土初需血Ph護鼻塔.中擔(dān)Wi圻寧話*中Gffi- 戢-*爲(wèi)山冃.”得局 SiTWAWT； W 9i. 7； M 壬晝號的僦予理.R1MW機直丄 *札呻潔和i -*rr峠悴櫛岬f aiu社汝離吉両砌呼吋1債弋

2、 ts.亍-Mdl7 ATMBflft 匪軽烏期懂勺說事-牛耐 e(j忙甘髓冷常+ T i ITVt tt鋰厲盤上富K* -H4V 理匕了刊旳擠htSLP-A i . ?inti*.；t -!事帯辛代鼻戈it*工對弟iftit h ；毋*鼻臥 于畀的普nfis上事憎事出* TF, M1TWH課程總覽在本課程中，朋友們將學(xué)習(xí)到以下內(nèi)容：?如何通過Photoshop CS3進行網(wǎng)站首頁的版面設(shè)計?各種網(wǎng)頁版面元素的設(shè)計技巧和方法?如何進行網(wǎng)頁的切圖以及切片的屬性設(shè)置?如何創(chuàng)建與Flash整合的FLV視頻?在Dreamweaver CS3中使用“Spry選項卡構(gòu)件? Photoshop Flash、

3、Dreamweaver 的協(xié)同工作Photoshop CS3實例教程：網(wǎng)站首頁之主體的制作（2）2008-08-04 09:07:34 作者：薛欣 來源： 瀏覽次數(shù)：8551評論第1講制作首頁的主體部分本文以 石橋花園”的網(wǎng)站首頁為例，來演示頁面創(chuàng)作的整個過程。 其實 石橋花園”是不 存在的，筆者虛構(gòu)出來也并非只為完成本例，我一直向往生活在幽靜、閑雅之所，雖然石橋花園”離我的初衷有很多差異，但也多少能表達(dá)我的一些想法吧。書歸正傳，早先的網(wǎng)頁頁面設(shè)計一般是以Dreamweaver為中心，由Photoshop或Flash等軟件來提供各種素材，如圖片、動畫、文字等。自從Photoshop出現(xiàn)了切圖”

4、等專為網(wǎng)頁設(shè)計所定制的功能后，設(shè)計的中心已慢慢轉(zhuǎn)向了Photoshopo因為Photoshop本身以圖像為基礎(chǔ)的特性，決定了他能對版面施以更精確的控制，使網(wǎng)頁的頁面能夠更加靈活和生動的布局，這幾乎完全解放了網(wǎng)頁設(shè)計師的創(chuàng)作靈感，不再受方方正正的網(wǎng)頁表格所約束?，F(xiàn)在我們要制作的是 石橋花園”首頁的主體部分，主體部分包括標(biāo)題、主展示圖片和導(dǎo)航條。1.打開Photoshop CS3,執(zhí)行菜單 文件 新建”在新建對話框中設(shè)置名稱為石橋花園”寬度為“777”高度為“800；這個數(shù)字并不 官方”只是我在平時工作當(dāng)中測試出來 的而已。對于網(wǎng)頁來說，一般只用于屏幕顯示，所以分辨率為“72、顏色模式為“RGB顏

5、色” 其它參數(shù)保持默認(rèn)。在工具箱中選擇直接選擇工具”將“#246b34； 種2. 按下Ctrl+A全選頁面，執(zhí)行菜單編輯 填充”將頁面填為純黑色。矢量的 矩形工具”繪制一個如圖1-1-1所示長方形A。然后使用白色的該矢量形狀扭曲成如圖1-1-1中B所示外觀，該形狀的十六進制顏色值為 厚重的深綠色。圖 i-i-iPhotoshop CS3實例教程：網(wǎng)站首頁之主體的制作（3）2008-08-04 09:07:34 作者：薛欣 來源： 瀏覽次數(shù)：8552 評論3. 使用橫排文字工具，輸入石橋花園”字樣，字體為 方正流行體簡體”。再輸入“ ShiQiaoGarden,字體為“ Bickham Scri

6、pt Pro，字號均為 “ 30點”，文字如圖1-1-2所示布 局。圖 1-1-24. 這是一張拍攝自龍亭的花卉原始素材，采用了微距加上2.8的大光圈，實現(xiàn)了淺景如圖1-1-3所深的背景模糊效果，讀者可以使用模糊工具或鏡頭模糊濾鏡實現(xiàn)類似的效果, 示。圖 1-1-35. 我們對圖片進行簡單的處理，執(zhí)行菜單圖像 調(diào)整 色階”從兩側(cè)向中間調(diào)整黑色和白色滑塊的位置以使圖片主體更加突出，更富有感染力。原素材本身是16:9寬屏的,我們使用選區(qū)工具加刪除鍵進行適當(dāng)?shù)牟们?，如圖1-1-4所示。圖 1-1-45.為了增加花卉的現(xiàn)代感和時尚感，我們進一步對圖片進行加工，隨意找一張圖片，執(zhí)行菜單濾鏡像素化 馬賽克

7、”數(shù)值調(diào)大，產(chǎn)生大色塊的馬賽克效果。然后通過素材或自己制作一張扭曲后的網(wǎng)格，這些都是待合成的素材，如圖1-1-5所示。圖 1-1-5Photoshop CS3實例教程：網(wǎng)站首頁之主體的制作（4）2008-08-04 09:07:34 作者：薛欣 來源： 瀏覽次數(shù)：8553 評論6. 現(xiàn)在有網(wǎng)格、花卉和馬賽克三層圖片，網(wǎng)格放在最上層，將圖層的混合模式設(shè)為顏色加深”不透明度設(shè)為“68%?；ɑ軐拥幕旌夏Ｊ皆O(shè)為 強光”馬賽克圖層不變，三者的合成效 果如圖1-1-6所示。圖 1-1-67. 下面要制作的是首頁的導(dǎo)航條部分，使用矢量的矩形工具”繪制一個長方形，注意該長方形不要畫滿，留一些黑邊在周圍，黑邊上

8、窄下粗，使其具有一定的層次感。十六進制顏色值為#c8fcc5,”一種清淡的綠色，如圖1-1-7所示。圖 1-1-78. 使用橫排文字工具輸入導(dǎo)航條上的文字，使用大括號“進行裝飾，字體為 方正小標(biāo)宋_GBK ,消除鋸齒的方法為 渾厚”如圖1-1-8所示。這里所制作的導(dǎo)航只起到占位作 用，后面的教程中將設(shè)置導(dǎo)航條按鈕的翻轉(zhuǎn)效果。圖 1-1-8舉一反三:嘗試用類似的方法設(shè)計個人主頁的標(biāo)題和導(dǎo)航條等部分。Photoshop CS3實例教程：版面元素的設(shè)計和方法2008-08-04 09:19:50 作者：薛欣 來源： 瀏覽次數(shù)：5691評論上一篇：Photoshop CS3實例教程：網(wǎng)站首頁之主體的制

9、作因為相對于主體來說，內(nèi)容部分并不是很容易出彩，所以其設(shè)計比主體更加需要清晰的思路，并非?？简炛谱髡叩哪托?。通常情況下內(nèi)容部分的主要工作都是在Dreamweaver中，所以這里我們在Photoshop中所設(shè)計的只是一個供參照的外觀。1. 在頁面的右側(cè)用矢量 矩形工具”繪制一個淡綠色的背景填充，該綠色的十六進制值 為“#eefded,”幾乎接近于白色，這是為了突出前景深綠色的文字。這里的文字內(nèi)容都是虛構(gòu)的，其十六進制顏色值為“#O54dO0；布局的位置如圖1-2-1所示。U&i If ( Ol) 1ft曲自丫X石花初F生;I蠱石竝子苗芾石窯桿啟占協(xié)ikF 議?；╩t第爼牛件閔方一帰的人工鶯堤和內(nèi)

10、n-Rt nt 再，圧蓑 石rr.需山.胡古畀寫.M7i.h 密tiMi書爐孚m 曲 m才 *Gfili- , W .，Il霹墻算?*, n :總 1 盅子山.*w ,匕芋*我樂、-whc KRE t, iffl,申；. MA揮花冊甘niti瞪鼠tt音亍衛(wèi)塚主打證鼻*圖 1-2-34.在下面繪制深灰色矩形，十六進制顏色值為“#2a2a2a輸入文字“ ShiQiao Garden,字體為“Trajan Pro/這些均是作為中間的隔斷和裝飾，如圖1-2-4所示。Xf0總f f樸打尸 rZr f t弋石帯花輔tiLH盤石的干斗：誼門丹比B番以0也帆忑桿，di JUIIE4耨砂悴冊一昨人工*憫磚豐齡花

11、 妻.石IT.會山.07兔呻，d講基耐崎芥孑-也曲世JH富屮畑絢-trM- 罟子山 “事軼.1平冷煢爭 Aft* W, Flan.swt：f?. ST, E：ft 去 c -i忙 ” Ta j-tiff D ” a且*( *ni dta -環(huán)家平帥iftlt Tr 肚檯*鼻祐TH*1 HU寥口丄出. -科欄亍棵詈T叩I的 玦艮則序.泉誓2演一S4l*r4 * *K題”祖斗Pf 目 * iflSn7； bb. m rS5i13 *ntaW.AAfi7- *予時掃護“整辛匚尺鼻聲渲總jfix.転古両Ik*,td -If Jt Iflr Wffl.acvf ttuff a上ttz*. 彌了爲(wèi)昌欣耳期

12、暑酗 毎舊I監(jiān)H-局 *一手轉(zhuǎn)堆iLI1*. P虔人空菇IFtJ t 事f；年*英文優(yōu)年血4曙乜fftft AM*出* -1*7. WST*圖 1-2-1011. 在我們?yōu)檫@個矩形描個邊兒， 同樣是右鍵選擇 混合選項”，在描邊中設(shè)置大小為 “ 3”像素，位置同樣的內(nèi)部，顏色為較淺的灰色，十六進制顏色值為“#7a7a7d如圖1-2-11所示。圖 1-2-1112. 因為是內(nèi)部描邊，在描過邊后，您也許會發(fā)現(xiàn)較粗的描邊已過多占用了本來就不富裕的灰色長條”。為了增大一些空間，也為了這個描邊更具有裝飾性，這里需要把上邊緣的描邊 去掉。不過我們知道，Photoshop的描邊設(shè)置中沒有直接對單獨邊緣的設(shè)置方

13、法，因此我們需要有一個小彎路。選擇 灰色長條”層，執(zhí)行菜單 圖層 圖層樣式 創(chuàng)建圖層”，這樣可以使樣式從圖層中分離而成為一個單獨的普通圖層，如圖1-2-12所示。選擇濾鏡Q)分?jǐn)匾晥D迪宙口幫助新建00復(fù)制圖層(5)-.-刪除SBJS性 0).圖展祥式4智能謔鏡新建埴充圖層新建調(diào)整圖層更改圖層內(nèi)容汕團層內(nèi)容選頊(CO 一團層叢版01)矢魚慕版00創(chuàng)連聖貼吏版(U)A1VH： trl+G智能對象、視頻閨層3D圖層文字*柵格化新建基于圖層的切片圖層Q團層線媼(GCtrH；職消區(qū)層絹也(U)Shi ft+Ctrl+G混合選項3.投影on. 內(nèi)明影 外發(fā)光(0)-,. 內(nèi)發(fā)光血 斜面和浮雕). 光澤 頤

14、色疊加(V). 漸變豊加(G). 圖案疊加JB 描邊(K).拷貝圖展樣式粘貼團層樣式清除宙層樣式創(chuàng)建圖層(E0編放效果CF)圖 1-2-1213. 我們可以注意一下圖層面板中灰色長條”層和其樣式的變化?，F(xiàn)在選擇灰色長條”的內(nèi)描邊層，然后使用選區(qū)工具把上邊緣的描邊刪除，看不清可以放到足夠大， 如圖1-2-13所示。說到這里，可能很多讀者會覺得為了這一點兒差別大動干戈沒什么必要，其實不然， 網(wǎng)頁設(shè)計其實就種很瑣碎的工作，只有在細(xì)節(jié)中才能表現(xiàn)出精致的頁面，成功的頁面設(shè)計永遠(yuǎn)都是由無數(shù)個精雕細(xì)刻的小零件”組成的。至此我們首頁的圖樣就已經(jīng)制作完成了。圖 1-2-13舉一反三：嘗試按照自己的思路來設(shè)計內(nèi)容

15、部分的網(wǎng)頁布局。下一篇：Photoshop CS3實例教程：網(wǎng)頁的切圖及切片的屬性設(shè)置Photoshop CS3實例教程：網(wǎng)頁的切圖及切片的屬性設(shè)置（1）2008-08-04 09:24:45作者：薛欣 來源： 瀏覽次數(shù)：18373 評論上一篇：Photoshop CS3實例教程：版面元素的設(shè)計和方法第3講切割網(wǎng)頁圖片切圖是網(wǎng)頁設(shè)計中非常重要的一環(huán)，它可以很方便的為我們標(biāo)明哪些是圖片區(qū)域，哪些是文本區(qū)域。另外，合理的切圖還有利于加快網(wǎng)頁的下載速度、設(shè)計復(fù)雜造型的網(wǎng)頁以及對不同特點的圖片進行分格式壓縮等優(yōu)點。1. 使用工具箱中的 切片工具”在標(biāo)題部分的左右各切一刀， 使用 切片選擇工具”雙擊右

16、側(cè)部分，在彈出的面板中設(shè)置切片類型為無圖像。因為該部分是純色， 為了在網(wǎng)頁中顯示效果相同，設(shè)切片背景為黑色，這樣該部分輸出成網(wǎng)頁后將由透明占位符和黑色背景色代替， 如圖1-3-1所示。B圖 1-3-11-3-2所示。避免切片之間重疊，如圖2. 使用切片的固定大小， 設(shè)置寬度為“68”高度為“40”這次是切割的導(dǎo)航條按鈕，將 切片和被切對象對齊，切的時候要小心，祥式:4,:：閔呼頁娛樂 I 休閑飲伏T3ID正廉因定氏寬比8;石橋花1Z坐落在石竝子城北圖 1-3-23. 使用同樣的方法將其它導(dǎo)航條按鈕切割，注意最后一個管委會”按鈕是三個字，因此設(shè)置的切片寬度要大，如圖1-3-3所示。需要注意的是，

17、切割的時候要注意平衡，比如右側(cè)切割了，那么左側(cè)也要等高的切一刀，這樣輸出成網(wǎng)頁的時候不容易亂。圖 1-3-34. 切割方法同上，注意切片左上角的編號。下一行切片14和15共兩刀，再往下16、17、18共三刀，其中17為純色，因此設(shè)為無圖像，并用相應(yīng)的顏色標(biāo)識，如圖1-3-4所示。后面的方法基本相同，需要把在Dreamweaver中處理的純色背景部分設(shè)為無圖像，并以相應(yīng)的切片背景色填充。如果某個圖層的范圍正好是要切割的大小，可以直接使用基于圖層的切片”功能。圖 1-3-45. 執(zhí)行菜單 存儲為Web和設(shè)備所用格式”該命令用于將 PSD源文件輸出成網(wǎng)頁或是手機等設(shè)備所使用的格式。在對話框中進行簡單

18、的優(yōu)化設(shè)置，確定后設(shè)置輸出類型為“ HTML和圖像”并且要輸出所有的切片，如圖1-3-5所示。圖 1-3-5舉一反三：嘗試使用切圖工具對已有的版面進行切割，并注意切割的技巧。Photoshop CS3實例教程：制作導(dǎo)航菜單 2008-08-04 09:28:26 作者：薛欣 來源： 瀏覽次數(shù)：5393 評論上一篇：Photoshop CS3實例教程：網(wǎng)頁的切圖及切片的屬性設(shè)置第4講制作導(dǎo)航菜單導(dǎo)航菜單在首頁中占有非常重要的地位，它用于引領(lǐng)訪問者找到需要的頁面。所以一般來說，網(wǎng)頁設(shè)計師通常將大量的精力用在導(dǎo)航菜單的設(shè)計上，而這里我們只是舉個簡單的例子來說明。1. 用Dreamweaver打開網(wǎng)頁

19、，當(dāng)鼠標(biāo)單擊后，您可以看到導(dǎo)航欄已經(jīng)完成的切片，我 們現(xiàn)在要制作的是鼠標(biāo)移上時的翻轉(zhuǎn)效果，如圖1-4-1所示。圖 1-4-12. 找到您存儲切片圖像的目錄，一般是網(wǎng)頁當(dāng)前目錄或是名為“images的目錄。復(fù)制一個 娛樂”切片，并用Photoshop打開，如圖1-4-2所示。shi qiao_03H.a W * 屮 8%*%5*8%5*%5*%55*%5*石卡殊茶舍殺吿參指茶人話旺旳小茅屋，唐皮日林烘舍 劇日“陽崖忱自屋*幾 日嬉厲活，搠上汲紅泉， 焙前竝柴戯I乃翁研荼后圖 1-6-89.在編輯環(huán)境中選擇 Spry選項卡式面板，可以在下方的屬性面板中能夠添加更多的選 項卡標(biāo)簽，這里我們又添加了玫瑰” 月季” 美人蕉”、牡丹”等，如圖1-6-9所示。圖 1-6-910.在選項卡標(biāo)簽名稱的旁邊有一個小眼晴，單擊后可以編輯該標(biāo)簽所包含的內(nèi)容，比如這里我們添加了菊花和美人蕉的內(nèi)容。包括表格、圖片和文字都可以放在里面，當(dāng)然我們?nèi)孕枰褂肅SS對格式進行基本的排版，如圖1-6-10所示。典人薇牡理.Spry： Tibbeifairelil4E兩花因更在滓