2011年6月24日 星期五

暫時休息....

最近因為個人因素,不管是工作還是生活,
需要做一些心理上的組織整理。
外加社大的課再幾個禮拜也要告一段落了,
因此暫時停止整理影音教學的東西。
所以這裡會休息一陣子。

我也不知道會休息多久...可能一兩個月吧。
我會盡量看是否能一個月起碼錄個一則這樣,
維持一個最低限度的更新頻率。

由於有跟聯成合作教學錄影的部份,
主要是教一些實做技巧,
有photoshop、illustrator、flash、dreamweaver的。
可以參考聯成數位學苑
dreamweaver是上個月才開始錄,不過這個月大概暫時也沒時間弄新的了...
總之給大家參考看看囉:)

免費空間申請&FTP使用影片教學

因為在社大大家出去的IP一樣,沒辦法在學校帶大家一起申請。
所以有興趣申請空間、想上傳資料的同學,
請參考以下影片,使用上有問題可以到學校再問我。

這裡以http://www.erufa.com/wp/作為範例,
因為申請空間時視窗要常常切換,
底下的連結看到的影片會比較清楚,請大家直接連過去看囉!

免費空間申請影片教學
https://sites.google.com/site/joyhsuclub/space_ftp/freespace

申請好空間之後,要使用FTP軟體上傳,
因此第一步要先安裝FTP軟體,
FTP安裝流程請參考此篇圖文說明
https://sites.google.com/site/joyhsuclub/space_ftp/ftp
這篇文章後面有說明安裝好之後,
要如何使用FTP軟體將資料上傳到空間。
如果看圖文不清楚,可以參考以下影片,
影面中示範如何使用FTP上傳網頁資料。
https://sites.google.com/site/joyhsuclub/space_ftp/ruheshiyongftpyingpianshuoming

2011年5月24日 星期二

2011年5月2日 星期一

聯成電腦的數位學苑

其實沒注意到聯成數位學苑是什麼時候上線的,只是有一次想說咕狗一下自己的名字,看會查到甚麼新的。才發現跟他們合作錄製的影片已經放上去了。

為甚麼打名字會發現呢....這其實也是我最疑惑的地方...我點了一下其他的分類,唯獨「超級技巧」裡面的有署名,然後其他的都是打lccnet。又剛好大概這個分類目前都放我錄的,所以就搜到了。

看完覺得,我覺得我這裡不用錄基本操作了XDDDDDD,因為跟數位學苑其他單元有的都差不多。所以之後我想會做個調整,一部分放給社大學生看的上課範例。其他像illustrator跟flash,就也會比照我現在錄dreamweaver的方式,以完成一個比較完整的小主題做示範,社大的部份如果有講到基本操作就還是會錄。其他的就不錄基本操作啦~

dreamweaver教學_商品列表(圓角矩形背景)

以同樣的html結構,不同的css設定做出圓角矩形背景的商品列表。

dreamweaver教學_商品列表(圓角矩形背景) from joyhsu on Vimeo.

dreamweaver教學_商品列表

示範如何建立商品列表的html結構,以及利用css設定商品排排站的樣式。

dreamweaver教學_商品列表 from joyhsu on Vimeo.

dreamweaver教學_標籤(背景圖)

示範如何使用ul、li結構製作圓角標籤,以及設定滑鼠移過變換背景圖與文字顏色的效果。

dreamweaver教學_標籤(背景圖) from joyhsu on Vimeo.

dreamweaver教學_標籤樣式

示範如何使用ul、li搭配css製作有背景色、框線的標籤樣式,以及示範如何設定滑鼠移過變換底色與框線顏色的CSS樣式。

dreamweaver教學_標籤樣式 from joyhsu on Vimeo.

2011年4月30日 星期六

dreamweaver教學_頁碼(圓角背景圖)

示範使用css設定,搭配項目清單(ul、li)結構,製作圓角背景的頁碼範例。包含滑鼠移入背景圖更換的效果。

dreamweaver教學_頁碼(背景圖) from joyhsu on Vimeo.

dreamweaver教學_頁碼(加上超連結)

本篇接續上一篇,替頁碼加上超連結,以及滑鼠移入變換效果。

dreamweaver教學_頁碼(加上超連結) from joyhsu on Vimeo.

2011年4月12日 星期二

dreamweaver教學_調整儲存格屬性

示範如何使用屬性面板調整儲存格屬性。

dreamweaver教學_調整儲存格屬性 from joyhsu on Vimeo.

dreamweaver教學_儲存格調整與分割合併

示範如何調整儲存格寬度、高度以及如何將儲存格分割與合併

