image – 記下來

Picasa 3教學 – 免費相簿的基本介紹與使用方式

黃小蛙 — Sun, 11 Mar 2012 06:57:55 +0000

Picasa 相簿已經改成 Google 相簿了喔！而 Google 相簿將在 2021 年 6 月 1 日起不再提供除了 Pixel 手機以外的無限儲存空間配額，如果 Google 相簿已經塞了很多東西的話，可以參考這篇，快點打包相簿吧！

空間不夠備份圖片了怎麼辦？試試 Qubii Pro 吧（iPhone 儲存空間不足怎麼辦？Qubii Pro 備份豆腐拯救你！）

說到Google相簿 – Google Picasa，相信對大家來說已經是舊聞了，但還是有一些跟Google不太熟的網友們不曉得有這麼方便又好用的工具(像小蛙的姊姊)，小蛙今天要來介紹Picasa的基本使用方式，只要有一個Google帳號，就可以免費使用Google相簿喔(有條件的免費，但這些條件很夠誠意囉！)

當小蛙要挑選網路空間或是相簿的時候，除了考慮到空間、速度、費用…之外，也要考慮到背後的大老闆，免費的服務有很大部分上線不久，經過大量的濫用造成公司沒辦法負擔維護費用而終止，有良心的公司還會提前通知使用者備份資料，但大多數都是莫名其妙就消失了。如果您使用的是Picasa，最起碼(不敢保證)是由「感覺快要統治全宇宙的Google」所推出的，壽命及穩定性方面也都有相當程度的保障。

Picasa安裝

開始使用Picasa之前，還沒有Gmail帳號的話先去註冊一個吧！註冊好後連到Picasa官網，如果已經是登入狀態就會看到下面的畫面，點選左下角的「好，建立我的Google個人資料」(小蛙不確定是不是一定要點這個，可以試試看點取消帳戶建立)

下一個畫面成功進到Picasa相簿囉！Picasa有兩種上傳照片的方式：(1) 透過Web上傳；(2) 透過Picasa軟體上傳。

如果要透過網頁上傳，只要點選上方的「上載」即可。小蛙建議可以下載Picasa軟體，Picasa軟體除了方便使用者上傳照片外，還包括了許多便利的圖像處理工具喔！如果已經登入可以看到以下畫面，透過右邊的「全新改良的相片上傳程式」下載Picasa軟體。

沒登入的情況下也可以直接透過Picasa首頁下載。

安裝過程沒什麼特別需要調整的，下一步到最後。

安裝完成後執行Picasa3，第一次使用會詢問是否要搜尋電腦中的圖片，如果照片跟小蛙一樣試放在自訂資料夾的話，建議選擇搜尋所有圖片(但可能一些不想曝光的照片也都會被搜尋到喔！Picasa軟體也提供過濾功能，進到軟體後可以再設定不想顯示)。

再來是設定檔案關連，選擇要用Picasa相片檢視器開啟的檔案格式，之後擊點兩下要開啟的相片就會直接使用Picasa相片檢視器開啟了。

Picasa編輯器

進到Picasa軟體後，Picasa會開始搜尋電腦裡的圖片。

在想編輯/檢視的照片上點選滑鼠左鍵兩下開始編輯。

Picasa提供了很多方便的濾鏡及圖片編及工具。像是：剪裁、紅眼、對比、LOMO、柔化、銳化、黑白…等。以下是全部Picasa提供的濾鏡。

Picasa上傳照片

Picasa軟體除了提供簡易的濾鏡工具外，還有最重要的上傳部份，使用Picasa上傳照片也非常簡單，在要上傳的照片本身或是照片資料夾中點選滑鼠右鍵->上傳到Picasa網路相簿。

用剛剛註冊的Gmail帳號登入吧！

上傳時可以設定要上傳到哪個相簿、或是新增相簿，相簿描述、相簿瀏覽權限、相片大小以及要分享的對象…等等資訊。

上傳中的畫面。

上傳完成後透過網頁連到Picasa網頁就可以看到剛剛上傳的相簿囉！

而Picasa軟體上面也可以很方便的讓使用者知道照片是不是已經上傳，是個很貼心的設計。上傳過的照片會在右下角出現往上的綠色箭頭。

直接透過網頁版Picasa也可以上傳照片，可以點選上方的「上載」，或是進到相簿中有個「新增相片」。

上傳方式也很簡單，直接把圖片拖進去放再點選右下角的確定就可以囉！

Picasa相簿分享

