Photoshop教學-平面檔快速轉換成網頁格式

November 28, 2008, 8:58 am

≫ Next: Photoshop教學-影像轉存網頁或置入Illuatrator色偏等問題

$

0

0

一直有人問梅干桑，怎麼從平面設計轉網頁設計，而梅干桑總是回答說，其實你已經會網頁設計啦！大家都用很驚訝的表情看著我，毫不猶預的回答～你～唬～爛！真的沒唬爛，這是真的，其實在製作網頁前，還是得透過影像軟體把版設計好，再利用切片工具將平面轉成網頁，別小看這工具，光是這工具就已經幫你完成了八、九成，接下來只要再用DW稍作編排，就已大功告成！但接下來的部分，只為各位介紹如何從Photoshop中所製作好的平面稿轉成網頁格式，至於DW的部分，就留給各位去學習啦！

Step1 這邊請各位朋友要留意一下，要將平面轉成網頁時，有二點要注意： 　1.色彩模式：RBG 　2.解析度：72dpi Step2 以下圖為例，由於此範例為一張EDM，右上角的地方製作了一塊Gif動態影像。 Step3 選取工具箱 / 切片工具，先將我要購買的區塊框出來，如下圖所示。 Step4 將 功能表 / 檢視 / 靠齊 的選項勾起來，再依續將圖片作分割，如圖下。 Step5 選擇 功能表 / 檔案/ 儲存為網與裝置，接著先對著我要購買點一下，並將格式設為Gif，之後依序將其它區塊選取起來，再統一選為JPG格式，如圖下。 Step6 按下 儲存後，先選擇儲存路徑，並將存檔類型選為HTML和影像，以及切片為全部切片，完成後到剛所指定的儲存目錄下，分別會看到images資料夾與edm.html。 Step7 雙響edm.html，隨即便會開啟瀏覽器，簡單吧!恭喜你已經跨入網頁設計，接下來微調的部分就仰賴DW啦!

---

Photoshop教學-影像轉存網頁或置入Illuatrator色偏等問題

June 15, 2009, 3:17 am

≫ Next: Photoshop教學-MAC版Photoshop也可打出網頁中的點陣字型

≪ Previous: Photoshop教學-平面檔快速轉換成網頁格式

$

0

0

身邊有不少的朋友常遇到，每次在Photoshop調整好的照片，不管是轉出成網頁上傳到相簿，或是置入到Illustrator都會發現一件事，那就是ㄟ～那ㄟ顏色全跑，感覺好像圖片的彩度降了30%，有點灰灰髒髒的感覺，那其實是色彩設定上的問題，只要作個小設定，無論是轉成網頁用還是放到Illustrator就可解決色偏的問題。

Photoshop教學-MAC版Photoshop也可打出網頁中的點陣字型

July 22, 2009, 7:39 pm

≫ Next: Photoshop教學-依需求設定影像尺寸與檔案大小

≪ Previous: Photoshop教學-影像轉存網頁或置入Illuatrator色偏等問題

$

0

0

這個問題是有好友腦無所遇到的，由於他最近終於買了生平的第一台macbook，並用它開業接案賺錢，身為設計人員手邊有mac是很平常的事，而他有他專業的堅持，堅持使用MAC OS，有天跑去找他聊天時，他突然問梅干說，Photoshop怎麼打出網頁的點陣的字型，而梅干較常使用昏倒平台，想這不是一件容易的事嗎?就選新細明體，設12像素把防鋸齒關閉不就得了，但問題來了，在昏倒下是OK的，但在MAC下只能用慘字來形容，於是今天早上起床，閒來無事就想說買來這麼久，還沒進到MAC OS，就進去看看順便也把Photoshop CS4安裝完畢，印象中mac應該也可以打出點陣字才對，搞了一下終於被梅干給試出來，如你也有遇到的話，不坊試試看。

Photoshop教學-依需求設定影像尺寸與檔案大小

September 22, 2009, 12:50 am

≫ Next: Adobe Photoshop CS6－時間軸製造超順暢Gif動畫

≪ Previous: Photoshop教學-MAC版Photoshop也可打出網頁中的點陣字型

$

0

0

每當只要有異業合作，或是要把影像上傳到網路時，最常遇到一件事，那就是影像尺寸不得大於多少，檔案需在幾KB裡面，但今天若是Gif動畫時，那真是一個頭二個大，一來要顧畫質，二來又要不斷的測試壓縮比，直到檔案大小符合需求單位，現在與各位來分享一個好方法，讓你可以最快速的把影像的尺寸，與檔案大小調整到指定的大小，只要一個小步驟立即就完成。

Adobe Photoshop CS6－時間軸製造超順暢Gif動畫

July 18, 2012, 11:22 pm

≫ Next: Adobe Photoshop CS6－簡單搞定縮時攝影

≪ Previous: Photoshop教學-依需求設定影像尺寸與檔案大小

$

0

0

　　自從Photoshop CS3後，Adobe則將原來的ImageReady整拼到Photoshop中，因此直接透過Photoshop就可完成Gif動畫製作，相當的方便，但到了Photoshop CS6後，則會發現到，在原來視窗的功能表中，卻找不到「動畫」選項，只有「時間軸」，其實在Photoshop CS3後，就有時間軸的存在，它除了可拿來製作影片外，也可用來製作Gif的動畫，且會比原來的逐格方式更加的順暢，而使用方法與AE相當雷同，因此就一塊來看看，如何利用時間軸來製作出流順暢的Gif動畫。