dreamweaver教學_儲存格調整與分割合併 from joyhsu on Vimeo.

dreamweaver教學_插入表格

說明如何新增表格,以及調整表格屬性。

dreamweaver教學_插入表格 from joyhsu on Vimeo.

dreamweaver教學_圖片css設定(二)

說明如何使用css設定外框線、邊距、內距,並利用內距+背景色+外框線替圖片加上雙色外框

dreamweaver教學_圖片css設定(二) from joyhsu on Vimeo.

dreamweaver教學_圖片css設定(一)

說明如何使用css設定出文繞圖的效果

dreamweaver教學_圖片css設定(一) from joyhsu on Vimeo.

dreamweaver教學_影像地圖(二)

說明如何調整影像地圖區域的形狀、位置,以及如何設定影像地圖的連結

dreamweaver教學_影像地圖(二) from joyhsu on Vimeo.

dreamweaver教學_影像地圖(一)

說明如何再圖片上面設定影像地圖的連結區域

dreamweaver教學_影像地圖(一) from joyhsu on Vimeo.

dreamweaver教學_圖片屬性說明(二)

dreamweaver教學_圖片屬性說明(二) from joyhsu on Vimeo.


說明圖片屬性設定,包含垂直距離、水平距離、邊框、對齊。

dreamweaver教學_圖片屬性說明(一)

說明圖片屬性設定,包含圖片寬、高、圖片替換、圖片連結、圖片替代文字的設定。以及如何在瀏覽器預覽結果。

dreamweaver教學_圖片屬性說明(一) from joyhsu on Vimeo.

dreamweaver教學_插入圖片

dreamweaver教學_插入圖片 from joyhsu on Vimeo.


示範如何使用以下兩種方式插入圖片
方法一:「插入>影像」
方法二:從「檔案」面板拖曳圖片

2011年4月5日 星期二

dreamweaver教學_新增css樣式

本影片以文字段落,說明如何用標籤的方式新增css樣式。

dreamweaver教學_新增css樣式 from joyhsu on Vimeo.

dreamweaver教學_編輯既有css樣式

本網頁示範使用「頁面屬性」設定標題樣式,並利用css面板編輯已經設定的樣式內容。

dreamweaver教學_編輯既有css樣式 from joyhsu on Vimeo.

dreamweaver教學_網站內部頁面超連結設定

本影片示範如何利用「指向檔案」搭配「檔案」面板,設定網站內部頁面連結

dreamweaver教學_網站內部頁面超連結設定 from joyhsu on Vimeo.

dreamweaver教學_文字屬性設定

本影片示範文字屬性中,下列項目設定:
1.粗體、斜體設定
2.項目清單、編號清單設定

dreamweaver教學_文字屬性設定 from joyhsu on Vimeo.

dreamweaver教學_文字超連結設定

本影片示範外部超連結設定

dreamweaver教學_文字超連結設定 from joyhsu on Vimeo.

dreamweaver教學_輸入文字與文字屬性調整

開新檔案之後,就可以開始製作網頁了。本影片從文字設定開始說明,示範以下三個項目:
1.輸入文字
2.文字屬性(段落、標題)調整
3.使用「頁面屬性」設定標題樣式

dreamweaver教學_輸入文字與文字屬性調整 from joyhsu on Vimeo.

dreamweaver教學_開新檔案與存檔

做網頁時,由於插入的圖片、影片等是使用相對路徑做描述,因此網頁本身需要先存檔,路徑描述才不會有問題,因此建議做網頁的時候,一開始開新檔案後就先存檔。

本影片示範如何開新檔案與存檔。

dreamweaver教學_開新檔案與存檔 from joyhsu on Vimeo.

dreamweaver教學_定義網站

在開始製作網站之前,建議先定義網站,這樣之後要使用素材、設定連結、開啟舊檔都會比較方便。本影片示範如何使用dreamweaver定義網站。

dreamweaver教學_定義網站 from joyhsu on Vimeo.

dreamweaver教學_素材整理

網頁製作流程
一、資料整理:將要使用的圖片、影片、音樂整理到同一個資料夾
二、定義網站:從Dreamweaver的「檔案」面板定義網站
三、製作網頁:開新檔案,開始製作網頁,製作時隨時存檔。

這影片示範如何進行網頁設計的資料整理。

dreamweaver教學_素材整理 from joyhsu on Vimeo.

2011年2月13日 星期日

photoshop修圖實務應用講義

這是幫補習班編的講義,想說都做了,放上來分享一下囉,請到以下連結下載。
http://www.badongo.com/cn/file/25085705

