PIXNET Logo登入

聯成電腦-讓你價值連城

跳到主文

聯成電腦痞客邦官方BLOG學習電腦必備秘笈,提供各種學電腦課程作品及聯成電腦評價,學員對電腦課程的學習心得包含手機app 、工業設計、室內設計及電腦證照考試等,是您學電腦課程最佳範本。

部落格全站分類:電玩動漫

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 8月 16 週三 202309:20
  • 聯成電腦快訊:學設計找聯成!全台灣首家Adobe授權培訓中心唯一授權超過27年培訓實績

news-1512 .jpg
圖說:聯成電腦為Adobe授權認證培訓中心
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(426)

  • 個人分類:聯成快訊
▲top
  • 12月 29 週四 202210:00
  • 【Photoshop教學】魔法火焰光效果

article_main_img
文、Andy老師
 
 
大家好,今天要介紹用Photoshop 製作魔法光效,魔法光效製作前需要找一張畫面較暗的照片,這樣較能突顯光的效果,那以下兩張照片,第一張就是製作前,第二張就是製作後,效果如下圖。
 
 
 
 

👉 推薦課程:Photoshop影像處理


 
 
 
製作方法圖層分佈如下,先新增一個資料夾群組,裡面再新增一個漸層對應圖層在最上面,下面在一個空白圖層,用來畫光效,下面再一層填滿黑色的圖層,群組內的圖層模式都是正常,只有群組資料夾的圖層模式是濾色,效果如下圖。
 
 
 
 
漸層對應圖層增加的方法在圖層面板的下方有一個黑白圓形圖示,效果如下圖。
 
 
 
 
接著在雙擊漸層對應圖層的灰色漸層圖示,即可進入漸曾編輯器,再將漸層色新增成為五個色階,顏色可進行設定,建議右邊為最亮色,左邊為最暗色,之後畫光效時,筆刷透明度100為最右邊的顏色,反之,筆刷透明度為0則為最左邊的顏色,效果如下圖。
 
 
 
 
接著在選擇筆刷樣式,筆刷筆頭可以是任何樣式,只要是你要的效果即可,但透明度建議使用筆的壓力來控制,因此畫光效,建議使用繪圖板,這樣透明度才有輕重力道的變化,效果如下圖。
 
 
 
 
接著選擇繪製在黑色圖層上方與漸層對應圖層下方的空白圖層,選擇白色來繪製,若用黑色則顯示不出來,因為他只會用明度來判斷與顯示漸層對應所使用的顏色,效果如下圖。
 
 
 
 
 
設置好之後就可以開始畫了,效果如下圖。
 
 
 
 
再來可以配合橡皮擦來擦除多畫的部分與要擦出特定形狀時所用,效果如下圖。
 
 
 
 
 
最後我使用好幾個圖層來畫光效,因為都畫在一個圖層,要修改不方便,所以我使用數個圖層來繪製光效,並在群組資料夾夾一個遮罩,可以一次修改所有光效的圖層,效果如下圖。
 
 
 
 
就這樣完成魔法光效的照片效果,謝謝觀賞。
 
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(153)

  • 個人分類:講師技術文
▲top
  • 12月 27 週二 202210:00
  • 奇異博士2:失控多重宇宙Drawing

article_main_img
文、耀月老師
 
 
各位同學大家好~
不知道各位看過”蜘蛛人無家日沒有?”
因為奇異博士在裡面讓人印象深刻,所以我將奇異博士畫了出來,希望各位喜歡~^^
 
 
 

使用筆刷:錐形康特筆、炭筆、紋路筆刷、油畫粉蠟筆、數位噴槍、輕柔噴槍、擷取鬃毛筆刷、混色筆-只加水、混色筆-紋路水化等…


 


