這篇我欠大家欠好久了
之前置換我的標題底圖之後
不斷有人問我要怎麼做
而我之前一直說要做一份教案分享給大家
卻一直沒有做出來
為何一路拖到現在的原因很簡單
因為這項工程實在太浩大了
沒辦法~小女子一向很笨
在製作我上方那一整排底圖時
我用了好多軟體轉換、編輯還有最後的語法排版
搞的我光做就很頭昏眼花
更別說還要做一步copy一個圖的來分享
今天或許被卡媽說動了那顆想做的心
所以我就從下午一路做到現在
各位看看我從下午5點做到成功可以來po文時
也都已經是晚上八點半了
而且是剛要寫文章還不是文章都寫好了唷!
所以說~想做這美美的置頂底圖
請妳先訓練好妳的耐心
現在我們就來看看該怎麼做吧!
首先做這置頂底圖你要先學會三種東西
scrapblog編輯器、Photoshop繪圖軟體、CSS語法
scrapblog要怎麼玩請看一些格友的大方分享
Scrapblog線上照片編輯播放器
Blog寫真 - Scrapblog照片編輯播放器
Photoshop要怎麼玩?
請各位看一下我之前po過的
分享blog標題底圖製作的方法
我有分享了Photoshop的一些基本製作
至於Photoshop要從那邊得來
就請大家各憑本事自己去找了
因為這個東西我就無法跟大家分享啦!
回歸正題
首先大家用scrapblog編輯器
做出像上圖那樣的圖檔
印象中他似乎就只能放這麼多張照片
所以我做我的底圖時
我是做了3張這樣不同的圖檔後
再用Photoshop把他們結合成一張圖片
大家只要照著格中高手分享的文章來製作
那做好的圖檔會像上圖右邊那樣
當然樣式不一定會是這樣
就看大家怎麼去發揮兼表現了
做好後也照著高手說的方法存檔好後
接著我們就要點選這
File-->Export as JPEG
照著剛剛的點法點完後
會出現上圖的對話框
接著你就是要點選這Download
把照片下載並存在你電腦中
接著再按Done即完成scrapblog圖檔編輯的這部份
再來就是要把這三張照片結合了
用Photoshop開起這三張圖
(我自己是做三張不同的圖啦!)
然後先查看其中一張圖檔的尺寸
如上圖方式去看
像我的圖是900*600的大小
因為我有三張所以當我另開一個新檔要製作時
我就會把他的寬度改成900x3倍=2700像素
這樣可以讓我比較方便來編輯
接著當然是各憑本事的把三張圖合在一起
怎麼結合若不會的話
請大家去買Photoshop的工具書看看吧!
或是自己上網找Photoshop的教學
這我實在懶得說了
因為很多東西是要自己摸才會有驚喜
編輯完後我會這麼做
影像-->影像尺寸-->調整成1300*300的大小
這樣的大小是符合我自己blog上的大小
各家的請各位自行"踹踹看"再去調整配合
最後存成jpg檔就可以了
好啦~把圖片都編輯好後
我們就要把他先丟到自己的網路空間
要怎麼擁有網路空間
請各為參考這篇
blog標題圖框增高。放置blog標題底圖。分享
Eivta有寫的相當清楚明白
接著我們照下列步驟
管理部落格-->面板設定-->自訂樣式
然後把我上面框的那三行放進去按下儲存就ok啦!
不過我有必要跟大家解釋一下這三行
第一行框出來的是在設定圖框的高度部份
若要連同寬度都設定的話
請在height:XXXpx；後頭加上width:XXXpx
提醒各位"XXX"是讓你們自己填數字
可別大家都給我填XXX嘿!
第二行是在調整"歡迎訂閱"的位置
這也是大家要自己去調整摸索
第三行這邊就是你上傳圖檔的位置
background-image: ur內的(http://XXXXXXXX)
就是大家相片連結的網址了
全都搞好後就會像我這樣
這就是做了這麼多步驟後的完成品
由於我本較笨
所以須要一個又一個的換來換去
編輯來編輯去
看完我的這些製作分享後
我想各位應該也沒力氣想去搞了吧!
所以說我之前真的不是不願說
而是他實在麻煩到我很難說清楚他
說了大家也不一定會懂
會玩軟體及語法的人應該很快就能搞懂
但若是一些初學者可能
嗯...加油吧!願一切神明保祐你
這東西一做下去就是好幾個鐘頭無法離開電腦
因為這是我的興趣
所以我可以像黏住了一樣瘋狂的玩到我爽
如果你沒辦法的話~我想放棄比較好
免得做到最後若你們都大抓狂我可不管的唷!
對我這個電腦白癡來說我還看看就好ㄋ,整個看完眼花撩亂
回覆刪除別說妳看的眼花撩亂~~連我自己都寫到快暈頭轉向了
刪除所以說~~妳知道為什麼之前很多人問我怎麼做...我一時間說不出個所以然了吧 [-(
喔~天阿~~!
回覆刪除電腦白痴的我,看完後,還是頭頂一群烏鴉在飛..... @-)
呵呵....我的底圖做的的確給他有點複雜
刪除所以我之前一直考慮到底要不要分享
Milky 你真的很有耐性捏 !!!
回覆刪除我po完文章後....也很訝異自己的耐心
刪除連我自己都被自己嚇到了 :))
看到後來~~ㄕㄨㄚ ㄕㄨㄚ去...
回覆刪除還是欣賞你們家美麗ㄉ部落格就好
因為我已經@@.....
哈哈哈.....我就知道~~我就知道
刪除當初就想說這篇po完後大家應該都會亂掉了
看吧~~看吧~~所以說之前我很懶得po不是沒原因的 [-(
我發誓..我真ㄉ很認真ㄉ看完ㄌ =;
回覆刪除可惜..
真正看嘸ㄋ!!! :((
我還是賣我ㄉ串燒比較簡單啦 :D
哈哈哈......拍謝啦.....我做的太複雜~~為難到大家了
刪除scrapblog編輯器這得好好的來玩玩看
回覆刪除但我想我會投降的~ :))
這東西很好玩.....有機會可以好好玩一玩...很有趣的唷!!
刪除夭壽喔~
回覆刪除我看的好亂喔~
我投降啦~哈哈
嘿呀~~很亂很複雜ㄏㄛ~~
刪除所以說我之前一直不是很想po就是這樣
po完大家也不見得會
搞不好會搞得大家失去信心 :-
對我這年紀大.....
回覆刪除手脚和頭腦不協調的人來説....
還是來你家欣賞好了
哈哈哈.....別這麼說啦
刪除只要靜下心來慢慢搞就一定會成功的
但是先決條件就是要~靜‧下‧心~~
不愧是TSR， 我還是做好我的CSR就好了 :(
回覆刪除哈哈哈~~~那當然呀~~不然怎麼做TSR~~開玩笑的...我真不要臉
刪除:)) :)) 要讓額格子美美真的要花好多時間
回覆刪除我超沒耐心 也沒那麼多時間 之前為了弄音樂 光看那些教學 我投降了
後來還是有成功啦 不過是朋友幫忙 :P
不過我現在比較有興趣 也想請教Milky的~~
像妳在文章中都會連結到別人家的格子或其它篇文章 例如妳文中的joyce 就只顯示名字
通常我貼出來就是一長串的網址 如何變成像妳這樣
希望不會太難 不然腦殘的我 又要弄很久 :D
感謝妳哦~~
那很簡單的
刪除你可以看這個超連結教學我有寫 :x
@-) ... :-S ... :(( ...
回覆刪除I 服了You～ :D
呵呵~~~謝謝誇獎啦!!!
刪除希望妳也可以把自己的小格子變美美的 :x
沒錯 要懂那麼多軟體 是要費功夫的 多摸摸就熟了
回覆刪除milky 真是辛苦妳啦
是呀~~想要blog美美的，有一些付出總是必要的
刪除除非是去抓人家分享出寫好的語法來直接套用
但是那會常常看到"撞格" @-)
若是想要與眾不同~~我想還是要一步一步慢慢的來做 :D
真是～佩服。。。。。 =D>
回覆刪除真是～謝謝誇獎。。。。 :">
刪除我不敢把內容看完
回覆刪除因為我一定會走火入魔 :D
哈哈哈.....已經有一位格友JJ"聊落去"了說....
刪除看ㄉ我ㄉ頭都暈ㄌ
回覆刪除算ㄌ.我還是這樣好了!
哈哈哈.....別恢心啦....妳還可以玩那魔術方塊大變身呀!! :>
刪除哇…看完
回覆刪除呵呵.....讓你見笑了 :">
刪除改天有空可以玩看看
其實這些東西一玩下去是會著迷的
到時後跟我一樣黏在電腦前可別怪我嘿!! :P
:D :D :D
回覆刪除:)) :)) :))
Milky Milky Milky
我...我...我.....
我真的成功了，也起笑了........
顏色亂亂配，還要再慢慢試....
最重要的是我用Photoshop作的圖成功的貼上了...
謝謝妳....謝謝妳...... :)) :))
有看到呢~~~做的好漂亮的
刪除這東西真的好玩對吧!!
有機會再慢慢玩~慢慢修~慢慢去調整 :>
喔...
回覆刪除看了頭很暈
我看還是去求助我家小妹比較快...
哈哈哈.....的確呀....這有點亂...我自己都寫的有點昏了
刪除感謝分享呢！ :x
回覆刪除幸福都是用Photoshop去製作圖版，方便又好用。 =D>
是呀~~~會用Photoshop的人會覺得他很好用
刪除不過每個人都有每個人習慣的繪圖軟體
就看大家習慣那一種~~ :D
真是佩服Milky的耐心和愛心~
回覆刪除但是偶可能要辜負你的"愛心"了~
因為看得偶"霧煞煞" @-) ~有看沒有懂~ :D
呵呵.....沒關係~~沒關係~~
刪除這東西我自己也寫的"霧煞煞"的
Milky妳好有耐心,不只格子裝飾的美美的,連文章內容都好豐富,做底圖真的很複雜,看了兩遍還是看不懂,看來只好放棄,欣賞妳的就好了. =D>
回覆刪除呵呵呵.....拍謝啦~~寫得有點複雜
刪除其實若不要像我那樣用三張圖結合的話
單純用scrapblog編輯一張圖再放上來會簡單多了
就看大家的喜好了.... :D
謝謝嚕~~我摸了一個下午 :D
回覆刪除不客氣啦...希望改天也能看到你的小格子美美的出現
刪除剛剛過去瞧一下好像還沒看到
加油....期待呢!! :x
呵～你知道那工程有多浩大的 :>
回覆刪除我摸了一個下午才只有做一張相片出來！ :P 而且只是你文章裡的上半部 >:)
而沒動用到ＰＳ :| 眼都快花了 ;) 最近摸太多軟體（貪多嚼不爛）！快分不清楚啥是啥了！ @-)
哈哈哈......別恢心~~加油
刪除妳可以先做我第一種版本的
比較之前有做第一種版本..大概4-5張圖吧!!
像梅子姊姊也有做....妳可以去她那邊看成品
她又是用專業相機拍做的可漂亮了 =D> =D> =D> =D>
後來這是進階版的...比較麻煩一點啦 :P
沒問題呀....我知道的我一定會跟妳說
回覆刪除若無法用言語表達的我會跟妳說該往那邊找資料 ;)
因為我沒用過套用的版型所以我不是很清楚
回覆刪除我猜....妳可能要懂一些語法...然後找到上面置頂圖的語法在那裡
然後再把做好的圖連結過去就可以了
這是我猜的啦... :P
謝謝您囉
回覆刪除您人真好耶 :-*
不客氣~~ :)
刪除Milky我終於看到你的教學文章！
回覆刪除每次都被你的美食吸引，
忙著看新文章。
直到今天才仔細看你的文章分類！！
謝謝可愛的Milky!!
Linda
不客氣啦.....希望這些對妳有幫助唷!! ;)
刪除謝謝分享唷~~ :x
回覆刪除不客氣呢~~ ;;)
刪除我引用回家研究囉!!謝謝Milky分享
回覆刪除嗯~~~不客氣
刪除真的只能用"師父引進門，修行在個人" :-?
回覆刪除我對電腦還真堪稱白癡階段 :))
因為玩格子還不到一年，只能認真學習 :)
別這麼說~~~別這麼說
刪除現在越來越多人喜歡上網路的活動
無論是玩線上遊戲或是像這樣部落格的分享
只希望大家越玩越快樂就好
有機會可以試看看
其實一但了解後這些真的不難....只是要有無比的耐心
因為一搞都會搞上一整天 @-)
milky~新年快樂~~ ;)
回覆刪除想請問相片要怎麼設定才能將標題欄整個填滿呢? :-/
還有要用什麼語法可以將圖置中阿?因為置中的語法都是文字在置中圖都不會變，傷腦筋阿~~~ :-S
我看了您的這篇真是受益良多~ =D> 但是就是還有一些地方沒辦法克服~~麻煩您囉~~謝啦~~~ :-*
美女~~希望脈衝光後，又是一尾，，，喔喔不是，，是仙女下凡拉~~ :))
剛剛仔細的研究了一下你家的原始檔語法
刪除我發現....
1.你家的圖片大小只有600*394，我家的置頂圖很大980*500
所以這樣子才能夠將整個畫面填滿，因為現在的人桌面大多設定為1024*768的大小
2.置中的問題我不知道是不是這一個，因為我看你現在的語法中，你的置頂圖設定是
『#yblogtitle .mbd .thd{background-image:url(http://i907.photobucket.com/albums/ac276/yuyuyu_611221/CIMG0352c-1.jpg
);background-repeat:no-repeat;background-position:0% 100%;width:1500px;height:420px;font-size:16px;text-align:right;}』
所以他不是置中...應該要改為text-align:center才對
我對語法的部份比較不是那麼熟
也都是自己亂摸摸出來的
所以你試試看是不是這邊出了問題嘿!! :x
最後，謝謝妳的讚美啦!!!
這樣的讚美真的相當受用
我整顆心都要飛起來了 :))
我試過很多方式想更改一些東西,但是不管改哪一部份,我底圖所使用的照片就是會變成白色.
回覆刪除也試了妳敎的改抬頭的方式,結果還是一樣.所以讓我好困擾.看到你的格子好美,好豐富,超羨慕的啦!!!!
ㄜ.....這真的很難倒我了
刪除基本上我底部是不用圖的
因為我覺得那樣會很混亂
所以我可能比較無法幫你解決問題說
唉呀....真的好抱歉說 :-S
我建議妳一個方法試試
1.先從面板設定→進階模式→先將裡頭的設定都拿掉
2.面板設定→自訂設定→先讓他整個還原
做了這兩步之後他就是原始狀態
這樣再從面板設定→『自訂設定』來設定妳要的東西試試
不過建議妳要先把原本『進階模式』裡的設定超下來
也要把原本『自訂設定』裡的設定先copy到記事本上
若改不好的話還可以還原成現在的狀態
給你參考看看囉!!!
妳真的很熱心耶.....謝謝妳這麼清楚的解答.
回覆刪除還有,妳的格子經營得超好的手藝也好好.要多多跟妳學習.
千萬別這麼說
刪除我都是亂講亂做一通
承蒙大家不嫌棄而已 :">