<form id="zdjf9"></form>

        <form id="zdjf9"><nobr id="zdjf9"></nobr></form>

        <form id="zdjf9"></form><noframes id="zdjf9">

         | 收藏本站 | 關于我們
        首頁 免費模板 收費模板 部分案例 分類模板 地方門戶 二次修改 服務定制 酷站欣賞 設計學院 特效代碼 字體下載
        當前位置:首頁 >> PhotoShop教程 >> 基礎知識
        CSS3 PK Photoshop:圓角和框投影(一)
        編輯發布:飛將軍   點擊量:7579

        本教程旨在教大家結合CSS3樣式創建一個漂亮,簡潔的導航欄。而在過去,我們只能借助圖片,java script和div層進行創作。

        注意:下面所有的示例都是在Mozilla Firefox,Safari和Chrome中進行測試。你也可以再IE等非上述瀏覽器中測試一下實際效果。

        準備工作

        在網頁設計的早期,外觀漂亮,設計精美的導航欄就是保持網站條理清晰,結構良好的強有力元素之一。在過去,一個好的設計所用到的投影(shadow),漸變色(gradient),圓角(rounded corners)和鼠標懸停效果(hover)等都需要一系列的技巧,但這會增加代碼和圖片數量。

        我們會在教程中深挖兩個非常重要的CSS3效果:圓角和框投影(Box Shadows),另外,本文還會使用線性漸變(線性漸變已在此文進行過介紹CSS3 vs Photoshop – Complex Backgrounds)。

        相關素材:http://webdesigntutsplus.s3.amazonaws.com/tuts/181_css3_vs_psd/Samples.zip

        演示地址:https://webdesigntutsplus.s3.amazonaws.com/tuts/181_css3_vs_psd/Samples/Navigation_non_bleed/index2.html

        第一步:圓角

        大家都聽說過圓角,我們就不具體講述圓角該如何設計了。在接下來的例子中,我們著重講述用Photoshop和CSS3實現圓角效果的差異。

        用任何圖形處理軟件都能非常簡單地創建一個圓角效果。但是在Photoshop中,我們會遇到以下問題:

        精度問題:即便你設置了圓角半徑,Photoshop內置的抗鋸齒引擎通常還是會為圖片增添多余的像素。過去,大多數人都必須得手動去掉這些影響圓角精度的像素,讓圖像的圓角處更加潔凈,例如下圖的紅色的圓角出的多余像素。

        編輯問題:這是創建圓角圖形遇到的最大問題。如果你在Photoshop中創建了一個半徑為10像素的圓角圖形,但出于需要,你得把半徑增加到20像素,除了重新拉伸圖形,或手動編輯圓角外,沒有其它辦法,時間浪費了,并且又不精確。重定大小是一個大問題,如果你想拉伸或放大圖形,你必須使用Photoshop中的錨點選擇工具,因為使用自由變換(Transform Controls)可能導致圓角圖形邊緣失真;ㄔ趫A角切片上時間還沒有包括在內。

        填充和邊框:對圓角框圖形進行漸變填充往往是一項浩大的工程。沒有覆蓋邊框,你還要準確地去掉相關圖片的多余像素。你至少要為每個框創建3副圖像,一個是頂部的圓角,另外是底部圓角,以及創建水平或垂直漸變,然后寫代碼。填充圖片遇到的另一問題是,減小容器的高度和寬度,得到漸變色得到不合要求的效果。(見下圖所示)

        混合角樣式:在Photoshop中,創建混合角的樣式得花一點時間,因為它并沒提供這樣的結合方式。你只能手動增加會減少半徑或結合圖形,然后裁剪每個角。

         

        上一篇沒有了下一篇PS電影海報添加電光效果
         服務流程 | 積分說明 | 使用說明 | 粵ICP備17004399號-2 電視直播 | QQ頭像獲取
        女人高潮抽搐潮喷视频hd