---

PS CS6 時間軸：

使用版本：Photoshop CS6
操作難易：易
實用性質：★★★★★

---

Step1
首先開啟Photoshop CS6，建立一個新檔案，並輸入文字。

---

Step2
接著選擇功能表 視窗 / 時間軸 選項。

---

Step3
當開啟「時間軸」面板後，可從下拉選單中，選擇動畫的製作模式。

---

Step4
設定好動畫模式後，再對著它點一下，就可進入編輯模式，這是大家較熟悉的影格動畫模式，但今天要來分享時間軸的部分，因此可點右上的箭頭，可將模式切換為「時間軸」。

---

Step5
這時點一下文字的三角形，展開選項後，比方要製作淡出效果，對著不透明度前方的小圖示，點一下建立關鍵點，當建立成功時，在時間軸上會出現一個黃色的菱形圖示，這邊與AE的操控相同 。

---

Step6
接著拉到要淡出的時間軸上，並改變文字的不透明度，這時在時間軸上，就會再產生結束的關鍵點 。

---

Step7
完成後，在時間軸上，就會看到二個關鍵點，這時也可將時間軸，切回影格。

---

Step8
切回影格後，就會看到一堆的影格。

---

Step9
選擇儲存為網頁格式時，將檔案格式設成Gif後，還可預覽動畫效果。

---

Step10
完成結果如下。

Adobe Photoshop CS6－簡單搞定縮時攝影

August 1, 2012, 11:22 pm

≫ Next: Adobe Photoshop CS6－利用時間軸將一堆照片變成動態影片

≪ Previous: Adobe Photoshop CS6－時間軸製造超順暢Gif動畫

$

0

0

　　昨天已分享過，透過「Nikon D700 內建「間隔定時拍攝」大玩縮時攝影」，當拍攝好一堆靜態照片後，接下來就是要把這些靜態照片，串起來變成一連串的動態影片，而網路也有不少熱心的網友，分享各種不同的縮時攝影後置軟體，其實現在只要透過Photoshop就可快速的將序列照片，快速的串成動態影片，且只要一個步驟就可快速完成，之前在Photoshop加入影片功能時，梅干覺得這真是多此一舉，隨著版本不斷的更新，功能逐漸的強化後，從原來的堪用也轉變成可用，因此若手邊有Photoshop CS6的朋友，透過Photoshop CS6後製就可快速，將照片串連起來成縮時攝影，是個相當方便的工具。

---

Photoshop CS6縮時攝影：

使用版本：Photoshop CS6
操作難易：易
實用性質：★★★★★

---

準備素材：

已拍攝好的序列影像，可參考此文章：「Nikon D700 內建「間隔定時拍攝」大玩縮時攝影」。

---

Step1
接著開啟Photoshop CS6，選擇功能表 檔案 / 開啟舊檔。

---

Step2
對著第一張圖片點一下，再把下方的「影像順序」勾起來，接著按開啟舊檔。

---

Step3
設定影的速率，一般網頁上，設定24~30格皆可。

---

Step4
載入完成後，在「時間軸」面板，就會看到影片片段，接著點「時間軸」面板下方的箭頭圖示，將影片輸出。

---

Step5
接著設定輸出影片名稱、位置、格式。

---

Step6
再按下「演算」，就會開始跑了。

---

Step7
完成後，在剛的資料夾，就會看到輸出的影片檔。

---

Step8
雙響後就可直接播放影片，沒想到拍了一個多小時，只有短短五秒鐘XD~

---

Adobe Photoshop CS6－利用時間軸將一堆照片變成動態影片

October 4, 2012, 7:22 pm

≫ Next: Adobe Photoshop CS6－利用時間軸將影片加上LOGO或浮水印

≪ Previous: Adobe Photoshop CS6－簡單搞定縮時攝影

$

0

0

　　之前曾分享利用Mac的iMovie將一堆照片，快速的串起來變成動態影片，且過程相當的簡單，還可加上背景音樂，但礙於iMoive只限Mac平台，因此若使用PC的朋友，就無法使用，因此今天梅干來分享個跨平台的好工具，那就是Photoshop CS6，瞎密！是的沒看錯，現在Photoshop CS6的版本，也可將一堆的照片，透過時間軸，將照片變成動態的影片，同時還可加入轉場特效，以及進場效果，和背景音樂，雖然很簡單卻很實用，現在就趕快來看看吧！

---

Photoshop　照片變影片：

使用版本：Photoshop CS6
適用版本：CS6+
操作難易：易
實用性質：★★★★

---

Step1
建立一個影音的檔案尺寸。

---

Step2
接著把照片直接拖拉到，剛所新增的工作視窗上。

---

Step3
這時PS會依照相片比例，縮放到工作視窗中，狂按Enter就可以了。

---

Step4
完成後，在時間軸就上，就會看到一堆的時間軸圖層，點一下依序的向後拖拉。

---

Step5
將時間軸變成梯子狀，這樣照片就會一張一張的輪放。

---

