上海網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)中心，前端美工培訓(xùn)
【學(xué)果網(wǎng)】課程咨詢(xún)：張老師 手機(jī)：152-0198-6451
一、Adobe網(wǎng)頁(yè)設(shè)計(jì)師認(rèn)證班：
培訓(xùn)Dreamweaver、Flash、Fireworks、Photoshop所有內(nèi)容，能制造相干靜態(tài)網(wǎng)頁(yè)，學(xué)員結(jié)課后可考取Adobe《網(wǎng)絡(luò)設(shè)計(jì)師》認(rèn)證。
二、網(wǎng)頁(yè)前端設(shè)計(jì)師培訓(xùn)：
1.美術(shù)基礎(chǔ)：素描（石膏幾何體，寫(xiě)生）；水粉（靜物寫(xiě)生，顏色配色）透視原理；
2.Flash編程：Action腳本設(shè)計(jì)、利用Flash制造相干交互動(dòng)畫(huà)；
3.HTML +Div+Css+ JAVAscript: CSS/Html/DIV、Javascript腳本設(shè)計(jì)；
4.Photoshop WEB設(shè)計(jì):利用ps舉行美工設(shè)計(jì)；
5.網(wǎng)頁(yè)動(dòng)畫(huà)設(shè)計(jì)、Banner設(shè)計(jì)、Web規(guī)范版面制造；
6.網(wǎng)頁(yè)美工歸納：網(wǎng)頁(yè)歸納格局、網(wǎng)頁(yè)框架設(shè)計(jì)、網(wǎng)頁(yè)圖片配色等；
7.合乎有平面設(shè)計(jì)和靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)學(xué)習(xí)，學(xué)習(xí)完?duì)柡竽軌虻竭_(dá)設(shè)計(jì)和制造精巧網(wǎng)頁(yè)。
零基礎(chǔ)，可以達(dá)到靈活運(yùn)用網(wǎng)頁(yè)廣告軟件的效果。
可考證書(shū)：Adobe《網(wǎng)頁(yè)設(shè)計(jì)師》\學(xué)院結(jié)業(yè)證書(shū)。
就業(yè)方向：網(wǎng)頁(yè)美工設(shè)計(jì)師、UI與GUI界面設(shè)計(jì)師、網(wǎng)站編輯、網(wǎng)站開(kāi)發(fā)工程師、Flash廣告設(shè)計(jì)師、門(mén)戶(hù)網(wǎng)站策劃，門(mén)戶(hù)網(wǎng)站構(gòu)架，門(mén)戶(hù)網(wǎng)頁(yè)設(shè)計(jì)和制作師，電子商務(wù)師等。
課程咨詢(xún)：張老師 手機(jī)：15201986451 QQ：3096438159 微信：FF-122
網(wǎng)頁(yè)設(shè)計(jì)技巧之細(xì)節(jié)讓優(yōu)秀的作品脫穎而出：
前一段時(shí)間在企業(yè)管理界流行一句格言叫”細(xì)節(jié)決定成敗”。企業(yè)管理當(dāng)然不是我們這里要討論的主題，但是，把這句話(huà)放在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中的確是顛撲不破的真理。
我們的眼睛和感覺(jué)總是非常敏銳的，即使是完全不了解網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的人也能夠從一堆拙劣的設(shè)計(jì)作品當(dāng)中挑選出那一個(gè)優(yōu)秀的設(shè)計(jì)作品。雖然他說(shuō)不出來(lái)為什么這件東西比那些都好，
但是直覺(jué)會(huì)告訴他他自己喜歡哪一個(gè)。如果別人向我們問(wèn)起為什么這件作品要優(yōu)于其它呢?我們的回答是”很大一部分原因是因?yàn)閮?yōu)秀的設(shè)計(jì)作品總是充滿(mǎn)了豐富的細(xì)節(jié)?！?nbsp;
在這篇文章里，我們就從技術(shù)的角度出發(fā)，以PremiumPixels上的Redux WordPress主題設(shè)計(jì)作品為例，來(lái)總結(jié)一下在網(wǎng)頁(yè)設(shè)計(jì)中到底是哪些細(xì)節(jié)讓優(yōu)秀的作品脫穎而出。
一、1像素的襯線(xiàn)
在頁(yè)面的頂端，你能看到一條1個(gè)像素比背景顏色略淺的水平線(xiàn)將純色的背景和帶有材質(zhì)的背景分隔開(kāi)，如下圖：
而如果沒(méi)有這條襯線(xiàn)會(huì)是怎樣的一個(gè)效果，我們也來(lái)看看。
實(shí)際上，網(wǎng)頁(yè)設(shè)計(jì)中，使用到襯線(xiàn)的例子非常普遍。例如下面的這個(gè)例子中，你會(huì)在bao圍著”The Dorchester Hotel”文字的黑色邊框的頂部向下1個(gè)像素發(fā)現(xiàn)一條灰色的襯線(xiàn)。
而在下面這個(gè)設(shè)計(jì)好的按鈕中，綠色和黃色邊框頂部向下1個(gè)像素也能看到一條顏色更淺的線(xiàn)條，而這條襯線(xiàn)制作的更為精細(xì)，因?yàn)樗鼞?yīng)用了蒙版，從頂部向下你會(huì)發(fā)現(xiàn)這條襯線(xiàn)漸漸隱去了。
另外，在”Add To Cart”和”$9.99″兩個(gè)文字之間的分隔線(xiàn)實(shí)際上是兩條線(xiàn)，左邊顏色深一些，右邊顏色淺一些，這樣就能產(chǎn)生線(xiàn)條的凹陷效果。
之所以要使用襯線(xiàn)，是為了體現(xiàn)物體在2D效果上的立體感，而立體感的體現(xiàn)必須要有陰影和高光。陰影我們通常使用圖層樣式來(lái)實(shí)現(xiàn)，而高光效果的實(shí)現(xiàn)，zui常用的技巧之一就是使用襯線(xiàn)了。
上面的三個(gè)例子的襯線(xiàn)都在物體的頂部，說(shuō)明光線(xiàn)是從上向下照射的，高光處于物體的頂部。而如果光下從下向上照射的話(huà)，高光就應(yīng)該在底部了，那我們就應(yīng)該將襯線(xiàn)放置于物體的下方。
所以在襯線(xiàn)的使用上，我們始終要問(wèn)自己這幾個(gè)問(wèn)題，”我在這里使用了襯線(xiàn)，那么光源在哪里?”"如果光源在這里的話(huà)，陰影應(yīng)該出現(xiàn)在什么位置?”完成了這兩個(gè)回答，設(shè)計(jì)出來(lái)的物體的立體感才能更加真實(shí)。
二、細(xì)微的材質(zhì)
Redux主題真是解釋背景材質(zhì)的絕佳案例。因?yàn)樵谡麄€(gè)頁(yè)面中，從上至下使用了三種不同的材質(zhì)作為頁(yè)面的背景。上面的深藍(lán)色部分應(yīng)用的是坑坑洼洼凹凸不平的材質(zhì)，
中間黑色部分應(yīng)用的是紡織布的材質(zhì)，而底部應(yīng)用的是雜色的材質(zhì)。當(dāng)然，這三種材質(zhì)都是非常細(xì)微的，但是效果確是非常出眾的。實(shí)際上，過(guò)于醒目和復(fù)雜的背景材質(zhì)不僅不能為設(shè)計(jì)增色，
反而由于分散讀者的注意力而是整個(gè)設(shè)計(jì)品質(zhì)降低。所以zui好的策略就是讓你的背景材質(zhì)bao持細(xì)微而柔和。
三、柔和的漸變
是不是下面圖片上的文字框有一種鼓出來(lái)的感覺(jué)，對(duì)，那正是漸變帶給我們的效果。試想一下，如果單單是白色的文字框放置于頁(yè)面上，一定沒(méi)有添加了漸變讓我們感受到更多的趣味xing。
另外，在頁(yè)面的左右邊緣部分也應(yīng)到了從純色背景到材質(zhì)背景的漸變，這樣會(huì)讓深藍(lán)色凹凸不平的背景材質(zhì)出現(xiàn)的更加自然。在漸變的使用中需要注意的是，除某些特殊情況外，
不要使用太過(guò)強(qiáng)的漸變，不論是色向上還是亮度上還是飽和度上都不可跨度太過(guò)強(qiáng)。因?yàn)檫@樣強(qiáng)烈的過(guò)度根本不帶真實(shí)感，給人一種很不舒適的感覺(jué)。
四、微妙的陰影
注意觀察Redux暗色背景上的淺色文字，你會(huì)發(fā)現(xiàn)它們都被添加上了投影效果?，F(xiàn)在我們可以使用CSS3中的text-shadow屬xing來(lái)完成文字的投影設(shè)計(jì)，代替了在Photoshop中完成此項(xiàng)工作。
而且使用CSS3來(lái)給文字添加陰影自由度更高，在瀏覽器支持的情況下，你可以給任意文字添加你想要的陰影效果。當(dāng)然IE8以下版本的瀏覽器是不支持此項(xiàng)屬xing的，這是我們?cè)谠O(shè)計(jì)中需要注意的地方。
另外，和前面提到的其它設(shè)計(jì)細(xì)節(jié)一樣，陰影的效果也要足夠柔和，不可過(guò)于強(qiáng)烈，不然很容易讓整個(gè)設(shè)計(jì)看起來(lái)有一種臟臟的感覺(jué)，顯得不夠精致。
免責(zé)聲明：以上信息是由學(xué)考網(wǎng)平臺(tái)用戶(hù)自行發(fā)布，所有內(nèi)容均由發(fā)布者對(duì)信息的真實(shí)性負(fù)責(zé)，學(xué)考網(wǎng)僅提供信息發(fā)布、展示，不對(duì)用戶(hù)信息內(nèi)容的真實(shí)性負(fù)責(zé),請(qǐng)用戶(hù)自行甄別,謹(jǐn)防受騙!!
