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

May 5, 2016, 3:00 pm

≫ Next: 透過Photoshop CC 2015 調整影片尺寸大小快又方便

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

$

0

0

　　有在經營拍賣或商城的朋友，當今天要把產品照片上傳時，總會遇到平台會有檔案大小的限制，而平台之所以會限圖檔大小，最主要的原因就在於，讓消費者可以快速的預覽到產品圖片，但這時就苦了許多的賣家，當把產品圖片製作好後，就要開始進行壓縮，直到符合平台限制的大小，往往這都讓許多賣家花上不少時間，其實Photoshop早以內建此功能，只需設定要輸出檔案格式的大小，Photoshop就會自動的計算出，圖片的壓縮比例，因此不知道的朋友，現在也趕快來看看吧!

---

Step1
製作好的圖像或Banner，選擇 檔案 / 轉存 / 儲存為網頁用(舊版)。

---

Step2
接著點右上角的三角形圖示，再選擇檔案大小最佳化

---

Step3
再輸入要轉存的檔案大小。

---

Step4
輸入完畢後，Photoshop就會自動計算出圖檔的壓縮比例。

---

Step5
轉存後，可看到檔案大小與當初所設定的一致，如此一來就不用每次設半天啦!

---

透過Photoshop CC 2015 調整影片尺寸大小快又方便

May 29, 2016, 3:00 pm

≫ Next: FlatIcon免費上萬個平面化UI圖示平台，要多少下載多少

≪ Previous: Photoshop如何指定圖片輸出的檔案大小

$

0

0

此次的Photoshop教學中，將為各位分享，直接透過Photoshop中，就可直接修改影片的尺寸大小，同時還可以設定影片的輸出格式，不但完全不用具備任何的影音概念，就可將影片縮小，甚至調整亮度、壓浮水印.....等

FlatIcon免費上萬個平面化UI圖示平台，要多少下載多少

June 13, 2016, 3:00 pm

≫ Next: Photoshop外掛－Glifo將Photoshop中的向量圖示輸出為網頁專用Icon Fonts

≪ Previous: 透過Photoshop CC 2015 調整影片尺寸大小快又方便

$

0

0

　　先前梅干曾分享過icomoon這個平台，在這個平台中提供了各式各樣的UI圖示，與一般免費的圖示平台最大不同點在於，使用者可以依需求，選擇自己所需要的圖示，並打包發佈一份屬於自己的Icon Fonts，如此一來瀏覽者也不用下載一大包，二來也可加速網站的載入速度，除了iconmoon這平台外，梅干最近也發現另一個平台，除了與icomoon一樣使用者可以依需求，要多少下載多少外，裡面提供的圖示更多元，且全部扁平化，同時也有提供Photoshop、Illstrator的外掛套件，讓你直接在影像工具中就可使用這些圖示，除此之外該平台提供的格式也相當的多，像是SVG、PNG、PSD..外，還有WebFont等多種格式，因此身為網頁設計的朋友，也趕快來看看囉!

---

FlatIcon

網站名稱：FlatIcon
連結網址：http://www.flaticon.com/

---

Step1
進入網站後，可透過上方的搜尋框輸入要找尋圖兆的關鍵字。

---

Step2
或是向下拉，也會看到目前較受歡迎的圖示有那些。

---

Step3
點一下進入後，就可看到所有的圖示的縮圖，當滑鼠滑到上方時，分別會出現是要加入收藏還是要預覽。

---

Step4
點預覽圖示後，下方就可看到可下載的檔案格式外，上方的灰色鈕，也可將該圖示加入收藏。

---

Step5
當把圖示加入收藏後，在畫面的右上角就會看到已加入的收藏圖示的數量，點一下就會展開目前已收藏的圖示。

---

Step6
點一下調色盤就可修改圖示的預設色彩。

---

Step7
甚至還可自訂圖示名稱。

---

Step8
定義好名稱後，再按右上的Back鈕返回。

---

Step9
當圖示已被收藏時，四周就會出現虛線框。