👉 推薦課程:數位創意電繪設計


 
 
 
1. 首先,我們先使用錐形康特筆將草圖繪製出來,原本我是想畫大一點的上半身,但後來改成大頭照。
 
 
 
 
2. 使用炭筆將背景先隨便墊個顏色即可,後面都可以再更改顏色。
 
 
 
 
3. 使用"數位噴槍”,將博士身上的固有色先全部畫出來,顏色要上實心的筆較利於之後上色。
 
 
 
 
4. 接著使用任何一支筆刷,將臉部的陰影先畫出第一層來,這邊我先從上往下畫起。
 
 
 
 
5. 一邊繪製出人物的陰影和細節,一邊使用”混色筆-只加水”做色塊混色的動作,可以將比較醜的邊緣做混色均勻。
 
 
 
 
6. 畫出人物的蘋果肌…
 
 
 
 
7. 將鼻子的部分畫出立體感以後,接著將嘴唇的地方刻畫出來,並且使用”擷取鬃毛筆刷”,將博士的鬍子慢慢繪製出來。
 
 
 
 
8. 將人物的眼睛細節畫上,整體眼睛顏色是偏藍色、瞳孔是黑色。
 
 
 
 
9. 人物正中間的陰影畫出來以後,因為有背景光的緣故,所以畫出右邊的光線出來。
 
 
 
 
10. 將左右兩邊的背景光都畫出來,讓人物的立體感更為突出。
 
 
 
 
11. 先用深紅色繪製博士身上的披肩,搭配”混色筆-紋路水化”做使用,注意披風的皺摺處顏色會較深。
 
 
 
 
12. 畫好披肩的暗面以後,接著使用亮紅色繪製披肩的亮面,光線是從右方打來的,所以將右邊的亮紅色畫出來。
 
 
 
 
13. 將人物的頭髮繪製出來後就完成了!
看起來是否英姿颯爽呢?
 
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(36)

  • 個人分類:講師技術文
▲top
  • 12月 22 週四 202210:00
  • 【Photoshop教學】用神經濾鏡組合2張照片並協調色調

article_main_img
文、Andy老師
 
 
大家好,今天要介紹用Photoshop 2022版本的神經濾鏡中的協調功能,此功能主要是將要合成的兩張照片的色調自動融合在一起,也就是之前我們要合成時所需要做調色的多個步驟,在2022的版本只需要1個步驟,即可完成兩張照片的顏色調合。
 
 
 

👉 推薦課程:Photoshop影像處理


 
 
 
好的,首先先找一張要合成的照片,我要合成的效果是將以下兩張照片合成在一起,那麼這兩張照片色調是截然不同,合成後必定需要調整飛機的色調,照片如下圖。
 
 
 
 
 
首先先使用物件選取工具,他就放在魔術棒或快速選取工具裡,如下圖所示。
 
 
 
 
接著就是使用Ctrl + J將圖層複製,複製出來的圖層,便可作為去背之用,如下圖所示。
 
 
 
 
接著使用物件選取工具內的套索,將飛機輪廓大致選取起來,便會自動選取中飛機精細的整個輪廓,如下圖所示。
 
 
 
 
 
接著再按下圖層面板的遮色片,即可將飛機圖層加上一個去背遮罩,如下圖所示。
 
 
 
 
接著使用圖層移動工具,將飛機帶遮罩的圖層,按住不放拖曳至背景圖片上,如下圖所示。
 
 
 
 
 
 
所以目前已合成好了,剩下顏色調整,接著來到濾鏡 / Neural Filters…,如下圖所示。
 
 
 
 
之後便會進入Neural Filters(神經濾鏡)面板,從中選擇協調,並打開協調開關,並選擇背景圖層作為要協調顏色的依據,也就是飛機會變成背景的色調,如下圖所示。
 
 
 
 
右邊面板的強度可以調整幅色色調的強度,也就是更加強色調的協調,如下圖所示。
 
 
 
 
再來亮度跟色調都可以自己微調,所以我稍微調一下亮度,調暗一點,和偏黃色一點,並按下確定按鈕,即會生成一張以調整好的飛機色調圖層,如下圖所示。
 
 
 
 
 
如此我們可以看到之前之後的調整效果,如下圖所示。
 
 
 
所以用 神經濾鏡 協調要合成的照片顏色是非常方便的,以上,謝謝觀賞。
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(42)

  • 個人分類:講師技術文
▲top
  • 12月 20 週二 202210:00
  • 【WordPress教學】網站SEO如何做好?Yoast外掛介紹

article_main_img
Photo credit:Pexels
 
 
 
文、kk
 
 
哈囉!我是kk,一個『從事數位行銷十多年,也熱愛幫你透過網路,創造財富』的分享家。
 