上傳到Picasa後如果想要分享給其他朋友，進入到相簿頁面後，右側有「分享」選項，如果相簿設定為公開，只要其他網友連結到自己的頁面就可以看到公開的相簿，也可以透過右側的「連結」來分享自己的相簿；如果是設定成僅限自己，就沒有辦法分享給其他人看了。Picasa還提供了另外一種權限叫做「僅限知道連結的使用者」，如果是這種分享方式的話，就可以自己設定要給哪些朋友看到這個相簿！

點選「分享」按鈕後，可以寄發mail給要分享的對象。

選擇「內嵌投影播放」讓使用者可以把相簿內嵌在部落格或是網站上。

而小蛙最常用的功能還是單張照片的嵌入功能，為了減輕小蛙VPS的負擔，只好把圖片全部都外連到Picasa，也就是最常聽到的「外連圖片」。

最後一定要提一下Picasa佛心的部分，先來張圖

紅色框框的部份寫著：

如果有使用Google+，只要相片大小低於 2048x 2048 像素，影片長度少於 15 分鐘，就不會計入免費儲存空間配額。
如果沒有使用Google+，只要相片大小低於 800x 800 像素，影片長度少於 15 分鐘，就不會計入免費儲存空間配額。

意思就是只要在上傳圖片的時候設定符合這兩個規格以內，就可以擁有永遠塞不滿的Picasa相簿喔！是不是很佛心來的呢？

這篇文章 Picasa 3教學 – 免費相簿的基本介紹與使用方式最早出現於記下來。

使用FancyBox燈箱效果呈現圖片，無法顯示圖片

黃小蛙 — Wed, 28 Dec 2011 04:15:05 +0000

小蛙的最近一個工作中，要讓使用者點了縮圖之後可以透過燈箱效果開啟大圖並且上下頁切換，之前小蛙試過很多種燈箱效果套件，舉凡是colorbox, fancybox, lightbox, thinbox, thickbox, greybox … 等(小蛙沒記錯的話應該試了有十種)，為什麼要是那麼多種呢？不是效果不好，每個套件都有自己獨特的做法，但呈現出來的效果大致上是差不多的，會嘗試那麼多種的原因在於圖片讀取的方式，這篇文章紀錄一下使用FancyBox讀不到圖片時的小技巧。

fancybox的使用方式很簡單，只要到fancybox官網點選右上角的Download就可以開始下載，解壓縮後可以看到有一個index.html，點開來就可以看到範例了。這邊以官方的說明文件簡單列出基本使用方法。

以上這些code都是放在 放在這 ，另外有一些其他選項。

接下來是建立點了會跳出燈箱的連結。

要以Gallery(相簿)方式呈現，只要在中加一個rel的屬性就可以了，rel全部設相同就會在同一個Gallery群組。這邊要注意的是如果有設定id屬性，千萬不可以有重複名稱！接下來到最後一個步驟了，呼叫fancybox()讓這些設定「活」起來。

// 讓單一圖片活起來
$("a#single_image").fancybox();
// 讓gallery活起來，titleFormat是圖片下方要呈現的樣式，可以自行修改
$("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'titlePosition' : 'inside',
    'titleFormat'   :  function(title, currentArray, currentIndex, currentOpts) {
                           return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';
                       }
});

到這邊正常來說fancybox基本設定已經完成，只要點選圖片連結就可以看到燈箱效果，如果沒有出現的話，很高的機率都是js或是css的路徑設定錯誤。對於$()這個符號有興趣的網友可以參考 jQuery Selectors。更多特效及客製化設定請參考fancybox#how to use，fancybox#API & Options，fancybox#Tips & Tricks。
之所以測試了那麼多種box，原因在於某個工作內容要取得的圖片是放在多媒體中心(數位典藏國家型科技計畫，由中央研究院資訊科學研究所建置)，而多媒體中心讀取圖片的方式是透過以下連結來取圖。

http://ndmmc2.iis.sinica.edu.tw/System/upload/GetImage.jsp?file_name=03-00001-0&type=6&user_name=taipei

這就遇到一個問題了，有很多box套件會先檢查及這兩個圖片來源部份是不是以「圖片」副檔名做為結尾，過濾掉有問題的檔名，減少套件發生錯誤的機率，也就是說上面這條從多媒體中心讀取圖片的連結在某些套件下是讀不到圖片的(被套件預先過濾掉了，會被判定成taipei結尾，不符合圖片副檔名)，所以遇到遠端取圖卻無法出圖的時候，可以在連結最後面加一個參數&_=.jpeg目的只是在跳過套件的過濾。

