sinia6的部落格

琳達教學：運用小畫家補捉圖像及線上擷圖工具
教學 一、
有許多格友問琳達的版型預覽圖是如何擷圖下來的
其實琳達是使用的軟體
它不但能補捉全螢幕也能捲動視窗來補捉畫像
這裡不提供下載點，各位可以至官網參考試用版
http://jp.techsmith.com/
當然；沒有軟體也可以運用小畫家來補捉畫像
這就是琳達今天要教各位的主題囉~真得很簡單~各位也可以自己動手試試看喲~


請正確引用文章★要如何正確引用請參考★琳達教你如何引用BLOG文章★
★要外連帶走的請註明原出處：★Linda達令★
★想看更多，請至★琳達教學★ 喲~
★本站文章巳申請註作權，請尊重他人正確引用


教學開始
首先在想擷取的畫面上先按下按下keyboard(鍵盤)上的 Print Screen SysRq 按鍵
然後開啟小畫家，選擇「編輯→貼上」
這是整個螢幕的畫面，如圖示(點圖放大)


再運用左邊工具做調整和修飾  →
滿意後要記得存檔喲~
又或者是你只要視窗中部份的畫面，
只需要按下鍵盤上的 Alt + Print Screen SysRq 按鍵
開啟小畫家，選擇「編輯→貼上」
或是直接按工具列的選擇 → 編輯 → 剪下 → 另外開啓小畫家 → 編輯 → 貼上

再做調整和修飾 → 存檔
最後再將圖檔上傳至你個人的網路空間，取得網址後就可以貼圖在你的格子裡了喲~

教學二、
琳達介紹 Super Screenshot 線上網頁影像擷取工具
最大的優點是可以擷取捲動式整篇幅的網頁喔~

(1) 按點我進入網站，將你要擷圖的網址貼上 



(2)  設定好後按下方的 View Screenshot ，就會連結到擷取的圖片的頁面。
(3) 擷取下來的網頁頁面一定要另存至你個人的電腦裡，再另外上傳至網路空間取得網址才能貼圖喲~是不是很簡單呀~
動手試試看， 你也可以學會如何擷圖滴喔~
上傳的網路空間請參考 → 分享網路空間

★領取琳達的LOGO★
 

請選用同一大小的圖片

點圖片觀看換圖效果　↓　美女一堆喔!!

利用 href="#02" 連結到第二張圖片切換

以此類推