加入轉場效果:
Step8
點一下面板上方的轉場圖示，將轉場效果直接拖拉到影格上。

---

Step7
加入完成後，在影格右下角會出現一個三角形，若要刪除，點一下再按Del鍵，就可將轉場效果刪除。

---

加入背景音樂:
Step8
都完成後，接著在音軌的地方，按右鍵選擇「新增音訊」。

---

Step9
完成後，在音軌上就會看到匯入的音樂名稱，接著記得將面板上的啦叭開啟，這樣預覽播放時，才聽的到背景音樂。

---

影片預覽:
Step11
都完成後，可按一下上方的播放鈕，就可預覽一下整個的效果。

---

影片輸出:
Step12
點時間軸面板下方「箭頭」，就可設定影片輸出的檔名、格式、儲存位置等。

---

Step13
都設定好後，接著就會開始進行轉檔了。

---

Step14
完成後，馬上來看一下成品，由於音樂版權問題，因此梅干將音樂的部分給拿掉。

---

加入出場效果:
Step15
若覺得出場太平靜，也可加入出場特效，對著影格點一下，按滑鼠右鍵，就可選擇照片出場的特效。

---

Step16
說定特效的呈現方式。

---

背景音樂淡出:
Step17
點一下音軌後方的三角形，可設定音樂結束時，音樂漸淡。

---

Step18
輸出完畢後，再來看一下影片，就會與剛的有很大不同，每張照片出來時，就會有動態的變化，由於音樂版權問題，因此影片則無背景音樂。

Adobe Photoshop CS6－利用時間軸將影片加上LOGO或浮水印

November 27, 2012, 6:22 pm

≫ Next: Photoshop外掛－CSS3ps將Phtoshop圖層樣式轉成CSS3語法

≪ Previous: Adobe Photoshop CS6－利用時間軸將一堆照片變成動態影片

$

0

0

　　之前曾分享過，利用Photoshop CS6，來製作縮時攝影，以及把靜態照片變成動態影像，真的方便不少，直接透過Photoshop就可完成，同時還可輸出各種格式，這對於不熟影音剪輯的朋友，確實是一個相當不錯的功能，同時還可嵌入音樂，邊製作邊預覽，讓照片與音樂對應在一起，除此之外Photoshop CS6的影音功能，還可將影片壓上自已的LOGO或浮水印，甚至還可進行調色，功能相當的齊全。 　　說到影片壓上浮水印、LOGO，一般都需透過影音剪輯軟體，或是iMovie將LOGO或浮水印，壓到自已所製作的影片上，但現在不用這麼麻煩啦！直接透過Photoshop CS6就可輕鬆的將影片壓上自已的LOGO，防止影片被盜拷，且過程相當的簡單，就像平常在製作平面稿一樣的容易，現在就一塊來看看吧！如何利用Photoshop CS6將影片壓上自已的LOGO或浮水印。

---

Photoshop影片壓浮水印：

使用版本：Photoshop CS6
適用版本：CS6+
操作難易：易
實用性質：★★★★

---

Step1
將影片直接拖拉到Photoshop CS6工作視窗中。

---

Step2
拉進去後，在時間軸上就會看到影片長度，以及在圖層面板，會看到一個視訊群組的資料夾。

---

Step3
LOGO要建立在視訊群組上，同時將LOGO移到所要的位置，再將時間軸上的LOGO視訊軌，時間給拉長。

---

Step4
接著利用調整圖層，將影片進行調色。

---

Step5
都完成後，點時間軸面板，左下角的箭頭，設定影片輸出的格式與畫質。

---

Step6
完成後，馬上來預覽看看，哈~右上角就有梅問題的LOGO啦!

---

Photoshop外掛－CSS3ps將Phtoshop圖層樣式轉成CSS3語法

January 7, 2013, 6:22 pm

≫ Next: Photoshop外掛－GUIDEGUIDE 畫面參考線等分產生器

≪ Previous: Adobe Photoshop CS6－利用時間軸將影片加上LOGO或浮水印

$

0

0

　　大部分在製作網頁版型時，較習慣使用Photoshop來製作，一來是習慣問題，二來是Photoshop對於網頁的部分，整合的愈來愈好了，無論是版型的切割、Gif動態圖示、色碼....都能透過Photoshop快速搞定，雖然說Photoshop不像PhotoImpact，內建就有許多樣式可直接套用，但這可透過網路下載來擴充，或是自已打造樣式、筆刷，而自從Photoshop提供了圖層樣式後，不但加速了設計時程外，透過樣式也可創造出各種不同的材質，所以圖層樣式是一個相當棒的功能。 　　透過圖層樣式，就可製作出各式各樣的網頁按鈕，像是水晶按鈕、漸層按鈕、發光按鈕....等，都能在圖層樣式中，輕鬆的完成，同時還可貼入材質，就可製作出各種不同的風格的按鈕、版型，雖然說透過圖層樣式，可快速的製作出各種風格的按鈕，，但最後切版時就得將按鈕，切成一張一張的圖片，再置入到網頁中，其實透過圖層樣式製作好的按鈕，可利用CSS3PS外掛元件，將PS樣式轉成CSS3語法，如此一來就不用再將這些按鈕，切成一張張的圖片，直接就可轉成CSS3語法啦!

