最終效果:

1、Photoshop中建立一個(gè)新的文檔,文件大小為500×500,圖像模式為RGB,背景是黑色,新建一個(gè)圖層,用鋼筆工具繪制一個(gè)花瓣形狀,效果如下圖所示:

2、右單擊已畫好的路徑選擇’建立選區(qū)’,羽化半徑為:0,勾選:消除鋸齒,然后用白色填充選區(qū).效果圖如下所示:

3.按Ctrl+Alt+D將選區(qū)羽化,羽化半徑為:5(你可以根據(jù)自己所建立的圖形大小自行設(shè)定羽化半徑),按DEL鍵刪除選區(qū)中的白色,如下圖所示:

4、將剛建立的圖層的再復(fù)制4份,并對復(fù)制的圖層進(jìn)行旋轉(zhuǎn)變小,所下圖所示:

提示:當(dāng)你按Ctrl+T旋轉(zhuǎn)時(shí),可將旋轉(zhuǎn)中心點(diǎn)移到右下角的控制點(diǎn)上.這樣旋轉(zhuǎn)的物體都是圍著同一個(gè)中心點(diǎn)進(jìn)行旋轉(zhuǎn)。
5.先將第一個(gè)花瓣復(fù)制再兩層,再對其復(fù)制的兩個(gè)圖層分別進(jìn)行動(dòng)感模糊(濾鏡―模糊―動(dòng)感模糊),模糊角度范圍在-100—+80度之間,距離:50以內(nèi)均可.其他幾個(gè)花瓣也進(jìn)行同上的處理,需要注意的是:在動(dòng)感模時(shí),其模糊角度范圍在該層物體的傾斜角度的-10 — +10度之間,距離:50以內(nèi)均可.五個(gè)花瓣分別進(jìn)行完后其效果如下所示.

6.將背景層隱藏起來,按Ctrl+Shift+E,除了背景層以為的其他圖層都合拼在一起,在新建立一層,用漸變工具(漸變顏色選擇你喜歡的顏色)填充新圖層,并將該圖層的合成方式變成疊加.到這里蝴蝶就做完了,效果如下所示.

7.下面的圖像是對其變形,復(fù)制以及加入其他元素的蝴蝶…


