創作內容

2 GP

Google Chrome瀏覽器美化 for Win10&7 - 個人主題製作法

作者:Blade Len│2018-05-30 22:02:11│贊助:1,002│人氣:2525
更新&修改日期:2019/06/05

若是可以,希望能給我以這方法製作並安裝後的新分頁截圖,讓我確定方法能確定繼續用

有問題請直接問我,雖然這不是什麼東西
但還是希望對這有興趣的朋友們幫上忙

------------------------------------------------------------------------------------------------------------------
現剪裁規則整理如下,由於目前Win7和Win10方法一樣,若有很大差異才會分開設文
圖內數值是舊的,此為示意剪裁方法(我比較懶得製圖...加上方法沒差就不急著修)
Chrome 穩定版

Frame圖為基準不裁剪

TB圖為Frame圖上方扣除"解析度面積x16"之面積後存檔
(做完後看到Frame和TB之間有線條要改-17)

NTP圖為TB圖上方扣除"解析度面積x103"之面積後存檔

Tab BG圖同TB圖之規則,直接複製起來就可以
------------------------------------------------------------------------------------------------------------------

最後再開主題線上工具Themebeta.com依序載入圖片並調整位置(也能不用網站自己做)
NTP圖片設定 : [left - top - no repeat - normal size - scale:1]
顏色配置可以看這去嘗試看看變化(看那文不如一起來討論...)
因為一些顏色會影響到規則(frame和toolbar顏色)

Frame和TB之間的線條消除的方式有幾種
第一種是把TB的圖片亮度調低,但只限於整體亮度較暗的圖片(文字要改白色)
第二種是主題做出來就沒有線條,這樣就可以改為-16(也是限於整體亮度較暗的圖片)
第三種目前是單一個案,把Tab BG的圖片調暗就可以
上面說的先不要用,因為用配色消除線條的方式改回來了
只要配色中Frame和Toolbar顏色不一樣或不相近就可以,用黑白兩色最容易成功
Frame這區塊不用圖片會有主題工具預設配色,圖片上去就看不到了
在線上工具中要調整image中的Frame以及colors內的toolbar

無論哪種解析度都可以適用(希望是這樣,目前1080p以下都沒事...)
PC OS  : Win10 1709 home 64bit (Win7目前是暫時一樣,若不一樣會把舊文章更新&公開)
解析度 : 1920x1080 視窗比例100%

以下為幾個範例






----------------------------------------------------------

首先,載入圖片到修圖軟體

1.
我習慣用Pi X3,因為沒有去研究PS
圖片來源 : 六羽田トモエ
圖片大小 : 1920x1080