---

Step10
都選擇與設定好後，再點下方的Download鈕。

---

Step11
接著再點右邊的Free downlad

---

Step12
下載回來解壓縮後，就會看到各式各樣的檔案格式。

---

Step13
而WebFont算是梅干比較常用的，這時進入font資料夾後，再點flaticon.html。

---

Step14
接著就會看到該圖示的套用方法，與圖示的名稱，剛floaticon也有提供Photoshop、Illustrator、AfterEffects的外掛套件可使用 因此也可以將foation的圖示直接引用到軟體中啦!

Photoshop外掛－Glifo將Photoshop中的向量圖示輸出為網頁專用Icon Fonts

July 11, 2016, 3:00 pm

≫ Next: Photoshop CC 2015.5限定!看到Banner上的文字，讓Photoshop告訴你是什麼字型

≪ Previous: FlatIcon免費上萬個平面化UI圖示平台，要多少下載多少

$

0

0

　　雖然先前曾分享過，將Icon Fonts的字形應用於Photoshop裡，最後再將使用的圖示，上傳到IcoMoon網站中進行整合，若有些圖示是自己繪製的話，就得先另存成SVG才可以， 但Photoshop雖然內建有向量工具，卻無法輸出SVG檔，因此每次都需使用Illustrator繪製後，再匯到Photoshop中，這樣實在有些麻煩，所以梅干找了好久，終於找到一款簡易好用，可將Photoshop中的所有向量圖示匯出，並轉成Icon Fonts，讓在網頁套版時更加的方便，因此身為網頁設計你，這隻外掛千萬別錯過了。

---

Glifo

外掛名稱：Glifo
適用版本：Photoshop CS5+
支援平台：Windows/MAC
外掛性質：付費$19美元
外掛網址：creativemarket.com

---

Step1
進入外掛網站後，點一下右上的Buy Now鈕。

---

Step2
接著輸入信用卡號，並註冊為會員，就可將此外掛下載回來。

---

Step3
解壓縮後，分別會看到有Mac與Windows二個資料夾。

---

Step4
接著雙響Glifo Installer.app，再按Install Glifo鈕，即可完成安裝，Windows則是雙響.MXP。

---

Step5
當安裝完畢後，開啟Photoshop並將要轉出的向量圖層名稱，前方加入*號。

---

Step6
接著點選上方功能表的，視窗 / 延伸功能 / Glifo。

---

Step7
再點Glifo面板中的Create Icon Font鈕，再選擇要存放的目錄。

---

Step8
接著按確定。

---

Step9
按是。

---

Step10
這樣就輸出完成啦!

---

Step11
這時再到剛所指定的目錄下，分別就會看到二個檔案與資料夾，再雙響myfont.html。

---

Step12
接著再點下方的連結，有趣的是會開啟Google搜尋，再任意選擇一個平台。

---

Step13
勾選要輸出的格式，再點下方的SELECT FONT(s)。

---

Step14
將fonts資料夾中的myfont.svg拖拉進去。

---

Step15
接著點右下的Done鈕。

---

Step16
再點SAVE YOUR FONT。

---

Step17
接著再點藍色鈕，就可將它下載回來。

---

Step18
下載回來解壓縮，再將所有的檔案，複製到fonts資料夾下。

---

Step19
接著開啟style.css檔。

---

Step20
先將原來的刪除，再把下方的註解拿掉。

---

Step21
鏘~鏘~這時圖示就跑出來啦!當要知道該圖示的名稱時，對著圖示點一下。

---

Step22
接著就會跳出該圖示的類別名稱，是不是超方便的呀!

Photoshop CC 2015.5限定!看到Banner上的文字，讓Photoshop告訴你是什麼字型

July 31, 2016, 3:00 pm

≫ Next: 「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)

≪ Previous: Photoshop外掛－Glifo將Photoshop中的向量圖示輸出為網頁專用Icon Fonts

$

0

0