---

CSS3PS：

外掛名稱：CSS3PS
適用版本：Photoshop CS3+
官方網站：http://css3ps.com/
外掛下載：官方網站 | Box | MediaFire | ADrive

---

Step1
下載完畢後，雙響「CSS3Ps.xzp」。

---

Step2
接著就會開啟Adobe Extension面板，再按「安裝」。

---

Step3
安裝完成後，在擴充列表中，就會看到CSS3Ps。

---

Step4
這時開啟Photoshop，利用圖層樣式，製作出一個按鈕特效。(這邊梅干是用CS6的版本)

---

Step5
接著選擇功能表 視窗 / 延伸功能 / CSS3Ps。(使用CS3的朋友，則是在檔案 / 指令碼下)

---

Step6
當跳出CSS3Ps面板後，對著中間的圖示點一下。

---

Step7
接著就會開啟網頁，進行樣式的解析。

---

Step8
倒數完後，就會出現剛在Photoshop所製出的CSS3樣式語法，真的是一模模又一樣樣。

---

Step9
再把那些CSS3碼貼到網頁中，馬上來測試一下。

---

Step10
經測試後，可在Firefox、Chrome、Oprea、Safari正常的顯示，獨缺IE而IE要10.0才有支援。

Photoshop外掛－GUIDEGUIDE 畫面參考線等分產生器

May 8, 2013, 6:30 pm

≫ Next: 《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便

≪ Previous: Photoshop外掛－CSS3ps將Phtoshop圖層樣式轉成CSS3語法

$

0

0

　　一般在設計網頁樣板時，應該有不少朋友，跟梅干一樣也習慣用Photoshop來製作吧!加上Photoshop對於網頁的功能也相當完善，無論是版面的分割、動態圖示製作，都能在Photoshop中一次搞定，但有一個部分，一直困擾了梅干許久，就是版面的等分，當今天要將版面等分成三塊中間間距10像素，梅干就得拿出計算機，先計算出每一區塊的大小，再開啟尺規表，一一拉出各區塊的參考線，實在是有點小麻煩，而梅干最近發現一個超棒的外掛，可將畫面等分，除此之外也可指定範圍等分，如此一來就可加快版面的設計，因此身為網頁設計師的你，這外掛絕不容錯過，同時平面設計師也可用喔!

---

GUIDEGUIDE

外掛名稱：GUIDEGUIDE
外掛版本：2.1.2
外掛語言：英文
適用版本：Photoshop CS6+
外掛下載：本站下載 | 官方下載

---

GuideGuide外掛安裝：
Step1
下載解壓縮，雙響「guideguide.zxp」檔。

---

Step2
按「接受」。

---

Step3
安裝成功後，在Adobe CS6擴充元件清單中，就會看到GuideGuide的資訊。

---

GuideGuide應用：
Step1
開啟Photoshop，接著點視窗 / 延伸功能 / GuideGuide 選項。

---

Step2
接著就會看到GuideGuide控制面板。

---

Step3
比方四周要空5像素，就在上方的欄位中，分別輸入5，若是平面的話，就得自已輸入單位，如：5cm。

---

Step5
按下GG鈕後，畫面的四週就會產生，四條參考線啦!

---

Step6
接著要將畫面3等分、中間各間隔10像素，只要將相關數字，輸入到欄位中再按GG鈕，畫面隨即就會被3等分啦!

---

Step7
除此之外，也可用選取工具，框取出一個範圍來。

---

Step8
再按一次GG鈕，選取範圍的區塊也會被三等分，是不是超方便的啦!

---

Step9
切到Sets頁籤，也可將一些常用的等分儲存起來，而這個外掛用法很簡單，各位也自行玩玩看囉!

《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便

August 11, 2015, 3:00 pm

≫ Next: UI利器!《Corner Editor邊角編輯器》快速將Photoshop邊角圖形轉圓角

≪ Previous: Photoshop外掛－GUIDEGUIDE 畫面參考線等分產生器

$

0

0

　　現在在製作網頁版型愈來愈麻煩，不像以前只要製作桌機一個版型就好，隨著智慧型裝置愈來愈多元，現在在設計網頁版型時，還得考量到手板與手機的版型，由於Photoshop只有一個工作區，因此每當設計一個自適應的網頁版型，就得分別的存三、四個檔案，但在Illustrator CS6時，就已多了一個多工作區的功能，如此一來就可將各式不同的大小的版型，同時儲存在同一個檔案中，但現在這功能己下放到Photoshop中啦!因此在Photoshop CC2015中，就可在同一個檔案，建立多個不同工作區的大小，如此一來當在設計RWD自適應的網頁版型時就更加方便啦!因此還不知怎用的朋友，不妨也一塊來看看，新版Photoshop CC 2015所新增的功能吧!

---

Step1
首先，先任意建立一個新檔案。

---

Step2
接著點圖層面板的右上角三角形，再選擇「新增工作區域」。

---

Step3
再設定工作區的名稱，以及工作區的編輯區域大小。

---

Step4
當完成時，圖層就會多一個群組，同時工作區域的左上角也會出現工作區名稱。

---

Step5
接著就可分別建立多個不同大小的工作區域。

---

Step6
當要製作版型時，就可將每各裝置的版型元素，放到工作區的群組資料夾中。

