首頁?>?知識(shí)?資訊?>?網(wǎng)站設(shè)計(jì)-圖層樣式的設(shè)計(jì)技巧?>?正文

網(wǎng)站設(shè)計(jì)-圖層樣式的設(shè)計(jì)技巧

2011/8/15 0:00:00 · 稿源:傳誠信

圖層樣式是什么新鮮事。他們已經(jīng)一而再,再利用和濫用。盡管他們無處不在,也許是因?yàn)樗?,很多設(shè)計(jì)師還沒有實(shí)現(xiàn)這個(gè)方便的菜單中充分發(fā)揮潛力。它的美在于我們有能力創(chuàng)建一個(gè)效果,然后將其復(fù)制,修改,出口,隱藏或垃圾箱,而不會(huì)降低該層的內(nèi)容,。

下面,我們目前,分步實(shí)施,一些實(shí)用技術(shù),以幫助您優(yōu)化您的設(shè)計(jì),提高生產(chǎn)率和降低層雜波 。我們欽點(diǎn)的選擇,你會(huì)發(fā)現(xiàn)更多有用的Photoshop技術(shù)和教程Photoshop的最佳碎雜志上。

下載源文件(ZIP,1.6 MB)。

FX -完全掌握的Photoshop技巧:圖層樣式

凹凸效果圖

“等一下,什么?”你驚呼,“還有的沒有凹凸映射效果的圖層樣式菜單!”這是事實(shí),但圖案疊加和斜面和浮雕相結(jié)合,我們可以實(shí)現(xiàn)一個(gè)可控光源一個(gè)紋理,凹凸,映射表面。

這種方法需要兩個(gè)圖像:一個(gè)紋理和色彩,和其他作為深度圖。深度圖不需要有任何的色調(diào),因?yàn)樗鼪Q定了一個(gè)復(fù)合值的基礎(chǔ)上深度,黑色是最低的,白的最高。在某些情況下,您可能能夠使用兩個(gè)相同的圖像,但在我們的例子中,我們將使用完全不同的。

步步

  1. 我們將開始創(chuàng)建我們的凹凸貼圖模式。打開鉆石?plate.psd文件 。
  2. 在里面你會(huì)發(fā)現(xiàn)一個(gè)黑色的背景上的白色形狀,從這個(gè)文件創(chuàng)建一個(gè)模式:全選(CMD / Ctrl + A鍵),然后“編輯”→“定義圖案“將它命名為”鉆石板凹凸貼圖“?,點(diǎn)擊確定。

    凹凸步- 02在掌握的Photoshop技巧:圖層樣式
    創(chuàng)建花紋板模式。

  3. 現(xiàn)在,打開start.psd文件 。
  4. 重復(fù)步驟2,創(chuàng)建一個(gè)從“灰斑片狀層”的模式 。這將用于后向我們的背景添加紋理。

    凹凸步- 04在掌握的Photoshop技巧:圖層樣式
    定義紋理圖案。

  5. 創(chuàng)建模式后,刪除“修修補(bǔ)補(bǔ)的灰色”層它不再需要。
  6. 使用矩形工具,創(chuàng)建一個(gè)約20像素的畫布比高出20個(gè)像素的形狀圖層。這一層的顏色以深色,褐色,彩色的灰色。

    凹凸步- 06在掌握的Photoshop技巧:圖層樣式
    創(chuàng)建我們的背景形狀層。

  7. 確保形狀層沒有任何圖層樣式已經(jīng)應(yīng)用到它(通常適用于Photoshop將自動(dòng)最新的圖層樣式) 。然后,開始新的圖層樣式,添加圖案 疊加。

    凹凸步- 07在掌握的Photoshop技巧:圖層樣式
    添加圖案疊加效果。

  8. 選擇“修修補(bǔ)補(bǔ)的灰色”的模式選擇器模式,并改變混合模式為柔光 。這將增加我們的背景層的紋理 。

    凹凸步- 08B在掌握的Photoshop技巧:圖層樣式
    凹凸步- 08在掌握的Photoshop技巧:圖層樣式
    添加圖案疊加效果。

  9. 接下來,添加斜面和浮雕,以及與肌理效果。這一次,變化的肌理效果的“鉆石板凹凸貼圖”的格局在第2步中創(chuàng)建的模式。我們現(xiàn)在有一個(gè)蹩腳的花紋板背景。

    凹凸步- 09B在掌握的Photoshop技巧:圖層樣式
    凹凸步- 09在掌握的Photoshop技巧:圖層樣式
    應(yīng)用斜面和浮雕肌理效果。

  10. 與大多數(shù)圖層樣式效果,默認(rèn)值是很少的理想選擇。通過調(diào)整錐類型和大小,光澤等高線,亮點(diǎn),陰影和燈光設(shè)定,可以實(shí)現(xiàn)一些戲劇性的結(jié)果 。

    凹凸步- 10B在掌握的Photoshop技巧:圖層樣式
    凹凸掌握Photoshop的技術(shù)步驟10:圖層樣式
    調(diào)整斜面和浮雕設(shè)置。

  11. 隨著一些額外的效果,你可以塑造背景層甚至更多。例如有一個(gè)漸變疊加來模擬反射光線變暗圖像的某些區(qū)域。

    凹凸步- 11B在掌握的Photoshop技巧:圖層樣式
    凹凸掌握Photoshop的技術(shù)步驟11:圖層樣式
    使用漸變疊加變暗一些地區(qū)。

  12. 您可能會(huì)注意到,從突出的斜面和浮雕過濾似乎都具有相同的值。這是因?yàn)樾泵婧透〉裥Ч麍D層樣式的堆疊順序是非常高的 。變暗的亮點(diǎn),在于我們的主要光源外,只需繪制一個(gè)圖層蒙板,使用畫筆 工具。

    凹凸掌握Photoshop的技術(shù)步驟12:圖層樣式
    畫一個(gè)口罩,以增加在背景光的外觀。