　　當今天看到傳單或廣告Banner中的字型，覺得很漂亮也很喜歡，這時就是考驗個人的辨視功力，從電腦或網路中找出類似的字型，這時就得花上不少時間一一的比對，但現在有更快速的方法，只需透過Photoshop CC 2015.5新版「符合字體」的這功能，就能自動的尋找目前電腦中是否有類似的字型，當沒有時就會透網路中進行搜尋與下載，如此一來就可快速的所需的字型啦!因此當下回有看到喜歡的文字時，不妨讓Photoshop幫你尋找吧!

---

Step1
將看到喜歡的Banner或傳單開啟，再選擇文字/符合字體。

---

Step2
接著將喜歡的字型框選取起來，這時Photoshop就會開始進行比對，目前只有英文字型可下載，當尋找到後，再看那一個比較相近，再對著字型點一下。

---

Step3
接著就會將該字型，自動下載並同步至Photoshop中。

---

Step4
下載完畢後，就可開始使用啦!雖然無法一模一樣，但至少還相近的，有了這功能，就可縮短尋找字型的時間啦!相當實用的功能。

「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)

August 22, 2016, 3:00 pm

≫ Next: Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

≪ Previous: Photoshop CC 2015.5限定!看到Banner上的文字，讓Photoshop告訴你是什麼字型

$

0

0

　　當在開始設計網頁時，都會先作好視覺版型，確認沒問題後，才會開始進行切版與編排，因此視覺版型相當的重要，所以平常梅干都會收集一些喜愛的版型作為參考，而今天要與大家來分享一個平台，雖然說裡面的版型不多，但每一個都很精緻，更重要的是除了可個人使用外，還可作為商業使用，且所有的圖層都沒有合併，因此更方便編排與修改，因此身為網頁設計師的你，還在等什麼也趕快來下載囉！

---

ElemisFreebies

網站名稱：Elemis
連結網址：http://elemisfreebies.com/

---

Step1
進入網站後，從下方會看到各式各樣的網頁版型縮圖。

---

Step2
當看到喜歡的版型時，將滑鼠移到縮圖上方，再點一下Downloads。

---

Step3
接著再點下方的Download File鈕。

---

Step4
下載完畢解壓縮後，除了會有原始的PSD檔外，還會有份說明文件，從文件中可看到此樣版的使用授權。

---

Step5
開啟後，可看到所有的圖層都沒有合併，真是相當的佛心。

Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

October 4, 2016, 3:00 pm

≫ Next: 使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

≪ Previous: 「ElemisFreebies」上百個免費超質感網頁版型PSD檔下載 (可商用)

$

0

0

　　隨著現在的裝置的解析愈來愈高，動不動就4K，因此在瀏覽網頁圖片時，就得準備多種尺寸，並搭配js的控制，來初換高解析的圖片，讓網頁在2K或4K的螢幕下，能保有清析高解度的影像，所以當圖片製作完畢後，就得將圖片依照不同的尺寸來進行縮放與儲存，一、二張倒還好，當有幾十張圖片，再加上每張需轉三種不同的影像尺寸時，來回就得作個3 、40次，相當的累人。 　　其實這一點Photoshop cc2015版，已內建了此功能，可以將一張圖片，轉存成多種不同的尺寸的大小，甚至還可設定命名規則，如此一來當有多張圖片在進行轉檔時，就比較方便且省事，但在使用此功能時，在Retina的螢幕需開啟高解，這樣看到的比例大小才會與輸出時一致，不然會出現二倍大的預覽結果，若非一般Retina的螢幕，在作圖時需將檢視比例設為50%，才會是輸出後的1:1的比例。

---

Step1
當是Retina的螢幕時，將低解析開啟的選項關掉。

---

Step2
接著在建立新檔案時，影像需乘以2倍。

---

Step3
將圖片編輯好後，再合併合所有圖層，並點圖層面板，右上的選項圖示，再選擇轉存為。

---

Step4
當1:1尺寸需除以2，因此將右邊面板的縮放比，設為50%。表示在一般正常的螢幕，所顯示的影像尺寸為700×490。

