photoshop教學x-首頁

《photoshop教學x-首頁》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、整合網站系統服務中心 

2、 Photoshop教學 

3、 2013年1月9日[Photoshop教學]針對E-PAGE系統做設計樣板國立高雄第一科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11開新圖層Step1.檔案＞開新檔案，輸入以下格式設定。圖層分類依據網頁架構作圖層分類，是為了方便管理及切圖。Step1.將網頁區分為頁首、左欄、中欄、右欄、頁尾、底圖資料夾，在依網頁架構將模組名稱放置相對應的資料夾。建立新圖層建立新群組　　　　　　　　　　　國立高雄

4、第一科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11底圖設置預設網頁背景為白色。Step1.透過左方工具列的矩形工具　　，拉出大於版面的白色矩形。務必做好圖層分類尺規小幫手可幫助元件對齊及方便成品切割。（Ctrl+R）可呼叫尺規，並按右鍵選擇單位。Step1.預先設想好想要的版面寬度，透過檢視＞新增參考線，輸入像素值即可。國立高雄第一科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11LOGOTopnavHd

5、menuBanner頁面頭部介紹lLogo須包含學校Logo、中英文名稱及單位中英文名稱。lTopnav須依序為首頁、網站地圖，最後須放置第一科大，至少需要以上三個，其他可自行增加。lHdmenu為網站主選單。lBanner為整體網站，使用者第一眼觀看到的廣告橫幅。頁面內容介紹左欄右欄中欄左欄通常包括主選單，中欄通常放置最新消息及活動花絮，右欄通常放置連結。國立高雄第一科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11頁面底部介紹詳細說明單位名稱、聯絡

6、方式及版權所有。頁面頭部設計A.底圖部分Step1.用矩形工具　　拉出長矩形當作背景範圍。Step2.用漸層工具　　選取上方工具列的顏色　　　　　，一端為有色，一端為透明色。（若找不到漸層工具，右鍵點選油漆桶工具　　就可轉換為漸層工具）點選色標，下方顏色選取就會開啟Step3.在剛拉的矩形圖層上方新增一個圖層，並按右鍵＞建立剪裁遮色片。遮色片圖層應如右圖一樣漸層效果會被限制在拉出的矩形框內國立高雄第一科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11A

7、.Logo部分Step1.使用文字工具　　輸入單位名稱。B.Topnav部分Step1.將icon檔案丟入設計檔中，並使用移動工具　　的　　　　　　　調整位置及大小。Step2.使用文字工具　　輸入topnav的名稱。C.Hdmenu部分Step1.運用圓角矩形工具　　拉出底圖。（矩形工具　　右鍵即可找到）Step2.為了增加menu的立體感，右鍵＞複製底圖圖層，並使用矩形選取畫面工具　　將複製的底圖圖層刪除一半。Step3.使用漸層工具　　，挑選想要的顏色，來建立遮色片。↑圖層樣子國立高雄第一

8、科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11Step4.使用文字工具　　輸入主選單名稱。（可自行加分隔線等）A.Banner部分Step1.用矩形工具　　拉出長矩形當作背景範圍。Step2.將能代表單位的圖丟入設計檔中，並對圖層右鍵＞建立遮色片。Step3.使用文字工具　　輸入單位名稱或標語。頁面內容設計A.模組設計以下為左欄訊息搜尋作例子Step1.製作標題圖，使用圓形工具　　拉出元件，並使用圓形選取畫面工具　　刪除掉中心區塊。（矩形工具　　、

9、矩形畫面選取工具　　右鍵即可找到）Step2.使用文字工具　　輸入模組標題名稱及英文名稱。Step3.使用文字工具　　輸入內容文字；使用矩形工具　　拉出一個白底矩形，對該圖層右鍵＞混合選項＞筆畫（1px黑框）；使用之前學到的技巧設計出Go的樣式。國立高雄第一科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11以下以右欄網頁範例做例子Step1.製作標題，與訊息搜尋模組的Step1~Step2相同。由於此為連結模組，故只要設計內容圖即可（不需要文字呈現）。

10、Step2.使用矩形工具　　拉出一個白底矩形，對該圖層右鍵＞混合選項＞畫筆。Step3.再次用矩型工具　　拉出白底，要比剛的白底更小，且不需要畫筆功能。Step4.將符合內容的圖丟入設計檔，並對該圖層右鍵＞建立遮色片。（可使用移動工具　　調整其位置及大小）Step5.對內容圖進行濾鏡＞紋理＞紋理化，增加圖片的質感。Step6.使用文字工具　　輸入名稱，可運用右鍵＞混合選項的功能去增加美感。國立高雄第一科技大學圖書資訊館　　　　　　　　　整合網站系統服務中心版權所有　　　　　　　　　　　　　11A