網頁設計應用-網路成果展-永和社區大學27學期秋季班

藝廊

這相簿有 16 張相片

完整的網頁設計實際上需要使用到許多不同的軟體,完成各自的任務(photoshop修圖製圖、flash製作動態影像)最後整合成網頁(Dreamweaver製作網頁),本課程主要教photoshop與Dreamweaver,最後應用在部落格設計上。成果展的部份展示photoshop上課範例,由同學製作輸出的成品。這個範例的重點如下: 圖層樣式應用 文字工具應用 如何使用填滿、模糊濾鏡、任意變形做出逼真的影子  

永和社大-illustrator向量插畫好好玩-class 2

今日上課重點

鋼筆工具:
利用「點、放」跟「點、拉、放」畫出線段的工具,鋼筆工具可畫出「尖角點」與「曲線點(把手對稱)」,畫出來的線段要調整則要使用「直接選取工具」。另外可以讓尖角點有把手(把手不對秤),但要使用「轉換錨點工具」。

轉換錨點工具:
在錨點上點一下,轉換成尖角點。點、拉、放轉換成曲線點。把轉換成曲線點的把手用轉換錨點工具拉開,就轉成有把手的尖角點。

增加錨點、減少錨點:
這是針對已經存在的線條,在線條上增加或減少錨點。只要用鋼筆工具,移到已經選取的線段上,在沒有錨點的位置點一下就會自動增加錨點,在已經有錨點的位置點一下就會自動減少錨點。

鉛筆工具:
利用按著滑鼠拖曳的方式,畫出自由曲線,電腦會自動在線條上產生相關的錨點跟把手。預設鉛筆工具在畫圖的時候若很靠近被選取的線條,可以直接修飾線條曲線,因此適合搭配手寫版來潤飾線條。

筆劃面板:
可設定筆劃粗細與虛線。

線段區域工具:
使用方式是在畫面上按著滑鼠拖曳後放開。如果要顯示線段工具的設定,則在畫面上用滑鼠點一下不要拖曳馬上放開就可以看到。

縮放工具、傾斜工具:
使用方法與旋轉、鏡射工具類似,都要先用選取工具把要調整的物件選好,在使用縮放(傾斜)工具訂基準點,接著移動後就可以進行縮放(傾斜)。跟選取工具的縮放(傾斜)功能的差異在於縮放(傾斜)工具可以一邊變形、一邊複製。選取工具則沒有辦法。如果訂基準點時要手動輸入倍率(角度),在訂基準點之前要先按著Alt才用滑鼠點一下訂基準點,那設定對話框就會跳出來。

任意變形工具:
主要是可以做透視、拉單一角延伸的變形。若要做透視變形。步驟如下
1.用滑鼠點一下角落控制點,但先不要拖曳
2.按著Alt+Ctrl+Shift
3.用滑鼠拖曳

橡皮擦工具、美工刀工具:
橡皮擦工具可以將原本封閉曲線的色塊擦除,擦除之後如果分成兩塊,兩塊依舊是封閉曲線。
美工刀工句可以將封閉曲線的色塊切兩半,切開之後兩塊依舊是封閉曲線。

路徑橡皮擦、剪刀工具:
路徑橡皮擦可以將封閉曲線的線條擦「斷」,變成開放曲線。
剪刀工具可以將封閉曲線剪「斷」,變成分開的開放曲線。

永和社大-illustrator向量插畫好好玩-class 1

今天是永和社大illustrator向量插畫好好玩第一天上課~課程重點說明如下,

0.整體軟體環境介紹:
了解軟體整體功能的配置,開新檔案的設定選項說明,如何調整面板位置(點選面板名稱後,按著滑鼠拖曳即可)。以及檢視工具(手形工具、放大鏡工具、導覽器)的使用。常用快速鍵:
A.切換到檢視工具 z
B.臨時切換到手形工具 space(空白鍵)

1.選取工具練習:
了解選取工具的操作,使用選取工具選取多個物件、移動物件。選取工具選擇的對象是整體物件,群組選取工具選取的對象是已經群組的物件中的單一物件。
常用快速鍵:
A.群組 Ctrl+G
B.解散群組 Ctrl+Shift+G
C.切換到選取工具 v

2.直接選取工具練習:
直接選取工具的選取對象是錨點與把手,主要是拿來調整物件的外框曲線。直接選取工具跟群組選取工具放在同一個位置,但是群組選取工具的使用對象比較接近選取工具,是針對一個物件的整體做選擇。直接選取工具則是針對一個物件的細部做選取,兩個功能不一樣喔!