---

Step5
接著按左上面板的+號，建立一組尺寸的比例，由於剛是設定2倍大，因此這時設為2X，若要建立多各的話，可以重覆此步糞一一的加入所需的尺寸大小，由於剛所設定的影像尺寸最大為2倍，因此勿選3x，否則影像會失真。

---

Step6
都設定好後，在右上的面板中，可設定要輸出的檔案格式，目前支援JPG、PNG、SVG....等格式，當選擇JPG時，可設定圖片的壓縮比例，再按右下的全部轉存鈕。

---

Step7
轉存完畢後，會在剛所設定的儲存路徑中，分別看到二個圖檔，並且會依照剛所設定的命名，因此透過這個轉存功能後，就可任意的轉存各式各樣不同的影像尺寸。

使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

October 10, 2016, 3:00 pm

≫ Next: [教學] Photoshop 切片工具隱藏密技！「分割切片」可快速且準確的等分切片區塊

≪ Previous: Photoshop CC 將圖片批次轉存Retina各種不同的尺寸規格

$

0

0

　　前幾天梅干曾分享過，透過Photoshop CC新版的轉存新功能，來批次匯出各種高解的圖片尺寸，但要使用此功能需具備二個條件，一個是需將Photoshop更新至CC版，另一個則是當要匯出時，得將所有的圖層合併，才能批次轉出，因此當今天電腦所使用的Photoshop非CC版時，與不想合併圖層，這時要如何來進行轉存呢? 　　其實方法很簡單，只需透過Photoshop內建的儲存為網頁用的這功能，即便不是使用Photoshop CC與合併圖層，一樣也可以將圖片轉出各種不同影像尺寸的規格，甚至一樣可設定影像的輸出格式與壓縮比例，因此要如何使用儲存為網頁的工具來匯出多種尺寸呢?現在就一塊來看看吧!

---

Step1
當把圖片製作好後，無需將圖層合併，並選擇功能列 檔案 / 轉存成網頁用選項。

---

Step2
接著在儲存為網頁用的面板右下角，會看到一個百分比，這時只需更改縮放的比例即可，比方說當初在設計時，以二倍大的尺寸進行設計時，當實際顯示的尺寸為一半，只需將百分比設為50%，就是1:1啦!

---

Step3
再設定儲存路徑與檔名，這樣就完成一個圖檔的輸出了，不但不用合併圖層，同時也不用縮放影像的尺寸，而是藉由儲存為網頁用的百分比來進行設定。

---

Step4
再重覆以上步驟，就可轉出多種不同尺寸圖像啦!

---

Step5
如此一來也可輕鬆的轉出多個不同尺寸的影像檔啦!

---

[教學] Photoshop 切片工具隱藏密技！「分割切片」可快速且準確的等分切片區塊

April 11, 2017, 12:00 pm

≫ Next: [教學] 免外掛！Photoshop內建的圖片壓縮器，就能符合Google PageSpeed Insights的圖片要求

≪ Previous: 使用舊版「Photoshop的儲存為網頁用」也可輸出Retina的各種影像尺寸

$

0

0

Photoshop CS5的版本中，已悄悄的加入一個超實用的功能，那就是分割切片，透過分割切片可將剛所切割出來的區塊，再進行等分的分割，同時不再有1像素的空白問題，因此還是習慣使用Photoshop切片工具，現在就一塊來看看，這個切片的隱藏密技「分割切片」

[教學] 免外掛！Photoshop內建的圖片壓縮器，就能符合Google PageSpeed Insights的圖片要求

May 4, 2017, 1:15 am

≫ Next: [素材] PSDboom 提供(圖示、背景、按鈕、LOGO)各種免費PSD素材下載

≪ Previous: [教學] Photoshop 切片工具隱藏密技！「分割切片」可快速且準確的等分切片區塊

$

0

0