搜尋引擎優化(Search Engine Optimization, 以下簡稱SEO)為相對省金錢成本的導流方法。使用SEO外掛將加速操作。進入WordPress後台,點選「外掛」>「安裝外掛」,搜尋「Yoast SEO」。
 
 
 
 
再開啟任一文章,於下方列找到Yoast SEO。可預覽透過手機版和桌機版在Google搜尋引擎上的結果,以利調整版面配置。在SEO標題、Meta描述處用顏色呈現是否符合優化標準,綠色表示符合。
 
 
 
 
另外在SEO分析欄位內,則透過燈號顏色顯示優化程度,綠色為最佳。舉例:圖內顯示內部連結、外部連結為紅字,表示文內可加入其他導入站內外連結來提升優化。但建議外部連結視情況增加,因為好不容易建議的流量,希望還是留在網站上,通常外部連結會是社群媒體等,即使在站外,但仍是和網站有關的內容。其他有關文字長度、關鍵詞長度參閱即可,因為針對文字長度的優化是以拼音系統為主,針對中文不是那麼適合。
 
 
 
 
針對網站上瀏覽較高的網頁,或是覺得相對重要的網頁,可設定為「基石內容」。網站內容越多,越多不同主題,每個主題都可以有基石內容。通常這些網頁可從網站架構和內容看出以下特點:
▶ 比較和特定主題有關,彙整豐富的資訊。
▶ 較不是單純銷售商品和服務。
▶ 在網站上佔據顯著位置。
▶ 類似主題的其他文章都有透過內部連結到基石內容的網頁。
▶ 相關的內部連結數量較多。
 
 
 
 
當文章被設定為基石內容,「SEO分析」和「可讀性分析」會更加嚴格,確保提供高品質的內容給Google搜尋引擎爬蟲抓取。包括但不限於內文字數需要增加、主標和小標,以及內文要提到重點關鍵字,讓邏輯環環相扣。
 
關於「可讀性分析」將協助判斷段落和句子長度,站在使用者的角度來辨識,綠色燈號表示沒有問題。
 
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(7)

  • 個人分類:
▲top
  • 12月 15 週四 202210:00
  • 【Excel教學】實作抽籤機

article_main_img
文、意如老師
 
 
如何從清單中隨機抽出一筆或多筆資料,亂數抽樣產生中獎名單,本篇將實作抽籤程式,隨機抽英文單字當練習題。
 
 

任務一:認識INDEX( )函數


任務二:認識RANDBETWEEN( )函數


任務三:認識ROWS( )函數


任務四:實作應用-抽籤程式-隨機抽英文單字當練習題


  4-1. 準備清單資料


  4-2. INDEX( )、RANDBETWEEN( )與ROWS( )組合應用


  4-3.隨機取出多筆資料


 


👉 推薦課程:Excel財務試算表應用


 
 
 
任務一:認識INDEX( )函數
 
INDEX( )函數會傳回表格或範圍內的某個值或值的參照。
公式:INDEX ( array , row_num, [column_num])
 
參數說明:array為必要參數需代入要參照的範圍。
row_num   取陣列中的列,以從該列傳回值。
(如果省略row_num,column_num為必填)。
column_num    取陣列中的欄,以從其中傳回值。
(如果省略column_num,row_num為必填)。
 
 
應用範例:
準備資料
 
 
 
 
抓出筆電價格公式為=index(A1:B5,2,2)
在A1:B5 範圍內,抓取第二列、第二欄的值,結果為37600
 
抓出手機價格公式為=index(A1:B5,4,2)
在A1:B5 範圍內,抓取第四列、第二欄的值,結果為13000
 
 
 
任務二:認識RANDBETWEEN( )函數
 
RANDBETWEEN( )函數會傳回介於<最小值>與<最大值>兩個數字之間的亂數,最小值跟最大值都只能是整數。
 
公式:RANDBETWEEN ( bottom, top)
 
參數說明:bottom必要參數,為回傳亂數的最小值,資料只能是整數。
top 必要參數,為回傳亂數的最大值,資料只能是整數。
 
應用範例:
資料50-300之間隨意抽取一個數字
公式為:=RANDBETWEEN(50,300)
可以按下 F9 鍵,讓 Excel 重新計算表格中的公式(每一次都可以隨意抽取一個數字)。
 
 
 
