哩老師
29 位追蹤者
現職：精誠資訊 恆逸教育訓練中心 專任多媒體設計 資深講師
專長：精通多媒體網頁視覺設計、平面設計與多媒體整合應用、Photoshop影像處理、網站視覺設計、Illustrator向量繪圖、Animate動畫效果設計、Dreamweaver網頁互動效果、Dreamweaver資料庫整合及RWD等。
由新到舊
為你的網站加上網址列小圖示ICON這樣的小Icon，其是就是所謂的「favicon」，副檔名為「.ico」，如果你有自己架站，想替自己的網站換個屬於自己風格的網站ICON，請先準備好一張64*64的透明背景PNG-24格式小圖。
STEP1.
至https://www.aconvert.com/tw/icon/png-to-ico
2020-05-13
1
jQuery Prettyphoto 影像互動瀏覽提供快速建立可自動撥放與 前後切換顯示大圖的瀏覽方式，且大圖周 圍將以半透明圓角矩形的效果呈現。
STEP1.
開啟範例練習檔dw12.html與dw12-prettyphoto.html，在dw12.html點取原內容區影像（尺寸為600x410）並直接刪除。
至dw12-prettyphot
2020-05-13
0
Slideshow互動式影像切換播放提供快速建立可自動撥放與互 動控制的大圖瀏覽方式，除了播放控制外，下 方將包含小圖的快速瀏覽切換。
STEP1.
開啟範例練習檔dw11.html與dw11-imageslideshow.html，點取dw11.html原內容區影像（尺 寸為690x500）並直接刪除。
至dw11-images
2020-05-13
1
Spry Image Slideshow影像投影片播放提供快速建立可自動撥放控制的大圖瀏覽方式，像投影片撥放的方式可以暫停與前後往返播放控制。
STEP1.
開啟範例練習檔dw10.html與dw10-imageSlideShow.html。在dw10.html點取原內容區影像(尺寸為 635x410)並直接刪除。
至dw10-imageSlide
2020-05-13
0
jQuery cycle 影像自動播放效果可快速加入包含多樣自動影像播放效果，準備好與要加入內容區相同尺寸的多張影像即可。
STEP1.
開啟範例練習檔dw09.html與dw09-jQueryCycle.html， 在dw09.html內刪除原內容區影像。
再至dw09-jQueryCycle.html內直接複選並貼入所需 CSS 與
2020-05-13
0
jqzoom 局部放大檢視影像此擴充元件提供圖片另外一種瀏覽的方式，即是以滑鼠移動檢視局部放大的瀏覽效果，只要準備小圖與放大圖，即可快速加入此效果於頁面上。
STEP1.
開啟範例練習檔dw08.html，再新增一空白檔案為 dw08-iframe.html，為要插入『jqzoom』元件。直接由dw08-jqzoom.html
2020-05-12
0
水平滑動切換顯示內容可應用在 AP 元素(DIV)內的影像水平滑動切換，搭配巢狀 AP 元素(DIV)與內嵌式頁框，媲美 Animate 互動瀏覽影像效果。
A.加入 AP DIV 於頁面上
在 Dreamweaver 中，要加入 AP DIV 除了設定 CSS 外，更簡單的方式是使用繪製 AP DIV 工具，
2020-05-12
0
互動局部捲動內容區網頁除了自動捲動的文字方式外，還可以製作出更捲動控制的內容，當滑鼠在捲動按鈕上時，內容就會互動捲動，這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置，當無法固定位置時（如頁面置中），就需要藉由內嵌式頁框的方式與版面整合。
STEP1.
開啟範例練習檔，已經處理完成版面內容的水平置中，內
2020-05-12
1
影像瀏覽切換顯示影像瀏覽除了播放與控制播放外，最完美的還需要可以點圖直接開啟顯示大圖，接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件，由小圖切換瀏覽圖片，按下小圖，相對應大圖會在旁顯示。
STEP1.
開啟「dw05.html」檔，由切割存出的HTML 檔，左側空白處為要插入小圖與切 換右側大圖的
2020-05-12
0
影像播放控制影像播放的效果，除了自動播放影像，本擴充元件是一個可以設定停止播放與繼續播放影像的效果，還可以是直接選擇要顯示的圖片，只要設定行為在按鈕上來控制影像播放即可，且每張播放的圖片皆可設定獨立連結位置，唯需要注意正確搭配DIV標籤。
STEP1.
開啟「dw04.html」檔，由切割存出的HTML 檔，影
2020-05-12
1
單欄式內頁框版面與頁面連結內頁框來表現網站內頁，最適合的就屬單欄式的頁面設計，可在不捲動到頁面內容的狀態下， 只在內容區局部捲動捲軸瀏覽內容，讓網站內頁有不一樣的表現方式。
A.建構初始頁面
STEP1.
開啟「dw03.psd」為預先設計與切割完成的畫面，其中切片編號11 的範例要加入內嵌頁框內容，該區域內容可以捲動瀏覽。
2020-05-12
0
iFrame 內頁框版面切割與應用iFrame 內頁框版面是可於頁面上任何可安排內容的區域，如任意表格、儲存格之內均可安排尺寸固定的局部捲動瀏覽內容，讓使用者可單獨瀏覽頁面局部內容，版面安排上也更為靈活， 尤其是安排特殊瀏覽互動效果時亦為不可或缺的重要技巧。
STEP1.
在 Photoshop 中開啟「dw02.psd」為預先已在
2020-05-12
0
內頁版面切割與編排對於網站內頁，尤其是左右分欄的內頁版面，同樣也是設計好版面之後，經由Photoshop切割後儲存成HTML頁面，再到Dreamweaver中處理設定，以完美呈現頁面內容，包括滑鼠變換影像按鈕，以及內頁的龐大頁面內容資料加入版型版面後，需保持版面的完整。
STEP1.
在Photoshop中開啟範例
2020-05-12
0
在Dreamweaver中連結MySQL資料庫SETP1.
開起Dreamweaver，執行【網站>新增網站】定義使用PHP 的網站，除設定『本機網站資料夾』外，於『伺服器』設定中，設定『伺服器連線方式：本機/ 網路』、『伺服器資料夾』，按下『進階』設定『伺服器式：PHP MySQL』。
STEP2.
連結資料庫，新增空白練習頁面並儲存檔案，
2020-05-11
0
Dreamweaver CC的資料庫相關功能A.安裝Dreamweaver CC的資料庫擴充元件
Dreamweaver CC的資料庫相關功能介面，均需使用者自行安裝擴充元件來加入，請利用【PVII Extension Manager CC】安裝，請至網站下載:
http://www.projectseven.com/products/ex-
2020-05-11
0
PHP環境的安裝與設定A. 安裝APPSERV
至官網下載https://www.appserv.org/en/ 最新版本APPSERV8.6.0並直接安裝:
安裝完包含預設五個資料夾:
請於【www】內加入網頁內容，預設首頁index.php。
於瀏覽器網址輸入【localhost】即可檢視到預設的首頁:
B.
2020-05-11
0
僞元素變動尺寸透明背景圖框表格背景圖為由Photoshop設計並切割成上、中、下，在左右切割成左中右共九張圖，中間部位請設計為單色內容，四邊請設計為可重複延伸內容，並注意每個切片圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。
四邊與四角共八個背景的設定，需安排三個搭配before、after設定出四邊四角圖框，第四層安排中
2020-05-11
0
僞元素固定尺寸透明背景圖框表格背景圖為由Photoshop設計並切割成上、中、下三張圖，左邊與右邊框需設計為可直向重複延伸，請注意圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。
首先設定類別【.fixed-width】，以安排上邊圖，設定設定背景圖為上邊圖、不重複，注意左右padding值(80)+寬值(220)須等於圖寬
2020-05-11
0
僞元素彩色多層邊框當跟 CSS 選取器匹配的元素底下的內容要做些特殊處理時，就可以利用偽元素來幫我們做到一些效果，如邊框與背景圖。其中【::before】 在元素之前插入某些內容與【::after】在元素之後插入某些內容，在進階 CSS 效果中算是很特別的，而且製作 RWD 頁面上效果時也常可以用到。
首先新增類別【
2020-05-11
0
僞元素CSS彩帶首先由標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。
加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。
最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的
2020-05-11
0
僞元素-多種 CSS 對話框樣式首先請加入串聯該CSS檔:
接著套用類別型態的CSS即可:
若需要修改請至該CSS檔修改CSS屬性即可:
【檢視範例】【下載範例】
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
2020-05-11
0
僞元素容器多背景利用::before以及::after做出重疊多個背景，甚至多個邊框的效果。
由css3 【content】生成內容，content一般和::before,::after一起使用，用來生成內容，content的內容一般可以為以下四種：
none： 不生成任何值；
attr： 插入標籤屬性值；
ur
2020-05-11
1
僞元素content 插入其他ICON與文字符號A.自訂編號清單
STEP1.
首先設定li基本屬性內容，再利用counter-increment: title1; //新增一自訂增加編號計數依據。
再藉由::before加入content:搭配【list-style-type】的值配合字串設計出中文項目符號。 如// content:"第"c
2020-05-11
0
甚麼是偽元素 (pseudo-element)甚麼是 CSS 的偽元素 ?看到「偽」這個字就可以猜想的出來，偽元素就表示這個元素是假的、不存在的、不真實的。他不像,,…這些元素，只要打在 HTML 文件裡，就可以在瀏覽器看到他們，但是偽元素不同，就算你在HTML文件輸入或是… 瀏覽器也不會理你的，而是要在CSS內加入設定的。
因此簡單來說，當跟
2020-05-11
0
CSS的大於(>)、加號(+)、取代符號(~)有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？
A.大於符號(>)
大於(>)就是選取底下直接的子元素。
以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：
使用空格的情況
.box p{ font-size:20px; color
2020-05-06
0
CSS選擇器的優先權順序CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。
A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連)
元素內的(行內)樣式
例子：
頁面內的樣式(崁入樣式)
例子：
外部載入(串連)
例子：
B.後設定>前設定
最後設定的樣式將蓋過之前設定的樣式
例子：
2020-05-06
1
Margin、Padding單行寫法單行寫法時，設定值可以是四個依序間隔、三個依序間隔、二個依序間隔與單個值，請注意所代表的個別方向值。
1. Margin(或padding) : 上 右 下 左；(四個值不同)
2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)
3. Margin(或padding
2020-05-06
0
網頁文字單位－pt、px、%、em、rem網頁的文字單位大致上分成: pt、px、%、em、rem
pt、px為最常見的，屬於絕對單位；%、em、rem則為相對單位。
%單位的算法：
預設網頁上的文字大小為16px=12pt，
假如設定font-size: 75%，意思就是將預設文字大小改成：16 X 0.75=12px
假如設定font-
2020-05-06
2
Illustrator CC可愛人物臉部漸層造型STEP1.
首先選取到要成為臉的二橢圓進行『相加』並填上漸層，使用漸層工具調整漸層位置與範圍。
接著繼續為要成為頭髮與耳朵的橢圓填上漸層，同樣使用漸層工具調整漸層位置與範圍。
STEP2.
繼續為要成為眼睛的橢圓進行填色，二漸層橢圓的漸層中心，外部的較靠下方、內部的較靠上方，讓眼珠顏色更有層
2020-02-20
0
Illustrator CC人物表情特寫繪製STEP1.
選取到頭部外側圓形，複製並貼至上層一份；複選二圓形並進行『分割』解散群組，選取到中央臉型圓形，複製並貼至上層一份，選取到一份臉型圓形與分割線，進行『分割』並解散群組，獲得上邊流海與下邊臉部。
STEP2.
選取到臉部下半圓與長橢圓進行『上剪下』，即刪去多餘部分只留下臉二邊的頭髮部分
2020-02-20
0
Illustrator CC繪製猴子角色正面STEP1.
開啟範例練習檔，選取身體輪廓複製並貼至上層成二份，複選身體與分割依據線條進行路徑管理員『分割』並解散群組，即可進行填色，最底層完整身體元件請設定筆畫與『變數寬度描述檔』。
STEP2.
複選構成頭部的三大妥圓與二小橢圓，進行路徑管理員『相加』，複製、貼至上層此頭部元件成為二份；同樣
2020-02-20
0
Illustrator CC 繪製飛奔乳牛STEP1.
開啟範例練習檔，使用直接選取工具調整身體尾部輪廓，複選二身體構成大橢圓執行路徑管理員『分割』並解散群組，刪去上方身體外的多餘元件。
複選三斑點妥圓與身體二橢圓元件，執行路徑管理員『分割』並解散群組，刪去上方身體外的多餘元件，進行填色完成身體部分。
STEP2.
複選前腳元件與中央
2020-02-20
0
Illustrator CC 繪製3D翻轉加油機Step1.
在Illustrator開啟練習檔，右側多邊型即是要建立3D物件使用，左側圖是要成為物體的貼圖內容。請點取右側多邊型型物件，執行『效果 > 3D > 突出與斜角』，勾取預視設定角度：-25、-25、-10，透視：85、突出深度：120，按下確定完成基礎立方體。
Step2.
點取左
2020-02-20
0
Illustrator CC 繪製立體數字轉盤Step1.
在Illustrator開啟練習檔，右側同心圓圈與旋轉直線即是要建立3D物件使用，左側與上方數字是要成為3D立體轉盤的貼圖內容。請仔細複選到右側大圓與所有旋轉直線（不含內圓）執行『物件 > 即時上色 > 製作』，使用即時上色工具於扇型區域依序填上紅色與黑色相間。
Step2.
選取
2020-02-20
0
Illustrator CC 繪製3D球元件STEP1.
首先依序建立要成為貼圖的四個符號，點取要製作立體球的白色半圓，執行『物件 > 3D > 迴轉』，設定角度依序為-20 、-25、-10，按下『較多選項』設定光源，新增第二個光並加大環境光:90%、反白大小:100%、漸變階數:256，按下確定完成3D球。
STEP2.
複製球成二
2020-02-20
0
Illustrator CC翻轉3D方塊Step1.
在Illustrator開啟練習檔，左側矩型即是要建立3D立方體使用，右側六個圖是要成為立方體六個面的貼圖內容。請點取左側矩型物件，執行『效果 > 3D > 突出與斜角』，勾取預視設定角度：-35、-30、140，透視：80、突出深度：210，按下確定完成基礎立方體。
Step2.
2020-02-20
0
Illustrator CC 3D文字STEP1.
點取已經建立外框的文字，執行『效果 > 3D > 突出與斜角』，設定『突出深度：40 pt』，按下確定。點取建立的3D突出與斜角，執行『物件 > 擴充外觀』，將3D突出與斜角效果實體化。
STEP2.
使用魔術棒工具，點取文字正面部分，加上漸層填色，線性淺橘色至橘色。
使用漸層工
2020-02-20
0
Illustrator CC漸變路徑應用Step1.
準備所需要的物件，文字、圓圈與多邊型，其中要成為漸變路徑的圓圈已經以剪刀工具剪出小缺口。
Step2.
使用漸變工具按下漸變的第一個箭頭物件，再按下第二個箭頭物件，完成第一組漸變，複選漸變群與圓圈路徑，準備來替換漸變路徑。
複選漸變群與圓圈路徑，執行『物件 > 漸變 > 取代旋
2020-02-20
0
Illustrator CC即時上色繪製元件STEP1.
開啟範例檔，選取中央直線並執行『物件 > 變形 > 旋轉』設定旋轉角度：10按下拷貝，再繼續按下『Ctrl』＋『D』複製變形複製出所有旋轉10度的直線。
STEP2.
複選所有物件執行『物件 > 即時上色 > 製作』建立即時上色狀態，使用即時上色油漆桶進行上色。
STEP3.
選
2020-02-20
1
Illustrator CC人物剪影構圖STEP1.
在PHOTOSHOP中開啟範例，使用『魔術橡皮擦』工具直接點取背景來去除背景，由圖層控制版上設定『透明鎖定』，在執行『編輯 > 填滿 > 黑色』將影像填滿黑色。
STEP2.
依序使用矩型選取工具框選影像並拷貝，至ILLUSTRATOR貼上，點取影像執行『視窗 > 影像描圖』，開啟
2020-02-20
1
Illustrator CC效果花STEP1.
開啟範例練習檔，使用放射網格工具於畫面上按一下設定『寬 / 高：300 px、同心圓分隔線數量：5、放射狀分隔線數量：0』繪製出放射狀網格，並解散群組；選取到所有圓圈執行『物件 > 路徑 > 增加錨點』增加一次錨點。
STEP2.
不設定筆畫顏色，均加上放色狀三色漸層，搭配中央深色
2020-02-20
0
Illustrator CC馬賽克點狀文字效果STEP1.
開啟範例練習檔，依序設定文字筆畫為『白色10pt、黑色10pt、黑色20pt、黑色40pt、黑色60pt』。
STEP2.
依序選取每一份文字與方框線，執行『物件 > 點陣化』設定為解析度：螢幕；再依序選取選取每份內容執行『物件 > 建立物件馬賽克』設定『拼貼數目：50、結果：灰階
2020-02-20
0
Illustrator CC圓點馬賽克影像效果STEP1.
開啟範例練習檔，更改影像尺寸為寬高400 px，執行『物件 > 建立物件馬賽克』，設定『新尺寸 / 寬高：400 px、拼貼數目寬高：40、勾取刪除點陣圖』，完成以影像建立馬賽克。
STEP2.
執行『物件 > 解散群組』，再執行『效果 > 轉換為以下形狀 > 橢圓』，設定『絕對尺
2020-02-20
0
Illustrator CC漸層場景與漸層元件STEP1.
開啟範例練習檔，首先針對天空與雲朵填上漸層，注意漸層方向與範圍。對於山坡部分包含三層，為了填色完整，因此對於淺色區域需要有獨立的色塊，所以需要藉由路徑管理員的『交集（保留重疊）』產生，請選取山坡物件複製並貼至上層，再加選上方物件進行交集處理，即可在不挖剪下方物件情況下處理出上方重疊區
2020-02-20
0
Illustrator CC漸層填色場景STEP1.
開啟範例練習檔，首先針對天空與草地填上漸層，注意漸層方向與範圍。選取要成為山坡的半橢圓，執行『物件 > 路徑 > 增加錨點』，並連續執行數次增加足夠錨點。
STEP2.
可依序選取半橢圓，執行『效果 > 扭曲與變形 > 粗糙效果』設定尺寸約2%、細部約30-50創造出不規則鋸齒邊緣
2020-02-20
0
Illustrator CC極簡風漸層場景STEP1.
開啟範例練習檔，首先針對以簡單形狀物件構成的山坡與天空填上漸層色，均使用線型漸層，注意漸層填色的範圍與方向，請以漸層工具稍作調整。
STEP2.
雲朵部分是由多個圓圈所構成，請依序選取到每個雲朵部分的圓圈，進行路徑管理員『相加』並填上白色即可，稍作尺寸變化排列在天空即可，加上山坡上
2020-02-20
0
Illustrator CC漸層魔術棒STEP1.
繪製35x340與35x210px矩型，對齊置中二物件。選取外側大長方形執行『效果 > 風格化 >圓角』設定圓角半徑：15px。
STEP2.
分別填入適當的漸層顏色完成魔術棒並組成群組，移動略微旋轉魔術棒角度，使用漸層工具調整背景漸層的中央位置。
STEP3.
繪製一圓形並填入
2020-02-20
0
Illustrator CC 路徑管理員繪製插圖STEP1.
開啟範例練習檔，分別繪製所需的二圓角矩型（735,545,30 / 700,500,30）與一垂直直線（500,90）於檔案範圍內。
選取到二圓角矩型與直線，在對齊控制版上設定對齊至：『對齊工作區域』，完成置中於檔案範圍內對齊，並填上二圓角矩型的填色。
STEP2.
點取中央直線
2020-02-20
0
Illustrator CC相加與相減運算構圖STEP1.
準備等寬度的二橢圓與長方形，移動下方橢圓直徑與長方形下邊接合處，複選二形狀進行『相加』接合。
STEP2.
依序填上漸層顏色，側面請填上三色的線性漸層，上方大橢圓亦是填上線性漸層，並使用漸層工具調整漸層填色。
STEP3.
選取將要進行旋轉複製的圓圈，使用旋轉工具，按住『Alt』
2020-02-20
0
Illustrator CC 旋轉再次變形構圖STEP1.
首先繪製中央黃色刻度，請選取黃色長方形，使用旋轉工具，按住『Alt』移動旋轉中心至參考線中心上，於跳出的選轉設定面版上設定旋轉角度：-12.5，按下『拷貝』，再繼續按下『Ctrl』+『D』旋轉複製出所有刻度線。
STEP2.
選取左側白色長方形，使用旋轉工具 ，按住『Alt』移動旋
2020-02-20
0
在 Dreamweaver CC 中建立 Bootstrap 4 空白頁面在 Dreamweaver 中要根據 Bootstrap 架構建立 HTML 檔案，可以選擇全新建立一組有著 Bootstrap 架構的檔案，或直接使用現有的檔案來修改。例如在Dreamweaver 中建立檔案後，使用【插入】面板加入 Bootstrap 組件，如收合式面板和導覽列等。
1.新增一個
2020-02-20
0
Photoshop CC 透視玩合成Step1.
開啟範例練習檔，路徑控制版上有三份路徑，請依序建立選取範圍由箱子圖層上複製貼上箱子的三個面，依序為蓋子、左面、右面。
Step2.
向下移動左面右面讓下角與下方箱子角銜接，點取左面圖層按下『Ctrl』『T』任意變形，按住『Ctrl』滑鼠在左側中間編輯點上垂直向下變形，讓左下角與下方
2020-02-19
0
Photoshop CC 製作霓虹燈效果Step1.
開啟範例練習檔，新增圖層1填入白色，複選白色與文字圖層並合併圖層，執行『濾鏡 > 模糊 > 高斯模糊』設定強度：4像素。
Step2.
執行『影像 > 調整 > 色階』調整左右控制點至中央，讓文字邊緣模糊部分實體化，使用魔術棒工具選到所有文字內容，新增空白霓虹燈圖層，執行『編輯 >
2020-02-19
1
Photoshop CC 製作可見光源效果Step1.
開啟範例練習檔，新增圖層1填入黑色並設定圖層不透明度：85%，為圖層1建立空白遮色片，使用筆刷尺寸：200、不透明：15%、黑色，修淡中央燈範圍附近。
Step2.
以路徑建立選取範圍，新增圖層光於燈之上，並填入黃色至透明的線性漸層，由燈中央向右下角填入漸層。
再使用多邊型套索
2020-02-19
1
Photoshop CC 製作側面倒影Step1.
開啟範例練習檔，依序經由路徑控制版上路徑轉換為選取範圍，複製貼上側面、前輪、後輪、前面、前側面，並移動至汽車之下。
Step2.
前輪與後輪均執行『變形 > 垂直翻轉』並任意變形旋轉其方向至適合角度，側面圖層同樣垂直翻轉使用任意變形，移動變形編輯中心至前輪旁尖端處，再按住『Ctr
2020-02-19
0
Photoshop CC 製作產品倒影Step1.
開啟範例練習檔，複製香檳色相機圖層為『香檳色倒影』，更改圖層順序至香檳色之下，執行『物件 >變形 > 垂直翻轉』，為香檳色倒影圖層建立空白遮色片，在遮色片編輯狀態之下，使用黑至白線性漸層，由倒影下方至上填入漸層，完成倒影淡出的效果，設定圖層不透明度：50。
Step2.
開啟範例練
2020-02-19
0
Photoshop CC 製作正面倒影Step1.
開啟範例練習檔，複製人物圖層為『人物倒影』，更改圖層順序至人物之下，執行『物件 >變形 > 垂直翻轉』，為人物倒影圖層建立空白遮色片，在遮色片編輯狀態之下，使用黑至白線性漸層，由倒影下方至上填入漸層，完成倒影淡出的效果。
Step2.
複製畫框圖層為『畫框倒影』，更改圖層順序至畫框
2020-02-19
0
Photoshop CC 製作牆上的影子Step1.
開啟範例練習檔，複製人物圖層為『人物陰影』，更改圖層順序至人物之下，並點取使用『鎖定透明』，填上黑色，向右移出陰影；取消人物陰影圖層的透明鎖定，執行『濾鏡 > 模糊 > 高斯模糊』設定模糊強度：3像素。
Step2.
略向右下移動人物陰影，使用矩型選取工具選取牆角以上的人物陰影內容
2020-02-19
0
Photoshop CC 製作金屬獎章Step1.
開啟範例練習檔，切換至色版控制版，確定Alpha 1為作業狀態下，將Alpha 1 色版複製為Alpha 1 拷貝；按住Ctrl鍵，滑鼠左鍵單響Alpha 1拷貝，置入選取區。
Step2.
確定點選Alpha 1 拷貝為作業狀態下，執行[ 濾鏡 > 模糊 > 高斯模糊 ] 設定強
2020-02-19
0
Photoshop CC 製作木刻效果Step1.
開啟範例練習檔，顯示木紋圖層，並加上圖層樣式斜角和浮雕，設定尺寸：15像素。
接著暫時隱藏木紋圖層，並選取到整個標誌，至色版控制版上，新增Alpha 1並貼上複製的標誌，即獲得黑白的標誌。
Step2.
回到RGB圖層上，顯示並選取木紋圖層，再到色版上按住『Ctrl』建議Alph
2020-02-19
0
Photoshop CC 製作拼圖質感Step1.
開啟範例練習檔，若無法見到參考線請執行 [ 檢視 > 顯示 > 參考線 ] 顯示參考線。使用矩型選取工具，依參考線建立矩型選取區。執行 [ 編輯 > 定義圖樣 ]將選取區內的內容定義為圖樣。
Step2.
開啟欲製作拼圖的圖檔，切換到色版控制版新增Alpha 1，使用油漆桶工具，選
2020-02-19
0
Photoshop CC 繪製紙質物件風格Step1.
開啟範例練習檔，圖層資料夾Set1為使用矩型工具與線段工具繪製之紙張紋路，為練習方便在路徑控制版中已包含本範例所需的物件形狀路徑，均由繪圖工具組繪製，也可自行繪製。
設定前景色為#FEBD63，新增圖層1，使用矩型繪圖工具、繪圖方式選擇填滿像素，繪製5*5像素之小正方形於左下角，並
2020-02-19
0
Photoshop CC 繪製紙張質感效果Step1.
開啟500X500像素、解析度72、背景白色之RGB新檔，使用鋼筆工具，上方工具設定列上選擇繪製路徑。首先在版面右下角邊點一下建立起始節點，接著在如圖位置上按住左鍵建立第二個節點並拖拉出路徑彎曲控制線，調整路經彎曲如圖後放開滑鼠左鍵。
Step2.
按住Alt滑鼠點取第二個節點，使
2020-02-19
0
Photoshop CC 製作斜線條紋圖樣１. 細條紋
STEP1.
開新檔案，設定尺寸為3X3像素、背景內容透明之透明背景新檔。放大檢視至最大狀態，使用鉛筆工具，選擇1像素之筆刷樣式、設定不透明：100%，前景色為黑色。
STEP2.
使用鉛筆直接繪製要成為圖樣的內容，繪製後並執行『編輯 > 定義成圖樣』，定義細長斜條圖樣。
S
2020-02-19
0
Photoshop CC 無接縫圖樣Step1.
在photoshop中執行[ 檔案> 開新檔案 ] 設定寬度：100像素、高度：100像素、背景的內容為白色，開啟要製作連續背景圖的新檔。
使用「自訂形狀工具」，選擇所要繪製的圖案、像素格式，在圖層控制版上新增圖層1，設定前景色為灰色（可依喜好更改），直接在檔案中間點一下滑鼠，由設
2020-02-19
1
Photoshop CC 場景組合合成由不同場景的圖，藉由去背景處理與局部變形，重新處理組合成一完整的合成場景。
Step1.
開啟範例練習檔，分別為三個不同場景的影像，要合成為同一個場景圖。
Step2.
首先在第一張場景圖之中，使用魔術橡皮擦工具，設定容許度：30、勾選「連續的」，在天空背景處按下滑鼠，清除天空背景。
Step
2020-02-19
1
Photoshop CC 像素構成人物影像效果Step1.
開啟範例練習檔，為寬高50像素之圖檔，執行『影像 > 影像尺寸』更改寬高為5000像素（100倍），並選擇影像重新取樣為『最接近像素（保留硬邊）』，如此影像放大後即有馬賽克色塊影像效果。
Step2.
開啟要成為圖樣的檔案（尺寸200像素正方），執行『編輯 > 定義圖樣』，回到主要
2020-02-19
0
Photoshop CC 消失點合成應用Step1.
開啟範例練習檔，透視參考線圖層為透視角度參考依據，目的是要將人物依據準確的透視角度來複製合成。
複製人物圖層成人物拷貝，點取人物拷貝圖層，按下『Ctrl』『T』任意變形，移動變形中心至透視參考線交叉點上，滑鼠由左下角編輯點按住『Alt』固定中心等比例縮小，按下Enter確認變形。
2020-02-19
0
Photoshop CC 破碎區塊文字Step1.
開啟範例練習檔，為文字圖層加上斜角浮雕效果，設定樣式：內斜角、技術：雕鑿硬邊、尺寸：43像素、光澤輪廓選擇如圖、亮部模式不透明：52％。
Step2.
新增圖層1，按住Ctrl、滑鼠點取文字圖層建立文字選取區，執行 [ 選取> 修改> 擴張]選取區擴張2像素，同樣在選取區內填入#8
2020-02-19
0
Photoshop CC 製作塑膠壓克力文字Step1.
開啟範例練習檔，為黑色文字轉為點陣之圖層與背景，文字圖層可隨意更改。隱藏文字圖層、新增圖層1，並填滿白色；按住Ctrl、滑鼠點取文字圖層建立文字選取區，並在選取區內填入黑色，Ctrl+D取消選取。
Step2.
點取圖層1，執行 [ 濾鏡 > 模糊> 高斯模糊 ]設定高斯模糊強度7
2020-02-19
0
Photoshop CC 製作石質刻字Step1.
開啟範例練習檔，至色版控制版上新增Alpha 1色版，執行『濾鏡 > 演算上色 > 雲狀效果』，在Alpha 1色版上製造黑白雲狀；繼續執行『濾鏡 > 雜訊 > 增加雜訊』設定『總量：6%、高斯』在雲狀上加上一些雜點。
Step2.
繼續執行『濾鏡 > 演算上色 > 雲彩效果』，在
2020-02-19
0
Photoshop CC 移置濾鏡創造材質A.石牆上的油漆畫
Step1.
開啟範例練習檔，點取背景牆壁圖層執行『影像 > 調整 > 去除飽和度』成黑白，複製背景牆壁圖層至最上方。
Step2.
點取上方牆壁圖層，設定國旗與上方黑白牆壁圖層混色模式為『實光』，即可獲得牆壁上漆圖案的效果。
B.石牆上的不規則油漆畫
Step1.
開啟範
2020-02-19
0
Photoshop CC 製作熱火文字Step1.
開啟範例練習檔，為使用選取範圍刪除圓左上角之後的形狀。執行 [ 濾鏡 > 模糊 > 放射狀模糊 ]模糊總量：50、模糊方式：迴轉、品質：最佳。
Step2.
執行 [ 濾鏡 > 模糊 > 動態模糊 ]角度：0、間距：10像素。
Step3.
複製圖層1為圖層1拷貝，再執行 [
2020-02-19
0
Photoshop CC 製作炫光文字STEP1.
開啟範例練習檔，按住Ctrl滑鼠點取文字圖層建立文字選取區，按下色版控制版下方『儲存選取範圍成為色版』按鈕，將選取區儲存為Alpha 1，Ctrl+D取消選取。
Step2.
回到圖層控制版，在文字圖層上執行 [ 濾鏡 > 模糊 > 高斯模糊 ] 強度：5 像素，按住Ctrl滑鼠點
2020-02-19
0
Photoshop CC 製作光暈星光Step1.
開啟範例練習檔，是一個在漸層背景上繪製自訂形狀的檔案。請直接執行「濾鏡」→「模糊」→「放射狀模糊」，總量：100、模糊方式：縮放、品質：最佳，將圖案進行放射狀模糊。
Step2.
執行「濾鏡」→「濾鏡收藏館」→「素描」→「鉻黃」，設定細部：10、平滑度：4，藉由鉻黃濾鏡表現出科幻影
2020-02-19
0
Photoshop CC 液化濾鏡煙霧應用Step1.
開啟範例練習檔，新增圖層1，使用筆刷工具，設定筆刷大小約100、不透明約30％，繪製白色筆畫作為煙霧製作的來源，筆畫塗繪約有煙霧方向與濃淡。
Step2.
確定點取圖層1，執行 「濾鏡」→「液化」，進入影像液化變形編輯視窗。
在檢視選項中，勾取「顯示影像」、「顯示網紋」、「顯示背景
2020-02-19
0
Photoshop CC 製作濾鏡效果煙霧Step1.
開啟500X500像素、解析度72之RGB新檔，背景並填入黑色。新增圖層1，使用多邊型套索工具，繪製類似如圖之多邊型圖案。
Step2.
使用加亮工具，筆刷：65、範圍：亮部、曝光度：50％，加亮影像邊緣。再使用加深工具，筆刷：65、範圍：陰影、曝光度：50％，加深影像內部。
S
2020-02-19
0
Photoshop CC 製作水底情境效果利用濾鏡效果與其他功能整合應用，可以製作出水底情境與水中泡泡的效果。
1.水底場景
Step1.
開啟範例練習檔，新增圖層1，設定前景色為黑色、背景色為白色，執行[ 濾鏡 > 演算上色 > 雲狀效果]產生黑白雲狀，複製圖層1為圖層1拷貝。
Step2.
點取圖層1拷貝圖層，Ctrl+T自由變形，
2020-02-19
0
Photoshop CC 製作水中冰塊Step1.
開啟範例練習檔，鎖定冰塊圖層，在灰色塊上使用加深與加亮工具塗繪出亮區與陰影區，邊緣處也需要稍作加深。
Step2.
取消冰塊圖層鎖定透明，執行『濾鏡>濾鏡收藏館 > 藝術風 > 塑膠覆膜』設定亮部強度：20、細部：15、平滑度：15。
Step3.
針對完成的冰塊圖層設定混色模式
2020-02-18
0
Photoshop CC 彩虹與閃電效果Ａ.加入彩虹
Step1.
開啟範例練習檔，新增圖層1於上方，並使用漸層工具由上至下填入線性黑至白漸層，設定此圖層混色模式為『線性加深』，即可加深天空。
Step2.
使用漸層工具，由漸層樣版中選擇加入『特殊效果』漸層，即可加入彩虹漸層範本，開啟漸層編輯器，點取左上方灰色透明編輯點，設定其位置：
2020-02-18
0
Photoshop CC 製作螺旋光暈效果Step1.
開啟500X500像素、解析度72之RGB新檔，背景並填入黑色。執行[ 濾鏡 > 演算上色 > 反光效果] 設定光源中心於中央、亮度135％、鏡頭類型：50-300釐米變焦。
Step2.
執行[ 濾鏡 > 風格化 > 風動效果 ] 設定方法：蜿蜒、方向：從右方；再執行[ 濾鏡 >
2020-02-18
0
Photoshop CC 製作夢幻紋理Step1.
開啟500X500像素、解析度72之RGB新檔，背景並填入黑色。設定前景色為白色、背景為黑色，執行[ 濾鏡 > 演算上色 > 雲彩效果 ] 產生黑白雲狀，並重複執行二次。
Step2.
執行[ 濾鏡 > 濾鏡收藏館＞素描 > 畫筆效果 ] 設定筆觸長度：15、亮度/暗度平衡：50、
2020-02-18
0
Photoshop CC 製作科幻材質Step1.
開啟500X500像素、解析度72之RGB新檔，背景並填入白色。執行 [ 濾鏡 > 紋理 > 粒狀紋理 ]設定強度：100、對比：100、粒子類型：垂直。
Step2.
確定前景色為黑色，執行 [ 濾鏡 > 藝術風 > 霓虹光 ] 設定光暈大小：5、光暈亮度：20、光暈顏色為#54
2020-02-18
1
Photoshop CC 綠幕毛髮去背合成Step1.
開啟範例練習檔，至色版控制版上檢視各色版內容，可發現綠色版色調對比最明顯。
Step2.
執行『影像 > 運算』將來源1與來源2都設定為綠色版、使用『實光』混合模式，運算結果為新增色版至Alpha 1色版。
Step3.
確認點取Alpha 1色版，執行『影像 > 調整 > 色階
2020-02-18
0
Photoshop CC 色版與套用影像指令去背Step1.
開啟範例練習檔，至色版控制版上檢視各色版內容，可發現綠色版色調對比最明顯，請複製綠色版為『綠拷貝』遮色片。
Step2.
紅色版上的背景與頭髮有明顯的輪廓，因此可以結合綠色版與紅色版，確認點取綠拷貝色版，執行『影像 > 套用影像』設定來源色版：紅、混合：實光。再一次執行『影像 >
2020-02-18
0
Photoshop CC 簡易色版毛髮去背Step1.
開啟範例練習檔，至色版控制版上檢視各色版內容，可發現藍色版色調對比最明顯，請複製藍色版為『藍拷貝』遮色片。
Step2.
執行『影像 > 調整 > 曲線』增加三個調整控制點，左下邊與右上邊二控制點分別向右與向左移動調整、中間灰色調略微向右移，讓色版影像黑白色調分明。
Step3.
2020-02-18
0
Photoshop CC 色版與影像去背合成Step1.
開啟範例練習檔，至色版控制版上檢視各色版內容，可發現藍色版色調對比最明顯，藍色版中的鐘塔與雲層的色調差異最為明顯，複製藍色版為『藍拷貝』遮色片。
Step2.
選取『藍拷貝』遮色片，執行『影像 > 套用影像』，設定『色版：藍、混合：加深顏色』，將藍色版加深至藍拷貝色版，讓遮色片內的
2020-02-18
0
Photoshop CC 進階調整選取範圍邊緣毛髮去背Photoshop提供新的『調整邊緣選項』，利用「調整邊緣」選項，您可以提高選取範圍邊緣的品質，並在不同的背景下檢視選取範圍，更輕鬆地進行編輯，尤其是在選取不規則毛髮邊緣影像時，唯獨影像背景儘量避免太複雜或與主要影像太相近。
Step1.
使用『快速選取工具』建立選取範圍，可以選取外圍背景區，並繼
2020-02-18
1
Photoshop CC 遮色片編修合成對於輪廓較不清楚或複雜的影像，希望與其他影像自然合成時，可以藉由套索工具建立初步選取範圍，再建立遮色片並加上高斯模糊濾鏡，以筆刷編修遮色片控制局部影像顯示隱藏的方式，是可以適時應用於影像合成中的技法。
Step1.
開啟範例練習檔，畫面中的城堡影像，因為邊緣複雜，使用路徑去背不易，也因為背景與主要
2020-02-18
0
Photoshop CC 遮色片與模糊濾鏡應用在影像合成上使用遮色片編輯，除了他的隨時可編輯性之外，建立的遮色片還能夠使用濾鏡來更改遮色片的邊緣效果，其中遮色片加上高斯模糊，讓遮色片邊緣模糊而成為可即時控制的邊緣羽化效果，是影像合成中很重要的技法。
Step1.
開啟範例練習檔，檔案中的圖層1影像內容，目的可以與背景影像搭配，而圖層1上的影像
2020-02-18
0
Photoshop CC 路徑去背合成應用藉由不同影像素材間的影像去背，重新組合處理與編輯，完成由各自獨立影像合成的效果。
Step1.
開啟範例練習檔，分別為三個不同場景的影像，要合成為同一個場景圖。
Step2.
使用筆形工具建立影像輪廓路徑，按下『載入路徑作為選取範圍』按鈕，將路徑轉換選取範圍，執行「編輯」→「拷貝」。
Step
2020-02-18
0
Photoshop CC 影像透視平面上的仿製印章修圖對於透視平面上不規則範圍的影像，同樣有仿製印章工具，提供透視平面上不規則範圍的影像仿製修復。
Step1.
開啟範例練習檔，直接執行「濾鏡」→「消失點」，開啟消失點設定視窗。使用「編輯平面工具」，直接調整已事先建立的平面（使用「建立平面工具」，依序在要處理的透視平面建立平面的四端點）。調整時注意
2020-02-18
1
Photoshop CC 仿製透視平面上的影像消失點功能除了可以在透視平面上，以正確的透視角度貼圖之外，還能夠在透視平面上直接以正確透視角度來仿製透視平面上的影像，讓透視平面上的影像處理更自然。
Step1.
開啟範例練習檔，直接執行「濾鏡」→「消失點」，開啟消失點設定視窗。使用「建立平面工具」，依序在要處理的透視平面（牆）建立平面的四端點
2020-02-18
0
Photoshop CC 消失點-在立體透視平面上貼圖「消失點」可簡化含有透視平面的影像中的編輯作業。 您可以使用「消失點」指定影像中的平面，然後再套用繪畫、仿製、拷貝或貼上以及變形等編輯效果。 所有的編輯動作都會遵循您所處理的平面透視。
Step1.
開啟範例練習檔，使用矩型選取畫面工具，選取全部貼圖影像內容，執行「編輯」→「拷貝」。
Step2
2020-02-18
0
Photoshop CC 液化濾鏡「液化」濾鏡可用來推、拉、旋轉、反射、縮攏及膨脹影像的任何區域。液體化濾鏡是藉由液體化工具：「向前彎曲」、「扭轉」、「縮攏」、「膨脹」、「左推」等變形工具來推曳塗抹影像，以產生影像的液化變形效果，搭配筆刷尺寸、筆刷壓力來控制液體化的的範圍與程度。
開啟範例練習檔，在影像圖層上直接執行「濾鏡」→「液化
2020-02-18
0
Ｐhotoshop CC 演算上色濾鏡應用在演算上色濾鏡中，【反光效果】、【雲狀效果】，最能製作出相片上的反光光斑與雲霧效果。
1.反光效果應用
將反光效果直接加在影像上，最大的問題就是無法進一步移動或編修反光效果，如果反光效果需要隨時可以進行移動與編修，就能將反光效果加在填上黑色的獨立圖層上（透明圖層無法加上反光效果）。
Step1.
2020-02-18
0
Photoshop CC 影像圓點普普風效果利用色版與選取範圍，替去背影像加上周圍圓點效果。
Step1.
開啟範例練習檔，按住【Ctrl】滑鼠在影像圖層的縮圖上按一下，建立影像輪廓的選取範圍。
Step2.
執行「選取」→「修改」→「擴張」，設定擴張選取範圍10像素，在「色版」浮動視窗上，按下「儲存選取範圍為色版」按鈕，建立「Alpha
2020-02-18
1
Phooshop CC 畫風影像效果利用濾鏡與調色效果，製作出相片的畫風效果。
1.鉛筆線條畫風
Step1.
開啟範例練習檔，複製背景圖層成背景拷貝圖層，在背景拷貝圖層上執行「影像」→「調整」→「去除飽和度」將影像黑白化呈灰階。
繼續執行「濾鏡」→「風格化」→「找尋邊緣」，加強出影像的邊緣輪廓線。
Step2.
執行「影像」→「
2020-02-18
0
Photoshop CC 色版與影像合成影像中的紋理要很自然的合成到另一影像之中，可以利用由色板上找到影像細節的選取範圍，再利用選取範圍製造出特殊效果。
Step1.
開啟範例練習檔，在材質素材圖的色版浮動視窗上，一一檢視每個分色色版，檢視發現在紅色分色版上有較佳的紋理，所以請點取紅色分色版。
在紅色色版上按下滑鼠右鍵，選擇執行「複製
2020-02-18
0
Photoshop CC 依分色色版加強影像色彩影像中的綠色植物顏色不夠鮮豔，且較無清楚的影像輪廓，因此可嘗試使用色版上的資訊，建立選取範圍。
Step1.
開啟範例練習檔，為了能夠建立涵蓋植物的選取範圍，可以由色版上來尋找。在色版浮動視窗上，一一檢視每個分色色版，檢視發現在藍色分色版上有較佳的植物影像分隔，所以請點取藍色分色版。
在藍色色版
2020-02-18
0