我們現(xiàn)在有一個(gè)紋理,凹凸映射是完全動(dòng)態(tài)的背景下,關(guān)于它的一切都可以從“圖層樣式”菜單,容易修改。合并到一個(gè)這樣的動(dòng)態(tài)層的復(fù)雜的圖像,可以顯著降低層雜波,并允許你(和誰否則可能會(huì)使用該文件),輕松地找到并修改的東西。現(xiàn)在,讓我們創(chuàng)造我們的圖標(biāo)。

3 - D建模

通過結(jié)合一些內(nèi)部的影響,我們可以使用“圖層樣式”菜單中創(chuàng)建模擬的3 - D物體:偉大的圖標(biāo),按鈕和其他界面對象。現(xiàn)在,我們將模型的圓形圖標(biāo)的例子使用一個(gè)單層的形象的基礎(chǔ)。

步步

  1. 首先,創(chuàng)建一個(gè)具有豐富的紅色填充圓形層 。

    在掌握Photoshop的技術(shù)3D步- 01:圖層樣式
    創(chuàng)建形狀圖層圖標(biāo)的基礎(chǔ)。

  2. 由于通常情況下,一個(gè)3 - D形狀建模時(shí),讓我們開始加入到我們的“圖層樣式”漸變疊加。最適合我們的實(shí)現(xiàn)的一個(gè)白色到黑色的徑向風(fēng)格的漸變,設(shè)置為線性加深。請務(wù)必在原點(diǎn)的白色區(qū)域的梯度。

    3D步- 02在掌握的Photoshop技巧:圖層樣式
    添加漸變疊加設(shè)置為線性加深。

  3. 我們現(xiàn)在有一個(gè)顯著陰影的領(lǐng)域,與頭的光源。通過減少漸變的透明度,我們可以扁平化的形狀更凹 按鈕。

    3D步- 03在掌握的Photoshop技巧:圖層樣式
    減少了微妙的效果透明度。

  4. 讓我們也光線的方向移動(dòng)到左上角。雖然離開“圖層樣式”菜單中打開,鼠標(biāo)移到圖像本身(“移動(dòng)工具”圖標(biāo)應(yīng)該出現(xiàn))。只需點(diǎn)擊并拖動(dòng)左上角的形狀圖層的漸變的震中 。

    3D步- 04在掌握的Photoshop技巧:圖層樣式
    重新定位漸變圖層樣式菜單內(nèi)。

  5. ,雖然斜面和浮雕看起來可能更符合邏輯的工具,你經(jīng)??梢缘玫揭粋€(gè)更清潔,更可定制的斜面看,結(jié)合其他影響使用。首先,添加一個(gè)黑色的內(nèi)發(fā)光,設(shè)置為正片 。調(diào)整電抗器,大小,透明度和輪廓,直到你有一個(gè)內(nèi)部的形狀軟化邊緣 。

    3D步- 05B掌握的Photoshop技巧:圖層樣式
    3D步- 05在掌握的Photoshop技巧:圖層樣式
    添加輝光變暗基地邊緣。

  6. 對任何渲染的球面一樣,我們添加一些在我們的陰影區(qū)域的反射光。這是很容易實(shí)現(xiàn)與內(nèi)陰影效果更改顏色為白色,混合模式為線性減淡。調(diào)整角度,以便它出現(xiàn)在我們的形狀右下。調(diào)整的輪廓線,距離,大小和不透明度,以創(chuàng)建一個(gè)微妙的 效果。

    3D步- 06B掌握的Photoshop技巧:圖層樣式
    3D步- 06在掌握的Photoshop技巧:圖層樣式
    添加微妙的反射光,使用內(nèi)陰影。

  7. 為了加強(qiáng)形狀的感覺,是文件的一部分“環(huán)境,”我們可以添加一些效果,以互動(dòng)的背景。陰影通常是最簡單的工具來使用這個(gè)的 。按摩的設(shè)置,直到一切都感覺不錯(cuò)。

    3D步- 07B掌握的Photoshop技巧:圖層樣式
    3D步- 07在掌握的Photoshop技巧:圖層樣式
    一個(gè)簡單的陰影,進(jìn)入一個(gè)很長的路要走。

  8. 使用外發(fā)光效果,我們可以模擬反射紅色的光,我們的背景圖像會(huì)吸收,如果這是實(shí)際設(shè)置。一個(gè)暗紅色的輝光的顏色變化,并改變混合模式為變暗。同樣,大小和不透明度設(shè)置工作,以創(chuàng)建所需的的效果。這是這些影響,正確使用時(shí),沒有人應(yīng)注意,因?yàn)樗皇强雌饋碜匀弧?/span>

    3D步- 08B掌握的Photoshop技巧:圖層樣式
    3D步- 08在掌握的Photoshop技巧:圖層樣式
    一個(gè)紅色的輝光,添加更多的“環(huán)境”。