任務三:認識ROWS( )函數
 
用於傳回參照或陣列中的列數。
 
公式:=ROWS (array)
 
參數說明:array必要參數為要取得列數的範圍。
 
應用範例:
 
 
取得品名A2到A7共有幾列(幾筆資料)?
=rows(A2:A7)
此結果回傳共 ”6”(列)筆資料
 
取得價格B1到B5共有幾列(幾筆資料)?
=rows(B2:B5)
此結果回傳共 ”4”(列)筆資料
 
 
 
任務四:實作應用-抽籤程式-隨機抽英文單字當練習題
 
4-1. 準備資料(英文單字的清單)



機密




confidential






污染




contamination






化學




chemical






缺陷




defect






影響




impact






改善




improve






檢驗




inspection






禁止




inhibition






批貨




lot






光學




lithography





 
 
 
將此資料輸入到儲存格中(如下圖)
 
 
 
 
4-2. INDEX( )、RANDBETWEEN( )與 ROWS( )組合應用
如果需要從名單中隨機抽一題出來練習,可以使用剛剛所介紹的三個函數INDEX( )、RANDBETWEEN( )與 ROWS( )將其組合起來取得一筆隨機的題目。
 
公式如下:=INDEX(名單範圍,RANDBETWEEN(1,ROWS(名單範圍)))
 
公式解析步驟一:
先使用ROWS( ) 取得總清單的數量共幾筆資料,當作隨機數的最大值
=ROWS(A1:A10)
 
目前結果回傳為”10”
 
 
 
 
步驟二:接著使用RANDBETWEEN()函數,產生一個介於 1 到名單數量之間的隨機整數。
 
輸入公式:=RANDBETWEEN(1,ROWS(A1:A10))
 
回傳亂數介於1-10 之間,目前結果回傳亂數為“3”,按下F9可以取得新的亂數值。
 
 
 
 
最後一個步驟:
使用INDEX()函數取出對應位置的資料
最後再把範圍套進去即可
=Index(範圍,列的位置)
 
完整公式:=INDEX(A1:A10,RANDBETWEEN(1,ROWS(A1:A10)))
 
 
隨機抽取題目已完成囉,如果要重新抽題可以按下按下 F9 鍵,讓Excel重新計算表格中的公式即可。
 
 
 
4-3. 隨機取出多筆資料
 
若要從清單中取出多筆資料,只要將D2的公式往下複製即可產生多筆隨機資料,但要記得下拉前先將範圍資料加上$字號鎖定儲存格範圍。
公式:=INDEX($A$1:$A$10,RANDBETWEEN(1,ROWS($A$1:$A$10)))
 
 
 
 
最後按下F9來更新隨機樣本資料。
 
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(22)

  • 個人分類:職場專欄
▲top
  • 12月 13 週二 202210:00
  • 是誰住在深海的大珊瑚裡?章魚哥

article_main_img
文、Alam老師
 
 
大家好!我是Alam,這一回跟大家分享的繪圖過程是有著輕鬆休閒的3D卡通海底世界,主角是隻窩在海草、海葵及珊瑚間的章魚哥,這張圖的重點在於立體光影的表現以及如何創造出色彩繽紛的海底世界。
 
這是一張刻意表現海床上面的各種生態物種的繪製研究,然後再搭配輕鬆休閒聽音樂的章魚,這樣的畫面就很有趣味性了。光影效果的海底風景畫,看起來好像有點不知從何下手?其實只要事先將下手步驟分解好,要完成這張圖一點都不麻煩!
 
 

本次所使用筆刷:


a. 特效 /漸層平塗筆刷


b. 噴槍/輕柔噴槍


c. 橡皮擦/橡皮擦


d. 特效/發光


e. 畫刀/羽毛筆(間距請調至10%)


f. 照片/模糊


g. 照片/暗化


h. 照片/加入紋路


I. 油畫粉蠟筆/圓頭油畫粉蠟筆(透明度20%,間距10%,色彩濃度90%,色彩混合57%,最小尺寸隨機改變,表現:壓力)


j. 花紋畫筆/遮罩花紋畫筆


k. 特效/膨脹


l. 橡皮擦/柔和漂白


m. 混色筆/只加水


n. 特效/水泡


 