---

Step7
當要改變工作區域範圍時，點一下群組名稱後，這時工具箱就會看到一個像文字的圖示，這時被選到的群組資料夾的工作區域，就會出現八個控制點，就可拖拉控制點改變工作區域的大小。

---

Step8
哈~這樣是不是超方便的呀!如此一來就可將所有的版型大小，放在一個檔案中啦!接著可再配合Adobe Preview CC，將版型同步到手機、平板中來進行檢視，如此一來就更便於調整與修正，因此有了這功能就更方便設計RWD自適應的版型啦!

UI利器!《Corner Editor邊角編輯器》快速將Photoshop邊角圖形轉圓角

August 12, 2015, 9:46 pm

≫ Next: 《Adobe Typekit》有了Adobe雲端字型，讓網頁不再只有新細明體

≪ Previous: 《Photoshop CC 2015限定》多工作區製作RWD自適應版型更方便

$

0

0

　　雖然網路上己有不少相關的UI圖示，供大家下載使用，但有時還是自己客制化，除了透過Illustrator繪製外，其實Photoshop本身也有向量工具，可進行繪製，雖然內建也有提供角圓角的功能，但只限於矩形， 若是其它形狀或是自行用鋼筆工具繪製的，就無法導圓角，就得自己導圓角，所以這時就不得不稱讚一下Illustrator，而最近梅干發現Photoshop一個好用套件，可快速的將邊角轉圓角，且最酷的是這個外掛則是用Photoshop Script製作而成的，同時還是全圖形界面，讓使用更便利，因此身為視覺設計師，這個圓角外掛絕不容錯過。

---

Corner Editor：

外掛名稱：Corner Editor
適用軟體：Photoshop CS3+
外掛下載：https://photoshopscripts.wordpress.com/2015/07/29/update-for-photoshop-cc-2015/

---

Step1
當進入外掛網站後，點 一下畫面中的Download Now!連結。

---

Step2
下載完畢解壓，並將Corner Editor.jsx複製到，Photoshop / Presets / Scripts 資料夾下。

---

Step3
複製完成後，再重啟Photoshop。

---

Step4
接著在隨便繪製出一個形狀區塊出來，接著再選擇 檔案 / 指令碼 / Corner Editor。

---

Step5
矩形邊角轉圓角，在Photoshop CC內建也有此功能，同樣的也可給四個數值，就與CSS圓角用法一樣，分別為上右下左，中間再用,隔開即可。

---

Step6
這個邊角工具，除後可導圓角，也可變內圓角。

---

Step7
以及斜角。

---

Step8
跟內凹角。

---

Step9
除了可將Photoshop內建的向量形狀變圓角外，也可自行用鋼筆工具，繪製出自己所需的圖示。

---

Step10
接著再開啟Corner Editor編輯器，就可將剛的尖角變成圓角啦!是不是超方便的呀!因此身為視覺設計師也趕快來下載囉!

《Adobe Typekit》有了Adobe雲端字型，讓網頁不再只有新細明體

August 25, 2015, 11:58 pm

≫ Next: Photoshop外掛－Velositey網頁版型快速產生器，一鍵產生各區塊

≪ Previous: UI利器!《Corner Editor邊角編輯器》快速將Photoshop邊角圖形轉圓角

$

0

0

　　當今天在製作網頁時，字型就無法像平面一樣，標體用粗黑體、內文用細黑，相當的有變化性，但在網頁的世界裡，只有那101個字型就是大家所熟悉的新細明體，雖然說CSS3可將字型嵌入到網站中，但一個中文字型動不動都5、6MB左右，因此一旦將文字嵌入網頁中，則是一個悲劇的開始，就會發現網頁一直轉不斷的在Loading，所以之前也曾分享《justfont 雲端字型》，來解決網站的字型問題，但justfont無論是免費還是付費版，流量限制的相當的緊，因此一不小心就很容易超過它的範圍，但說真的網頁也不適合用太多花俏的字型，其實只要擁有中黑其實就很夠用了。 　　雖然說可透過CSS來指定字型，當電腦有裝此字型時，就會直接套用，所以大家最常使用的就是微軟中黑體，但若電腦未安裝此字型時，一樣只會無奈的顯示新細明體，而先前曾分享過Adobe與Google一同推出思黑體，雖然可嵌到網站中，但中文字型檔真不是開玩笑的大，所以並未大量的被採用，其實Adobe本身就有推出雲端字型，除了可將字型同步到Adobe的相關軟體中外，也可將這些字型應用於網站中，同時免費版本，每月有25,000的pv限制，但這對於大部分的中小企業而言，相當的足夠，若為付費會員，那每月的流量可到50~100萬，同時不限網站數，雖然目前繁中字型只有思源黑體，但梅干個人覺得也己相當夠用了，因此想讓網站擁有不同字型的朋友，一塊來看看怎麼使用Adobe Typekit到網站中吧!

---

Adobe Typekit：

網站名稱：Adobe Typekit
流量限制：免費(25,000/月)、付費$49.00/年(500,000/月)、付費$99.99/年(1 Million/月)

網站網址：https://typekit.com/fonts

---