一直以來大家都知道，透過Google所推出的PageSpeed Insights平台，就可線上幫網站進行檢測，看是否有那些需要進行修正的，同時在修正的地方，還會分成必須修正與建議修正，但相信絕大部分的朋友，在必須修正的地方，都是因圖片太大，雖然Google也清楚的說明，每張圖片的壓縮比例為何，甚至也有提供相關的壓縮工具，但說真的光是還要下指令就感到有些麻煩。

[素材] PSDboom 提供(圖示、背景、按鈕、LOGO)各種免費PSD素材下載

August 5, 2017, 3:00 pm

≫ Next: [素材] Novapattern 可商用 Photoshop 底紋素材免費下載

≪ Previous: [教學] 免外掛！Photoshop內建的圖片壓縮器，就能符合Google PageSpeed Insights的圖片要求

$

0

0

　　圖片素材真的怎麼樣都不閒多，最近有朋友推薦了一個感覺和平常不太一樣的素材網站，不是提供一般圖片喲，而是直接提供PSD素材的網站。PSDboom—提供多種免費PSD素材下載，網站裡雖然有一些些圖片是需付費的，但絕大多數的圖都是FREE的喲，在下載時，要小小注意一下囉。另外要特別提醒一下，這個網站所提供的免費圖片，都是僅供個人使用的，如果要商用的話，可能要發個mail尋問一下是否可以喔，但如果是付費購買的圖片，就沒有這方面的問題囉。 　　PSDboom真的是很佛心來著，除了提供多款的免費素材給大家使用之外，就連下載的方法都非常簡單，只需要動幾下滑鼠，簡單的幾個小步驟，就可以拿到想要的素材原始檔喔。那因為這個網站大部份的素材都還是以免費素材居多，所以今天就跟大家說明一下免費素材的下載方法，付費素材的部份就暫不說明囉。

---

PSDboom

網站名稱：PSDboom
網站連結：http://psdboom.com/

---

Step1
進到網站後，網頁往下拉，會看到搜尋列，可直接輸入需要的關鍵字，再從「Entire Site」中挑選適合的種類來搜尋，或是再往下拉，全部的選項一字排開，從這裡進去找也是一種選擇喔。

---

Step2
進去之後，就會出現可供選擇的圖片，直接點選所想要的圖片，就可以進入下載畫面囉。

---

Step3
進到下載畫面後，左邊是圖片，圖片下方會寫出尺寸大小，按下右邊的「Download Now」即可。

---

Step4
此時畫面會出現要求輸入e-mail帳號及姓名，再按下【Download Now】，圖片就下載下來囉。

---

Step5
下載後為壓縮檔，解壓縮後，會出現兩個檔案，一個是psd，另一個則是jpg，下圖就是下載後的圖片囉。

[素材] Novapattern 可商用 Photoshop 底紋素材免費下載

August 7, 2017, 3:00 pm

≫ Next: [教學] Adobe Photoshop 色域要如何設定，才能讓編輯與輸出的色彩一致

≪ Previous: [素材] PSDboom 提供(圖示、背景、按鈕、LOGO)各種免費PSD素材下載

$

0

0

　　今天想跟大家介紹一個我個人感覺小小精緻的免費素材網站，Novapattern—為什麼說他算小小精緻呢，因為這個網站提供了一些與一般圖庫感覺不太一樣的素材給大家，主要是偏像紋理、圖樣感覺的圖，雖然數量不多，但圖片本身感覺是滿精緻，有質感的喲，雖然有小小部份的素材需要付費，但絕大部份的素材是可以免費下載的，除此之外，他不限使用用途，商用也行喔!!只需要遵守【Creative Commons（CC 授權）姓名標示 4.0】的規定，就可以盡情使用喔。 　　Novapattern其實還滿貼心的，在下載時就會先告知你想下載的圖片，他的格式及尺寸各為多少，而且都會提供兩個不同大小或類型的檔案，是不是很感動！接下來就讓小的來說明一下，在Novapattern的網頁上，要怎麼操作，才有辦法把素材下載下來使用喔。這裡先小小跟大家提醒一下，因為Novapattern是透過e-mail來下載圖片，所以在接下來的步驟裡，有需要輸入e-mail帳號時，請千萬要記得填入喔!!。