因為此版本的Chrome,讓Frame和Tab BG可用一樣的圖
為了去減小主題大小(我習慣用PNG

要以封裝方式去製作主題的,用JPG&JPEG時存檔要注意
和manifest內所標記的圖片附檔名要一致,不然顯示會有問題(或是無法封裝)
用png檔是沒有這些問題,畢竟都會還會適當裁剪以減少檔案容量
我會比較常用png圖檔去做

2.

以Frame圖為基礎來裁剪製作Toolbar的圖
圖上紅框內的數字"16"(2018/09/05穩定版更新)
表示此裁剪框格與影像上方的距離
也就是說要裁掉Frame圖上方1920x16的面積(其他解析度也可類推)
之後確認裁剪,另存新檔並註明Toolbar
若成品出來,Frame和TB之間有線條的話,這時要改扣17
之後的裁剪沒有變
如果你不要那線條,就按照扣16的方法,用配色去消線條

此外Tab BG與TB目前為一樣的規則
若沒有要裝Tab BG,就不要做,取代方法是以線上工具去調色(或是自製)

此外若你不要以Frame為基準的話,也就是不要圖片只要配色
就以Tooblar為基準圖去裁剪

3.


接下來以Toolbar圖為基礎去裁剪NTP BG的圖
圖上紅框內的"103"數字意思如程式說明,裁剪後也請存檔註明NTP BG
(TB圖上方扣去1920X103之面積後存成NTP BG)
數值改為"103"(2019/01/30穩定版更新)

你有習慣把工具列隱藏的話,NTP BG下方會出現空白處
解決方式是挑選長一點的圖
或是把圖放大,NTP圖下方不會出現空白處就好(缺點是圖片部分會看不到)

之後就是把TB和Tab BG圖瘦身,看你要留多少面積
打太剛好的話,以後若更新圖跑掉會稍微不容易找規則
TB圖最小極限為1920x103,再加上Tab BG和它一樣
所以考量後就設為1920x110,預留一點空間以備觀察

5.

可以不用Themebeta.com來作主題,對我來說能節省修改時間(一篇文章內有相關設定簡述)
兩者都是很好的方式

紅色框格表示圖片載入的地方,其他圖片沒載入是因為與主題規則沒什麼關聯
加入反倒會擋住背景,圖過大會干擾整體
NTP Attribution載入後會在新分頁NTP BG標明"主題製作者"的圖
這裡就必須用小圖,讓你不會干擾到觀感就可以

藍色框格表示圖片位置設定,與Win7版Chrome都是一樣的設定
Frame&TB&Tab BG都是固定原始大小,方向朝左上對齊
此位置設定是設定NTP BG,所以要left&top,repeat設定不重複,normal size為原始大小
Scale初始值為1,表示放大比例為1(這不要動)
若有變更數值會直接對NTP圖做放大縮小,可能導致圖片失真
[left - top - no repeat - normal size - scale:1]

之後到Pack找"Pack and Install",表示直接安裝主題
Pack and  Download是下載
Pack and  Download Zip File是下載主題壓縮檔

7.

上面的8個框格是舊版Chrome的,現在已經不見(配色也不用考慮它)

安裝出來應該是這樣子,若圖有跑掉的原因有幾種
1.圖裁剪錯了
2.圖載入錯了
3.圖片位置設定錯了
以這樣規則回去找錯誤就行
還有,Windows有調過縮放(非100%),圖片也會放大(希望是不要用縮放)
另外有調整ntp相關的chrome flags,可能會影響到文字配色

關於配色問題,有問題可以來聊聊
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4006946
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:Chrome主題|瀏覽器美化

留言共 6 篇留言

楓格零
請問一下,我也是WIN10,找的圖片也是1920X1080,每一步也都照著您的方法做,不過最後畫面是有完整,圖片下方卻是被切掉的,這大概是甚麼情況有辦法說明嗎,謝謝

12-31 00:24

Blade Len
方便給我主題檔案嗎,這樣我找問題比較快12-31 08:29
天跡
您好 我遇到了一些問題 是關於NTP BG 的圖片無法跟TB還有FR合起來 請問我要怎麼解決呢?

06-04 23:37

Blade Len
若是完全不能接合起來,也許剪裁位置或數值有誤
用哈哈姆特直接聊吧,比較方便

若可以希望您直接給我主題檔案,讓我找問題
而且我想知道您的電腦作業程式(W7 or10)

還有Chrome版本,最好為最新的
(有穩定,BETA版,測試版)06-05 20:04
EVO
更新WIN10 1903並下載最新版CHROME後套用主題格式顯示 "沒有任何應用程式與此檔案相關" 貌似更新後不支援.crx檔,有其他方法嗎?

10-25 17:37

Blade Len
若是用Themebeta做的主題,他會叫你用擴充功能(並開啟開發人員模式)
之後把主題檔案直接拖曳到擴充功能頁面上
有照這樣做嗎? 若有的話就有趣了(目前超過我的能力範圍)10-25 19:51
Blade Len
Chrome商店的主題也是crx檔案,應該不是這個問題
我自己做的主題可以運行,可能是Chrome出槌之類的
到時再試試看,還是不行我需要去想辦法10-25 20:09
EVO
照著您的方法做成功套用了!感謝!
系統建議我去預設應用程式那建立關聯性,我瞧了下沒有.crx類型的檔案可以套用到chrome
本來以往我都是直接打開檔案做套用動作誰知更新以後這方法似乎不適用了(?)

10-25 21:51

Blade Len
那麼恭喜你可以繼續用主題了XDD
有任何問題可以繼續問10-25 22:01
Blade Len
你這個問題,我之前在Chrome測試版更新後有遇過並解決了
(線上工具是直到Chrome穩定版更新才知道這問題......我去建議他 都不鳥我XDD)
不能直接在任意頁面拖曳主題檔案直接裝主題
開啟開發人員的那個是第二個裝主題的方式,沒想到現變成只能用這方法了10-25 22:41
EVO
我是有先打開 開發人員模式 才拉主題進去套用
不過應該不用特地打開再拉(?)
我套用後現在是關著的

10-25 23:13

Blade Len
套用後是可以關掉
要裝新的再打勾開啟,我無聊做主題會用到
要封裝和建立主題要開啟才行
所以就習慣常啟了XD10-25 23:16
Nightvoid
依照大大的方式去做 上下圖片還是沒對正 有解嗎QQ

11-12 23:13

Blade Len
若可以的話,我希望能拿到主題檔案
還有使用的作業系統是Win7還是10
我試試從主題檔中找問題11-13 12:08
我要留言提醒:您尚未登入,請先登入再留言

2喜歡★king5712710 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:Google Chrom... 後一篇:Bandai景品 加藤惠...

追蹤私訊

作品資料夾

chad910823巴友們
大家好啊看更多我要大聲說昨天22:59


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】