首頁 > 開發者 > JavaScript
標籤：類型 賦值運算 二次 自身 對齊 不用 選項 動作 習慣
【PS基礎案例】
人物修圖。調整畫布大小，建立3個圖層，並列放到畫布中，用修補工具修掉中間的人物，再用橡皮章蓋掉邊緣的人物，然後扣出人物，放上新的藍天，用橡皮擦調整透明度，擦掉水天交接的地方，然後調整色階，最後點第三個圖層，編輯，內容識別比例，把腿部拉長，然後用濾鏡，液化，修飾臉型。
森林光線。選擇，色彩範圍，高光，建立圖層，複製，徑向模糊，如果光感不強則繼續建立複製，滿意後合并圖層調整色階，還可以調整光的位置，通過橡皮擦擦掉不自然的光線。
表情包。鋼筆和橢圓工具的綜合運用，ctrl+r開啟尺規，用尺規比著畫。GIF。
各種蒙版，邁克爾。先弄一個人影，然後依次開啟圖片，建立剪下蒙版，然後通過漸層進行調整，最後加上文字。蒙版一共有4種，直接建立蒙版，通過黑白灰影響畫面顏色的明暗對比，建立剪下蒙版，如邁克爾的那個例子，在通道中建立蒙版，用來扣對比比較明顯的有頭髮絲的人物，在左下角還有個按鈕，以快速蒙版方式編輯，可以對所選地區做一些邊緣的處理。
透視原理，變形金剛。通過扭曲變形形成立體感，複製多個圖層，擦掉下部，然後開啟另一個圖層，通過濾鏡素描畫，形成素描效果，擦掉擋住手的部分，然後開啟另一個圖層，通過圖層效果的顏色疊加，疊加成灰色，然後拖動位置，形成陰影，擦掉多餘部分。
光束的製作。複製一個黑色背景，然後建立一個圖層，開啟漸層色選擇第二個，兩頭都選白色，按住shitf橫向拉到頭，然後ctrl+t，拉到畫圖的一半，然後複製圖層，選擇水平反轉，調整位置形成光束，然後合并圖層，ctrl+t上下拉長，透視，上面左右兩個角拉到中間。
通道扣圖，通道，選擇對比明顯的顏色，然後複製圖層進行編輯，映像調整反相，調整色階增加對比，然後用前景色彩為白色的畫筆，塗掉黑色部分，然後將通道作為選擇載入，之後回到圖層直接建立蒙版。
頭髮變成樹林。先扣圖，頭髮可以簡略扣，然後刪除多餘部分，選擇通道，選擇對比明顯的顏色，複製圖層，調整色階，ctrl左鍵點擊圖層的小圖案建立選區，回到原來圖層，建立蒙版，然後把另一個圖片開啟，調整大小，放好位置後建立剪下蒙版，調整橡皮透明度擦掉多餘部分。
老虎人。不考慮頭髮扣出人臉，選擇，調整邊緣，調整智能半徑，選擇，儲存選區，然後開啟老虎，扣出面部，選擇，調整邊緣，重複剛才操作，但不是選區，而是建立圖層，老虎拖到人臉上，然後CTRL+t進行調整，讓其對齊，選擇人物，點圖層通道路徑右邊的按鈕，複製圖層，下面的一欄選擇建立，然後在建立出的人物種進行模糊，高斯模糊，然後儲存，回到老虎，複製兩個，點通道，ctrl左鍵點剛才儲存的圖，回到一個老虎，建立蒙版，用前景色彩為黑色的畫筆擦掉眼睛和嘴巴，然後選擇另一個老虎，建立蒙版，ctrl+I變為黑色，然後用前景色彩為白色的畫筆擦掉鬍子邊緣，然後複製一個人物，調到最上方，選擇柔光。
動作。視窗，動作，建立新動作。
下雪。先開啟動作。開啟圖片，建立圖層，填充為黑色，濾鏡，像素化，點狀化，儲存格的大小決定雪花的大小，圖象，調整，閾值，閾值的大小決定雪花的速度，濾鏡，模糊，動感模糊，決定間距和方向。最後選擇濾色。
普通圖，72解析度，RGB。列印的話，CMYK，300解析度。
【AI應用】
圖層上畫圖自動產生小分組，可以直接設定顏色和描邊。
要建立剪下蒙版的話和PS不同，要把畫的形狀放在上面，原圖放在下面，然後直接點一個圖片,SHITF點另一個，點擊右鍵，創立剪下蒙版，是在圖片上直接點，不是點右邊圖層的小框。
字型效果。打字，對象，擴充，可以分解為好多小點，可以通過拖動來改變字型。然後複製一個，再畫一個圓，擋住字型的一部分，然後右鍵圓，置於底層，複製幾個圓。然後右鍵字，取消編組，分別選擇一個字SHIFT圓，然後從視窗開啟路徑尋找器，選擇交集，然後拖動到原字型上，可以改變顏色和透明度來達到預期的效果。
圓角直線。視窗，描邊，圓頭端點。
地球小圖案。建立，800*600畫布，開啟圖片，建立3個圖層，畫矩形，800*600，把背景蓋住，把圖片拖上來，在圖層3上建橢圓128*128，填充無，描邊黑，6pt，再建106*106，倆圓選中，水平置中對齊，然後選擇裡面的小圓，用剪刀工具把它分割成幾塊，然後選擇不要的刪掉，然後視窗描邊圓頭端點，再建橢圓180*60，搭在一起，然後全選，旋轉，然後畫直線，用剪刀切割，最後再畫3個圓，兩個淡黃色一個橘黃色，然後把一個淡黃和橘黃通過路徑尋找器減去頂層，把小月牙和圓分別疊加上去，然後置於底層。最後通過矩形圓形工具畫出小圖案。另一個圖，下面的藍梯形，可以先畫矩形，然後拉成梯形，最後用直接選擇工具上面轉換後面的圓弧，慢慢調整。其他的同第一個。
【平面設計】
排版基礎。排版設計的四元素，背景，主體，文字，裝飾。
基本類型。骨骼型（網頁設計），中心型，滿版型，上下分割型，左右分割型，中軸型（電商排版），曲線型，傾斜型，對稱型，重心型，三角型，共置型，自由型，四角型
前期練習一定要注意留白問題！！
按文字流向規律，使用者閱讀習慣從上到下，從左至右。
明確主題標題，通過顏色，粗細，字型大小，色塊。
注意行距和間距。
裝飾框的運用，讓文案有裝飾性。
文案過少的情況下通過外文來湊。
排版不要太過一致，讓重點醒目。
文案與背景要分明。
所有印刷品都要留3mm出血，解析度都是300.
企業VI。
VI設計一般包括基礎部分和應用兩大部分內容。
logo。表象性，表徵性，借喻性，標識性，卡通化，幾何形構成，漸層推移。
名片標準尺寸。90*54,90*50,90*45。但是加上出血上下左右各2，所以製作尺寸必須設定為94*58,94*54,94*48。色彩模式為CMYK，影像檔300dpi以上。
【項目流程】
成立項目組，專案經理牽頭組建團隊，專案經理做計劃表，開項目啟動會，互動設計師做原型稿，UI設計人員豐富，H5開發。
網頁設計分類。功能型網頁設計（B/S軟體使用者端），形象型網頁設計（品牌形象站），資訊型網頁設計（門戶站）。
網頁設計經曆以下幾個階段。根據消費者的需求，市場的狀況，企業自身的情況等進行綜合分析，從而建立起營銷模型。以營運目標為中心進行功能策劃，製作出欄目結構關係圖。以滿足使用者體驗設計為目標。以網頁精美化設計為目標，調整，使用合理的顏色，字型，圖片，樣式進行頁面設計美化，根據使用者反饋，進行頁面設計調整，以達到最優效果。
針對客戶需求需要注意的幾點。
建設網站的目的。欄目規劃及每個欄目的表現形式和功能要求。網站主體色調，客戶性別喜好，連絡方式，舊版網址，偏好網址。根據行業和客戶要求，那些要著重表現。是否分期建設，考慮後期的相容性。客戶是否有強烈建設網站的慾望。網站類型。
企業站主體色彩搭配最好不要超過3種。可以適當點綴。
先把內容充實上，再分區塊，再定色調，再處理細節。
全域考慮，把能填的都填上，佔位置，然後定基調，分模組設計，最後調整不滿意的局部細節。
總結，網頁設計應簡潔明了，從使用者體驗出發。
網頁，必須是72解析度。
目前通用的頁面大小為1000px（現在最好做1200px），畫布大小可以自訂（1400,1440不等，最大1920）。
最上面標準頭，最下面標準尾是硬性要求。頭下面一般是廣告，再下面是內容區。
內容區需求不明確的話，排關於我們。產品。新聞動態。
一般三張廣告圖，需求不明確的情況下，就可以是企業介紹，產品案例，企業文化或社會責任。
內容區。通欄，可以鋪滿畫布，但內容不能超過頁面大小。兩欄，版塊與版塊的空隙最少20px，可以等分也可以不等分。三欄四欄最好等分。
網頁本文一律採用宋體12號字（現在基本都用微軟雅黑，選擇無），微軟雅黑和黑體，主要是用作標題。
建議使用12+14號的混合搭配。
英文字型從10px開始能清晰使用，選擇空間很大，10px，11px，12,13都是常見的字型大小，字型使用系統內建字型，例如Arial。
價格文字，cc0000，重要文字cc6600，常規文字333333，次級文字666666.
注意：頁面小標題有點擊效果的最右邊要留空間，點擊效果地區不要超出範圍。
[使用JS的三種方式]
1、 在HTML標籤中，直接內嵌JS(並不提倡使用):
<button onclick="alert(‘小婊砸！你真點啊！‘)">有本事點我呀！</button>
>>> 不符合W3C關於內容與行為分離的要求！！！
2、在HTML頁面中，使用<script></script>包裹JS代碼：
<script type="text/javascript">
// JS代碼
</script>
>>> Script標籤可以放到頁面的任何位置。
3、引入外部的JS檔案：
<script language="JavaScript" src="js/01.js"></script>
[注意事項]
① <script></script>可以嵌入到頁面的任意位置。但是，位置的不同會導致JS代碼的執行順序不同；
比如： <script></script> 放到<body>前面，則JS代碼會在頁面載入之前就執行；
② 引入外部的JS代碼，<script></script>必須是成對出現的標籤。而且，標籤中不能再有任何的JS代碼。
<script type="text/javascript">
JS中的多行注釋。 Ctrl+shift+/
// JS中的單行注釋。 Ctrl+/
//document.write("<h1 style=‘color:red;‘>薑浩真帥！！</h1>");
【JS中的變數】
1、JS中變數聲明的寫法：
var num = 10; // 使用var聲明的變數，屬於局部變數，只在當前範圍內有效；
num = 10; // 不用var聲明的變數，預設為全域變數，在整個JS檔案中都有效；
var x=8,y,z=10; // 使用一行語句，同時聲明多個變數。 上式中，y屬於已聲明，但是未賦值狀態， 結果為undefined；
[聲明變數的注意事項]
① JS中所有變數的聲明，均使用var關鍵字。 變數具體是什麼資料類型，取決於給變數賦值的類型；
② JS中同一個變數，可以在多次不同賦值時，修改變數的資料類型；
var a = 10; // 從初始聲明是，a屬於整數型；
a = "haha"; // 重複賦值時，整數型的a被修改為字串類型；
③ 變數可以使用var聲明，也可以不使用var聲明。
[區別] 使用var聲明為局部變數，不使用var聲明為全域變數；
④ 只用var聲明，但是不賦值。 結果為undefined；
例如： var a; // a為undefined。
但是，如果不聲明也不賦值的a，直接使用會報錯；
⑤ 同一變數名，可以多次使用var聲明。 但是，後面的var並沒有任何卵用。 第二次在使用var聲明時，只會被理解為普通的賦值操作。
2、 變數名的命名要求：
① 變數名，只能有字母、數字、底線組成；
② 開頭不能是數字；
③ 變數名區分大小寫，大寫字母與小寫字母為不同變數；
3、 變數名的命名規範：
① 要符合小駝峰法則(駱駝命名法)：
首字母小寫，之後每個單詞的首字母大寫；
myNameIsJiangHao √
② 或者使用匈牙利命名法：
所有字母小寫，單詞之間用_分隔；
my_name_is_jiang_hao √
③ mynameisjianghao × 能用，但是不規範。
4、 JS中的資料類型：>>>>>>重點！！！！！！
Undefined： 未定義。 已經使用var聲明的變數，但是沒有賦值。 var a;
Null: 表示空的引用。
Boolean： 布爾類型。表示真假，只有兩個值： true/flase
Number: 數實值型別。可以是正數，也可以是小數；
String： 字串類型。用""或‘‘包裹的內容，稱為字串；
Object: 物件類型，後續講解。。。
5、 【常用的數值函數】
① isNaN():判斷一個變數或常量，是否是NaN(not a num 非數值);
使用isNaN()判斷時，會嘗試使用Number()函數進行轉換，如果最終結果能夠轉為數字，則不是NaN，結果為false。
② Number()函數： 將其他類型的資料，嘗試轉為數值型；
[字串類型]
>>> 字串為純數值字串，會轉為對應的數字； "111"->111
>>> 字串為空白字串，會轉為0； ""->0
>>> 字串包含任何其他字元時，都不能轉； "1a"->NaN
[Boolean類型]
true->1 false->0
[Null/Undefined]
Null->0 Undefined->NaN
[Object]
③ ParseInt(): 將字串轉為整數類型；
>>> 純數值字串，能轉。
"12"->12; "12.9"->12(小數轉化時，直接抹掉小數點，不進行四捨五入)
>>> Null 字元串，不能轉。 ""->NaN
>>> 包含其他字元的字串 ，會截取第一個非數值字串前的數字部分；
"123a456"->123; "a123b456"->NaN
>>> ParseInt()只能轉字串，轉其他類型，全是NaN。
[Number函數與ParseInt函數的區別] >>>>>>重點！！！！！！！
1. Number函數可以轉各種資料類型，ParseInt函數只能轉字串；
2. 兩者在轉字串時，結果不完全相同。(詳見上面解釋)
④ ParseFloat：將字串轉為數值型；
轉換規則與ParseInt相同，只是如果有小數，則保留小數點；如果沒有小數，則依然是整數；
"12.5" -> 12.5; "12"->12
⑤ typeof: 檢測變數的資料類型：
字串->String 數值->Number true/false->Boolean
未定義->Undefined 對象/NUll->object 函數->function
//var num = 11;
//alert(typeof(num));
[JS中常用的輸入輸入語句]
1. document.write(); 將()中的內容，列印輸出到留言器螢幕上；
使用時需注意：除變數/常量外的所有內容，必須放到""中。變數和常量必須放到""外面；
如果同時又變數和字串，必須用+連結；
eg: document.write("左手中的紙牌"+left+"<br/>");
2. alert(); 使用彈窗輸出；
彈窗警告，()中的內容與上述要求相同。
3. promt(); 彈窗輸入；
接受兩部分參數：
① 輸入框上面的提示內容，可選；
② 輸入框裡面的預設資訊，可選；
當唯寫一部分時，表示輸入框上面的提示內容；
可以定義變數，接收輸入的內容。 點擊確定按鈕，變數將被賦值為輸入的內容； 點擊取消按鈕，變數將被賦值為null；
輸入內容時，預設接收的資料類型都是字串！！！！！
【JS中的運算子】
1、算術運算(單目運算子)
+ 加、- 減、* 乘、 / 除、 % 取餘、++ 自增、-- 自減
+：有兩種作用，連結字串/加法運算。當+兩邊全為數字時，進行加法運算，
當+兩邊有任意一邊為字串時，起連結字串的作用，連結之後的結果為字串。
>>>>其他運算子都會自動轉化成數字進行運算，如果轉化不了則為NaN；
/：結果會保留小數點。
【a++和++a的異同】
① 相同點：無論a++還是++a，運算完以後，a的值均會+1；
② 不同點：a++，先用a的值去運算，再把a+1；
++a，先把a+1，再用a+1以後的值去運算。
2、賦值運算
= 賦值 += -= *= /= %=
+=：a+=b；相當於 a=a+b；但是，前者的運算效率要比後者快，所以
推薦使用+=的寫法；
3、關係運算
== 等於、 === 全等、 != 不等、！== 不全等、>、<、>=、<=
>>> 關係運算子，運算之後的結果，只能是Boolean類型；
>>> 判斷一個數字是否處於某個區間，必須用&&連結；
a<10 && a>0 √ 10>a>0 X
>>> ===：嚴格等於；要求不但要類型相同，值也必須相同；類型不同，
結果直接為false；類型相同，再進行下一步判斷；
==：等於；類型相同，與===效果一樣。類型不同時，會先嘗試
將兩邊轉為數字，然後再進行判斷。
但是，有個別特例，如：Null==false X Null==Undefined √
4、條件運算子(多目運算)
a>b?true:false
有兩個重要符號：？和：
當？前面部分，運算結果為true時，執行：前面的代碼；
當？前面部分，運算結果為false時，執行：後面的代碼；
冒號兩邊可以為數值，則整個式子可用於賦值。
冒號兩邊可以直接為代碼塊，將直接執行代碼。
多目運算子可以多層嵌套。
5、位元運算符、 邏輯運算子
&& 與、|| 或、！ 非
&& 兩邊都成立，結果為true。
|| 兩邊有任意一邊成立，結果為true。
6、運算子的優先順序
() 小括弧最高
！ ++ -- 單目運算子
* / %
+ -
> < >= <=
== !=
&& //與和或同時存在時，與比或高
||
= += -= *= /= 最低的是各種賦值
【JS中的分支結構】
【if-else結構】
1、結構的寫法：
if(判斷條件){
//條件為true時，執行if的{}
}else{
//條件為false時，執行else的{}
}
2、注意事項：
① else{}語句塊。可以根據情況進行省略。
② if和else後面的{}可以省略，但是省略{}後，if和else後面
只能跟一條語句(所以，並不建議省略{})；
3、 if的()中的判斷條件，支援的情況：重點！！！！
① Boolean：true為真，false為假。
② String：Null 字元串為假，所有非Null 字元串為真；
③ Number：0為假，一切非0數字為真；
④ Null/Undefined/NaN：全為假。
⑤ Object：全為真。
【多重if、階梯if結構】
1、結構寫法：
if(條件一){
// 條件一成立，執行的操作
}else if(條件二){
// 條件一不成立，並且條件二成立，執行的操作
}else{
// 上述所有條件都不成立時，執行的操作
}
2、多重if結構中，各個判斷條件是互斥的，只能選擇其中
一條路執行，遇到正確選項並執行完以後，直接跳出結構，
不再判斷後續分支；
【嵌套if結構】
1、結構的寫法：
if(條件一){
//條件一成立
if(條件二){
//條件一成立並且條件二成立
}else{
//條件一成立並且條件二不成立
}
}else{
//條件一不成立
}
2、在嵌套if結構中，如果省略{}，則else結構永遠屬於
離他最近的一個if結構。
3、嵌套結構可以多層嵌套，但是一般不推薦超過3層。
能用多重if結構的一般不推薦使用嵌套if。
UI設計基礎知識和JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