👉 推薦課程:數位創意電繪設計


 
 
 
1. 首先選幾張水面泛著不規則光影的圖片,然後分三個圖層變形縮放在畫面上方。
 
 
 
 
2. 在畫布上灌上一個底部偏暗的水藍底色,然後將上述的參考圖片個別以「重疊」、「強光」等的圖層合成方式來調整出從海面下仰望上去所呈現的水波紋影像,並適度改變各圖層的不透明度,再用橡皮擦輕輕抹去各圖層下緣的邊界區域。
 
 
 
 
3. 現在,我們要先畫出海底的生態背景中所散布的海葵造形與礁岩質感,所以在此要介紹兩枝經過修改調整的筆刷:第一枝是「特效/漸層平頭筆刷」,這枝筆刷主要是利用筆壓大小來控制線條的粗細以及色彩混合度的濃淡。上下兩個極光圖層的透明度,呈現出神秘而朦朧的極光效果。
 
 
 
 
4. 另外一枝是「花紋畫筆/遮罩花紋畫筆」,但首先要擷取如圖下方自行繪製的圖樣成為連續性管狀花紋,這樣的筆刷質感可以輕鬆呈現出有螢光效果的半透明海葵效果!
 
 
 
 
5. 利用上述的兩種筆刷分別畫出崢嶸向上的管狀海葵(頭部加以修飾並注意其透視感),還有右下角讓章魚落腳的礁岩!
 
 
 
 
6. 接著加上前景處的海草,這裡有一個小技巧就是先畫出一株外型輪廓,再加以複製變形和翻轉,然後使用「特效/膨脹」筆刷分別修飾其輪廓,這樣就可以省去很多繁複的描繪工夫。
 
 
 
 
7. 完成海草的顏色層次及立體感,並重新排列布局海草的位置!
 
 
 
 
8. 繼續添加各種珊瑚來豐富海底畫面,在這裡可以選擇「花紋畫筆/遮罩花紋畫筆」,嘗試內建花紋中的「樹幹圍欄」及「纜線」來畫出如樹枝狀的珊瑚結構(也可以如步驟4.中的方法自行設計連續性花紋)。
 
 
 
 
9. 增加「重疊圖層」來為珊瑚上色,並擴充其前後層次感,盡可能的讓海底生態更顯得五彩斑斕!
 
 
 
 
10. 繼續在礁岩上畫出主角章魚哥的基本輪廓和明暗設定!
 
 
 
 
11. 使用「畫刀/羽毛筆」在最後方補上一些朦朧的海草,繼續調整章魚哥的明暗立體質感(這裡可以使用「特效/發光」就能輕鬆處理了),並填充畫面元素間的空隙處!
 
 
 
 
12. 在章魚頭上畫出酷酷的墨鏡(注意立體感及反光)、嘴巴和章魚腳上的吸盤!
 
 
 
 
13. 接下來,用我最常使用的「照片/加入紋路」為章魚外觀加上斑紋,然後加上有畫龍點睛效果的隨身聽。
 
 
 
 
14. 最後,添加上一些水中氣泡和遠方隱約可見的魚群身影,為了畫面的色彩平衡統一,我們可以利用「等化」效果來調整畫面色調與局部明暗,這樣,一個沉醉在海底聽音樂的悠閒章魚哥就完成啦^^。
 
 
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(5)

  • 個人分類:講師技術文
▲top
  • 12月 08 週四 202210:00
  • 好想成為VTuber!Live 2D角色前置作業

article_main_img
文、Simi老師
 
 
上次針對目前主流的兩個骨骼動畫軟體做介紹,就結論來說,如果要做V皮的話還是Live2D比較合適,因此接下來我們就以Live2D為主來做介紹。
 
用Live2D製作動畫大致上的流程為:
角色設定 → 原畫&拆分 → 骨骼綁定&參數調整 → 演出
 
 
 
 
今天主要說明原畫&拆分的部分。
如果將畫風以厚塗和色塊來簡單區分,兩種情形在做拆分時的技巧會略有不同。
 
(厚塗到色塊的風格分析請參閱舊文:關於風格的那些事)
 
 
 
厚塗的情形
 
 
在以厚塗上色的情況下,通常會傾向先依照正常繪圖程序完成原畫,之後再將每個區塊拆解開來,並把原本被遮住的部位補上。但如果有拆起來比較麻煩的部位,還是可能會在畫的時候就分開來處理。
 