下載方式如下:
  1. 進去之後右上角會看到一個「請等待,載入中」,稍等一下那個區塊會變成「輸入以上文字」,把你看到的字母數字輸入進去之後才按「下載您的檔案到此處」。
  2. 進去之後,把畫面拉到最下面,會看到一個在倒數的按鈕,等到數完畢之後,按鈕上會顯示「下載您的檔案到此處」,按下文字即可下載講義。

2011年2月11日 星期五

Adobe證照:ACA與ACE的差異

去年到今年初是我的考試年,考了幾張證照。比較一下ACA與ACE的差異,給大家參考一下。

adobe繳了錢就可以考的證照有兩個:ACA與ACE。補習班在鼓吹的adobe證照是ACA,這個考試有中文考題。而ACE在台灣比較少聽到,主要是因為這個考試沒有中文的,要考就是用英文考,門檻比較高。有沒有補習班在補ACE的?有,就我所知恆毅資訊有提供這方面的課程。

ACA的題目有分單選、複選、配合、實作。ACE一律都是選擇,有單選有複選。

ACA有幾個方向的題目是ACE不會出現的:設定專案的需求、規劃網站設計與網頁版面、實作題。ACE的考試重點全部都是在軟體應用上,所以像ACA會出一些像「設計師可以經由哪些管道取得影像?」「在專案進行過程中,誰負責分析目標對象?」這種題目,ACE是完全沒有的。

ACE的考試因為著重在實際應用上,所以題目會比較偏向情境題。題目會給你一個情境,問你要解決這個問題,要用什麼方法(工具)。像是「當你輸入文字,但是在畫面上看不到文字時,你應該要到哪裡檢查問題?」「用哪一種方法做出的漸層色可以讓你隨時做調整但不需要重新繪製一次?」,或是反過來問你什麼工具適用於什麼情境,像是「在什麼情況下你應該要使用剪裁遮色片?」

相較之下ACA考工具的方法就很死,像是「使用筆刷工具上色時,是使用下列哪個顏色?」。ACE有沒有這種很死的題目?也有,但是比例比較少,描述的方式也不一樣。ACA的講的比較直白、也比較簡單,而ACE是用描述一個完整情境的方式來問,像是「你已經選取了一個矩形範圍,你想要使用拖曳控制點的方式調整矩形選取範圍的大小,你應該怎麼做?」

ACA的實作題很簡單。因為所有實作題在5個步驟內一定都做的完,大多是2、3個步驟就解決的。

ACE的考題範圍比ACA要廣的多,像是色彩描述檔的設定、raw檔的應用,這個都是ACA沒有的。如果你對photoshop的使用有一個程度的熟練,那你只要去買ACA的書來K考題,ACA要過都不難。我這裡說的熟練,是你起碼要會用photoshop解決一些問題,像是怎麼去背、怎麼做浮水印效果、怎麼利用圖層樣式做陰影、怎麼使用遮色片做基本影像合成這類的。如果我講的這些你做不出來,那ACA你也可以不用去考,因為大概也不會過(不過ACA題目的確比我講的這些要簡單很多)。就算過了,也唬過了業主,去應徵工作前如果沒想辦法補足自己的能力,也會馬上被看破手腳而已。

ACE考題與ACA最大的差異是ACE對軟體中所有冷門熱門的功能都會考,如果沒有把官方說明書整個看完一次,要考過真的很難。這跟語言沒有關係,像我自己考flash,因為是三科裡面最後考的了,所以那次是我唯一一次題目全部都有把握看的懂得。但是答題一樣答的很沒把握。

考完ACE有沒有什麼收獲?有,但不是證照,而是我把三本原廠說明K完。坦白講adobe的原廠說明寫的相當詳細,他不只是寫功能,還會寫原理,這點在看photoshop跟dreamweaver的時候,會很明顯的感覺出來。以前我只知道改明暗可以用調整色階,可是看完說明我才知道色階跟明暗的關係是什麼、曲線的調整又為什麼會比色階來的自由。很多以前只會用的,現在才真的懂了。像所謂「動態網頁」跟「靜態網頁」的定義,還有網站的運作原理,dreamweaver原廠說明書也寫的很明白。

如果你還是學生,考ACA可以跟學校申請獎學金,那我會建議妳去考,畢竟可以靠這個弄些獎學金也是不錯的。如果你已經畢業,正在找工作的。考ACA只能唬過那些不看作品集、不懂設計的主管。對那些知道要看作品的,證照的用處不大。如果你已經工作好一陣子,ACA對你不會有任何加分的作用。如果你因為有ACA而找到了工作,那恭喜你,但是也不要開心的太早,請努力提昇自己解決問題的能力,不然會很快的被業主發現證照能代表的實質意義很有限,而讓ACA證照快速貶值。