Step1
當進入Adobe Typekit官網後，可先點右邊的web鈕，將可用於網頁的字型篩選出來，雖然說目前中文字型只有一個，但裡面有相當多的英文字形，接著將滑鼠移到文字上方，再點一下文字縮圖。

---

Step2
接著就會秀出該字型的細、中、粗.....等變化，當要使用此字型時，需註冊為Adobe會員，若已有Adobe ID時，直接點右上的SIGN IN來登入。

---

Step3
再輸入Adobe ID的帳密。

---

Step4
當登入完成後，在字型右上角就會出現Use Fonts鈕。

---

Step5
點一下後，再將頁籤切到Web，並點下方的creat a new kit。

---

Step6
接著再命名這個文字的名稱，以及要使用的網域有那些。

---

Step7
再把輸入框中的script貼到</body>結尾前方， 並按Continue鈕。

---

Step8
接著就可選擇所需文字的樣式，是要細的、粗的、正常的，就可以從下方一一的勾選起來，勾好後再按右下的Publish鈕，將此字型發佈出來。

---

Step9
這時就會開

---

Step10
當發佈好後，再點左上角的區塊，就會跳出CSS的文字指定方式，分別再把CSS加到網頁的css樣式中，這樣就大功告成囉!

---

Step11
而梅干也將梅問題講堂，套用了此字型，因此各位也可到梅問題講堂看實際的應用狀況http://class.minwt.com，這時不得不給Adobe一個讚，真是佛心來著，讓網頁突破冏境不再只有新細明體，因此下回在幫客戶設計網頁時，不妨可參考一下囉!

Photoshop外掛－Velositey網頁版型快速產生器，一鍵產生各區塊

September 29, 2015, 3:00 pm

≫ Next: FontAwesome PS－將FontAwesome圖示套用到Photoshopt中且可再編輯

≪ Previous: 《Adobe Typekit》有了Adobe雲端字型，讓網頁不再只有新細明體

$

0

0

　　當今天在設計網頁視覺版型時，還是脫離不了Photoshop，同時在設計時，也會透過Photoshop的參考線，來分割版型區塊與對位，由其是目前自適應網頁，參考線更是不可少，因此一開始就得先將參考給建立好，再將區塊一個一個放到指定的區塊中，相信這應該是每個網頁設計師每天必作的工作，而最近梅干發現一套好用的版型產生器，只要一件立即就會將版面的參考線給規畫好，甚至還可快速的產生版頭、內容區塊、側邊欄、版尾......等，相當的方便，當產生完畢後，只需自己再針對區塊加以設計，立即就可完成網頁的視覺設計，可大幅的縮短製作時程，因此身為網頁設計的你，千萬也別錯過了。

---

Velositey：

外掛名稱：Velositey
適用版本：Photoshop CS6、CC
外掛性質：免費
外掛下載：http://dandkagency.com/extensions/velositey/

---

Step1
進入外掛頁面後，點上方的PRODICTS後，再向下拉，點一下藍色鈕。

---

Step2
接著可用Facebook或 Twitter登入取得此外掛。

---

Step3
登入驗證後，再把訊息發佈到自己社群的動態中，就可完成登入的動作。

---

Step4
接著再按ACCESS，就可下載外掛囉!

---

Step5
這時再選擇Photoshop的版本，目前只支援到CC。

---

Step6
下載解壓縮，再放到Plugins/Panels目錄下。

---

Step7
安裝完畢後，開啟Photoshop，再點功能列的視窗 / 延伸功能 / Velositey。

---

Step8
當開啟Velositey控制面板後，點一下上方的區塊，立即就會建立一個新檔案，同時還會將參考線建立好，相當的方便。

---

Step9
這時在Layout的頁籤中，分別就可建立像Headers版頭、Sliders滾動區塊、Content內容、Footers版尾、Modules模版區塊。

---

Step10
就這樣點一點，立即可產生所需的區塊，當產生完畢後，再針對這些區塊一一的美化與設計，這樣就大功告成囉!同時還符合自適應使用。

---

Step11
甚至切到Tools頁籤，還可建立像網址圖示，同時還貼心的告知所需的尺寸大小，因此有了這隻外掛後，立即可省去不少的區塊對位，以及區塊建立的時間，更可將心力放在視覺頁面的設計中，因此身為網頁設計師，這隻小工具絕不容錯過喔!

FontAwesome PS－將FontAwesome圖示套用到Photoshopt中且可再編輯

October 1, 2015, 10:08 pm

≫ Next: Brackets支援PSD原始檔轉網頁，切版更快速

≪ Previous: Photoshop外掛－Velositey網頁版型快速產生器，一鍵產生各區塊

$

0

0

　　先前梅干曾分享過，將IconFonts安裝到電腦中，並再把IconFonts的圖示，套用到Photoshop的畫面中，但過程會有點小麻煩，除此之外由於是文字檔，因此當貼到Photoshop的畫面中後，只能修改圖示的大小與色彩，就無法改變它的造型，而現在有隻Font Awesome的Photoshop外掛，可將Font Awesome的圖示，變成Photoshop中的控制面板，直接點選就能將Font Awesome的圖示產生在Photoshop中，除了可改變大小、顏色外，甚至還可改變它的造型，更重要的是它是全向量格式，因此修改完畢後，也可儲存成svg，再到IcoMoon的網站中，將svg再轉回IconFonts，相當的方便喔!至於怎麼使用，現在就一塊來看看吧!