請注意,圖層樣式梯度不能抖動(dòng),這可以使他們降低質(zhì)量(-馬克愛德華茲,比他們的梯度層和漸變工具同行。

漫反射與鏡面光

現(xiàn)在,我們的標(biāo)志,反映了一個(gè)模擬的漫射光,這使得它完成了磨砂表面外觀。如果你喜歡一個(gè)更有光澤的外觀,你可以輕松地創(chuàng)建一個(gè)鏡面高光(還有什么?)圖層樣式。

步步

  1. 復(fù)制目前的形狀圖層(CMD / CTRL + J) ,。
  2. 清除新圖層的圖層樣式:右鍵單擊在圖層調(diào)板的層,并選擇“清除圖層樣式” 。
  3. 我們還需要修改層的形狀,使反射光的邊緣更清晰 。使用直接選擇工具(A),選擇在形狀圖層的矢量蒙版路徑。復(fù)制(CMD /按Ctrl + C)粘貼(CMD / Ctrl + V鍵)以上的電流路徑。改變這條 ??道路的模式,從形狀區(qū)域減去( - )然后將形狀和創(chuàng)建一個(gè)月牙形狀的權(quán)利。您可能還需要作出較大的負(fù)面形狀,以創(chuàng)建一個(gè)更自然的曲線:簡單自由變換(CMD / Ctrl + T鍵內(nèi),然后規(guī)模的形狀。

    規(guī)格步- 03在掌握的Photoshop技巧:圖層樣式
    修改的鏡面高光的形狀。

  4. 因?yàn)槲覀冎恍枰獮樗膱D層樣式這一層,我們可以設(shè)置其填充不透明度為0% 。

    規(guī)格步- 04在掌握的Photoshop技巧:圖層樣式
    刪除圖層的填充為0%。

  5. 我們也希望這層繼承底層圖層樣式,以便創(chuàng)建一個(gè)新的層上的剪貼蒙版(CMD / CTRL +股權(quán)+ G) 。

    規(guī)格步- 05在掌握的Photoshop技巧:圖層樣式
    創(chuàng)建剪貼蒙版繼承的影響。

  6. 現(xiàn)在,開始與一個(gè)漸變疊加圖層樣式。使用默認(rèn)的黑色到白色漸變,并設(shè)置混合模式為濾色。敲不透明度到50%左右,并改變角度約115 ° 。您可能需要改變漸變的定位,你可以通過點(diǎn)擊和拖動(dòng)文檔窗口內(nèi),就像你在3 - D建模部分。

    在掌握Photoshop的技術(shù)規(guī)格步- 06B:圖層樣式
    規(guī)格步- 06在掌握的Photoshop技巧:圖層樣式
    設(shè)置漸變疊加到屏幕。

  7. 這是一個(gè)良好的開端為突出,但它仍然看起來有點(diǎn)不自然 。使用一個(gè)透明的內(nèi)中風(fēng),我們可以縮小周邊的內(nèi)飾效果。中風(fēng)的效果,添加層和放棄其不透明度為?0 %。到內(nèi),改變位置和大小滑塊的工作,直到突出較深的內(nèi)發(fā)光的底層(例如圖像使用5個(gè)像素)結(jié)束 開始。

    在掌握Photoshop的技術(shù)規(guī)格步- 07B:圖層樣式
    規(guī)格步- 07在掌握的Photoshop技巧:圖層樣式
    使用內(nèi)中風(fēng)的0%至收縮室內(nèi)效果的周長。

  8. 為了一個(gè)更有活力的外觀添加到您的突出,你可以添加一個(gè)白色的內(nèi)陰影,設(shè)置一個(gè)自定義的輪廓屏幕。調(diào)整的距離和大小設(shè)置來完成的效果。

    在掌握Photoshop的技術(shù)規(guī)格步- 08B:圖層樣式
    規(guī)格步- 08在掌握的Photoshop技巧:圖層樣式
    內(nèi)陰影創(chuàng)建一個(gè)更加動(dòng)態(tài)的鏡面反射。

X -射線視覺

步步

要建立在我們的圖標(biāo)模切的類型,我們可以變成一個(gè)形狀圖層的文字層,并使用路徑來掩蓋遠(yuǎn)離根據(jù)地。然而,這將導(dǎo)致墮落的內(nèi)容,我們將不再能夠修改的類型。相反,我們將模擬使用的淘汰賽混合選項(xiàng)口罩。這也將讓我們應(yīng)用自定義的效果切出區(qū) 。

  1. 創(chuàng)建一個(gè)新文本“FX”型層,并在圓形底座的位置 。該示例使用120點(diǎn)加拉蒙粗體斜體。
  2. 掉落的填充不透明度為100%。
  3. 開始添加內(nèi)陰影圖層樣式增加大小,并增加不透明度為90%左右。您可能還需要根據(jù)自己的喜好修改的距離和輪廓。

    X射線步- 03在掌握的Photoshop技巧:圖層樣式
    模切效果的開端。

  4. 我們現(xiàn)在有一個(gè)模切效果的開端,除了文本仍顯示它下面的基礎(chǔ) 。為了解決這個(gè)問題,請?jiān)凇皥D層樣式”菜單中的混合選項(xiàng)部分。從“無”淺層變化淘汰賽(從一層直接下當(dāng)前層的組此設(shè)置樣本像素)。因?yàn)槲覀兊奈淖謱硬粚儆谝粋€(gè)層組,它的樣本,而不是從背景層。(使用深度淘汰賽將始終從背景層樣品,無論層的組。)

    X射線的步驟- 04B掌握的Photoshop技巧:圖層樣式
    X射線步- 04在掌握的Photoshop技巧:圖層樣式
    淺水層直接從當(dāng)前層的下方組淘汰賽樣本像素。

  5. 為了得到文字層,從我們的鉆石板層樣品,按一下啟動(dòng)“好”關(guān)閉“圖層樣式”菜單中。正如你可以看到,現(xiàn)在的“FX”形狀從直接低于新層的紋理層像素選擇基地的按鈕,使文字層和,和組(CMD / Ctrl + G鍵?。 組。

    X射線步- 05在掌握的Photoshop技巧:圖層樣式
    分組的圖標(biāo),因此,從鉆石板層基因敲除樣本。

  6. 基因敲除的效果是非常有說服力的的,但仍然覺得從基礎(chǔ)上脫落。讓我們添加一個(gè)斜角的效果,模擬的表面質(zhì)量的基礎(chǔ)。開始加入一個(gè)大小為2的外行程,然后一滴不透明度為 0?%,這并不能達(dá)到什么,但下一步是必要的。
  7. 現(xiàn)在添加斜面和浮雕效果。轉(zhuǎn)變作風(fēng)中風(fēng)浮雕和技術(shù)努力鑿,這將適用于在上述步驟中創(chuàng)建的中風(fēng)面積內(nèi)斜角的照明效果 。修改設(shè)置,以達(dá)到一個(gè)微妙的和光滑的邊緣。

    X射線的步驟- 07B掌握的Photoshop技巧:圖層樣式
    X射線步- 07在掌握的Photoshop技巧:圖層樣式
    添加中風(fēng)的浮雕。

  8. 讓我們的考慮形狀的右下邊緣添加一個(gè)薄鏡面突出的斜面之一一步。我們可以使用一個(gè)白色的掉落暗影效果,設(shè)置為屏幕,將一個(gè)明亮的突出,便斜角的邊緣 。您將要修改的距離和大小給予突出尖銳的邊緣。

    X射線的步驟- 08B掌握的Photoshop技巧:圖層樣式
    X射線步- 08在掌握的Photoshop技巧:圖層樣式
    添加薄鏡面高光,陰影。

  9. 完成內(nèi)模切字母與更多的陰影圖層樣式,添加一個(gè)簡單的黑色到白色的漸變疊加,設(shè)置為 正片。

    X射線步- 09在掌握的Photoshop技巧:圖層樣式
    整理過的模切。

快速提示

盡管頻繁濫用,“圖層樣式”菜單,確實(shí)是一個(gè)強(qiáng)大的工具,每一個(gè)設(shè)計(jì)師要學(xué)會(huì)工作。它不僅提供了一個(gè)不容易通過其他途徑發(fā)現(xiàn)的速度和控制的水平,但它提供了寶貴的的靈活性。我們的例子顯示了一個(gè)多維的圖標(biāo)和一個(gè)完全動(dòng)態(tài)的背景如何,可在4個(gè)簡單的形狀圖層合并,使他們能夠方便地進(jìn)行修改,重用,而且整個(gè)設(shè)計(jì)重新利用。下面是一些額外的提示,你的下一個(gè)項(xiàng)目上工作時(shí),要記住。

堆疊順序的影響

您可能已經(jīng)注意到,有時(shí)正在使用的另一種效果時(shí),效果是不可見的。例如,顏色疊加,似乎覆蓋漸變疊加。這是因?yàn)槎询B順序的圖層樣式。正如層的調(diào)色板,一層將覆蓋另一個(gè)就是降低堆疊順序向下。不幸的是,“圖層樣式”菜單中不允許您重新排列順序的影響。一個(gè)辦法解決這個(gè)問題(即使你犧牲能夠編輯)使用創(chuàng)建層,變成實(shí)際的層,您可以移動(dòng)所有的圖層樣式效果。

