1、如何設計柵格欄式網站結構圖 網頁效果圖柵格化
我也嘗試解釋一下 柵格化設計 就是把網頁的寬度分成固定的相同寬度，然後列出各種組合的可能，以方便在進行頁面呈現的時候能夠快速的進行布局，通常分成12等分或者24等分
2、網頁設計的柵格化系統怎麼用
一個標準的柵格系統，包括以下部分：
將Flowline的總寬度標記為W, Column的寬度標記為c, Gutter寬度標記為g, Margin的寬度標記為m, Column的個數標記為N, 我們可以得到以下公式：
W = c * N + g * (N - 1) + 2 * m
3、為什麼網頁設計要使用柵格化
研究網頁柵格系統前，來看一組數據：
網站 首頁頁面寬度 px
Yahoo! 950
淘寶 950
MySpace 960
新浪 950
網易 960
Live Search 958
搜狐 950
優酷 960
AOL 960
上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結構較復雜，都可以認為是門戶型網站。
再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什麼固定規律，共同的特點是：功能專一，頁面結構相對簡單。
根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px.
這是一件很有趣的事情，為什麼要選擇這個寬度呢？這個寬度值究竟有什麼魔力？
神奇的960
設計師們對蘋果情有獨衷。在 1024 x 768 的解析度下，打開Firefox：
自然狀態下，Firefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網頁的實際大小為上圖中的紅色部分，高寬為 960 x 650.
有趣的960就這樣出現了。是的，可以認為一切就這么簡單。柵格系統最早出現在平面設計領域，設計師們愛用蘋果，蘋果下瀏覽器的默認寬度為960px, 於是960就這么「自然」地出現了。
數字背後的奧妙
上面的「自然」出現，細究自然是不讓人信服的。蘋果系統的設計者們在沒有喝醉酒的情況下選擇了960，而不是其它什麼1000之類的整數，自然另有奧妙。
科學界有很多問題都可以歸結到數學問題上，我們也從數學著手：
960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26種（26 = 7 * 2 * 2 - 2, 減去2是去掉1和960自身），我們標記為：
N(960) = N(2^6 * 3 * 5) = 26
根據上面的演算法，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30
根據直覺（嚴格證明也不難，不過還是留給數學系的學生去證明吧），我們得到一個有趣的結論：
要使得N(width)最大，width的取值有兩個系列：
A系列： …, 320, 720, 1440, …
B系列： …, 480, 960, 1920, …
N越大，可組合的寬度值就越多。對柵格系統來說，這意味著越靈活！
目前絕大多數顯示器都支持 1024 x 768 及其以上解析度。為了有效的利用屏幕寬度同時保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網頁柵格系統中的最佳寬度了。（也許不久的將來，將會流行1440）首先澄清一個應用場景問題。研究(1)中指出，對於結構復雜的網站，不少設計師們喜歡採用960固定寬度布局。但要注意的是，960並不是萬能鑰匙，大部分網站沒有也不需要柵格系統。Amazon採用的是寬度自適應布局，最大限度的呈現信息。Google更是簡簡單單，主題部分就一個列表。eBay的頁面非常簡潔，商品頁面寬度自適應，信息自然流暢，噪音少，購物很踏實。類似的站點還有很多，對於這些站點來說，寬度自適應布局更受青睞。
有個很有意思的網站是Yahoo!, 看起來是固定寬度布局，實際上在CSS中只要去掉一行，就能搖身一變自適應寬度了：
以下為引用的內容：
#page { width: 70em;}
為什麼Yahoo!最後選擇了定寬布局呢?這很可能是因為定寬布局比寬度自適應布局更容易控制。對於結構復雜的網站來說，可維護性和可擴展性非常重要。Yahoo!是以信息展示為主的門戶型網站，960的寬度對於信息的閱讀比較友善(Joe Clark寫了一篇屏幕閱讀時有關行長的有趣文章)。種種因素使得Yahoo!最後採用了定寬布局(Tommy Olsson總結了每種布局設計的優缺點)。
這里將只關註定寬布局，適用的場景是搭建復雜的門戶型網站。對於寬度自適應布局和相應的柵格系統，暫不討論(根據實現的技術手段不同，寬度自適應布局又分為流體布局和彈性布局。我個人蠻喜歡彈性布局，以後有時間再研究)。
好了，已經將范圍縮小到定寬布局的網頁柵格系統，那我們開始吧。
並不遙遠的750
還記得800×600的顯示器不?雖然才時隔幾年，感覺卻好像是上個世紀的事了。Mark Boulton做了最早的探索：
將750分割成均等的6份，這就形成了柵格系統，稍加組合劃分就形成了兩欄布局和三欄布局。Mark Boulton還研究了Gutter(垂直欄之間的間隙)對柵格的影響，有興趣的可以閱讀原文，或者跟著我往下看吧，下面將詳細闡述。
幾個術語和一個公式
一個標準的柵格系統，包括以下部分：
將Flowline的總寬度標記為W, Column的寬度標記為c, Gutter寬度標記為g, Margin的寬度標記為m, Column的個數標記為N, 我們可以得到以下公式：
W = c * N + g * (N - 1) + 2 * m
一般來說，Gutter的寬度是Margin的兩倍，上面的公式可以簡化為：
W = c * N + g * (N - 1) + g = (c + g) * N
將c+g標記為C, 公式變得非常簡單：
W = C * N
上面的公式就是柵格系統的基礎，很簡單吧。
950的來歷
具體應用時，Margin其實是一個空白邊，從視覺上看並不屬於總寬度。不少柵格設計里習慣性地設定Gutter為10px, 這樣Margin就是5px. 當W為960，分割成6列時，柵格如下圖：
上圖的處理是左右Margin各為5px. 也可以將Margin集中放在一邊，比如右邊：
無論Margin放在何處(這隻影響技術實現，不影響設計)，我們真正要關注的是去除Margin之後的部分：
這就是我們要真正關注的950!將W的含義變為去除Margin的總寬度，公式變化為：
W = N * C - g
將上面的公式實例化一下：
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10
這就形成了960蛋糕的三種常見切法。
12 x 80
16 x 60
24 x 40
上面三種切法，N越大，靈活度越高。可以根據網頁的實際復雜度來選用對應的切法。在960 Grid System首頁中，展示了12 x 80的應用：
我們來看下 研究(1)中開頭列舉的網站的柵格應用情況。
Yahoo!是很標準的 24 x 40 柵格：
淘寶網目前只有商城上部分使用了柵格系統(大的兩欄布局遵守了 24 x 40 的柵格化，主體部分使用的另一套740的柵格劃分)：
網易很不錯，採用的是 16 x 60 的柵格系統：
研究(1)中的其它站點都沒有真正嚴格地採用柵格系統。
柵格系統的優勢
上面的「發現」是讓人有點沮喪的。目前嚴格採用柵格系統的站點非常少，為什麼我們還要努力的讓網頁柵格化呢?
柵格系統具有以下優勢：
能大大提高網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的。這對於大型網站的開發和維護來說，能節約不少成本。
基於柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。
對於設計師們來說，靈活地運用柵格系統，能做出很多優秀和獨特的設計。(詳見《超越CSS》一書)
對於大型網站來說，我相信柵格化將是一種潮流和趨勢。
下面討論柵格系統中的黃金分割。
黃金分割
黃金分割可以歸結為數學問題：對於長度為1的線段，將其分成兩部分 x 和 1 - x, 使得：
x / 1 = (1 - x) / x
化為簡單的二次方程：
x^2 + x - 1 = 0
正數解為：
x = (sqrt(5) - 1) / 2 ~= 0.618
這就是黃金分割。這個比例不僅僅出現在諸如繪畫、雕塑、音樂、建築等藝術領域，在管理、工程設計等方面也有著不可忽視的作用。 (這是個自然界的魔數，類似的還有真空光速、普朗克常數、精細結構等等，感興趣的Google吧)
在平面設計領域，黃金分割點被廣泛採用。比如下面這種圖：
數一數上面有多少黃金分割?
對於960柵格，實際寬度是950. 兩欄布局時，黃金分割為：
對於 24 x 40 的情景，最接近黃金分割的兩欄布局是 350 : 590, 欄數比例為 9 : 15. 但實際使用時，因為窄欄經常用來做導航或放輔助信息，並不需要350px這么寬。因此實際情況下經常被採用的布局是：
上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應用。
高度方向上的柵格
還記得研究(1)中那張紅紅的很刺眼的圖嗎?注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583
N(560)比較大，同時可以讓高寬比接近黃金分割。針對560, 我們採用 14 x 40 柵格：
這樣，我們就在寬度和高度兩個方向上都實現了柵格化。
淘寶的首頁目前尚未嚴格遵守柵格系統，如果重構的話，寬度方向可以考慮採用下面的柵格布局（只考慮頁面主體部分，忽略高度的比例）：
（圖1）
紛亂的高度世界我們來看下圖1左上角。左上角部分目前的寬度為256px, 重構的話可以將寬度縮小到230px以符合柵格（不可避免的要調整內容，比如人氣寶貝中將只能放下3張圖片）。來仔細看下高度方向：
（圖2）
高度方向的布局是：90 : 117 : 100, 第一個間隔是8, 總高度為325. 很明顯，高度方向沒有任何柵格化的跡象。實際上，即便是嚴格遵守柵格系統的Yahoo!首頁，高度方向上也沒有嚴格柵格化。
這究竟是為何？
一切皆有可能我們縮小關注點：
（圖3）
上圖中，圖像的大小是70 x 70, 剛好是24列960柵格系統兩列的寬度。對於右邊的文字，採取了如下樣式：font-size: 12px;line-height: 150%; /* 12 x 150% = 18px */
中文字體是宋體，line-height的計算值是18px. 注意圖3中文字部分可視區域的高度為65, 上下各有4px和1px的間隙。為什麼會產生這么奇怪的間隙呢？我們來看下圖：
（圖4）
從上圖中我們可以得知，12px的宋體中文字，實際高度只有11px. line-height減去11多出來的高度，則「均勻」分布在上下間隙中（如果多出來的高度為偶數，則上下均分；為奇數時，上面比下面多1px）。這樣，對於70px的高度來說，要布局4行文字時，假設行高多出來的上半部分為x, 下半部分為y, 在最理想的情況下，應該滿足以下公式：11 * 4 + 4 * x + 3 * y = 70x = y 或 x = y + 1
不難推出，x最理想的整數解為4. 從而line-height為 4 + 11 + 3 = 18. 因此：
對於24列960柵格系統來說，如果要在高度方向上實現柵格，font-size為12px時，line-height的最佳取值是18px(150%).
追求完美點話，還可以將文字部分margin-top: -1px, 使得65上下的間隙為3和2.
至此，我們可以初步判斷：
高度方向上是有可能嚴格柵格化的。一切皆有可能！
然而，現實總那麼殘酷
（圖5）
上圖中的標題高度為22, 這在24列960柵格系統中是無法對齊的。而且總高度為100, 在24列960柵格系統中也不存在（110才可以）。或許高度方向上我們可以細化行寬為20, 但依舊沒法解決上面兩個問題（22是明顯不能解決的，而對於100px的高度，也無法通過細化行寬來解決。可選高度永遠是10的奇數倍，如果進一步細化，小於10後，會變得非常繁瑣，沒什麼實際應用價值）寬度世界裡會好些嗎
（圖6）
上面是Yahoo!首頁上的兩個小模塊，我都不想去標注模塊裡面的布局寬度了（因為一點都不符合24列960柵格系統）。寬度世界裡，和高度世界一樣充滿希望但現實卻殘酷無比。銀彈是不存在的柵格系統是美好的。但如果我們一味地追求將所有設計都柵格化（必須承認我曾有這個幻想），則立刻會陷入地獄一般的黑暗中。這篇文章中的艱難嘗試（我分析了20多個小模塊），讓我突然醒悟到一個粒度問題：任何設計都有適用范圍，超出最佳適用范圍，強行使用只會帶來無盡的煩惱。對於柵格系統（這里指所有柵格系統，包括多種柵格系統混合使用的情景）來說，我覺得以下場景非常適合：
頁面的總體寬度布局，比如兩欄、三欄等布局
一些固定區塊的尺寸，比如廣告圖片的尺寸
區塊之間的間距，可以參考柵格系統的槽寬（Gutter）
一些可以柵格化的小區域，比如圖3中的例子，暗合柵格往往能簡化布局上的考慮
除了上面這些應用場景，強行使用柵格系統，往往會束手束腳，適得其反。這篇文章的目的，就是嘗試用最啰嗦最費神貌似很科學實際很無聊的分析來指出柵格系統應用時的粒度問題。在粒度問題上達成一致後，下一篇中我們將討論柵格系統的技術實現，最後一篇則討論柵格系統的壓軸好戲：模塊化開發。
前三篇文章中，明確了柵格系統的設計細節和適用范圍。這一篇將集中討論960柵格系統的技術實現。
Blueprint的實現Blueprint是一個完整的CSS框架，柵格系統是它的一部分功能。我們來看demo頁面：
以上三欄布局的代碼為：<style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none }</style><div class="container"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /></div>
上面是基本功能，Blueprint還支持append-n, prepend-m, border等「高級」功能，這些就不細說了
4、響應式網頁設計中的柵格化設計怎麼設計
現在那還需要自己設計的！網上那麼多的響應式網站：pageadmin cms、discha直接下載就能做網站、方便、快捷！而且還是免費的。
5、PS怎麼使用
Adobe Photosop是一個處理圖片的軟體.廣泛應用於婚紗影樓,廣告公司等地方.它可以很輕松的消除圖像中的痕跡,比如人物臉上的傷疤,皺紋,痣等.
它處理的圖片是由像素組成的"也就是一個圖片放大很多倍的時候我們所看到的小方塊"它的圖片最大放大到1600倍.里邊的小方塊也就是像素.越高,圖片就會越清楚,反之模糊.一般來說列印的解析度是300每像素英寸.也就是每厘米118.11個像素,像素也叫做點,處理的圖也叫做點陣圖.
快捷鍵:
1.快速打開文件
雙擊Photoshop的背景空白處(默認為灰色顯示區域)即可打開選擇文件的瀏覽窗口
第二節:
1.針對所選擇的區域進行處理。如果沒有選定區域，則對整個圖像做處理.
2.套索」工具中Shift和Alt鍵的使用方法：
增加選取范圍按「Shift」鍵。
減少選取范圍按「Alt」鍵。
兩個選取框疊加的區域按「Shift+Alt」鍵。
魔杖」工具中Shift和Alt鍵的使用方法：
增加選取范圍按「Shift」鍵。
減少選取范圍按「Alt」鍵。
兩個選取框疊加的區域按「Shift+Alt」鍵。
選框-M 移動-V 套索-L 魔棒-W
噴槍-J 畫筆-B 鉛筆-N 橡皮圖章-S
歷史記錄畫筆-Y 橡皮擦-E 模糊-R 減淡-O
鋼筆-P 文字-T 度量-U 漸變-G
油漆桶-K 吸管-I 抓手-H 縮放-Z
默認前景和背景色-D 切換前景和背景色-X
編輯模式切換-Q 顯示模式切換-F
3.如果我們按住Alt鍵後再單擊顯示的工具圖標，或者按住Shift鍵並重復按字母快捷鍵則可以循環選擇隱藏的工具。
4. 獲得精確游標
按Caps Lock鍵可以使畫筆和磁性工具的游標顯示為精確十字線，再按一次可恢復原狀。
5. 顯示/隱藏控制板
按Tab鍵可切換顯示或隱藏所有的控制板(包括工具箱)，如果按Shift+Tab則工具箱不受影響，只顯示或隱藏其他的控制板。
6. 快速恢復默認值
點按選項欄上的工具圖標，然後從上下文菜單中選取「復位工具」或者「復位所有工具」
第三節:
7.自由控制大小
縮放工具的快捷鍵為「Z」，此外「Ctrl＋空格鍵」為放大工具，「Alt＋空格鍵」為縮小工具，但是要配合滑鼠點擊才可以縮放；相同按Ctrl+「+」鍵以及「－」鍵分別也可為放大和縮小圖像；Ctrl+Alt+「+」和Ctrl+Alt+「－」 可以自動調整窗口以滿屏縮放顯示
使用抓手工具時，按住空格鍵後可轉換成手形工具，即可移動視窗內圖像的可見范圍。在手形工具上雙擊滑鼠可以使圖像以最適合的窗口大小顯示，在縮放工具上雙擊滑鼠可使圖像以1:1的比例顯示。
8.鍵盤上的D鍵、X鍵可迅速切換前景色和背景色。
9.用任一繪圖工具畫出直線筆觸：先在起點位置單擊滑鼠，然後按住Shift鍵，再將游標移到終點單擊滑鼠即可,使用繪畫工具如(如畫筆，向筆等)，按住Shift鍵單擊滑鼠，可將兩次單擊點以直線連接.
10.在圖層、通道、路徑調板上，按Ctrl鍵並單擊一圖層、通道或路徑會將其作為選區載入；按Ctrl+Shift鍵並單擊，則添加到當前選區；按Ctrl+Shift+Alt鍵並單擊，則與當前選區交叉。
復制技巧
1.按Alt鍵拖動選區將會移動選區的拷貝,
2.按住Ctrl+Alt鍵拖動滑鼠可以復制當前層或選區內容。
3.如果你最近拷貝了一張圖片存在剪貼板里，Photoshop在新建文件(Ctrl+N)的時候會以剪貼板中圖片的尺寸作為新建圖的默認大小。要略過這個特性而使用上一次的設置，在打開的時候按住Alt鍵(Ctrl+Alt+N)。
4.當我們要復制文件中的選擇對象時，要使用編輯菜單中的復制命令。復制一次你也許覺不出麻煩，但要多次復制，一次一次的點擊就相當不便了。這時你可以先用選擇工具選定對象，而後點擊移動工具，再按住「Alt」鍵不放。當游標變成一黑一白重疊在一起的兩個箭頭時，拖動滑鼠到所需位置即可。若要多次復制，只要重復的放鬆滑鼠就行了。
5.可以用選框工具或套索工具，把選區從一個文檔拖到另一個上.
6.把選擇區域或層從一個文檔拖向另一個時，按住Shift鍵可以使其在目的文檔上居中。
7.單擊工具條中的畫筆類工具，在隨後顯示的屬性條中單擊畫筆標簽右邊的小三角，在彈出的菜單中再點擊小箭頭選擇「載入畫筆…」。
8.快捷鍵Ctrl+Z(可以自由地在歷史記錄和當前狀態中切換)，還增加了Shift+Ctrl+Z(用以按照操作次序不斷的逐步恢復操作)和Alt+Ctrl+Z(使用戶可以按照操作次序不斷的逐步取消操作)兩個快捷鍵。按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前(或者可以使用歷史面板中的菜單來使用這些命令)。
9.打開Curve(曲線)對話框時，按Alt鍵後單擊曲線框，可使格線更精細，再單擊滑鼠可恢復原狀。
10.移動圖層和選區時，按住Shift鍵可做水平、垂直或45度角的移動；按鍵盤上的方向鍵可做每次1個像
素的移動；按住Shift鍵後再按鍵盤上的方向鍵可做每次10個像素的移動。
圖像模式及其轉換.
在Adobe Photosop里,每一種顏色都有不同的用途,我們可以在處理圖像時應根據自己的需要選擇不同的顏色模式.
1.點陣圖.
它使用兩種顏色也就是黑跟白來表示圖像的.特點是存儲空間很少,但無法表現出圖像豐富的色彩和色調.因此適用於一些黑白對比強烈的圖像.要將圖像轉為點陣圖之前,必須要先轉為灰度.
2.灰度.
它是由256級的灰度來表示圖像的,圖像的每一個像素能夠用0-255之間的亮度值表現,因而色調表現力強,圖像也比較細膩,使用黑白相機得到的就是灰度的圖像.它也可以由彩色照片轉換得到,原圖像的彩色信息刪除,而只留下像素的亮度.圖像轉為灰度時顏色信息會全部丟失.
3.雙色調.
通過用2-4種自定的油墨創建雙色調,三色調,四色調的灰度圖像.彩色圖像專換為雙色調前,必須首先轉換成為灰度圖像.
4.RGB
它是由紅,綠,藍也就是光的三原色組成的,這三種顏色重疊處會產生青色,洋紅,黃色和白色,由於RGB合成可以產生白色,因此我們稱它為加色模式,一般用於光照,視頻和顯示器.三種顏色的值為255時為白色的,反之為黑色的.它三種顏色可以在屏幕上重新生成多達1670萬種顏色.
5.索引顏色
這種模式最多隻能使用256種顏色,而且還可以將顏色數量減到更少以減小文件.通常輸出到Web頁和多媒體的圖像文件.當彩色圖像變為這種模式時將構建一個顏色表用於存放顏色.在索引顏色里只能進行有限的編輯,若要進一步的編輯,需臨時變為RGB.
6.GMYK
理論上這個模式為青色,洋紅,黃色合成的,他們合成後會生成黑色,因此這種顏色稱為減色模式.它稱為四色印刷.在准備要用印刷色列印圖像的時候,應用CMYK模式,將RGB轉為CMYK時會產生分色,最好是在創建圖像開始就變成為CMYK.
7.Lab
它是目前包括顏色最多的一種模式,是Photosop在不同模式之間轉換的中間模式.它是由亮度和兩個色度分量組成的.L表示光亮,范0-100,
a表示從綠色到紅色的色變化.b表示從藍色到黃色的變化.兩者都是-120-120.如果中想改變圖像的亮度而不影響其他顏色值,可以將圖像轉為Lab,然後在L通道中進行操作.Lab最大的優點是顏色與設備無關,無論使用什麼設備創建圖像,都可以與產生的顏色保持一樣.
調整圖像
1.色階
在色階里可以調整圖像的暗調,中間調和高光.以校正圖像的色調范圍和色彩平衡.常用於修改曝光不足和過度的照片.
2.自動色階
可以將圖像中最暗的像素變黑,最亮的像素變白,並在黑白之間擴展中間色調.一般使用它來調整缺乏明顯對比度的圖像.但是它有可能影響色彩平衡.
3.自動對比度
可以自動調整圖像中的顏色的總體對比度.它不會單獨調某個通道,所以不會引入或消除色偏,可以使高光顯得更亮,暗調顯得更暗.
4.自動顏色.
它以在圖像查找得到的圖像的高光和暗調的平均色來得到圖像的對比度.並且自動設置圖像中的中性灰色像素來調整圖像的色彩平衡.可以用於校正色.
5.曲線
與色階相似,它也是調整圖像的整個色調范圍,不同的是,曲線是用0-255色階范圍內的任意點來調整圖片的,因而,利用曲線工具調整色調更精確,更細致.
6.色彩平衡
可以簡單快捷的調整圖像的陰影區,中間色調和高光區的色彩平衡.不過它只是能做精略的調整,若要精確調整圖像中各色彩的成分,還是需要執行曲線和色階.
7.亮度對比度.
可以調整圖像的亮度和對比度.
8.色相飽和度
可以調整整個圖像或單個顏色成色的色相,飽和度和亮度.色相就是顏色,每一種顏色都叫做一種色相,比如紅色,綠色都是一種色相,飽和度就是顏色的純度.亮度就是明暗了.
9.去色.
執行色命令,將彩色照片轉換為相同顏色模式下的灰度模式,去色命令只對當前圖層或圖像中選區進行轉化,不改變圖像的模式.
10.替換顏色
可以在圖像中選取特定顏色的圖像范圍,然後替換該顏色,相當於先使用色彩范圍選定某個區域,然後使用色相飽和度命令調整該區域.
11.可選顏色
只對當前選擇的顏色做改變,其他的不改.
12.通道混合器
通過輸出的通道顏色來給圖像做顏色調整.
13.漸變映射
將相等的圖像灰度范圍映射到指定的漸變填充色,就像是漸變完全融合到圖像中一樣.而不是單純的疊加上去.
14.反相
反轉圖像中的顏色,此命令可以將一個正片黑白圖像變成一個負片,也就是底片的效果.反相圖像時通道中的每一個像素的亮度值轉換為256級的顏色相反的值.
15.色調均化
將重新分布圖像中各像素的亮度值,以便它們更均勻地呈現所有范圍的亮度級別.它會查找圖像中最亮和最暗值,並將最暗值變為黑色,最亮值為白色.
16.閾值
將灰度或彩色圖像轉換為高對比度的黑白圖像,可以指定黑白的多少.
17.色調分離
可以指定圖像中數據來出現色調分離的大小.
18.變化.
可以很直觀的調整圖像或選區的色彩平衡,對比度和飽和度.這個命令對於色調平均且不需要精確調整的圖像是非常適用的.
文字的效果
注意:文字的效果對於我們所選的文字的字體是有很大的關系的.比如我們以後學的邊框字就應該選一些比較粗的字體.如果細的話選區收縮會沒有了.太小了.所以要多看一些字體.
1.投影字
輸入文字,顏色無所謂,我們以後可以再改,提交,柵格化,這兩個命令以後就省略了,因為這是最常用的以後應該很熟練.我們可以按住CTRL鍵用滑鼠單擊當前的文字層將它載入選區,也可以用選擇菜單中的命令,但最好是用快捷鍵.載入選區後,我們可以隨便給它加顏色和漸變 ,然後再做圖層樣式中的投影.
2.泥字
這個不用文字工具,所以也不用柵格化了,直接用畫筆工具在背景上寫上我們想要的字,然後做濾鏡中風格化中的浮雕效果,調整參數就可以了,注意我們不可能做出一模一樣的效果來,每做一次一般來說都有不同的效果,所以要想要做出好的效果來就要多調整.
3.圖案字
先打開一幅圖片,這個字我們用到的是蒙板文字工具,它不會產生文字圖層,出現的是選區,當然如果選區太小的話我們可以用變換選區命令來變大.然後進行復制,粘貼.會出現一個圖層,將當前圖層做一些圖層效果就可以了,如浮雕,投影都可以,我們做這個效果主要是做出文字從圖像中凸出的效果.如果將圖層移動的話就不對了.
4.風車字
這個字做出的效果是像風車轉動的效果.輸入文字,我們按住SHIFT鍵畫出一個正圓,要保圍整個文字.做扭曲中的極坐標,然後復制圖層,將副本做模糊中的徑向模糊,數量不用太大.再點擊原圖層將他的圖層透明度小一點就可以了.
5.邊框字
輸入文字,載入選區做漸變,不要取消選區做選擇修改中的收縮選區,數量不用太大,2就可以,然後再刪除.然後再次載入選區,按住CTRL+ALT再加上游標輕移就可以了.做出立體效果.
6.捲毛字
輸入文字,我們只需要按住SHITF鍵畫一正圓,執行扭曲中的旋轉扭曲就可以了,然後再用選區工具移動到合適的地方再次進行濾鏡命令,也可以用CTRL+F也就是重復濾鏡.
7.碎石字
輸入黑色文字,將前景色設為白色背景為黑色,進行紋理中的染色玻璃,可以調整方格的大小,然後用魔棒工具選擇白色,再點擊選擇中的選取相似然後刪除,取消選區做圖層樣式中的斜面和浮雕就可以了,但是做完後還可以用套索工具選擇碎的小塊進行刪除就可以了.
8.金屬字
輸入黑色文字,做模糊中的高斯模糊,再做風格化中的浮雕,再重復一次.最後做渲染中的光照效果,將通道選定為紅色,為的是有立體效果,顏色改為黃色.
9.爆炸字
輸入紅色文字,做紋理中的龜裂縫,亮度最小,深度最大,用魔棒工具選擇黑色進行選取相似.然後刪除.畫一個橢圓包圍文字,給它做球面化.復制當前層,給副本做徑向模糊,選擇縮放,大小大一點.選擇沒有做模糊的那個層將當它的字一個一個的移動到前一圖層的上面.然後再做一點外發光就可以了.
10.燃燒字
新建的是一個灰度模式.將背景色填充為黑色,字是白色的,先載入選區進行存儲,用編輯中的順時針轉90度給他做風格化中的風,可以重復做向次,然後再逆時針轉回來.做扭曲中的波紋.將模式變成索引,將顏色表中的灰度改為黑體.轉為RGB模式後,將一開始存的選區載入回來,用選區工具移動到合適的位置上進行填充黑色.
11.鳳尾字
輸入文字,用選區工具一個一個的做漸變,復制當前層,用塗抹工具,調畫筆的大小和壓力進行塗抹.做完後做外發光.
12.根雕字
黑色的背景,字的顏色選深褐色.做紋理中的龜裂縫,扭曲中的波紋,做斜面和浮雕,加一點外發光,顏色是白色的,然後選小點的畫筆壓力值大點,進行塗抹,就可以了.
13.磚塊字
顏色選擇暗紅色進行填充背景,做紋理中的紋理化,選擇磚形,光照方向_左上,大小大一點,深度大一點,輸入蒙板文字,復制粘貼,選擇背景,將它變成白色.
還有另一種做法,將字的顏色變成暗紅色,做紋理中的紋理化,然後按住Ctrl鍵點圖層載入選區,輕移,做出立體效果,然後描一個白邊.
14.電光字
設背景色為黑色字為白色,做濾鏡中的風格化中的風,將四面都吹風,然後做扭曲中的波紋,將模式轉為灰度,做風格化中的曝光過度,將模式轉為索引,將顏色表的中灰度變為黑體,把模式轉為RGB.
15.牽手字
輸入數字(0 8 9)刪格化,然後載入選區,做漸變.用選擇工具選擇數字Ctrl+x,Ctrl+v將數字分開層,然後選擇其中的一個字的一部分,進行刪除,使它們看起來有連在一起的感覺,然後加上連接符進行合並.做圖層樣式的斜面和浮雕.
16.雙色字
輸入黑色文字,放在中間,從標尺拖出輔助線,也在正中間,在背景上新建一層,用矩形畫出選區,位置在左上角,再畫出右下角,進行填充黑色,選擇文字層做調整中的反相.
蒙板:分為文字蒙板,圖層蒙板.快速蒙板工具.它們共同的特點是都是為了產生和修改選區的.
文字蒙板:它是單純的利用文字的形狀來產生選區的,點擊文字工具後圖像就會全部變成紅色.如果現在提交的話,將沒有選區產生,因為在蒙板文字裡面紅色就代表被保護的區域,選區就應該是紅色以外的.蒙板文字的最終目標是產生選區不會產生文字圖層.
圖層蒙板:它是用來改變圖層的隱藏和顯視的.它是圖層合成最常用的手段,使用它的好處是可以在不改變圖層中圖像的像素的情況下,實現多種混合圖像的方案,並可權從中進行反復調整,蒙板里白色區域是顯示當前圖像的,黑色區域隱藏圖像.而灰度則是對應的圖像中半透明的效果.
快速蒙版:進入快速蒙板就是編輯和產生選區的,紅色代表被保護的地方,選區是紅色以外的地方.進入蒙板以後我們可以給選區做任何的濾鏡效果.雙擊進入快速蒙板銨鈕可以更改它的選項.
通道:它的作用是保存和修改選區和顏色的.
在通道里沒有顏色,每一種顏色都有一種灰來表示,當然每一種灰也是一種透明度,純白的是選區.純黑不是.在通道里正常的文字也只能是產生選區的.在通道里,我們可以把選區當成一個圖層來編輯可以給他做任何的濾鏡效果.
路徑:路徑最大的功能就是能很好產生選區,因為路徑可以變成選區,反之亦然.而路徑又可以很方便的編輯.用路徑產生的選區表面很平滑.
利用通道蒙版和路徑做出來的效果:
圓錐體
新建圖層,畫一個矩形做漸變,自由變換透視把上面變小.存儲選區,再畫一個橢圓再存儲.載入第一個選區後再載入第二個選擇,從選區中減去.用矩形選擇從選區中減去把上面減掉後,刪除.再載入第二個選區後用調整中的色階把顏色變暗.使它有立體的效果.
凹陷字:新建通道,輸入字母,做模糊中的高斯模糊,然後做風格化中的查找邊緣,回到背景,做渲染中的光照效果,選擇通道1
撕紙字:新建通道,輸入文字,復制當前通道,給復本做其它中的最大值,做畫筆中的描邊中的噴濺,在原通道重復濾鏡,點擊背景做紋理中的紋理化,載入第一個通道,做圖層中的通過剪切的圖層,再載入第二個通道,點擊背景刪除,給圖層一做一個投影的效果.
雕刻字:
新建通道,輸入文字,取消選區做模糊中的高期模糊,做曲線中的調整曲線,全選通道,復制到背景上粘貼.保存,做扭曲中的置換.再用色彩平衡來調整字的顏色.
用路徑做出心形
新建圖層,用鋼筆工具畫出心的大體形狀,然後調整心的形狀,將通過路徑面板將路徑變成選區,進行填充紅色,自由變化,成比例縮小,定義畫筆,點出工作路徑,選擇剛才定義的畫筆,調整間距,描邊路徑,然後,給當前層做一些圖層效果.
圖片效果:
1.暴風雪
找開一幅適合做暴風雪的圖片,復制背景,然後做象素中的點狀化,數值為八,圖象調整中的閾值,將黑白的比例平衡,做模糊中的動感模糊,將圖層模式轉化為濾色[屏幕].
2.立方體
新建文件,拖入三幅圖片可以適當的將它們變小,再在背景上新建一層, 然後做濾鏡的中3D效果,畫出一個立方體,然後用軌跡球轉出三個實面,將三幅圖片用自由變換中的扭曲貼到三個面上,然後合並圖層.
3.木質畫框
打開一個圖片,新建一個圖層,全選,選擇里的變換選區,成比例縮小,反選填充桔黃色,雜色中填加雜色,做模糊中的動感模糊,再做圖層樣式中的浮雕效果,加上等高線.
4.高爾夫球
新建圖層,做白到黑的徑向漸變從左上角到右下角,然後做濾鏡中的扭曲中的玻璃中的小鏡頭,畫一個正圓,做扭曲中的球面化,反選刪除,可以把它變的小點,點擊背景新建一圖層,畫橢圓填充黑色,模糊中的高期模糊,調不透明度,點擊球的圖層,給它做渲染中的鏡頭光暈,合並圖層.
5.郵票
打開一幅圖片,拖到一個新建的文件裡面,產生一個圖層,載入選區,新建一個圖層,填充白色,倒換圖層,自由變化往外拉,將選區變為路徑,選擇合適的畫筆調整間距,描邊路徑,用魔棒工具選擇黑色,刪除,給當前層做投影.打上文字.
6.禁止吸煙
新建圖層畫正圓,填充紅色,選擇自由變化選區,變小,刪除.新建圖層,畫矩形,做過濾嘴,做橙黃橙的漸變,添加雜色,數值小一些,變換選區,將選區拉長,做灰白灰的漸變,取消選區自由變換旋轉,然後,移到適當的位置,再用套索工具畫出煙燃燒的地方,填充黑色,填加雜色,數值大一點,然後再用紅色畫筆點一些火星,用直線工具,調整大小,將前景色變為紅色,選擇第三個單純的填充,寫上文字,用黑色的畫筆點上煙霧.
7.手鐲
新建圖層,默認前景色和背景色,做渲染中的雲彩,做液化中的塗抹,畫正圓,刪除,變化選區,變大刪除,調整曲線加顏色,做圖層樣式中的浮雕效果,浮雕的暗調調到最小,等高線選擇第四個,然後做投影.
8.羽毛
新建一個長方形的文檔,填充黑色,新建一個圖層,畫一個矩形填充白色,旋轉畫布,做風格化中的大風,重復濾鏡做模糊中的動感模糊,轉回畫布,將白色移到最下邊,給它做編輯中的垂直翻轉,然後做扭曲中的極坐標到平面坐標,用選框工具,把下邊刪除,復制當前層,垂直翻轉,合並圖層,自由變化,調整大小.也可以用透視.
9.海上日出
新建圖層,做黃到紅的徑向漸變,從中心往外拉,再新建一個圖層把前景色變成淡紅色背景色變成白色,再做渲染中的雲彩,扭曲中的玻璃,自由變換的透視將圖像做出延伸的效果,再新建一個圖層,畫一正圓填充紅色,做太陽進行高期模糊.再畫一個橢圓進行羽化後做黃到紅的徑向漸變,做自由變化中的透視效果.將模式改為疊加.再到有雲彩的圖片中利用蒙板做出選區拖到圖像中將模式改為線型減淡.再用畫筆加一些鳥的形狀.
10.放大鏡
打開一副圖片,畫一個正圓復制粘貼,載入選區後做扭曲中的球面化,再新建一層進行描灰色邊,再載放選區進行描黑色的邊.再新新建一層畫一個矩形做灰白灰的漸化,自由變化中的透視將一點向中間移,放到合適的位置上就可以了.
11.水晶球
默認的前背景色,在背景上做渲染中的雲彩,再做扭曲中的極做標,選擇平面做標到極作標,再做扭曲中的擠壓,重復兩次,畫一正圓將它復制為一個圖層.將背景色改為白色.通過曲線調整它的顏色.再做渲染中的鏡頭光暈,選擇105毫米.數值為100,將位置放在三分之一的位置上.再做一次放在最下邊.最後加上外發光就可以了,但是要注意外發光的模式為正常.否則會看不出它的效果.
12.水中倒影
新建圖層,將前景色改為海水的淡藍色,做渲染中的雲彩,再做扭曲中的玻璃,用自由變換的透視做出海面由遠到近的效果,移到中間,再新建一層,將前景色改為淡天藍色做渲染雲彩做天空. 將當前層放到最下邊,輸入文字後,柵格化,復製做變換中的垂直翻轉.將副本的透明度小一點,做扭曲中的波紋.兩個文字層加上連接符後自由變化中的透視,做出海面延伸的效果.
13統計餅圖
新建圖層.畫一正圓,用第六種漸變從中心向外拉做第三種角度漸變.選擇路徑工具中的直線工具第三種一個單純的填充,將大小改為2就可以了,進行切分,前景色為白色.切完後用魔棒工具選擇其中一塊白色選擇相似然後刪除.用多邊形套索工具取下一塊來,自由變換將它壓扁.載入選區輕移做出立體效果.描白色的邊.最後寫上相關的數據就可以了.
14.沙漏
新建圖層,畫一個長方形,做黑白黑的漸變,做自由變換中的透視,畫一個橢圓填充黑色再復制一個.用放大鏡工具放最大,用矩形把它們斷開的接上去.再做漸變,新建圖層,畫一個小一點的矩形填充黃色,進行添加雜色選擇高斯分布\單色.數值大一點.用自由變換進行透視,再用選區工具把它們放在合適的位置上.圖層的透明度小一點.再用塗抹工具進行塗抹,做出沙往下流的效果.
15.膠囊
背景色填充為黑色.新建圖層,畫一個小的正圓,做白到紅的徑向漸變,做輕移.用圓形選區從中間畫分.用移動工具分開.復制一個,進行水平翻轉放到合適的位置上.將它的透明度變小一點.全並圖層,選其中一一個進行自由變化進行旋轉.再新建一層用畫筆點出小點來.
16.宇宙空間
暗藍色的背景,進行填充.新建一層,默認的前背景色,畫一個橢圓做渲染中的雲彩,做扭曲中的旋轉扭曲,數值調最大,羽化反選,刪除,可以多刪幾次.自由變換進行壓扁,旋轉.再新建一層畫一個正圓做白到黑的徑向漸變,做扭曲中的玻璃將它的數值加大一點.用修補工具進行修補.畫一個正圓放在中間羽化反選,將它剪切成一個單獨的圖層.放在最下邊.新建圖層.畫一個正圓填充為白色,移動選區做羽化刪除.用畫筆點出一些白色的點來.新建一層,也可以用路徑中的鋼筆工具兩點畫一條線,選擇合適的畫筆變換顏色,進行畫筆描邊路徑.自由變換透視.就可以了.
快捷鍵:
全選:Ctrl＋A; 取消當前命令：Esc
反選:Shift＋Ctrl＋I 工具選項板：Enter
取消選擇區:Ctrl＋D 選項板調整：Shift＋Tab
選擇區域移動：方向鍵 打開文件：Ctrl＋O
復制選擇區域：Alt＋方向鍵 關閉文件：Ctrl＋W
恢復到上一步：Ctrl＋Z 文件存檔：Ctrl＋S
剪切選擇區域：Ctrl＋X 退出系統：Ctrl＋Q
復制選擇區域：Ctrl＋C 獲取幫助：F1
粘貼選擇區域：Ctrl＋V 剪切選擇區：F2
填充為前景色：Alt＋Delete 拷貝選擇區：F3
填充為背景色：Ctrl＋Delete 粘貼選擇區：F4
調整色階工具：Ctrl＋L 顯示或關閉畫筆選項板：F5
調整色彩平衡：Ctrl＋B 顯示或關閉顏色選項板：F6
調節色調/飽和度：Ctrl＋U 顯示或關閉圖層選項板：F7
自由變形：Ctrl＋T 顯示或關閉信息選項板：F8
增大筆頭大小：「中括弧」 顯示或關閉動作選項板：F9
減小筆頭大小：「中括弧」 激活上一圖層：Alt＋「中括弧」
選擇最大筆頭：Shift＋「中括弧」 激活下一圖層：Alt＋「中括弧」
選擇最小筆頭：Shift＋「中括弧」 合並可見圖層：Shift＋Ctrl＋E
重復使用濾鏡：Ctrl＋F 放大視窗：Ctrl＋「＋」
縮小視窗：Ctrl＋「－」
6、為什麼要採用柵格化系統設計網頁
研究網頁柵格系統前，來看一組數據：
網站 首頁頁面寬度 px
Yahoo! 950
淘寶 950
MySpace 960
新浪 950
網易 960
Live Search 958
搜狐 950
優酷 960
AOL 960
上面列舉的都是Alexa全球排名前100的站點，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點有個共同特點：頁面結構較復雜，都可以認為是門戶型網站。
再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點，它們的首頁寬度沒什麼固定規律，共同的特點是：功能專一，頁面結構相對簡單。
根據上面的簡單分析可以認為：當搭建頁面結構復雜的門戶型網站時，開發工程師們不約而同地都選擇將頁面寬度定為950px/960px.
這是一件很有趣的事情，為什麼要選擇這個寬度呢？這個寬度值究竟有什麼魔力？
下面網址上有一個系統的介紹，可以看一下:
網頁柵格系統研究（1）：960的秘密
http://www.52webwind.cn/user-experience/188.html
網頁柵格系統研究（2）：蛋糕的切法
http://www.52webwind.cn/user-experience/193.html
網頁柵格系統研究（3）：粒度問題
http://www.52webwind.cn/user-experience/231.html
網頁柵格系統研究（4）：技術實現
http://www.52webwind.cn/user-experience/239.html
7、用ps設計，網頁設計能不能用柵格化圖層
最好不要用，如果你做的圖小了，要調整，你放大絕對失真，這時候你就要返工，你如果是覺得文件大模擬可以【轉化為智能對象】