注:在W3C制定的HTML 4 .0標(biāo)準(zhǔn)中,只有16種顏色可以用顏色名稱表示(aqua, black, blue, fuchsia, gray, green, lime, maroon , navy, olive, purple, red, silver, teal, white, and yellow),其它的顏色都要用16進(jìn)制RGB顏色值表示。
種不同的系統(tǒng)保留顏色。以下就是216種Web安全顏色:#這個(gè)符號。56種Web安全顏色呢?因?yàn)镸icrosoft和Mac操作系統(tǒng)有。
當(dāng)然 ,現(xiàn)在的瀏覽器支持更多的顏色名稱。不過為保險(xiǎn)起見,建議你還是采用16進(jìn)制RGB顏色值來表示顏色。并且在值前加上#這個(gè)符號。
為了方便大家找到合適的顏色 ,我們在這里列了一些顏色說明 ,以供大家參考 ,不妨作為一種速查工具 。
以前,很多電腦顯示器最多支持256色,因此出現(xiàn)了216種Web安全顏色 ,以保證網(wǎng)頁的顏色能夠正確顯示。
以下就是216種Web安全顏色:000000表示。以保證網(wǎng)頁的顏色能夠正確顯示。
那為什么不是256種Web安全顏色呢?因?yàn)镸icrosoft和Mac操作系統(tǒng)有40種不同的系統(tǒng)保留顏色。
green, lime, maroon, navy, olive!
以下就是216種Web安全顏色 :
| #000000 | #000033 | #000066 | #000099 | #0000cc | #0000ff |
| #003300 | #003333 | #003366 | #003399 | #0033cc | #0033ff |
| #006600 | #006633 | #006666 | #006699 | #0066cc | #0066ff |
| #009900 | #009933 | #009966 | #009999 | #0099cc | #0099ff |
| #00cc00 | #00cc33 | #00cc66 | #00cc99 | #00cccc | #00ccff |
| #00ff00 | #00ff33 | #00ff66 | #00ff99 | #00ffcc | #00ffff |
| #330000 | #330033 | #330066 | #330099 | #3300cc | #3300ff |
| #333300 | #333333 | #333366 | #333399 | #3333cc | #3333ff |
| #336600 | #336633 | #336666 | #336699 | #3366cc | #3366ff |
| #339900 | #339933 | #339966 | #339999 | #3399cc | #3399ff |
| #33cc00 | #33cc33 | #33cc66 | #33cc99 | #33cccc | #33ccff |
| #33ff00 | #33ff33 | #33ff66 | #33ff99 | #33ffcc | #33ffff |
| #660000 | #660033 | #660066 | #660099 | #6600cc | #6600ff |
| #663300 | #663333 | #663366 | #663399 | #6633cc | #6633ff |
| #666600 | #666633 | #666666 | #666699 | #6666cc | #6666ff |
| #669900 | #669933 | #669966 | #669999 | #6699cc | #6699ff |
| #66cc00 | #66cc33 | #66cc66 | #66cc99 | #66cccc | #66ccff |
| #66ff00 | #66ff33 | #66ff66 | #66ff99 | #66ffcc | #66ffff |
| #990000 | #990033 | #990066 | #990099 | #9900cc | #9900ff |
| #993300 | #993333 | #993366 | #993399 | #9933cc | #9933ff |
| #996600 | #996633 | #996666 | #996699 | #9966cc | #9966ff |
| #999900 | #999933 | #999966 | #999999 | #9999cc | #9999ff |
| #99cc00 | #99cc33 | #99cc66 | #99cc99 | #99cccc | #99ccff |
| #99ff00 | #99ff33 | #99ff66 | #99ff99 | #99ffcc | #99ffff |
| #cc0000 | #cc0033 | #cc0066 | #cc0099 | #cc00cc | #cc00ff |
| #cc3300 | #cc3333 | #cc3366 | #cc3399 | #cc33cc | #cc33ff |
| #cc6600 | #cc6633 | #cc6666 | #cc6699 | #cc66cc | #cc66ff |
| #cc9900 | #cc9933 | #cc9966 | #cc9999 | #cc99cc | #cc99ff |
| #cccc00 | #cccc33 | #cccc66 | #cccc99 | #cccccc | #ccccff |
| #ccff00 | #ccff33 | #ccff66 | #ccff99 | #ccffcc | #ccffff |
| #ff0000 | #ff0033 | #ff0066 | #ff0099 | #ff00cc | #ff00ff |
| #ff3300 | #ff3333 | #ff3366 | #ff3399 | #ff33cc | #ff33ff |
| #ff6600 | #ff6633 | #ff6666 | #ff6699 | #ff66cc | #ff66ff |
| #ff9900 | #ff9933 | #ff9966 | #ff9999 | #ff99cc | #ff99ff |
| #ffcc00 | #ffcc33 | #ffcc66 | #ffcc99 | #ffcccc | #ffccff |
| #ffff00 | #ffff33 | #ffff66 | #ffff99 | #ffffcc | #ffffff |
下面是微軟IE4.0以上都支持的顏色名稱:
| aliceblue (#f0f8ff) | antiquewhite (#faebd7) | aqua (#00ffff) | aquamarine (#7fffd4) |
| azure (#f0ffff) | beige (#f5f5dc) | bisque (#ffe4c4) | black (#000000) |
| blanchedalmond (#ffebcd) | blue (#0000ff) | blueviolet (#8a2be2) | brown (#a52a2a) |
| burlywood (#deb887) | cadetblue (#5f9ea0) | chartreuse (#7fff00) | chocolate (#d2691e) |
| coral (#ff7f50) | cornflowerblue (#6495ed) | cornsilk (#fff8dc ) | crimson (#dc143c) |
| cyan (#00ffff) | darkblue (#00008b) | darkcyan (#008b8b) | darkgoldenrod (#b8860b ) |
| darkgray (#a9a9a9) | darkgreen (#006400) | darkkhaki (#bdb76b) | darkmagenta (#8b008b) |
| darkolivegreen (#556b2f) | darkorange (#ff8c00) | darkorchid (#9932cc) | darkred (#8b0000) |
| darksalmon (#e9967a) | darkseagreen (#8fbc8b) | darkslateblue (#483d8b) | darkslategray (#2f4f4f ) |
| darkturquoise (#00ced1) | darkviolet (#9400d3) | deeppink (#ff1493) | deepskyblue (#00bfff) |
| dimgray (#696969) | dodgerblue (#1e90ff) | firebrick (#b22222 ) | floralwhite (#fffaf0) |
| forestgreen (#228b22) | fuchsia (#ff00ff) | gainsboro (#dcdcdc) | ghostwhite (#f8f8ff) |
| gold (#ffd700) | goldenrod (#daa520 ) | gray (#808080) | green (#008000) |
| greenyellow (#adff2f) | honeydew (#f0fff0) | hotpink (#ff69b4) | indianred (#cd5c5c) |
| indigo (#4b0082) | ivory (#fffff0 ) | khaki (#f0e68c) | lavender (#e6e6fa ) |
| lavenderblush (#fff0f5) | lawngreen (#7cfc00) | lemonchiffon (#fffacd ) | lightblue (#add8e6) |
| lightcoral (#f08080) | lightcyan (#e0ffff) | lightgoldenrodyellow (#fafad2) | lightgreen (#90ee90) |
| lightgrey (#d3d3d3) | lightpink (#ffb6c1) | lightsalmon (#ffa07a) | lightseagreen (#20b2aa) |
| lightskyblue (#87cefa) | lightslategray (#778899 ) | lightsteelblue (#b0c4de) | lightyellow (#ffffe0) |
| lime (#00ff00) | limegreen (#32cd32) | linen (#faf0e6) | magenta (#ff00ff) |
| maroon (#800000) | mediumaquamarine (#66cdaa) | mediumblue (#0000cd) | mediumorchid (#ba55d3) |
| mediumpurple (#9370db) | mediumseagreen (#3cb371) | mediumslateblue (#7b68ee) | mediumspringgreen (#00fa9a) |
| mediumturquoise (#48d1cc) | mediumvioletred (#c71585 ) | midnightblue (#191970) | mintcream (#f5fffa) |
| mistyrose (#ffe4e1) | moccasin (#ffe4b5) | navajowhite (#ffdead) | navy (#000080) |
| oldlace (#fdf5e6) | olive (#808000) | olivedrab (#6b8e23) | orange (#ffa500) |
| orangered (#ff4500) | orchid (#da70d6) | palegoldenrod (#eee8aa) | palegreen (#98fb98 ) |
| paleturquoise (#afeeee) | palevioletred (#db7093 ) | papayawhip (#ffefd5) | peachpuff (#ffdab9 ) |
| peru (#cd853f) | pink (#ffc0cb) | plum (#dda0dd) | powderblue (#b0e0e6) |
| purple (#800080) | red (#ff0000 ) | rosybrown (#bc8f8f) | royalblue (#4169e1) |
| saddlebrown (#8b4513) | salmon (#fa8072) | sandybrown (#f4a460) | seagreen (#2e8b57 ) |
| seashell (#fff5ee) | sienna (#a0522d) | silver (#c0c0c0) | skyblue (#87ceeb) |
| slateblue (#6a5acd) | slategray (#708090) | snow (#fffafa ) | springgreen (#00ff7f) |
| steelblue (#4682b4) | tan (#d2b48c ) | teal (#008080) | thistle (#d8bfd8) |
| tomato (#ff6347) | turquoise (#40e0d0) | violet (#ee82ee) | wheat (#f5deb3) |
| white (#ffffff) | whitesmoke (#f5f5f5) | yellow (#ffff00) | yellowgreen (#9acd32) |
HTML初學(xué)者會(huì)經(jīng)常遇到這樣一個(gè)問題,如何正確引用一個(gè)文件。比如,怎樣在一個(gè)HTML網(wǎng)頁中引用另外一個(gè)HTML網(wǎng)頁作為超鏈接(hyperlink)?怎樣在一個(gè)網(wǎng)頁中插入一張圖片?……
如果你在引用文件時(shí)(如加入超鏈接,或者插入圖片等),使用了錯(cuò)誤的文件路徑,就會(huì)導(dǎo)致引用失效(無法瀏覽鏈接文件,或無法顯示插入的圖片等)。
為了避免這些錯(cuò)誤,正確地引用文件,我們需要學(xué)習(xí)一下HTML路徑。
HTML有2種路徑的寫法:相對路徑和絕對路徑。
HTML相對路徑(Relative Path)
同一個(gè)目錄的文件引用
如果源文件和引用文件在同一個(gè)目錄里,直接寫引用文件名即可。
我們現(xiàn)在建一個(gè)源文件info.html,在info.html里要引用index.html文件作為超鏈接。
html路徑是:c:\Inetpub\wwwroot\sites\.
假設(shè)info.html路徑是:c:\Inetpub\wwwroot\sites\sj33\info.html
假設(shè)index.html路徑是:c:\Inetpub\wwwroot\sites\sj33\index.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫:
<a href = “index.html”>index.html</a>
如何表示上級目錄
HTML初學(xué)者會(huì)經(jīng)常遇到這樣一個(gè)問題,
../表示源文件所在目錄的上一級目錄,../../表示源文件所在目錄的上上級目錄,以此類推。
假設(shè)info.html路徑是:c:\Inetpub\wwwroot\sites\sj33\info.html
假設(shè)index.html路徑是:c:\Inetpub\wwwroot\sites\index.html
html路徑是:c:\Inetpub\wwwroot.
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫:
<a href = “../index.html”>index.html</a>
假設(shè)info.html路徑是:c:\Inetpub\wwwroot\sites\sj33\info.html
假設(shè)index.html路徑是:c:\Inetpub\wwwroot\index.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫:
<a href = “../../index.html”>index.html</a>
假設(shè)info.html路徑是:c:\Inetpub\wwwroot\sites\sj33\info.html
假設(shè)index.html路徑是:c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫:
<a href = “../wowstory/index.html”>index.html</a>
如何表示下級目錄
//www.mxio.cn/tutorials.
引用下級目錄的文件,直接寫下級目錄文件的路徑即可。
假設(shè)info.html路徑是:c:\Inetpub\wwwroot\sites\sj33\info.html
假設(shè)index.html路徑是:c:\Inetpub\wwwroot\sites\sj33\html\index.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫:
<a href = “html/index.html”>index.html</a>
假設(shè)info.html路徑是:c:\Inetpub\wwwroot\sites\sj33\info.html
假設(shè)index.html路徑是:c:\Inetpub\wwwroot\sites\sj33\html\tutorials\index.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫:
<a href = “html/tutorials/index.html”>index.html</a>
HTML絕對路徑(Absolute Path)
HTML絕對路徑(absolute path)指帶域名的文件的完整路徑。
假設(shè)你注冊了域名www.mxio.cn,并申請了虛擬主機(jī),你的虛擬主機(jī)提供商會(huì)給你一個(gè)目錄,比如www,這個(gè)www就是你網(wǎng)站的根目錄。
假設(shè)你在www根目錄下放了一個(gè)文件index.html,這個(gè)文件的絕對路徑就是: http://www.mxio.cn/index.html。
假設(shè)你在www根目錄下建了一個(gè)目錄叫jc,然后在該目錄下放了一個(gè)文件index.html,這個(gè)文件的絕對路徑就是http://www.mxio.cn/jc/index.html。
]]>