http://ndmmc2.iis.sinica.edu.tw/System/upload/GetImage.jsp?file_name=03-00001-0&type=6&user_name=taipei&_=.jpeg

這篇文章使用FancyBox燈箱效果呈現圖片，無法顯示圖片最早出現於記下來。

圖片太大啦！要調整的那麼多張怎麼辦？XnView 幫你批次調整圖片大小

黃小蛙 — Wed, 21 Dec 2011 11:35:08 +0000

XnView-調整圖片大小一文中介紹XnView這套好用的免費軟體也提到如何調整圖片大小，這篇文章小蛙要介紹怎麼批次調整圖片大小，面對大量圖片不用再一張一張慢慢調整，會了這招之後處理圖片就更容易了，同樣的方式也可以套用在其他需要大量處理的情況下喔！

直接進入正題，XnView-調整圖片大小文中我們已經學會要怎麼調整圖片大小了，加了個批次其實也不困難，只是多了幾個步驟，不囉嗦馬上進入正題。開啟XnView後選擇上方工具列中的「工具」->「批次轉換」。

開啟「批次轉換」視窗後先將上方切換到「轉換」頁面。在「轉換」頁面中，左方「圖片」下的子選單中找到「調整大小」後，右邊就可以依自己的需求來設定，這邊小蛙的數位相機照出來的圖片太大了，傳到生活蛙齋會太大 (雖然 pixnet 有100 G 相簿，上傳也會自動縮圖，不過先縮小可以減少傳輸時間，而且在相簿中呈現的話圖片也不用太大)，這邊小蛙把寬度限制在原圖片的 40%，可以依自己的需求設定 (百分比或是 pixel)，維持比例打勾 (上一篇有提到為什麼)，「遵循定向」這邊小蛙也打勾，為了避免有些圖片是直的，有些是橫的，造成誤判，最後小蛙勾選了「縮小」，目的是如果原本就太小的圖片就不把它拉大，免得畫質變得很差，要求 XnView 只做縮小動作，不做放大動作。這邊可以看到 XnView 批次處理的功能不只用在調整圖片大小，也包括一些其他的特效之類的，使用上非常方便。

回到「一般」頁面設定，「新增」或「新增資料夾」選取要處理的圖片，「輸出資料夾」設定跟原始圖片資料夾不同的地方，除非想要取代掉原始圖片 (想清楚)，過程中如果有檔名重複的話，XnView 也會貼心的跳出提醒視窗，詢問使用者是否要覆蓋檔案。都設定完畢後點選「開始」，就開始轉換囉！

開始跑了，跑完之後到剛剛設定輸出的資料夾就可以看到轉好的圖片了！是不是很簡單呢？XnView 把麻煩的事情變簡單了^_^

圖片相關文章：

這篇文章圖片太大啦！要調整的那麼多張怎麼辦？XnView 幫你批次調整圖片大小最早出現於記下來。

哎呀！私密資料不能公開啦！XnView 幫你的圖片馬賽克(pixelate)

黃小蛙 — Thu, 15 Dec 2011 12:59:09 +0000

小蛙在 XnView – 調整圖片大小文中說明了要怎麼安裝 XnView 這套強大方便的看圖軟體，並且透過 XnView 來調整圖片的大小。今天小蛙要繼續說明怎麼使用 XnView 把照片中的某些區塊馬賽克化，比如說拍了愛車的照片，但不小心把車牌也拍進去了，這時候就可以把車牌馬賽克化，也不用擔心車牌流出去會有安全性的問題了。

其實 XnView 的操作只要認真玩一下就大概可以找到自己想要的功能了，小蛙還是用簡短的文章說明一下怎麼使用 XnView 把圖片馬賽克化 (安裝部分請參考 XnView – 調整圖片大小 )。首先將要編輯的照片使用 XnView 開啟。例如以下這張大湖公園的牌子。

選擇上方工具列表中的「濾鏡」，接著「效果」。

在左方的選單中，拉到最下面選擇「效果」->「馬賽克」，就可以看見套用前跟套用後的圖片了。

如果把「預覽」打勾的話，就可以即時看到變更後的圖片喔！缺點是如果電腦不夠力的話，遇到一些比較複雜的處理會有卡住的感覺，如果有卡住的話，等一下子就好了。

迷之聲：小蛙你教錯了，剛剛上面明明講說要馬賽克車牌，你這種教法根本就把整張照片馬賽克化了。小蛙的確現在才回魂，要把車牌馬賽克化其實也很容易，只要加一個步驟就可以了。把要馬賽克的部分先選取起來，假設這張大湖公園的照片，小蛙要把英文字馬賽克，只要在 XnView 主視窗中選取要馬賽克的部份。

