Nancy Greene Summit

Cross Country Skiing

Nancy Greene Summit

離開家10天回來,今天又遇到孩子的ProD day,妹妹直吵著要滑雪,其實今天天氣暖和,前些天也應該沒下什麼雪,雪況是不佳的,Icy and Crusty,摔倒是痛的,不過也耐不住想陪陪孩子一下吧!

又來到Nancy Greene Summit

Cross Country Skiing

有著藍天白雲的好天氣,全家在一起的感覺就是踏實….

Cross Country Skiing

上一次在此為孩子照的相片,記得他們兩都還比我矮,好希望孩子別長那麼快….

Cross Country Skiing

由鎮上義工們共同蓋好的新木屋,還沒取好名字…

Cross Country Skiing

木屋裡的暖爐…

Cross Country Skiing

Cross Country Skiing

遇到和我們一樣全家出遊來 snowshoeing(雪踏板),想想不久前,我們也是這樣背著孩子滑雪的…

Cross Country Skiing

呼..ㄧ轉眼…

Cross Country Skiing

Cross Country Skiing

Cross Country Skiing

熊寶寶也要追上熊爸爸了..

Cross Country Skiing

回到家妹妹開始練習做聖誕餅乾…

Shortbread Cookies Shortbread Cookies

感恩擁有這樣幸福的日子….

       

My Ultimate Web Design Goal

I think I can...

My Ultimate Web Design Goal

Oct 20, 2017

給我三年的時間,我這個菜鳥可以練到這種程度嗎?從今天開始計時….滴噠..滴噠..發願每天規劃一點時間上Photoshop的課,希望能慢慢進步!

1. Web Design Speed Art - Contact Page

Tools: Elementor & Photoshop

2. Web Design Speed Art 2 - Homepage

Tools: Elementor & Photoshop

3. Web Design Speed Art 3 - Travel Site

Tools: Elementor & Photoshop

4. Speed Art Video & Christmas Sale

Tools: Elementor & Photoshop

5. Speed Art Video & Call to Action Interaction

Tools: Elementor & Photoshop

6. Speed Art Video - Building an Interactive Tourism

Tools: Elementor

May 7, 2018

7. Speed Art Video - Plus New Restaurant Template

Tools: Elementor

May 23, 2018

How To Save Web-Optimized Images In Photoshop For WordPress SEO

Sharpen my tool...

How To Save Web-Optimized Images In Photoshop For WordPress SEO

Thanks Bjorn’s well explained tutorial.  Here is the notes I saved for myself in the future and anyone who maybe benefits from it.

剛開始做網站時,對圖像的比例,解析度,網站速度等問題總是一知半解.這個Bjorn’s的教學影片,解釋的很清楚,我練習我的英翻中,將筆記整理在這裡,你也可以練習你的英文,聽聽他的教學影片喔!

How To Save Web-Optimized Images In Photoshop For WordPress SEO

當優化影像圖檔給網站用時,有三個項目可以做的是:

  1. 將解析度(Resolution) 降低到72ppi
  2. 將圖檔裁到實際所需的尺寸(可參考下面的網站寬度建議)
  3. JPGPNG來存檔.通常JPGfile size是比PNG來得小的

通常數位相機或手機的照片的解析度會在300ppi,這樣常常它的檔案大小(file size)會相當龐大(2mb+…)

然而在網路裡,大部分的瀏覽器只能呈現到72ppi.這個意思是指即使你傳到300ppi的影像,也只有72ppi的品質,所以為何不存72ppi就好呢?還可以減低檔案的大小.(不過我的經驗告訴我,用72ppi可能你的設計師會哎哎叫失真問題,有時後可能也有商議空間的!)

還有,一些好的相機照出來的照片有很大的長與寬的尺寸(px).然而這這些尺寸對網站實際所需都太大,參考下面網站實際所需的尺寸,將圖像裁到實際所需的大小就夠了.

網站實際尺寸的大小,可參考以下的Width(寬度)來抓圖檔的比例:

1    Column = 1080px
3/4 Column = 795px
2/3 Column = 700px
1/2 Column = 510px
1/3 Column = 320px
1/4 Column = 225px

做到以上這些優化影像的步驟,減低圖檔大小,增快網站速度,更有利SEO

** 原文翻譯來自以下的教學影片

Exact Steps in Photoshop

Step 1:
Open the image in  Photoshop
Photoshop > File > Open  
Choose the image

Step 2:
Go to Image > Image Size

Step 3:
This image’s original size:
Width: 4896px
Height: 2752px        
Resolution: 350ppi

Step 4:
Change the Resolution to 72 ppi.
Once changed to 72 ppi. 
The Width and Height will automatically be changed too.

Step 5: 
Leave the Resolution in 72 ppi.
Change the Width back to be your exact need for the website. In this case, I need this image to be the background for the section, so I used 1280 px for the Width.

Step 6:
Now, save the file.
File > Export > Save for Web (Legacy) 

Step 7:
Often PNG file is smaller than JPEG. So choose JPEG and choose Medium or High for quality. And then <SAVE>

Finally, it’s done.  
We managed to change the file size from 6.4 MB to 435 KB.  

Yeah! Yeah!