室內(nèi)裝飾效果堆疊順序:

  • 中風(fēng)
  • 斜面和浮雕
  • 內(nèi)陰影
  • Innger輝光
  • 顏色疊加
  • 漸變疊加
  • 圖案疊加

外觀效果堆疊順序:

  • 中風(fēng)
  • 外發(fā)光
  • 陰影

非彩色的特定樣式

雖然并不總是可能的,你可能要使用黑色,白色和灰色為你的效果。使用單色的顏色配合適當(dāng)?shù)幕旌夏J?,允許你創(chuàng)建非特定顏色的樣式,這意味著你可以修改的實(shí)際層的顏色,圖層樣式將適當(dāng)更新。

縮放效果

有可能是當(dāng)你創(chuàng)建一個(gè)圖層樣式,在原來的大小看起來很棒,但增加或減少的形狀時(shí),你的美麗風(fēng)格被破壞。幸運(yùn)的是,Photoshop提供了一種方法來調(diào)整失衡的樣式。只需選擇圖層→圖層樣式→規(guī)模效應(yīng),然后輸入你需要的百分比。

不起眼的菜單選項(xiàng)

您可以使用圖層樣式菜單內(nèi)的一些隱藏命令 。根據(jù)效果,你將有機(jī)會(huì)獲得的手工具,或通過簡單的鼠標(biāo)在文檔窗口的移動(dòng)工具。手工具,讓你左右移動(dòng)文件,就像你會(huì)以外的圖層樣式“菜單上,和移動(dòng)工具的重新定位目前的效果和自動(dòng)更新設(shè)置。使用移動(dòng)工具時(shí),您仍然可以訪問通過按住空格鍵的手工具 。雖然使用的工具,可以放大和縮小控股空間+ CMD空間+選項(xiàng)。不要忘記,其他大多數(shù)在Photoshop菜單,“選項(xiàng)”將改變“取消”按鈕,一個(gè)“復(fù)位”按鈕,讓你取消任何更改 。