接著重複剛剛的步驟，忘記了往上翻。「工具列」->「濾鏡」->「效果」->最下方「效果」->「馬賽克」，是不是很簡單呢！

圖片相關文章：

這篇文章哎呀！私密資料不能公開啦！XnView 幫你的圖片馬賽克(pixelate) 最早出現於記下來。

遇到圖片太大的問題？XnView 輕鬆幫你調整圖片大小

黃小蛙 — Tue, 13 Dec 2011 14:55:59 +0000

有時候會遇到朋友打電話來問，在上傳照片的時候，系統限制圖片大小為 1MB (有些可能只有幾百 K)，但是手邊的照片大小是 3MB，要怎樣把照片縮小到 1MB 以內呢？或是某些圖片上傳限制為 256 x 256, 128 x 128 … 等，諸如此類的問題，例如像是上傳論壇的大頭照、報名時候需要用到的大頭照 … 等等，為了減輕伺服器的負擔跟儲存空間，通常都會設定圖片大小的限制，這篇文章小蛙要介紹怎麼用這套 XnView 軟體來調整圖片大小

XnView 是一套小蛙常用的看圖及簡單修圖的軟體，重點是免費而且輕巧，有了這套軟體以後就不用再麻煩朋友幫忙縮圖了 (其實很多軟體都可以做到，只是小蛙習慣用這套)。

使用 XnView 調整圖片大小

先到官網下載軟體來安裝 http://www.xnview.com/，點選大大的黃色眼睛，下面有一兩行小小的字寫著「XnView is a free software to view, organise, convert graphics and photos files or to create slide show, contact sheet, HTML pages.」把這套軟體能做的事情都講得一清二楚了，不懂？沒關係，裝完之後有正體中文介面，再慢慢摸索就會懂囉！

點了黃色眼睛後看到下圖，右邊是 XnView 所有的產品，有興趣的網友可以下載來試試看，今天小蛙要介紹的是第一個 XnView 主程式的一個小小功能而已。點選紅色框框處進入下載頁面。

這個頁面 show 出 XnView 支援了多少平台，Windows, Mac, Linux 都支援，簡直是包山包海。點選紅色框框 here 進入下載頁面。

千辛萬苦，一層一層終於 “快” 到下載頁面了，還沒到喔！如果是 windows 使用者點選上面的連結，Mac, Linux 使用者點選下面的連結 (小蛙只用過 Windows的版本，不知道其他本版是不是也一樣方便)。

終於進到最後真正的下載頁面，支援非常多國語系，看到中華民國也在上面，等等軟體的操作就不用擔心全都是英文「霧沙沙」了。

下載完後，安裝過程中沒有什麼需要特別設定的，直接下一步到安裝完即可。跳轉頁面後繼續說明調整圖片大小部份。

調整圖片大小其實很簡單，直接在要調整的圖片上點選兩下，就會直接用 XnView 開啟這張圖片(如果沒有用 XnView 開啟的話，也可以在要開啟的圖上點選滑鼠右鍵後「開啟檔案」-> 「XnView for Windows」)

這張是我的股票精算師在 market 上架時需要 512 x 512 的 png 檔案，小蛙現在就來示範把 512 x 512 的圖片縮小成 256 x 256。點選上方工具列中的「影像」->「調整大小」。

在彈出的視窗中設定大小，寬度跟高度設定成 256 x 256，這邊要注意的是最好把「維持比例」打勾，軟體會自動幫你維持圖片的比例才不會變得怪怪的。

點選確定之後，看到左下角的資訊列，已經從原本的 512 x 512 變成 256 x 256 了，但檔案大小為什麼還是 179.66 KB 呢？其實是因為還沒存檔的關係。

點選工具列左上角的「檔案」->「另存新檔」儲存完畢後，是不是檔案也跟著變小了呢？剩下 68.42 KB 了。

剛剛提到「維持比例」，為什麼要設定「維持比例」呢？小蛙這個例子因為是正方形的圖片，所以只要自己輸入相同的數字即可，如果現在要調整大小的圖片是長方形，長跟寬會因為輸入的數值而使得圖片比例變得怪怪的。下圖就是小蛙設定了寬，卻忘了設定高，而另存新檔的圖片，如果勾選了維持比例，軟體就會自動幫我們調整囉！很簡單吧！

圖片相關文章：

這篇文章遇到圖片太大的問題？XnView 輕鬆幫你調整圖片大小最早出現於記下來。