---

FontAwesomePS：

套件名稱：FontAwesomePS
適用版本：Photoshop CC
套件性質：免費
套件下載：http://creativedo.co/FontAwesomePS

---

Step1
當進入外掛套件畫面後，點一下DOWNLOAD FREE鈕。

---

Step2
接著再輸入姓名與Email。

---

Step3
接著再按下載鈕。

---

Step4
當下載完畢，解壓縮後，再點FontAwesomePS_1.0.zxp。

---

Step5
當安裝完畢後，在Adobe的擴充套件中，就會看到已安裝的套件名稱，但此套件只限於Adobe Photoshop CC版喔!

---

Step6
這時開啟Photoshop，再點視窗 / 延伸功能 / FontAwesome PS。

---

Step7
接著就會開啟 FontAwesome PS 面板，就會看到所有FontAwesome PS的圖示，接著只要點一下所需的圖示縮圖。

---

Step8
接著立即就會產生，同時還是向量 圖層，但也太迷你了。

---

Step9
這時可用縮放將圖示給放大，並用路徑選取工具，點一下就會看到所有的路徑節點，透過這些節點，就可任意的修改圖示的形狀。

---

Step10
除了點圖示縮圖外，也可透過上方的搜尋框，輸入相關的關鍵字，隨即也會秀出相對應的圖示來，是不是超方便的呀!也趕快去下載吧!

---

Brackets支援PSD原始檔轉網頁，切版更快速

October 11, 2015, 3:00 pm

≫ Next: Freebiesbug 收錄許多免費網頁資源PSD、AI、WebFont

≪ Previous: FontAwesome PS－將FontAwesome圖示套用到Photoshopt中且可再編輯

$

0

0

　　之前曾分享過Adobe所推出的Brackets網頁編輯器，除了支援多種語言外，再來就是可即時預覽結果畫面，由於是Adobe公司所研發的，因此最近新版支援將Photoshop中的PSD檔，直接匯入到Brackets中，同時還可預覽PSD的分層檔，更重要的是，還可選擇PSD網頁的區塊，並取得各區塊的資訊，甚至還可以直接複製區塊中的文字，以及可將區塊中的圖片直接連接到網頁中，而Brackets還會立即將圖片儲存在images的資料夾，完全不用再像以前，還得將照片一一的切割，再放到網頁中，加快網頁的切版時間，相當的方便， 因此有在用Brackets與網頁設計的你，千萬別錯過了。

---

Step1
開啟Brackets後，點右側的上傳圖示。

---

Step2
再按Accept鈕。

---

Step3
接著再點上方的Open a PSD鈕。

---

Step4
再將製作好未合併的網頁PSD原始檔，直接拖拉到區塊中上傳。

---

Step5
接著檔案就會儲存在Adobe的雲端中。

---

Step6
當上傳完畢後，再點一下開啟它。

---

Step7
接著在右下角，就會看到網頁PSD的分層檔，同時點一下左邊的區塊，立即會示區塊的大小與資訊。

---

Step8
甚至可直接複製PSD的文字，並貼到網頁中，就不用像以前，得開啟Photoshop二邊切來切去。

---

Step9
且當要使用圖片時，先將圖片點一下，選取好後，再網頁的原始碼中，就會出現所選取的圖片，再點一下將它引用到網頁中。

---

Step10
這時圖片的路徑與位置，就會直接套用到網頁中。

---

Step11
過一回，剛的圖片就會儲存到images資料中，是不是超方便的呀!!這樣就網頁切版就更簡易與快速啦!

Freebiesbug 收錄許多免費網頁資源PSD、AI、WebFont

October 12, 2015, 10:30 pm

≫ Next: Adobe Photoshop CC 不說的祕招!讓網頁切圖更快速

≪ Previous: Brackets支援PSD原始檔轉網頁，切版更快速

$

0

0

　　前幾天分享了，透過Adobe Brackets可將PSD網頁版型，快速的分割為網頁的版型，因此只要有了PSD網頁版型後，就可輕易的將平面轉成網頁，所以當今天要開始製作網頁時，平面的視覺版型絕不能少，有這這個視覺版型後，就有所依據才能快速的進行版面的分割，最近梅干無意間發現國外一個好站台，裡面收集了各種免費的網頁素材，更重要的是該網站，還大量的收錄PSD的網頁版型，除此之外也有AI、Sketch、JS、Web Font....等資源，所以只要一站在手資源無窮，因此身為網設的你，也趕快來下載所需的素材囉!

---

Freebiesbug：

網站名稱：Freebiesbug
網站連結：http://freebiesbug.com/

---

Step1
當進入網站後，左邊的選單，就是所有免費網站資源分類，而以PSD為大宗，可看到免費PSD共有一千多個，同時在下方若看到Free PSD為免費的，右側邊為付費資源。

---

Step2
進入後再點Download鈕。

---

Step3
由於該網站只是收集，因此下載會開啟原始的站台，因此可從原始的網站中，查看授權的方式。

---

Step4
由於每個平台的下載方式不同，而這個平台先前梅干也曾分享過，該平台需登入就可將素材給下載回來囉!