由於我的畫風是比較接近厚塗的處理方式,所以也都會在原畫完成後才進行拆分,但是以這張範例圖來說,半透明的彩帶如果事後才做拆分會相當不好處理,所以在作畫時就是分開來做的。
 
 
 
 
先將人物的圖層全部合併(除了彩帶以外),背景圖層可以先隱藏或刪除,如果背景需要在動畫中出現的話,後續做動態時再加上去就好。
 
 
 
拆分時要加所有會產生動態的部位都分開,步驟相當繁瑣,因此接下來我就以遮住身體的頭髮為例,具體說明拆分的步驟。
 
 
 
 
先把髮辮選取起來,這邊我不太會用魔術棒之類的工具來做,推薦用套索框選筆誤見稍大一些的範圍出來即可,並按ctrl+J在原地複製一個圖層。
 
 
旁邊多餘的部位用橡皮擦直接處理。
為了保證邊緣都有處理乾淨,建議加一個跟圖像對比較強的底色來當做檢查色。
 
 
 
 
接著用小筆刷把被擦掉的細節補回去,當然也可以在原畫時省略掉這些細節,等拆分階段時再畫上去。
 
 
 
 
位於底下的軀幹部件則是要補上被頭髮及項圈遮蓋的部分。
 
 
 
 
直接用滴管吸取旁邊的顏色用筆刷修補就可以了。
 
 
 
 
Live 2D的動畫工作流程中,原畫、拆分、綁定、動作等步驟可能為不同的製作者,因此如果遇到被遮蔽的部位就要靠設定圖(如果有),或是腦補的方式來處理了。
 
 
 
 
由於拆分完成的部件相當多,因此務必確實將圖層命名以便確認喔!Live2d只支援英文以及日文的名稱,中文字匯入後會呈現亂碼,務必留意。
除此之外,圖層的透明度、群組等基本屬性是可以在匯入時繼承的,但圖層混和模式或特殊效果則要避免,匯入時才不會發生問題唷!
 
 
 
色塊的情形
 
由於我自己的畫風不是色塊上色,手邊沒有範例,因此我用Live 2D的官方圖來輔助說明。
 
 
 
常見的處理方式是每個部件都用一個資料夾來區隔,每個部位的縣搞跟上色燈分開處理。當然色塊上色想要全部都完稿後再拆也是可以的,沒有對錯之分,只要自己覺得順手即可。
 
 
以上就是關於Live2D原畫以及拆分的介紹,下一次就要教大家如何在Live2D中綁定以及動態的製作囉!
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(18)

  • 個人分類:講師技術文
▲top
  • 12月 01 週四 202210:00
  • JavaScript的型別在TypeScript中認識物件型別

article_main_img
Photo credit:Pexels
 
 
 
文、意如老師
 
 
參考目錄:
第1篇、TypeScript初探篇
第2篇、JavaScript的型別在TypeScript中應用(一)-認識原始資料型別
第3篇、JavaScript的型別在TypeScript中應用(二)-認識物件型別
第4篇、TypeScript物件導向-類別(Class)的使用方式
第5篇、TypeScript物件導向-介面(Interface)的使用方式
 
 
 
JavaScript的型別有兩種,分成原始資料型別(Primitive data types)與物件型別(Object types),原始資料型別介紹請參閱上一篇,本篇即將介紹物件型別與其它常見的型別。
 

任務一:認識物件型別(Object types)


  1-1:認識物件


  1-2:修改物件型別中的值


  1-3:物件可當參數傳遞


任務二:認識鴨子類型(Duck Typing)


任務三:其它常見的資料類型


  3-1:認識Map


  3-2:認識Set


  3-3:認識Tuple元組


 
 
 
任務一:認識物件型別(Object types)
 
1-1:認識物件
物件是由鍵(key)與值(value)組成。值可以是字串、數值、函數、陣列、物件等。
 

var myobject = {


    key1: "mydata", // 字串


    key2: 123,  //整數


    key3: function() {// 函數


        console.log("ABC");


        return "BCD"


    },


    key4:["arr1", "arr2"] //陣列


}


//物件


console.log(myobject)


 