---

novapattern

網站名稱：Novapattern
網站連結：https://www.novapattern.com/

---

Step1
進到Novapattern的網頁後，直接下拉就會發現各種素材，選定好想要的素材後，按下圖片左下方的【Free Download】就可以了。

---

Step2
點進去後，會出現輸入電子郵件的視窗，輸入完畢後，按下【繼續】就可以了。另外，在輸入的欄位上面，有註明了這張素材下載後會提供的檔案類型及尺寸，一般都會是兩種尺寸，一大一小。

---

Step3
填完e-mail帳號後，會出現結帳完成的畫面，點下【完成結帳】就可以囉。

---

Step4
完成結帳後，就會再出現下面的畫面，表示交易完成，圖片也已送到信箱裡囉。

---

Step5
接下來就要去信箱確認一下，是否收到如下圖的mail喔，有的話就沒有問題啦。

---

Step6
把郵件打開後，會出現像下圖的資訊，要再點DOWNLOAD之後，圖片的壓縮檔才會下載到電腦裡喔。

---

Step7
下圖就是下載後尺寸較小的PNG圖

---

Step8
這是另一張，尺寸較大的PNG圖，每個素材下載時所提供的規格不同，所以在選圖時，可以先看清楚才知該如何運用喔。

[教學] Adobe Photoshop 色域要如何設定，才能讓編輯與輸出的色彩一致

October 26, 2017, 3:00 pm

≫ Next: Photoshop安裝Zeplin外掛套件，並將設計好的版型匯入到Zeplin的專案

≪ Previous: [素材] Novapattern 可商用 Photoshop 底紋素材免費下載

$

0

0

其實要解決這個方法也很簡單，只需先設定好色彩模式，之後當圖片載入時，就會依照所設定的色彩模式，進行顯色，因此當在Photoshop進行編修，並輸出成網頁時，也不會造成跑色的問題，甚至若載入已嵌入其它的色彩設定時，也可再手動自行指定，因此有遇到跑色問題的朋友，現在也一塊來看看，如何設定你的Photoshop吧！

Photoshop安裝Zeplin外掛套件，並將設計好的版型匯入到Zeplin的專案

May 30, 2018, 7:00 pm

≫ Next: [外掛] PSD to HTML5 一鍵將PSD檔轉存成HTML或WordPress佈景主題

≪ Previous: [教學] Adobe Photoshop 色域要如何設定，才能讓編輯與輸出的色彩一致

$

0

0

Zeplin目前支援Sketch與Photoshop，因此無論是APP開發還是Web，Zeplin都支援，而今天梅干要來分享，如何將Zeplin的外掛安裝到Photoshop中，讓Photoshop設計好的版型，也能同步到Zeplin中，讓前端工程師或切版人員，可以透過Zeplin進行套版，至於要怎將Photoshop中的版型同步到Zeplin中，現在就一塊來看看吧！

[外掛] PSD to HTML5 一鍵將PSD檔轉存成HTML或WordPress佈景主題

August 22, 2018, 11:00 pm

≪ Previous: Photoshop安裝Zeplin外掛套件，並將設計好的版型匯入到Zeplin的專案

$

0

0

雖然在設計網頁版型時，梅干依然還是習慣使用Photoshop，但設計完畢後，就得將版面中圖塊一一的匯出，再到網頁編輯器中進行編排，在長時間的訓練下，梅干早已練就看到原始碼，就可想像版型大概會怎呈現，但這對於許多剛從平面轉網頁的設計師，會感到相當的挫折，因此梅干也不斷在尋找是否有更好用的圖形化工具，找了好久了，最近找到一套相當強大的外掛，除了能將Photoshop中所設計的版型，直接轉換成HTML格式外，甚至還可將PSD轉成WordPress佈景主題，讓梅干感到吃驚，怎會這麼強大好用，因此想跨入網頁世界的平面設計師們，有福囉！

---