網頁設計師必看！
精通Photoshop跨平台網頁設計實用技巧大公開

　　‧順利展開網頁設計工作的設定及設計準則
　　‧快速製作設計構圖的準備工作及Tips
　　‧輕鬆製作跨裝置檔案的實用技巧

　　隨著智慧手機與平板電腦的普及，網站設計也產生極大變化。身處於跨裝置時代的設計師，在設計網站時，不僅要掌握流行脈動，也要顧及如何讓智慧手機或平板電腦的使用者順利取得網頁資訊的技術，如存取內容的方便性、使用者介面的設計、易用性等。

　　書中提供跨平台網頁設計的實用技巧，並列舉國外最新流行的網站範例，解說網站製作的技術，同時講解在跨裝置時代下的網站設計趨勢。「好像瞭解了，但是實際上該怎麼執行呢？」有這種疑問的人，或期望在職場上可以順利與客戶溝通者，都可以把本書作為必備指南。

　　本書編寫時涵蓋的Photoshop版本為Photoshop CC 2014、Photoshop CC、Photoshop CS6，以CC版以上為佳。

作者簡介

鷹野 雅弘

　　以建構網站及提供諮詢服務為主要工作，也負責與網站及DTP 相關的演講及教育訓練，同時還擔任書籍企劃、編輯、學校等課程開發。從2005年開始管理CSS Nite，在日本全國及海外舉辦超過420次相關活動，共有5萬名以上的人員參與。

　　是一名技術書作家，出版過20本以上的著作，總銷售量超過14萬本。主要的作品有《10倍ラクするIllustrator 仕事術（增強改訂版）》（共同著作、技術評論社）、《よくわかるDreamweaver の教科書》（共同著作、mynavi）、負責企劃編輯的書籍《現場のプロから學ぶXHTML+CSS》（mynavi）等。

黑葛原 道

　　1974年生於大阪府大阪市，曾任職於Myca 集團的廣告製作部門，之後在廣告製作公司設計免費獨立音樂雜誌（JUNGLELIFE）及執行網站設計等工作。自2001年起成為自由工作者。

　　現在與設計師後藤修共同成立『eater』事務所，負責承接平面設計、網站設計、網站建構等工作。另外，本身也是一名講解網站製作的講師。自2012年開始，負責規劃「Design Pledge」研討會。此研討會的主題以「不拘泥DTP 或網站領域，探討設計相關內容」為主。榮獲霧島酒造主辦的第8屆Nishitachi霧島旗幟設計比賽的獎勵獎。

牧下 浩之

　　設計師／創意總監
　　Plankton Design（股）公司負責人
　　東京造形大學兼任講師

　　曾任職於印刷媒體設計事務所，自2001年獨立，之後重心放在網路媒體上。以建構企業網站、行銷網站為主，不只設計，也負責企劃、監製。致力規劃可以讓客戶、使用者、製作者等三方都能滿意的專案。2011年成立Plankton Design（股）公司。

三浦 將

　　平面設計師。在不動產相關企業擔任過設計師，2014年獨立，成立Derario Creative設計事務所，經營介紹Photoshop技巧的部落格「Dearps」。

 

01 設計前的準備工作
1-1 設定介面(輕觸平移、拖曳縮放、像素格點…)
1-2 指令碼的用法
1-3 環境同步、回復
1-4 適合網頁設計的設定(單位、參考線與格點、靠齊、顏色設定)

02 使用Photoshop CC之後的版本製作最佳構圖範例
2-1 關於範例
2-2 構圖的必要性與製作方針
2-3 開新檔案(網格系統、CSS框架、設計格線系統…)
2-4 設計、製作版面
2-5 使用圖層構圖管理狀態
2-6 管理模組的事前準備工作
2-7 平板電腦、智慧型手機用的版面
2-8 使用Bootstrap製作模型
2-9 摘取資產
2-10 編碼

03 製作手機通用的設計構圖
3-1 順利展開設計工作的準則
3-2 「圖層」面板整理術
3-3 共用元素(圖層、顏色、樣式、文字、狀態…)
3-4 可縮放的表現方法
3-5 利用Generator匯出影像(自動更新)

04 提高工作效率的技巧
4-1 儲存文字特效
4-2 運用含遮色片的圖層群組
4-3 利用變數製作網頁Banner
4-4 製作表格並置入連結
4-5 利用指令碼完成「擴充切片」
4-6 輕鬆製作出色彩變化
4-7 建立確認差異用圖層避免出現錯誤
4-8 利用「Renamy」快速更改圖層名稱
4-9 重疊圖層樣式製作POP文字
4-10 將圖層大小自動記錄在圖層中

05 容易忽略的基本功能
5-1 校正角度與去背
5-2 變形校正
5-3 調整影像素材
5-4 動作(快捷批次處理、批次處理、條件式動作…)
5-5 其他(從PSD匯出文字、以拖放方式置入PSD或影像檔案、更改筆刷大小…)

附錄 Font Awesome Cheatsheet（清單）