/*{


  key1: 'mydata',


  key2: 123,


  key3: [Function: key3],


  key4: [ 'arr1', 'arr2' ]


} */


 


//物件中的值


console.log(myobject.key1) //mydata


//物件中的函數


console.log(myobject.key3())//ABC BCD//


 
 
 
 
1-2:修改物件型別中的值
注意修改的資料值要與物件中的型別一樣
 

//物件


var myinfo = {


    city: "台北",


    memberid: 123,


    mydata: function () { }


};


//修改物件值


myinfo.city = "高雄"; //資料要與物件中的型別一致


myinfo.memberid = 999;


//修改屬性值


myinfo.mydata = function () {


    console.log("Hello:" + myinfo.city); //hello 高雄


    console.log("Memeber:"+myinfo.memberid);//Member:999


};


//呼叫物件中的函數


myinfo.mydata();


 
 
 
 
1-3:物件可當參數傳遞
物件也可以當作一個參數傳遞給函數Function
 

//物件也可以當作一個參數傳遞給函數Function


var fruit = {


    fruit1: "Apple",


    fruit2: "Kiwi",


};


var buy = function (obj: { fruit1: string, fruit2: string }) {


    console.log("水果1 : " + obj.fruit1);//水果1 :Apple


    console.log("水果2 : " + obj.fruit2);//水果2 :Kiwi


}


buy(fruit);


 
 
 
 
任務二:認識鴨子類型(DuckTyping)
 
鴨子類型是動態類型的一種,也是多態(polymorphism)的一種。
 

//鴨子類型DcukTyping


interface ISize {


    width: number


    height: number


}


//(代入參數型別):return型別


function addPoints(box1: ISize, box2: ISize): ISize {


    var w = box1.width + box2.width


    var h = box1.height + box2.height


    return { width: w, height: h }


}


//呼叫型別並把參數代入


var newPoint = addPoints(


    { width: 10, height: 35 },


    { width: 25, height: 41 }


)


console.log(newPoint); //{ width: 35, height: 76 }


export { }; //使用 ES Module


 
 
 
 
任務三:其它常見的資料類型
 
3-1:認識Map
Map是ES6中新引入的一種新的類型,使用鍵(Key)值(Value)儲存資料
任何值都可以作為鍵(Key)或一個值(Value)。
 
 
 
使用 Map類型時需要使用new 來建立Map資料
 

//MAP 類型


var myMap = new Map([


    ["key1", "value1"],


    ["key2", "value2"]


]);


 


console.log(myMap);//Map(2) { 'key1' => 'value1', 'key2' => 'value2' }


 
 
 
 
因Map 是 ES6 中新引入的一種新的類型,編譯時需要使用es6來編譯
指令:tsc - -target es6 t4.ts
執行:node t4.js
 
 
 
Map常用函數及屬性
 

//Map常用函數及屬性


var mycitymapping = new Map();


//設定 Map鍵(key)值(value)


mycitymapping.set("台北", 1);


mycitymapping.set("新竹", 2);


mycitymapping.set("高雄", 3);


console.log(mycitymapping);//Map(3) { '台北' => 1, '新竹' => 2, '高雄' => 3 }


//抓取對應的value


console.log(mycitymapping.get("高雄"));// 3


//判斷是否有該鍵(key)


console.log(mycitymapping.has("新竹"));// true


console.log(mycitymapping.has("宜蘭"));// false


//Map大小


console.log(mycitymapping.size);// 3


//删除高雄


console.log(mycitymapping.delete("高雄"));// true


console.log(mycitymapping);//Map(2) { '台北' => 1, '新竹' => 2}


//移除 Map


mycitymapping.clear();


console.log(mycitymapping);//{}


 
 
 
3-2:認識Set
Set 陣列值是唯一不重複
 

//set


var mySet  = new Set ( [ 1 , 2 , 2 , 4 , 4 ] ) ;


console.log(mySet);//Set(3) { 1, 2, 4 }


 
 
 
 
3-3:認識Tuple元組
陣列中資料通常來說類型是一樣的,如果需要存取的類型不同,就需要使用Tuple元組,也可以做為參數傳給函數。
 

//元組資料可以儲存不同類型


var mytuple = ["John",32];


console.log(mytuple)//[ 'John', 32 ]


console.log(mytuple[0])//John