感謝他們在協(xié)助編輯的文章,馬克愛德華茲和里卡多吉梅內(nèi)斯


選擇北京網(wǎng)站建設(shè)公司-傳誠信,優(yōu)質(zhì)服務(wù),絕對不容錯(cuò)過 !

1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證

?(配送雙線獨(dú)立ip空間,國際A級BGP機(jī)房,99.5% 的主機(jī)在線時(shí)間)

2. 7年北京網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心

3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。

-----------------------------------------------------------------------------------------------------

我們的與眾不同之處:

?

????? 免費(fèi)網(wǎng)絡(luò)營銷顧問:我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營銷顧問服務(wù),您需要了解關(guān)于如何開展網(wǎng)絡(luò)營銷,電子商務(wù),網(wǎng)站設(shè)計(jì)等的事宜,歡迎隨時(shí)聯(lián)系我們。

???? ?seo友好的網(wǎng)站管理系統(tǒng):除了優(yōu)質(zhì)的網(wǎng)站空間,網(wǎng)站管理系統(tǒng),和網(wǎng)站設(shè)計(jì)外,我們的網(wǎng)站管理系統(tǒng)更是seo友好的,包括:自定義欄目名,Google Sitemap自動(dòng)生成,靜態(tài)頁面生成等等,讓您的網(wǎng)站。

?? ? ?免費(fèi)網(wǎng)絡(luò)營銷培訓(xùn):如何更好的投放網(wǎng)絡(luò)廣告,如何提高網(wǎng)絡(luò)廣告的投資回報(bào),如何發(fā)帖子,

?? ? ?如何優(yōu)化網(wǎng)站,我們有豐富的經(jīng)驗(yàn)開放給您!祝君成功!

聯(lián)系我們:010-62199213?? 62122723-808?? 賈先生

傳誠信北京網(wǎng)站建設(shè)網(wǎng)站:saddlebargains.com?點(diǎn)擊查看經(jīng)典網(wǎng)站案例!

  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時(shí)咨詢熱線

139-1050-5354