3.排列順序練習:
利用選取工具,選取物件後的右鍵選單內「排列順序」調整物件的層疊順序。
常用快速鍵
A.移到最上層 Ctrl+Shift+]
B.移到最下層 Ctrl+Shift+[

4.上色練習:
了解工具列底下填色與外框色的差異,利用選取工具替物件調整填色與外框色。
在填色(外框色)快速點兩下,會出現撿色器,挑選好顏色後按確定,
該顏色就會填滿到填色(外框色)。

5.旋轉鏡射練習:
旋轉鏡射工具使用步驟
A.先用選取工具將要旋轉(鏡射)的物件選起來
B.點選旋轉(鏡射)工具
C.游標呈現十字,在物件附近點一下,定下旋轉(鏡射)的基準點,點完游標會變成箭頭
D.用箭頭去移動物件,物件就會依照基準點旋轉(鏡射)
F.如果要一邊旋轉(鏡射)一邊複製,用箭頭移動物件前先按著Alt,再用箭頭去移動物件

用輸入數值的方式設定旋轉(鏡射)角度的步驟
A.先用選取工具將要旋轉(鏡射)的物件選起來
B.點選旋轉(鏡射)工具
C.游標呈現十字,先按著Alt再接著於要設定基準點的位置點一下,會出現旋轉設定對話框。
輸入要設定的角度。
D.如果只是要旋轉(鏡射)不複製,那在對話框按確定即可,如果要同時旋轉(鏡射)跟複製,
那按拷貝
F.如果要重複旋轉(鏡射)跟複製的動作,按Ctrl+D即可
快速鍵說明:重複上一個動作 Ctrl+D

6.路徑管理員練習:
練習基礎的形狀模式(連集、剪去上層、交集、差集)
了解圖片ICON的解析,利用形狀模式畫出簡易插畫。

永和社大上課大綱

這裡提供永和社大剩下幾週的上課內容大綱~

圖片上傳

  1. 如何使用google+的相簿功能?
  2. 上傳好的圖檔如何找出圖片路徑?

Dreamweaver應用

  1. 如何將圖片使用在部落格的外觀上?
  2. 部落格的CSS設定要怎麼使用?
  3. 如何使用firefox找出選取器的名稱?

photoshop排版

  1. 使用photoshop製作部落格排版
  2. 如何使用ps將部落格要使用的圖檔擷取出來?

因為上週開始講部落格了,所以接下來的課程進行方式會倒過來。就是我會先把圖片都切好,教同學怎麼用到部落格上。會用之後,在回頭來學怎麼用photoshop排版,以及切圖。因為ps上次教已經有一陣子了,可能大家也都比較生疏,所以我們從比較近期已經開始講的部落格先進行完畢之後,再回頭來用綜合應用複習ps。希望讓同學可以比較了解photoshop、dreamweaver再製作網頁的過程中,所扮演的角色跟功能為何~

部落格選取器的名稱先在這裡預告,以下是這次上課會講到要設定的名稱。到時候同學可以直接從這裡拷貝貼上使用~

文章標題
h3.post-title

文章標題顏色
.post-title a

邊欄標題
.column-right-inner .widget h2
(只有.widget h2 時會包含文章裡面的日期)

邊欄超連結
.widget-content a

文章內容
.entry-content

Google blogger申請流程

1.申請google帳號
一、先連到 https://accounts.google.com/SignUp ,填寫基本資料

二、填完之後會看到此畫面,可以不用新增照片,直接按下一步

三、建立成功,從上方的的選單點「更多」選擇「blogger」

2.申請blogger
四、因為是剛申請帳號,所以要使用服務前先登入。輸入申請帳號時設定的密碼

五、畫面往下拉直接點選「開始使用blogger」

六、點選畫面上的「新增網誌」

七、在標題輸入部落格名稱,地址輸入想使用的英文名稱,輸入完畢後按下「建立網誌」

八、建立成功後畫面會切換到部落格後台首頁,顯示已經建立成功按下中間橘色按鈕的鉛筆圖示,就可以開始寫文章囉!

3.寫文章
九、點選中間的小箭頭(1),可以讓輸入欄的範圍變大(2),

輸入文章的方式分為「撰寫」跟「HTML」兩種模式。如果要把dreamweaver做好的頁面貼語法貼近去時,要切換到HTML模式。如果只是要輸入文章、沒有要貼語法,則使用撰寫模式即可。以下針對幾個比較複雜的功能做說明

九A、超連結
A-1、先把要加超連結的文字選起來

A-2、點選Link,會出現要加超連結的文字,有兩種選項可以設定。「Web address」是指點了文字之後,連到指定的網址。「Email address」是指點了文字之後,寄信到某個信箱,「Open this link in a new window」是只點了設定的網址時,用開新視窗的方式開啟網頁。設定完成後按OK即可

九B、插入圖片
B-1、先把游標點在要插入圖片的位置
B-2、按插入圖片的圖示
B-3、顯示出插入圖片的選項。選項畫面及說明如下
B-3-1、「Upload」:可以選擇自己電腦的圖片上傳,點選「選擇檔案」,選好檔案上傳之後,被藍色框框框選的圖片就是要插入的圖片,可以一次選擇多張,選完之後按「Add selected」,照片就插入到文章內了

B-3-2、「From this blog」:指之前在這個部落格內,自己有上傳的圖片,都會顯示在這。所以未來登出之後,下次近來,可以從這裡找到自己曾經上傳過的照片。

B-3-3、「From Picasa Web Albums」:指存在google 相本服務Picasa內的相簿。我們在blogger上傳照片時,google都會自動建立一本Picasa相簿。如果我們曾經自己手動新增別的相簿,在這個選項會全部顯示出來。

B-3-4、「From your phone」:如果曾經使用智慧型手機、並用手機使用google plus app上傳照片的話,就會在這裡顯示
B-3-5、「From your webcam」:如果你的電腦有裝視訊鏡頭,可以直接從鏡頭擷取圖片使用。
B-3-6、「From a URL」:如果您曾經在別的地方傳過圖片,可以把該圖片網址貼過來,插入文章內。

九C、插入影片
C-1、先把游標點在要插入影片的位置
C-2、按插入影片的圖示
C-3、顯示出插入影片的選項。選項說明如下

C-3-1、「Upload」:可從自己電腦選擇影片上傳
C-3-2、「From Youtube」:因為Youtube是被google併購的服務,所以提供直接在這個畫面搜尋Youtube影片,搜尋到之後,直接點選按「選取」即可插入文章。

C-3-3、「My Youtube」:如果曾經使用同一個帳號在youtube上傳影片,在這裡會顯示曾經上傳的影片清單
C-3-4、「From yourphone」:如果曾經使用智慧型手機、並用手機使用google plus app上傳影片的話,就會在這裡顯示
C-3-5、「From your webcam」:如果電腦有網路視訊鏡頭,就可透過此功能直接錄製影片並上傳。

4/3 永和社大:banner綜合練習

banner製作步驟解析

A.構圖

  1. 用白紙大概隨手畫一下想要的圖片文字配置

B.圖片去背

  1. 檔案>開啟舊檔
  2. 使用筆型工具把要去背的圖片框起來
  3. 在圖層面板先拷貝一份新的圖層
  4. 切換到路徑面板,點選「轉換為選取範圍」
  5. 選取>反轉選取
  6. 切換到圖層面版,選擇剛剛拷貝的圖層,按delete把背景刪除
  7. 把底下的圖層眼睛關掉

C.在banner上使用去背的圖形

  1. 先開新檔案,以760*200像素大小為例子
  2. 先切換回剛剛去背的檔案,在去背圖層的名稱上按右鍵,選擇複製圖層
  3. 在複製圖層對話框中,選擇banner檔案名稱
  4. 切回banner檔案,就會看到剛剛的圖形
  5. 選擇複製過來的圖形所在的圖層,按編輯>任意變形
  6. 如果拷貝過來的圖檔大於banner很多,
  7. 先在工具選項上設定縮放的百分比,直到可以看到圖片的外框
  8. 按著鍵盤的shift然後按著滑鼠拖曳邊框角落,調整圖片大小
  9. 按enter確認大小
  10. 使用移動工具,移動圖片位置

D.文字

  1. 使用文字工具,在畫面上輸入文字
  2. 使用字元面板,調整文字大小、顏色
  3. 使用移動工具,調整文字的位置
  4. 在文字圖層名稱上按右鍵,選擇混合模式,設定樣式。

E.背景色調整

  1. 先選擇背景圖層
  2. 使用漸層工具,在工具選項設定顏色
  3. 在背景圖層上上漸層色

F.背景裝飾

  1. 使用形狀工具畫幾何圖形
  2. 使用筆刷工具畫不規則背景圖樣

G.動畫效果製作

  1. 從視窗>動畫,開啟動畫面版
  2. 在動畫面板新增影格
  3. 在圖層選擇要變化的文字圖層、複製一份之後,調整顏色
  4. 在動畫面版設定秒數
  5. 播放測試

H.匯出成可使用的gif圖檔

  1. 檔案>儲存為網頁裝置用
  2. 格式選擇gif,儲存

3/27 永和社大上課內容

  1. 筆刷應用
  2. 顏色面板
  3. 油漆桶與漸層色

自訂筆刷

  1. 檔案>開新檔案,以50*50像素大小為例子
  2. 用基本筆刷,選擇黑、灰色在畫布上畫出新筆刷的圖樣(此一步驟亦可使用形狀工具或其他工具繪製)
  3. 編輯>定義筆刷預設集。替自訂筆刷命名,按確認後完成
  4. 之後在使用筆刷的時候,筆刷的下拉選單就會存著之前自訂的筆刷在裡面可以選擇

自訂圖樣

  1. 檔案>開新檔案,以100*100像素大小為例子
  2. 用基本筆刷,選擇顏色色在畫布上畫出新的圖樣(此一步驟亦可使用形狀工具或其他工具繪製)
  3. 編輯>定義圖樣。替自訂圖樣命名,按確認後完成
  4. 之後使用圖樣印章,或是其他可以選擇圖樣的功能,在圖像的下拉選單就會存著之前自訂的圖樣在裡面

圖層樣式

  1. 在要設定樣式的圖層的圖層名稱上按右鍵,選擇「混合選項」
  2. 勾選要套用的項目,點選項目的名稱,可在右邊看到該項目可以設定的內容參數
  3. 設定完畢後按確定

下次上課預告:banner綜合練習

  • 去背練習
  • 在banner上使用去背的圖形
  • 增加漸層背景
  • 增加形狀圖層作為裝飾
  • 加文字
  • 製作動畫效果
  • 匯出成可使用的gif圖檔

 

3/20 永和社大上課內容

以下是今天的上課內容~因為操作影片暫時還來不及錄製,同學可以在操作的時候,先參考以下的操作流程。

基礎工具說明

  1. 圖層的使用與說明
  2. 文字工具應用
  3. 移動工具
  4. 形狀工具
  5. 簡易Gif動畫製作

以「文字閃動的Gif動畫」為例子,操作流程如下:

  1. 開新檔案:以200*50像素為例
  2. 使用文字工具,在畫面上點一下,輸入文字
  3. 使用「字元面板」調整文字的大小、顏色、字型,如果要針對整個文字圖層做調整,要先切換回一般圖層模式。如果要針對某幾個文字做調整,要切換到文字編輯模式。
  4. 複製一個文字圖層,重新調整該圖層的文字色彩
  5. 從「視窗>動畫」把動畫面把打開
  6. 從動畫面版新增影格
  7. 點選到不同的影格,回到圖層面版調整不同圖層在不同影格的顯示、隱藏狀態。
  8. 從動畫面版設定每個影格的播放時間
  9. 按播放預覽動畫
  10. 從「檔案>儲存為網頁裝置用」,選擇gif,按儲存。

以「移動的愛心gif動畫」為例子,操作流程如下:

  1. 開新檔案:以 200*200 像素為例
  2. 使用「自訂形狀工具」在畫面上畫一個愛心,從工具選項調整愛心的顏色
  3. 使用移動工具將愛心移動到指定位置,例如希望愛心從左往右移動,那一開始要先放在畫面左邊
  4. 從動畫面版新增影格
  5. 點選到第二個影格,再使用移動工具將愛心移動到別的位置,例如希望愛心從左往右移動,這時候要把愛心放到畫面右邊
  6. 從動畫面版,按 crtl 點選開頭與結尾的影格,點選「補間動畫影格」,輸入要增加的影格數,按確定
  7. 從動畫面版設定每個影格的播放時間
  8. 按播放預覽動畫
  9. 從「檔案>儲存為網頁裝置用」,選擇gif,按儲存。

重新開張

沉寂了一陣子,這裡要重新開張囉!

未來教學影片的部分,會同步發佈在這裡跟blogger的hsu‧小講師的教課學習筆記,所以兩邊基本上內容是相同的,只是這邊會多聯絡我跟一些教課資訊,那hsu‧小講師的教課學習筆記就純粹是放教學影片的內容。

教學影片清單最後會全部整合成這裡的的連結(不然要維護兩份太累了),最終是希望流量還是導到這裡為主,但是hsu‧小講師的教課學習筆記不會收掉~

還在想以後這裡要不要放討論區什麼的…不過之後再說吧!總之未來這裡會陸續更新更多photoshop跟dreamweaver的教學影片內容。至於flash跟illustrator,是曾經有想過但目前暫時不考慮。因為之所以會整理影片的初衷,是想要提供給社區大學的學生在回去練習時有個可以參考複習的東西、而寫文字有時候總會有遺漏,那不如就錄影片吧。

但目前並沒有在社大教flash跟illustrator的打算,所以暫時就不錄製囉!

歡迎同學來這裡逛逛:)