console.log(mytuple[1])//32


console.log("長度:"+mytuple.length)//2


mytuple.push("ABC")//新增一個元素


console.log(mytuple)//[ 'John', 32, 'ABC' ]


console.log(mytuple.pop()+" 刪除了")//刪除最後元素


console.log(mytuple)//[ 'John', 32 ]


mytuple[0] = "Mary"//更新元素


console.log(mytuple)//[ 'Mary', 32 ]


 
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(3)

  • 個人分類:講師技術文
▲top
  • 11月 29 週二 202210:00
  • 網友激推!美味夜市小吃烤魷魚畫作

article_main_img
文、耀月老師
 
 
各位同學大家好~
想必各位在夜市最常看到的小吃攤就是”烤魷魚”了吧?
今天就教各為如何繪製一隻看起來香噴噴、又美味的烤魷魚!!
 
 

使用筆刷:錐形康特筆、輕柔噴槍、數位噴槍、混色筆-只加水、混色筆-紋路水化、帶有紋路的筆刷、噴槍-粉狀噴濺等…


 


👉 推薦課程:數位創意電繪設計


 
 
 
1. 首先,我們先拿出錐形康特筆來繪製魷魚的草圖,就找一隻你可能曾經吃過又拍下來的烤魷魚繪製即可XD
 
 
 
 
2. 接著使用數位噴槍+輕柔噴槍來繪製背景的花花綠綠,這邊隨意畫出一些光斑、墊個底色在下方即可。
 
 
 
 
3. 使用數位噴槍來繪製烤魷魚的底色,這邊我使用帶紅色的咖啡色繪製,因為烤魷魚有一點點偏暗紅色。
 
 
 
 
4. 使用慣用的筆刷(看是用噴槍、或其他筆刷都可以)搭配混色筆-紋路水化來繪製烤魷魚白白的部分。
 
 
 
 
5. 將烤魷魚白白的部分依照上述方法大略的繪製一遍即可,後面都能再做修正。
 
 
 
 
6. 將烤魷魚中間烤紅的部分補上暗紅色,畫的時候要注意是白白的部分的內裡唷!因為考魷魚烤熟後會蜷縮起來,所以畫上暗紅色讓魷魚看起來凹進去的感覺。
 
 
 
 
7. 將烤魷魚的周圍畫出黑黑的燒焦的感覺,讓魷魚看起來更真實更香。
 
 
 
 
8. 將焦黑的部分分布在魷魚白白的地方,讓白色的部分烤熟後擁有焦香的感覺,並且將魷魚串在上方的魷魚腳上的吸盤用白色點綴出來。
 
 
 
 
9. 用白色點綴出魷魚的油亮感,並且沒有規律性的畫上增香的芝麻。
 
 
 
 
10. 芝麻的部分可以使用”數位噴槍”、或"細節噴槍”來做繪製與點綴,畫的時候沒有什麼規律性,可以讓芝麻灑多一點感覺更香一點^^
 
 
 
 
11. 撒上一堆芝麻以後,可以用”粉狀噴濺”筆刷,讓整體看起來更美味更好吃,並做出一些魷魚身上的質感。
 
 
 
 
12. 最後將整體顏色調整偏黃色,看起來就更有夜市的味道,並且在後面繪製出一些攤販的感覺,夜市烤魷魚就完成囉!看起來是不是超好吃呢^^?
 
 
 
(繼續閱讀...)
文章標籤

聯成電腦 發表在 痞客邦 留言(0) 人氣(1)

  • 個人分類:講師技術文
▲top
12...267»

.

最新文章

  • 聯成電腦快訊:學設計找聯成!全台灣首家Adobe授權培訓中心唯一授權超過27年培訓實績
  • 【Photoshop教學】魔法火焰光效果
  • 奇異博士2:失控多重宇宙Drawing
  • 【Photoshop教學】用神經濾鏡組合2張照片並協調色調
  • 【WordPress教學】網站SEO如何做好?Yoast外掛介紹
  • 【Excel教學】實作抽籤機
  • 是誰住在深海的大珊瑚裡?章魚哥
  • 好想成為VTuber!Live 2D角色前置作業
  • JavaScript的型別在TypeScript中認識物件型別
  • 網友激推!美味夜市小吃烤魷魚畫作

_