那ACE有用嘛?很殘酷的,對業主來說,他根本不知道兩者的差異。但是準備ACE的那個過程,對你自己很有用。也就是這個是做來對得起自己的、是可以提昇自己做事效率的,但別人不一定看的到。

但這兩個證照唯一相同的地方就是:他們證明的只是「使用軟體」的能力,都不能證明你有「設計」的能力。想考證照嘛?多想想,不要掉到像考大學只是為了拿學歷的迷思裡了。

2011年1月26日 星期三

photoshop影像調整(亮度對比、色階、曲線)

示範如何使用亮度對比、色階、曲線調整影像明暗

photoshop影像調整(亮度對比、色階、曲線) from joyhsu on Vimeo.

photoshop版面尺寸

示範如何調整圖片顯示的版面大小

photoshop版面尺寸 from joyhsu on Vimeo.

photoshop色彩模式切換、影像尺寸、影像裁切

說明如何在不同的色彩模式之間做切換,如何調整影像尺寸,以及如何裁切影像

photoshop色彩模式切換、影像尺寸、影像裁切 from joyhsu on Vimeo.

photoshop檢視工具-導覽器、縮放顯示工具、手形工具

photoshop檢視工具-導覽器、縮放顯示工具、手形工具 from joyhsu on Vimeo.

photoshop工作區域面板整理

在開始使用photoshop之前,先把工具區的面板組合整理成適合自己工作的狀態並且儲存起來,下次當面板組合亂掉時,就可以很快把已儲存的面板組合叫出來,讓你可以更有效率的使用photoshop。

photoshop面板整理 from joyhsu on Vimeo.

2011年1月25日 星期二

photoshop頭髮去背範例

示範如何以路徑、色版製作自然的人物頭髮去背效果,這可說是頭髮去背最古早的方法。適用於乾淨背景的圖片。

雖然photoshop在CS4以前有摘取濾鏡可以用,而CS5的調整邊緣功能被增強,透過這兩種方法都可以用最少的工具達到頭髮去背的效果。但事實上並沒有說使用哪個方法比較好或是不好,他們共同的地方就是都只適合用在乾淨背景的圖片,面對背景複雜的圖片就沒轍了。

這個教學整個只有七分鐘,也就是如果對軟體夠熟練,用路徑跟色版去背一樣可以在五分鐘內就解決。去背速度的快慢,還是取決於對於軟體工具本身的熟練度。重點是挑一個你順手使用的方法就好。

photoshop頭髮去背範例 from joyhsu on Vimeo.

photoshop色版面版(二)alpha色版、選取範圍與色版轉換

說明如何使用alpha色版紀錄選取範圍,以及如何將色版轉換為選取範圍。

photoshop色版面版(二)alpha色版、選取範圍與色版轉換 from joyhsu on Vimeo.

photoshop色版面版(一)原色色版

以不同色偏的圖檔,說明原色色版原理。

photoshop色版面版(一)原色色版 from joyhsu on Vimeo.

2011年1月24日 星期一

photoshop筆形工具去背範例

以一張杯子圖片,利用筆形工具以排除模式畫出去背路徑,轉換成選取範圍後,利用複製貼上完成去背。

photoshop筆形工具去背範例 from joyhsu on Vimeo.

photoshop路徑面板使用

透過路徑面板,可新增、刪除路徑層,並且將路徑轉換為選取範圍。路徑層有分已儲存的路徑以半臨時的工作路徑。

photoshop路徑面板使用 from joyhsu on Vimeo.

photoshop筆形工具選項設定(三):相加、相減、重疊、排除

除了選取範圍可設定相加、相減、重疊,筆形工具也有類似的設定,並且更進一步增加了「排除」,筆形工具利用這四個選項畫出來的路徑,可使用路徑選取工具做組合,讓路徑簡化。

photoshop筆形工具選項設定(三):相加、相減、重疊、排除 from joyhsu on Vimeo.

2011年1月21日 星期五

photoshop筆形工具選項設定(二):形狀工具設定

photoshop筆形工具選項設定(二):形狀工具設定 from joyhsu on Vimeo.

photoshop筆形工具選項設定(一):使用模式與形狀

使用筆形工具時,可在「路徑」與「形狀圖層」兩個模式之間做切換。以正常的狀況來說,筆形工具預設是使用「路徑」模式。而如果選擇形狀工具(畫幾何圖形)的話,則預設是使用「形狀圖層」,兩者的差異在於一個會新增圖層,一個不會。且畫出來的「路徑」名稱會不同