<DIV style="width: 圖寬度px; height: 圖高度px"><DIV style="overflow: hidden; width: 圖寬度px; height: 圖高度px; float: left; position: relative">
<br>
<a name="01" href="#02"><img src="第一張圖網址" width="圖寬度" border="0" alt="""

這個範例是 Photoshop 的圖層入門練習，圖層面板是 Photoshop 最重要也最常用的功能之一，每一件設計作品都是將圖形、色塊、文字…等影像元素使用圖層一層一層的堆疊起來的。

同學在學習 Photoshop 的初期都是從圖層面板開始著手，在圖層面板上除了一層一層的堆疊功能，另外還有圖層的透明度、圖層樣式、圖層遮色片….等進一步的功能。

圖層堆疊

咱們飛肯設計學苑 佩姬 老師的「Photoshop 影像達人專修班」 是 Photoshop 的入門課程，第一堂課就會教到這個範例，主要做法是新增一個圖層，再使用繪圖工具畫出圓形，再新增幾個圖層…再移動位置、調整大小、調整透明 度….就可以完成了。

技巧的運用上相當的簡易，只使用了 Photoshop 最基本的工具就可以完成，讓我們學習到 Photoshop 在設計創意上的方便與強大。

Step 1

第一步，開一個空白新檔案，使用漸層工具，在 「背景」 拉出漸層色，如下圖↓

Step 2

第二步，開啟圖層面版，點選「視窗」>「圖層」

在圖層面版，先新增一個「圖層 1」 ，將「前景色」調成白色，再使用 「橢圓工具」畫出一個圓形，然後調整圖層面板上的「不透明度」到 30% 左右，如下圖↓

Step 3

在這個圖層上，再繼續使用 「橢圓工具」多畫幾個大小不同的圓圈圈，如下圖↓

Step 4

使用上述相同的方法，再新增圖層，再多畫上一些大小不同的圓圈圈，再調整不同程度的「不透明度」….

一層一層的做，多做個幾層，別客氣用力的做，如下圖↓

Step 5

接著再使用「文字工具」打上一個文字 Flycan，如下圖↓

Step 6

在圖層面板的下方點選「新增圖層樣式」按鈕，選取設定「陰影」項目，為剛剛打上的文字增加黑色的影子，如下圖↓

Step 7

使用上述相同的方法，再多做幾層出來，同樣的方法，新增幾個不同的文字，調整不同程度的文字大小，再調整不同程度的「不透明度」，如下圖↓

Step 8

一個很簡易的圖層堆疊作品初步完成，如下圖↓

初學者多練幾次，練熟了，就可以試試不同的圖形，發揮您的創意。

相似的範例

範例 PSD 原始檔下載 http://www.flycan.com/example/2010_12_29/Flycan_Layer.zip

課程內容請參考「 Photoshop 影像達人專修班 」

因為翔霏時常引用  引用時,時常點到還真有點麻煩 

如果有跟翔霏還不知道的格友 可以試試看喔

感謝自然的熱心

語法如下

.top {display:none;}

.bottom {display:none;}

 

不會貼的新手請看圖文說明 版型也是大概意思

1奇摩頂上有3個按鍵 按下編輯

 

 

2在左方看到整排文字按下面板設定

 

 

 

3在大約中間右邊 按下自訂樣式

 

 

把捲軸往下拉 貼在最下方空白位置 到時不想貼 或覆蓋新版型語法也可以找的出來

另外第一次貼新版型語法 只要按下清除鍵 將你要的水水版型語法貼上按下確認即可換上新版型唷!

祝大家部落愉快!

文章出自翔霏寶貝屋

幫大家整理了一下ＣＳＳ的語法　＝　ˇ　＝ˊ

【更換標題圖】

BODY { Font-Family: verdana; TEXT-ALIGN: center; }
#yblogtitle h1 {
    display:block;
    float:left;
    background:url(圖片網址) 0 0 no-repeat;
    width:寬px;
    height:高px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;}

【更換招呼語框】

/*Opacity for blast招呼語圖框+文字置中*/
#yblast{zoom:1;position:relative;top:-20px;left:0px;margin:0 0 -55px 0;z-index:2;}#yblast .text,#yblast .bg{overflow:hidden;padding:5px 5px;width:寬px;height:高px;}#yblast .text{zoom:1;margin:-55px 0 0;}#yblast .text a#yblast a.edit{background:url(圖框網址);width:13px;height:13px;}#yblast .bg {zoom:1; filter:alpha(opacity:透明度); background: url(圖框網址) no-repeat}#yblast .text{color:#文字顏色之色碼;font-size:90%;}

【更換性別圖】

/*更換性別圖*/
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:寬px;height:高px;background:url(圖片網址) center no-repeat;}

【更換訂閱圖】

/*btnsbsrb更換訂閱部落格圖示*/
div#btnsbsrb a{display:block;width:寬px;height:高px;overflow:hidden;background:url(圖片網址) no-repeat;margin:0;}
div#btnsbsrb_nologin a{display:block;width:寬px;height:高px;overflow:hidden;background:url(圖片網址) no-repeat;margin:0;}
#yblogtitle .tft {text-align:right;padding-bottom:0px;position:relative;}

【更換背景圖】

背景圖固定

『需調整角度』

/*Background*/
body {
background-image: url(圖片網址);
background-repeat:no-repeat ;
background-position :50% 50%;
background-attachment: fixed;}

百分率表＂

backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方

『以圖片大小』

/*Background*/
body{background-image:url(圖片網址);background-attachment:fixed;}

背景圖重複

/*Background背景圖重複*/
body{background:#000000 url(圖片網址) repeat;}

【更換回應引用圖】

/*make coomment bar*/div.btncomment a {display:block;height:高px;width:寬px;background:url(回應圖網址) no-repeat;}div.btntrackback a {display:block;height:高px;width:寬px;background:url(引用圖網址) no-repeat;}

【更換滑鼠游標】

一種游標

body{cursor:url(游標圖檔)}

兩種游標

body{cursor:url(游標圖檔1)}
a:hover{cursor:url(游標網址2)}

【更換邊框】

無框線版面－讓整個部落格框線消失語法＂

/*shared rounded corner for all modules無框線語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url() left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url() right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url() right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url() repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url() right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

邊框線面板－多重框框語法＂

/*Opacity for blogtitle*/
#yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:70)
border-bottom:3px double 色碼;
border-top:3px double 色碼;
border-left:3px double 色碼;
border-right:3px double 色碼}

/*Opacity for main content*/
.yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:70)
border-bottom:3px double 色碼;
border-top:3px double 色碼;
border-left:3px double色碼;
border-right:3px double 色碼}

/*Opacity for sub column*/
.yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:70)
border-bottom:3px double 色碼;
border-top:3px double 色碼;
border-left:3px double 色碼;
border-right:3px double 色碼}

邊框圖版面－讓整個部落格加邊框圖語法＂

/*shared rounded corner for all modules加框語法*/
.ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;}
.ycntmod .rctop {zoom:1;background:url(上邊框圖檔網址) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(右上角圖檔網址) right top no-repeat;height:30px;font-size:0;position:relative;right:-5px;}

.ycntmod .rcbtm {zoom:1;background:url(下邊框圖檔網址) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(右下角圖檔網址) right bottom no-repeat;height:30px;font-size:0;position:relative;right:-5px;}

.ycntmod .rcl {padding-left:12px;background:url(左邊框圖檔網址) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:12px;background:url(右邊框圖檔網址) right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}

【自定欄位貼圖】

沒連結

<img src="圖片網址">

有連結

<a href="連結網址" target="_blank"><img src="圖片網址"></a>

【自定欄位貼樂果】樂果＝ＬＯＧＯ

<center><p></p>
<p><a href="部落格網址"><img src="你的logo圖網址" alt=""""""""""""""""""""""""""""""" 中文名稱"""" border=
"0" width="88" height="31"></a></p><p><table border="1"width="126"cellspacing="0"><tr><td>&lt;a href=&quot;部落格網址&quot;&gt;&lt;img src=&quot;你的logo圖網址&quot; alt="""""""""""""""""""""""&quot;"""""""" 中文名稱&quot;"""" border=&quot;0&quot;&gt;&lt;/a&gt;</td></tr></table><br></center>

