文、Raymond老師 「你先建一下環境,然後看看還有什麼問題」 踏入新公司的第一天,你拿到了公司發的筆電,你的主管或mentor在簡單跟你介紹了部門狀況以後,丟下了這句話就先去忙了,此時你可能會有點疑惑,「建環境」究竟應該要先做什麼?難道你可以把公司的電腦變得像你自己在用的個人電腦一樣嗎?這方面我想各個公司應該都有更為細部的資安規定,在開始建立你自己的開發環境前,務必要先把規則搞清楚,才不會踩到公司規定的雷區。 在確認好公司內規定後,通常就可以開始進行所謂的環境佈建,對所有的工程師來說這是必備的技能,越是資深的工程師在開發時可能會同時運用到的工具也可能隨之增加,而多年累積的個人習慣也會影響到開發的效率,這部分的細節甚至可以延伸到編輯器的快捷鍵等等,而本文則會著重在開始網頁開發前可能碰上的一些狀況進行闡述。 建立你自己的開發環境 假設你拿到的是一台什麼都沒有的空白電腦,除了那些你自己個人習慣使用硬體所需要的驅動程式以外,必定需要的東西還有三個:git、瀏覽器、Node.js,git的部分在前一篇已有提過便不在此處多加贅述,接下來讓我們聚焦其餘兩個對於網頁開發十分重要的工具上。 網頁瀏覽器 現今的網頁瀏覽器可說是功能十分強大,以目前較為大宗的Google Chrome或是Firefox,在他們各自的開發者工具中基本上都可以做到即時的調整網頁樣式、監控網頁發生的各種網路請求、分析JavaScript上的程式錯誤等等功能,但對於網頁工程師來說,瀏覽器還有一個最重要的功能,那就是實際反應用戶的所見所用,不同瀏覽器或不同裝置載體所呈現的狀況可能都不盡相同,這也是許多新手常常忽略的重點之一,開發前就該先確認好用戶的使用環境狀況,並在自己的開發環境中選用所需的瀏覽器,才更能貼合用戶的去開發與設計,著迷於新語法卻忽視了相容性也是新手常常踩到的雷點之一,現在也有不少網站整理了瀏覽器相容性的資料,如Mdn Web Docs或是CanIUse等等,都是在開發時值得去複查的資源。 圖片來源:caniuse Node.js 很多新手工程師會將Node.js單純理解為「讓 JavaScript 可以在server也run起來」的工具,但實際上它所衍伸出來的生態已經不止於此,其中最讓大家愛不釋手的工具之一便是Node Package Manager,也就是俗稱的npm,這讓開發者們可以輕易的站在巨人的肩膀上,功能橫跨前後端甚至檔案處理等等,一般來說,npm會跟著電腦上的Node.js一起自動安裝好,如果專案中有package.json的檔案便可以使用npm相關的指令進行安裝、更新、改動等等的動作,也因此安裝Node.js便會是建環境時不可忽略的步驟。 而此處也是有許多新手工程師會碰到的另外一個障礙處:我究竟要安裝哪個版本的Node.js,對於這個問題筆者必須直接說,請直接詢問你的主管或mentor以確保自己是安裝正確的版本,雖然在大多數情況Node.js都是可以向下兼容的,往最新的穩定版裝通常都不會有問題,但以防萬一還是務必先詢問好才不會踩到奇怪的雷點,安裝時請直接在Node.js查詢安裝途徑即可,不同的OS會有不同的安裝方式,好好閱讀官方文件也是作為工程師必備的技能。 圖源:nodejs 另外若有餘力,筆者也十分推薦使用nvm這個Node.js版本管理工具,因為在公司內往往不會只維護開發單一的專案,在不同專案底下選擇最適配的版本也更能讓自己順利開發。 說了這麼多也許有些人會納悶,這些東西裝完我還是沒辦法開始開發啊,平常我習慣使用的VSCode去哪裡了?編輯器就不重要嗎?由於編輯器本身是一個非常個人化的工具,若以通用性而言個人認為並不是最優先的項目,但也不代表編輯器就不重要,之後再和大家介紹目前較為流行的IDE以及部分輔助工具,若想要了解或學習更多網頁設計知識,歡迎填寫下方表單預約了解課程。 ⭐點我加入官方LINE,獲得第一手最新消息⭐ FB粉絲團:https://www.facebook.com/lccnetzone YouTube頻道:https://www.youtube.com/@Lccnet-TW 痞客邦Blog:http://lccnetvip.pixnet.net/blog
文、士正老師 你有沒有想過,遊戲裡的角色、電影裡的場景、甚至你家裡的家具,其實都是「點、線、面」組合而成的?在3D世界裡,這些點、線、面的組合方式,我們稱之為多邊形(Polygon)。 什麼是多邊形編輯? 簡單來說,多邊形編輯建模就是用「點(Vertex)、線(Edge)、面(Face)」來拼湊出3D形狀。在3D軟體裡,我們可以把3D模型「切塊」,並自由拉動、擠壓、裁切,進行調整,讓它變成任何形狀!還可以把它們黏在一起、分開,就像在玩積木一樣。 我們可以先從簡單的形狀開始,像是立方體、球體,然後用多邊形編輯來改變它們的形狀,接著再調整每個多邊形的角度、位置,讓模型的細節更豐富,最後還可以把不同的多邊形組合成一個複雜的模型,就像拼圖一樣,超有成就感! 充滿點Vertics,線Edges,以及面Polygons的多邊形物體 3ds Max的多邊形編輯Editable poly工具 為什麼3ds Max的多邊形建模這麼受歡迎?因為它靈活、自由,適用範圍超廣!不管是建築、角色、產品設計,甚至動畫場景,幾乎都用得上!它的優點有操作直覺、功能強大;靈活性高,適用各種模型需求;適合細緻雕刻與工業設計;此外3ds Max的多邊形建模可以無縫對接ZBrush、Maya、Blender等其他軟體,讓建模流程更加有效率。 以下是3ds Max提供了一堆超好用的工具,讓你輕鬆編輯多邊形: 1. 擠出(Extrude) 把多邊形拉長,做出立體的造型。 使用擠出Extrude功能,做出多方向的方塊 2. 倒角(Bevel) 讓多邊形的邊緣更圓滑,看起來更順眼。 使用倒角Bevel功能,讓邊緣不會顯得那麼銳利 3. 焊接(Weld) 把兩個多邊形黏在一起,變成一個更大的多邊形。 焊接Weld功能可以將兩個點融合成單一個點 4. 切割(Cut) 把多邊形切成更小的多邊形,方便你做更精細的調整。 善用切割Cut工具,就能更創造出更複雜的造型 5. 橋接(Bridge) 將兩邊分開的多邊形,讓它們連接起來,適用於做通道等外型。 橋接Bridge功能不管在做隧道、做一條彎曲的管子、或者連接角色的手臂與身體都分常重要 如何更快上手多邊形編輯? 首先,要從簡單的形狀開始練習,像是立方體、球體,慢慢掌握各種工具的用法。再來,要多觀察現實生活中的物體,看看它們的形狀是怎麼組成的。最重要的一點,就是要多練習,不要怕失敗,從錯誤中學習。 同學可以應用學到的幾個基礎的多邊形建模工具,來試著用這些工具做出簡單的3D物件,比如: ✅做一張桌子(用Box + Extrude) ✅做一把椅子(用Editable Poly + Bridge) ✅做一個簡單的房間(用Inset + Extrude) ✅做一個杯子(用Chamfer + Extrude) 多邊形建模的關鍵,就是多練習、多嘗試,把各種工具組合起來,你會發現3D世界其實很簡單! 結論 多邊形編輯是3ds Max裡面超重要的一環,學會它,你就能做出各種你想要的模型。多邊形編輯最有趣的地方就是它的自由度很高,你可以盡情發揮你的創意,做出各種奇形怪狀的東西。而且,當你看到一個模型從無到有,慢慢成形的時候,真的很有成就感。 雖然多邊形建模聽起來很簡單,但要真正掌握Editable Poly,其實沒那麼輕鬆!同學可以能會遇過以下的問題:擠出(Extrude)時,形狀歪七扭八?橋接(Bridge)了,結果面不對齊?做了一個模型,結果面數太高,電腦卡死?這些坑,新手幾乎都會踩,而且網上教學雖然多,但很多重點沒講清楚,或者看了影片還是不知道問題在哪。這時候,有專業老師帶,真的差很多!目前聯成電腦皆有開辦3ds Max的Editable Poly和多邊形建模相關的課程,可以到各聯成分校像櫃台老師詢問,以了解更多細節喔! ⭐點我加入官方LINE,獲得第一手最新消息⭐ FB粉絲團:https://www.facebook.com/lccnetzone YouTube頻道:https://www.youtube.com/@Lccnet-TW 痞客邦Blog:http://lccnetvip.pixnet.net/blog
文、Raymond老師 「你能想像一年後的你在做什麼嗎?」 對許多嚮往成為工程師的人來說,學習技術本身只是一種手段,我們最終的目的都是希望可以拿到一份薪資符合預期、工作環境優良的offer,然而一旦你踏進了公司大門成為員工時,我們所面臨的往往是層出不窮的需求以及被deadline追著跑的壓力,也許公司會給你適應的時間或是有mentor可以帶你,但有些人也是到這個階段才發現,這跟他想像中的似乎不太一樣。 因此這系列的主軸便如標題所說,我們會模擬一名工程師從錄取到可以獨當一面,在各個階段中可能會碰到的問題或挑戰,由於筆者本身也是網頁工程師,所以我們將會以junior網頁工程師的角度去進行這個系列。 歡迎入門 在經過一場場技術考驗與面試之後,你終於成功踏入工程師的職場大門,雖然在兩週後才要進到新公司工作,但兢兢業業的你仍然想要先做一點準備,好讓自己能快速地適應這第一份工程師工作,那麼問題來了,要是只能選一個必定要在工作前先做好準備或是熟悉的技術,那麼會是什麼呢?讓筆者來選的話,肯定非git莫屬。 什麼是git,為什麼需要它? 對於一個剛入門且可能只有一到兩個side project的junior前端來說,即便有用過git可能也只是把它當作一種可以存放程式碼紀錄的倉庫而已,甚至會認為GitHub就是git本身, git的重要之處在哪,大致可以用三個方向去描述: 1. 歷史記錄的追蹤 使你的程式碼有跡可循,更方便去進行回溯與修正。 2. 多人協作 使多名開發者可以同時工作,彼此不會干擾。 3. 安全性 只要有金鑰或存取權,便能隨時還原遠端倉庫中的內容。 git其實就像一位給程式碼專案用的秘書,只要你在專案中加入這位秘書後,他就會開始幫你記錄你專案中的增修刪改,這也就是第一點提到的追蹤功能,而後兩者都需要有遠端倉庫的存在才能使其發揮效用,最普遍大宗的便是GitHub這個平台,若要進行練習,你需要做的就是在你的電腦中裝上git工具,並找一個遠端倉庫去實作。 多人協作中使用git的要點? 相信在網路就能找到許多關於git的教學,包含從安裝到基本指令該如何操作都已經十分萬全了,但對於新手來說,最缺乏的經驗肯定是多人協作,尤其是對在學習階段時獨立開發side project的人而言,branch merge rebase等等概念基本上也不好想像,這邊就針對多人協作的部分再多延伸一些內容。 如同先前所說,git其實就像一個程式碼秘書,他將你手上的專案歷程記錄都保留了下來,那麼再想像一個情境:今天專案本身是一本書,主管拿著這本書複印了兩份影印稿以後,分配給你跟你的同事,主管要你們分別處理第一章節與第二章節的錯字校對,於是你們各自回去處理工作,過了一週後你們完成了工作並將影印稿交給了主管,主管此時必須把這兩份修正好的影印稿內容合併回他手上的這本書中,於是他將影印稿丟給了秘書請他處理,秘書好好的比對了這兩份文件後發現,由於你初來乍到,不小心搞錯了範圍而導致你處理的範圍跟同事有了重疊,於是秘書回頭來問你們究竟該以哪份為主,你跟同事討論一番後得出了結論,秘書也因此可以好好的完成合併比對的工作。 而有基本git概念的你肯定很快就發現了其中的要點,兩份影印稿代表的便是你與你同事各自從原書(master)中開立出去的分支(branch),而中間你們可能會做一些同步(pullpush),最終秘書在處理的便是這些影印稿的合併(merge),那麼他比對到了內容有差異或衝突(conflict)時,你跟你同事就得決定誰的版本才是正確(rebase),最後達成一致以後才能提交出去。 每個團隊處理git的workflow肯定都不盡相同,但只要先有了基本概念,後續要去釐清整個流程中的步驟都不是難事,最怕的就是一知半解,嚴重者甚至可能會造成整個專案被錯誤的合併覆蓋,在多人協作時請一定要特別小心,若想要更了解網頁設計,歡迎填寫下方表單預約諮詢課程喔~ ⭐點我加入官方LINE,獲得第一手最新消息⭐ FB粉絲團:https://www.facebook.com/lccnetzone YouTube頻道:https://www.youtube.com/@Lccnet-TW 痞客邦Blog:http://lccnetvip.pixnet.net/blog
文、Andy老師 大家好,這次要示範的是illustrator裡面的漸層工具,漸層可做出各式效果,希望藉由這次案例讓大家了解漸層的用法,那麼先看一下完成圖。 首先先選擇 畫圓工具。 在 填色 欄位選擇漸層。 接著選擇漸層工具。 同時在漸層面板,可以選擇漸層的顏色。 並且可使用漸層工具,來拉出所要的漸層方向。 接著再用相同的方法畫一個帶有漸層色彩的圓形,並將此圓移至第一個小圓的後方。 再來使用 物件 漸變 製作 ,這個指令就會讓這兩個圓,連接後產生漸變。 如此,這兩個圓中間就生出一個連接的圓。 再來要讓漸變的圓變多,因為目前只有一個圓,看起來漸變的並不順,因此我們再來到 物件 漸變 漸變選項。 就會跳出漸變選項面板,此面板就可輸入數值來增加圓的數量,這樣兩個圓的漸變就非常順暢。 如此我們再畫第三個圓。 再來要將第三個圓,融合至之前的圓,可以直接從圖層面板,移動第三個圓的圖層,到漸變圖層裡的最下方。 如此就將第三個圓,與之前的圓融合。 再來新增第四個圓。 一樣將第四個圓的圖層,移至最下層。 再來新增一個方形漸層當背景。 並且將圖層移至最後,在選中方型背景的情況下,按右鍵 排列順序 移至最後。 如此我們就有背景了。 接著選擇 網格漸層 工具。 接著在背景方形上點擊,增加四個點。 而這每一個點,都可以用白箭頭工具選取,並且可以改變該點的顏色與位置。 改變點的位置就可以形成不同形狀的漸層。 再來使用文字工具來打字。 接著在右鍵 建立外框,才能對文字做漸層。 接著到漸層面板,選擇漸層圖案,並選擇漸層的顏色。 此時選擇漸層工具,會出現漸層方向,若要改變漸層方向,可使用漸層工具來改變。 若要改變漸層顏色也是可以的。 最後我們就完成此漸層製造了,謝謝觀賞。 ⭐點我加入官方LINE,獲得第一手最新消息⭐ FB粉絲團:https://www.facebook.com/lccnetzone YouTube頻道:https://www.youtube.com/@Lccnet-TW 痞客邦Blog:http://lccnetvip.pixnet.net/blog
文、冠緯老師 在影音串流平台蓬勃發展的現在,相信大家都看過不少3D動畫吧!像迪士尼、皮克斯、夢工廠等等都是美國有名的動畫大廠,從1995年的第一部電腦動畫長片「玩具總動員」到現在30年的期間,出產了許許多多經典的動畫電影,相信這些電影也是感動了不少人吧! 其實3D技術的應用到了現在,除了一般動畫,也廣泛使用在各種真人電影、戲劇當中,可說是跨足了所有影視相關產業的技術了。不曉得大家是否好奇過,這些3D動畫是如何產出的呢?今天就來跟大家介紹3D動畫的製作過程。 圖片來源:PIXAR 在影視產業中,無論是動畫、電影、戲劇,基本都是在劇本、美術、分鏡或拍攝完成後,才會正式進入到3D製作的環節,在3D動畫的製作中,通常有分幾種不同類型的專業部門,從頭到尾分別是「1.Asset(資產)、2.Rigging(骨架)、3.Animation(動態)、4.FX(特效)、5.Lighting(燈光)」,類似工廠的生產線。雖然製作上有先後順序,但它並不是絕對的線性生產,而是每個環節相互緊扣,在製作過程中會反覆來回,因此各個部門互相配合是非常重要的!接下來就來簡單瞭解各個部門主要的工作內容吧。 1. Asset(資產) Asset部門的工作者就是所謂的3D模型師,主要負責3D建模、材質貼圖、毛髮等等,製作各種供動畫使用的3D素材,依照前期的美術設定,製作出各種精美的角色、壯闊的場景、吸睛的道具。大家在大螢幕上看到的3D物件都是出自Asset部門的手中。 (3D建模) (貼圖繪製) 2. Rigging(骨架) Rigging部門的工作者我們稱為骨架師,在前面有了精美的角色及道具後,就需要賦予骨架能讓它動起來,骨架師常常是被觀眾忽略,但是卻十分重要的存在,因為在大螢幕中,觀眾看不到3D角色身上的骨頭和控制器,但能讓角色擺出帥氣動作或自然的表演,骨架綁的好壞決定了非常大的因素。 (綁骨架) (設定控制器) 3. Animation(動態) Animation部門的工作者我們稱為動畫師(animator),在角色或道具有了骨架能夠動時,就需要這些3D動畫背後的隱藏演員,在電腦中使用帶有骨架控制器的角色做出精彩的表演,大螢幕上帥氣的動作、表情中透漏的情緒轉換,都是出自動畫師們的手中。 (簡單的機翼動態) 4. FX(特效) FX部門的工作者我們稱為特效師,為了讓畫面更真實或更有魄力,這時就需要特效師了,往往動畫中的煙霧、火焰、破碎等等畫面都是特效師們傑作,負責處理各種複雜而且需要利用電腦模擬運算產生的效果,畫面裡各種超現實的酷炫效果也都是特效成品。 影片來源:Framestore 5. Lighting(燈光) Lighting部門的工作者我們稱為燈光師,在結合了角色、場景、表演、特效後,最後就能進入打燈的環節了,是個讓前面各部門努力一起開花結果的部門,無論在動畫、實拍當中,燈光都是決定成品好壞的關鍵因素,因此燈光師必須有強大的美感,打出各種符劇情情緒的燈光後,還需設置各種算圖設定,確保成品能順利產出。 (電腦算圖出來的結果) 其實在燈光後還有一個工作環節是Compositing(合成),但合成就屬於2D的工作環節,該篇就先不介紹了。以上就是3D動畫製作上主要流程,希望大家看完都能更瞭解3D動畫的製作,若想學習更多可以填寫下方表單預約諮詢課程。 ⭐點我加入官方LINE,獲得第一手最新消息⭐ FB粉絲團:https://www.facebook.com/lccnetzone YouTube頻道:https://www.youtube.com/@Lccnet-TW 痞客邦Blog:http://lccnetvip.pixnet.net/blog
🆓文生圖Bing Image Creator教學
今年最火紅的AI究竟能做到什麼呢?能讓所有人實現幻想的即是「文生圖」,不管您是誰,那怕從來沒認真拿筆畫圖過的人,都可以產生漂亮的作品,是不是相當的讓人期待!
本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策。