photoshop筆形工具選項設定(一):使用模式與形狀 from joyhsu on Vimeo.

2011年1月19日 星期三

photoshop路徑使用(三)錨點轉換工具

  • 選擇轉換錨點後,將滑鼠移到節點上,如果是要將節點轉換成尖角,則點一下就完成轉換。
  • 如果要將結點轉換成可以調整的曲線點,則按著滑鼠左鍵後往旁邊拖曳,就會產生可以調整曲線的拉桿。
  • 如果要將節點轉換成有把手的尖角,則使用錨點轉換工具點選曲線點旁的把手,移動把手後,會看到原來曲線點左右的把手已經被拆開,不再有連動關係,之後即可使用直接選取工具調整尖角的把手。

photoshop路徑使用(三)錨點轉換工具 from joyhsu on Vimeo.

photoshop路徑使用(二)創意筆形工具、增加錨點、減少錨點、路徑選取工具

  • 創意筆形工具則是利用拖曳的方式直接畫出曲線,節點會自動產生。
  • 在編輯曲線的時候,會用到增加錨點、刪除錨點、轉換錨點三種工具。選擇增加錨點後,將滑鼠移到既有曲線上(沒有節點的位置),會出現一個跟增加錨點一樣的筆形圖示,這時候用滑鼠點擊一下,該曲線上就會多加一個錨點。
  • 選擇刪除錨點後,將滑鼠移到既有的曲線有節點的位置,會出現一個跟刪除錨點一樣的筆形圖示,這時候用滑鼠點擊一下,該錨點就會被刪除。
  • 包含路徑選取、直接選取兩種。路徑選取代表把整個完整的路徑選取起來,在移動整個路徑的位置的時候會用到。
  • 直接選取工具可以只選擇單一節點,以及節點的兩個拉桿,透過直接選取工具可以對已經畫好的路徑做微調。




photoshop路徑使用(二)創意筆形工具、增加錨點、減少錨點、路徑選取工具 from joyhsu on Vimeo.

photoshop路徑使用(一)筆形工具

  • 包含筆形、創意筆、增加錨點、刪除錨點、轉換錨點五種工具。
  • 筆形的使用方式為用滑鼠點一下,接著點下一點,點跟點之間會自動產生連接的線條。一般稱線跟線之間的點為錨點(或節點)。如果要畫曲線,在點的時候先按住左鍵不要放然後往旁邊的方向拖曳,這時候節點旁邊會出現拉桿,透過拉桿可以調整曲線。


photoshop路徑使用(一)筆形工具 from joyhsu on Vimeo.

photoshop選取工具(四)增加、刪除、選擇相交之選取範圍

photoshop選取工具(四)增加、刪除、選擇相交之選取範圍 from joyhsu on Vimeo.

photoshop選取工具(三)魔術棒

photoshop選取工具(三)魔術棒 from joyhsu on Vimeo.

2011年1月18日 星期二

photoshop選取工具(二)套索、多邊形選取

  • 包含套鎖、多邊形套鎖、磁性套鎖三種工具。
  • 套鎖的使用方式是在畫布上按住滑鼠左鍵不放用拖曳的方式圈出選取範圍。
  • 多邊形套鎖則是在畫布上用滑鼠用點擊的方式點出多邊形,會自動連成多邊形,結束時只要快速點選滑鼠左鍵兩下,就會自動形成封閉的選取範圍。
  • 磁性套鎖大多應用在背景單純邊緣清晰的去背。選擇磁性套鎖後,用按住滑鼠左鍵拖曳的方式在畫布上沿著照片裡面圖形邊緣移動,則在畫面上會自動貼著邊緣產生選取的線條。

photoshop選取工具(二)套索、多邊形選取 from joyhsu on Vimeo.

2011年1月13日 星期四

photoshop選取工具(一)矩形、橢圓形選取

  • 包含矩形、圓形、水平單線、垂直單線四種工具。
  • 矩形與圓形的使用方式都是將滑鼠移到畫布上之後,按著左鍵不放往往旁邊拖曳,會看到虛線範圍,放開左鍵後代表確定選取範圍。
  • 如果要移動選取好的範圍,就將滑鼠移到選取範圍內之後按滑鼠左鍵拖曳,即可調整選取範圍的位置。
  • 水平與垂直的單線選取由於只選取1px寬度的線條,所以在畫布上點一下左鍵放開就完成選取。


photoshop選取工具(一):矩形、橢圓選取工具 from joyhsu on Vimeo.