【框線語法】

/*部落格大框線*/
body {border: 框線大小px double #框線色碼;}

/*部落格周圍框線*/
html{
border-top : 大小px solid #色碼;
border-bottom : 大小px solid #色碼;
border-left : 大小px solid #色碼;
border-right : 大小px solid #色碼; }

【按鈕框框】

/*按鈕框框*/
input,select{
background: #框底色碼;
color: #文字色碼;
border: 1px solid #框線色碼;
FONT-SIZE: 9px;
font-family:verdana;}

【Links連結效果】

/*Links連結去底線*/
a,a:link,a:visited{color:#未連結時色碼;text-decoration: none}
a:hover{color:#連結時色碼;text-decoration: none;}

/*Links連結浮出效果*/
a:hover{ border: 2px #文字色碼 outset }

/*Links連結移下效果*/
a:hover { position:relative;top:1px;left:1px;}

【隱藏相關語法】

/*Profile隱藏自我介紹欄*/
#ymodprf{display:none}

/*Blog album module隱藏部落格相簿欄位*/
#ymodalbum{display:none;}

/*隱藏留言板*/
#ymodmsgbd h3{display:none}

/*招呼語圖框 我要留言 字樣刪除*/
#yblast .text a{display:none;}

/*Blog latest update module隱藏更新日期欄*/
#ymodupdate{display:none}

/*Blog category list module隱藏左右欄位標題*/
.yc3sec .mhd,.yc3sub .mhd{display:none}
.yc3sec .mbd,.yc3sub .mbd{zoom:1;filter:alpha(opacity:底圖透明度)}

/*Article隱藏文章寬欄位*/.yc3pribd .mhd{display:none}
.yc3pribd .mbd{zoom:1;filter:alpha(opacity:底圖透明度)}

/* 隱藏頁首和頁尾*/
#yhtw_masthead,#yhtw_mastfoot{display:none;}

【鎖右鍵語法】

/*滑鼠鎖右鍵專用語法document body oncontextmenur*/
body {star:expression( document.body.oncontextmenu  = function(){return false;});}

補充：紅字就是要更改的地方。

這是常用的ＣＳＳ，還有其他雜碎的，以後有機會再整理。

文章整理者：

感謝教學分享來自圖發奇想

感謝教學分享來自圖發奇想