---

Step5
下載回來後，透過Photoshop打開後，真是佛心來著所有的圖層都保留著，而該平台所收集的免費網頁資源的質感還不錯，因此有需要的朋友，不妨也可留意一下囉!

Adobe Photoshop CC 不說的祕招!讓網頁切圖更快速

October 20, 2015, 3:00 pm

≫ Next: 《Photoshop CC 2015限定》利用「新增參考線配置」快速建立符合各RWD框架的版面分隔線

≪ Previous: Freebiesbug 收錄許多免費網頁資源PSD、AI、WebFont

$

0

0

　　當今天在製作網頁時，則會先用Photoshop設計出網頁的視覺版型，確定沒問題後，再用Photoshop切片工具，將畫面中的區塊一一的分割，再另存為網頁使用，相信這應該是許多網頁設計師，再熟悉不過的，雖然說切片工具很方便 ，但有時一不注意時，就會出現1像素的誤差，使得畫面在拼接時，產生空縫或白邊，這時就得再回到Photoshop，用放大鏡工具放大來檢視，並重新調整，但自從Photoshop CC2014版後，就已提供一個影像資產的新功能， 只要將圖層輸入jpg或png，就會自動輸出並儲存，完全不用再作切片，立即就可將製作好的網頁版型給輸出完畢，而這個功能不少朋友不知道，因此身為網設的朋友，也一塊來看看吧!

---

檔案設定規則:

縮放+檔名+副檔名+壓縮比
ex.200% demo.jpg 50%
　 300 x 200 demo.jpg 50%

---

Step1
將要分割的頁面開啟至Photoshop中，再點選 檔案 / 產生 / 影像資產。

---

Step2
接下來變更圖層名稱，並加入.jpg或.png的圖檔名稱。

---

Step3
無論是圖層資料夾，還是單一圖層，都可自行加入。

---

Step4
這時神奇的事情發生了，在PSD的存放路徑中，就會看到xxx-assets的資料夾。

---

Step5
雙響進入後，就會看到剛所設定的圖層副檔名，就會自動儲存成剛所設定的格式啦!有了這功能是不是超方便的呀!而這一個功能要Photoshop CC 2014版以後的版本才支援喔! 因此當下回要切版時，不妨試試看囉!將會大幅縮短切片時間。

《Photoshop CC 2015限定》利用「新增參考線配置」快速建立符合各RWD框架的版面分隔線

October 25, 2015, 2:50 pm

≫ Next: PSD Repo 免費網頁版型、圖示、按鈕PSD原始素材檔下載

≪ Previous: Adobe Photoshop CC 不說的祕招!讓網頁切圖更快速

$

0

0

先前曾分享過Photoshop的套件，透過該套件，就可快速的建立版面分隔參考線，並透過這些輔助參考線，設計出符合RWD自適應的版面來，而目前這功能，已經被Photoshop納入進來，因此現在只要使用Photoshop CC2015版，立即就能產生版面隔線，同時還可依照所要套用的RWD框架，來設定Photoshop版面參考線，像是Bootstrap則是將畫面分割成12等份，Yahoo! Pure則是將畫可分割為24等份，同時也可針對RWD框架，每個分欄間距作設定，因此有了這功能，在設計RWD自適應的版面就更方便啦!因此身為網設的你，也趕快來使用看看囉!

PSD Repo 免費網頁版型、圖示、按鈕PSD原始素材檔下載

October 27, 2015, 9:40 pm

≫ Next: Photoshop如何指定圖片輸出的檔案大小

≪ Previous: 《Photoshop CC 2015限定》利用「新增參考線配置」快速建立符合各RWD框架的版面分隔線

$

0

0

　　當今天在設計網頁時，素材絕不能少，因此梅干平常則會不定期的收集一些網頁素材，包含按鈕、圖示、網頁版型.....等，透過這些素材，不但可作為參考，同時還可自行的重組與搭配，再整合成自己所需的版型，最近梅干又發現一個免費PSD素材平台，裡面有各式的網頁素材，同時都還保留原始檔，更棒的是有些還是遵照，目前主流的RWD框架來作設計，因此在套用與設計就更加便利，因此無論是桌機、平板、手機一次搞定，因此身為網頁設計的你，怎能錯過此網站，也趕快來收集一下，自己所需的素材吧!

---

PSD Repo：

網站名稱：PSD Repo
連結網址：http://psdrepo.com/

---

Step1
進入素材網站後，除了上方可看到目前最新與最受歡迎的外，也可從下方的分類連結，直接找尋自己所需的素材。

---

Step2
當點選分類後，就會出現所有分類的素材縮圖，拉到下方點一下Donwnload鈕，就可將此素材檔下載回來。

---

Step3
由於此素材放在Dropbox，再點下載鈕，即可將它下載回來。

---

Step4
而在剛的頁面中，向下拉還可看到相似的素材有那些。

---

Step5
下載完畢，解壓後，分別會看到所有的圖層外，還會看到一堆的參考線。

---

Step6
這時將12 Col Grid的圖層眼睛開啟，就會看到此版型則是用12欄進行設計，因此要套用在Bootstrap也沒問題，而這個素材網站，裡面所提供的素材質感都相當的棒，因此身為網設的你，也趕快來下載囉!