Bill 素材: 教程

显示标签为“教程”的博文。显示所有博文

FB 變色教程

我的 FB XD

到一下網站，跟住他做就

行啦 ~

http://colormyfacebook.com/

动漫页面（原创教程）

（ * 不能转载，请合作，谢谢 * ）

效果图：

布局 > 添加小工具 > HTML

你好我是六道骸 XD

<br/>

<center><a href=

"www.google.com">Google</a></center></div>

PS ：

红色 — 可以改的

蓝色 — 页面网址

青色 — 页面名字

紫色 — 图片网址

图片相框效果

效果图：

打开图片，建立一个新的图层，涂上颜色。（颜色你喜欢）

然后，把你要的显示的那部分用橡皮工具擦掉颜色。

如果你要只是颜色而已，就完成啦 ~

如果你要渐变，你就右键颜色的那个图层 Blending Option 。

打钩 Gradient Overlay ，选颜色就行啦 ~

如何制作彩虹效果（ 2 种方法）

第 1 种方法

打开一张图片。

对着图片的 Layer 按两次解锁，然后 Ctrl + J 复制多一层。

把你要的颜色在复制的图层乱涂鸦。

如下图：

然后 Filter > Blur > Radial Blur

数值请参考下图：

然后 Filter > Blur > Motion Blur ( 数值自己喜欢 )

然后图层选择 Screen 。

——————————————————————————————————

第 2 种方法

在图片上面开多一个空的图层，用彩虹色的渐变拉。

然后图层选择 Screen 、Overlay 、Sorf Light 、Color 。

随你喜欢。

PS 界面介绍

1）移动工具

2）包围工具

3）多边形套索

4）选择工具

5）剪裁工具

6）切片工具

7）污点修复画笔工具

8）画笔 / 铅笔工具

9）仿制图章工具

10）历史记录艺术画笔工具

11）橡皮擦工具

12）渐变 / 漆桶工具

13）涂抹工具 / 模糊工具 / 消尖工具

14）减淡工具

15）钢笔工具

16）文字工具

17）路径选择工具

18）形状工具

19）注释工具 / 注意工具

20）颜色采取器

21）手工具

22）放大镜工具

23）自动变回黑白的前景色和背景色

24）前后调转前景色和背景色

25）前景色和背景色

26）蒙版

27）更换银幕模式

28）显示图片的位置

29）a - 颜色 / b - 调色器 / c - 样式

30）图层

为评论箱添加背景

给 BlUe TeArS 的教程。

效果图：

寻找 /* Comments 。

在 /* Comments
----------------------------------------------- */

之后添加

.comments {
background-image: url(图片网址);
}

如何用任何字体制作空心字

效果图：

我用的是 Photoshop CS3 哦 ~

选择透明的纸张，按 Text ，打你要的字。

向着 Text 的 Layer 右键，选择 Blending Options 。

打钩 Drop Shadow ( 要不要都可以 ) 和 Stroke 。

数字依照个人喜爱调。

然后把 Fill 调到 0 % 就行了。

添加 Click To Enter

给 BluE TeArS 的

把下代码放在 ]]</b:skin> 上面

* to top */

#toTop { width:100px;background:none;border:0px solid #ccc;text-

align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-

decoration:none; }

</style></head>

/* toggle() checks to see if the images has already been faded

or not and sends the appropriate variables to opacity(); */

function toggle(el,milli) {

// Get the opacity style parameter from the image

var currOpacity = document.getElementById(el).style.opacity;

if(currOpacity != 0) { // if not faded

fade(el, milli, 100, 0);

} else { // else the images is already faded

fade(el, milli, 0, 100);

}

/* changeOpacity() uses three different opacity settings to

achieve a cross-browser opacity changing function. This

function can also be used to directly change the opacity

of an element. */

function changeOpacity(el,opacity) {

var image = document.getElementById(el);

// For Mozilla

image.style.MozOpacity = (opacity / 100);

// For IE

image.style.filter = "alpha(opacity=" + opacity + ")";

// For others

image.style.opacity = (opacity / 100);

}

/* fade() will fade the image in or out based on the starting

and ending opacity settings. The speed of the fade is

determined by the variable milli (total time of the fade

in milliseconds)*/

function fade(el,milli,start,end) {

var fadeTime = Math.round(milli/100);

var i = 0; // Fade Timer

// Fade in

if(start < end) {

for(j = start; j <= end; j++) {

// define the expression to be called in setTimeout()

var expr = "changeOpacity('" + el + "'," + j + ")";

var timeout = i * fadeTime;

// setTimeout will call 'expr' after 'timeout' milliseconds

setTimeout(expr,timeout);

i++;

}

// Fade out

else if(start > end) {

for(j = start; j >= end; j--) {

var expr = "changeOpacity('" + el + "'," + j + ")";

var timeout = i * fadeTime;

setTimeout(expr,timeout);

i++;

}

</script>

<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';

document.getElementById('june').style.display=''">

<center><img src="图片网址"

style="opacity:0.4;filter:alpha(opacity=40)"

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"

onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>

</div>

<body>

Scrollbar 美化（三种美化）

模板 > 修改 HRML > Ctrl + F 寻找（代码添加上面就对了）

]]></b:skin>

第一种是表面而已的

（如果是要第二种或是第三种就必须添加以下代码）

::-webkit-scrollbar {

height: 12px;

width: 15px;

background:#333333;

}

::-webkit-scrollbar-thumb {

background: #555555;

}

第二种是经过是变色

（如果没有加第三种那你按 scrollbar 时的颜色是第二种）

::-webkit-scrollbar:hover {

height: 12px;

width: 15px;

background:#333333;

}

::-webkit-scrollbar-thumb:hover {

background: #B3B3B3;

}

第三种是激活 scrollbar 时的变色代码
（激活的意思是按着 srcollbar 的意思）

::-webkit-scrollbar:active {

height: 12px;

width: 15px;

background:#333333;

}

::-webkit-scrollbar-thumb:active {

background: #ffffff;

}

PS ：红色字的都能改哦 ~ ，不明白留言问我吧 ~

制作超链接

什么是超链接？

超链接是当你按超链接时会带你到另一个网站。（越讲越不知道讲什么 XD ）

<a href="网址">网址名称 / 点我或其他字眼</a>

如果你要用图片做超连接的话就看以下代码。

经过连接时出现 Text-shadow

给淇爱峻、的教程

效果图：

登入部落格 > 模板 > 修改 HTML

然后 Ctrl + F 寻找 a:hover {

在 a:hover { 后面添加以下代码

text-shadow: 0 0 0.2em #00FFFF , 0 0 0.2em #00FFFF;

添加后如下图：

然后保存就行啦！

用图片做框框（原创教程）

Hallo ~ I am this effect :D

PS ：这效果很像 Google 大哥才能看到。

我只提供代码，你们看看要用在哪里。

点击链接时出现影子

效果图：

登入部落格 > 模板 > 修改 HTML > Ctrl + F 寻找 ]]></b:skin>

在上面添加

a:active {

text-shadow: 0 0 0.2em #ffaad5 , 0 0 0.2em #ffaad5;

}

PS ：红色字的是红色代码，记得去修改哦。

页面美化

效果图：

登入部落格 > 布局 > 添加 HTML

<hr/>

<hr/>

<hr/>

</div>

</center>

PS ：红色字的都可以随意更改哦 ~ 不明白的可以留言问我哦 ~

不同的页面

效果图：

登入部落格 > 布局 > 添加 HTML

<hr/>

<hr/>

<hr/>

</a>

</ul></div></div>

</center>

————————————————————————————————————

紫色的字：字体

橙色的字：颜色代码

蓝色的字：px 的大小是与上面的距离

青色的字：px 的大小是与右边的距离

（如果要换去左边的话，直接 right 改为 left 就行了）

当点击链接时出现框框

效果图：

登入部落格 > 模板 > 修改 HTML

把一下代码放到 a:hover { 后面（请看下面的图）

a:active {

border:1px dashed #000000;

}

PS ：红色字的都可以改哦 ~

添加以后会这样

About Me 制作方法

图片取自：

效果图：

登入部落格 > 布局 > 添加 HTML

<div style="text-align:center;font-family:Coming Soon;font-size:30px;color:#ffffff;">About Me 关于我</div>

</center>

<br/>

<hr/>

<br/>

姓名：

<br/>

年龄：

<br/>

生日：

<br/>

星座：

<br/>

生肖：

<br/>

爱好：

<br/>

<hr/>

<br/>

<br/>

</ul>

PS ：红色字的都可以改哦 ~

添加页面

给樱的教程

页面是什么？

登入部落格 > 页面 > 新建页面（选择空白页面）

解释图：

樱，希望你看的明白，不明白留言问我吧 ~

图片 180 度旋转

这个效果很好玩哦 XD

修改 HTML > Ctrl F 寻找 /* Header

在 /* Header 之前添加以下代码就行啦 ~

img:hover {

-webkit-transition-duration:.9s;

-moz-transition-duration:.9s;

-o-transition-duration:.9s;

-ms-transition-duration:.9s;

-moz-transform:rotate(180deg);

-webkit-transform:rotate(180deg);

-o-transform:rotate(180deg);

-ms-transform:rotate(180deg);

transform:rotate(180deg);

}

PS ：红色字的是图片被旋转的角度，180 是整个调转，你可以依照自己的喜好调整，数字越大就越旋转。

希望你们知道我讲什么 =3=