[Photoshop] Tutorial GIF Graphics Part II

GIF like this
1. Open your image.
2. Duplicate your image.
3. On second layer, click Image > Adjustments > Desaturate


4. On the second layer, click Eraser Tool and erase the part that should be colored.
5. Save the layer. Then, undo step 4 and erase the next part you want to be colored, save. Repeat the step until you get them each individually colored with their own seperate version of photo.

Making GIF
1. Open all image saved just now.
2. Drag the second till the last photo into the first image so, the first image will be the first layer.
3. Now click Window > Animation. On the right side of the animation bar, there should be an arrow with some lines. Click on that and click Make Frames From Layers. This will make a gif featuring each layer.


4. Set the speed for the gif. 0.5 seconds should be good.
5. How to save the gif ? Click File > Save for Web & Devices... click OK.

Another method which is simpler... ?



Tutorial Header 'Like Me'


Assalammualaikum.
Aku share pasal ni sebab ada orang tanya tapi aku lupa siapa haha sorry. Lagipun aku nak save code ni, entah-entah nak guna balik kan. Code ni asalnya dari tutorial Apis dengan Wana. Aku cuma aplikasikan code yang sedia ada.


Code untuk header aku tu akan jadi macam ni ;

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.gambar {
width:800px
border:1px solid none;
}
.kedudukan {
width:800px;
margin-left:-30px;
margin-bottom:-25px;
}
#tulisan{
margin-top:-215px;
padding:6px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background:none;
opacity:0.79;
text-align:center;
color:#000;
padding-bottom:4px;
letter-spacing:1px;
-webkit-transition:1200ms;
}
.intro {
text-align:justify;
letter-spacing:1px;
font-size:8px;
font-family:tt;
text-transform:none;
padding-bottom:10px;
}
</style>
<center><div class="kedudukan">
<img class="gambar" src="URL HEADER WIDTH 800PX HEIGHT 500PX" /><div id="tulisan">
<div class="intro"><div style="background-attachment: scroll; background: none;-moz-column-count: 3; -moz-column-gap: 25px; -webkit-column-count: 3;-webkit-column-gap: 25px; -o-column-count: 3; -o-column-gap: 25px;column-count: 3; column-gap: 25px; height: 160px;width: auto; padding: 10px">
<div style="border:3px solid transparent; background:none; width:245px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:140px; ">
<style>
#sidebarnav a {
    padding: 3px;
    margin-top: 4px;
    margin-left: 6px;
    width: 40px;
    font-family: oxygen;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    color: #bbac98;
    background-color: #f3dbd3;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#sidebarnav a:hover {
    color: #eb9e9e;
    background-color: #f0eabd;
}
</style>
<center>
<div id="sidebarnav">
<br />
<br />
<br />
<a href="URL LINK">TITLE</a>
<a href="URL LINK">TITLE</a>
<a href="URL LINK">TITLE</a>
<a href="URL LINK">TITLE</a></div></center>
<style>
.profile{
font:10px tt;
Text-decoration:none;
color:#585858;
letter-spacing:2px;
text-transform:uppercase;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<br />
<br /><center><a class="profile">DESCRIPTION FOR PROFILE</a></center></div><div style="border:3px solid #eee;background:#E5DDDA; width:220px; padding:5px; border-bottom:none;-webkit-border-top-left-radius: 30px;-webkit-border-top-right-radius: 30px;-moz-border-radius-topleft: 30px;-moz-border-radius-topright: 30px;border-top-left-radius: 30px;border-top-right-radius: 30px;color:white;text-align:center;">
Title Scrollbox</div>
<div style="border:3px solid #eee;background:none; width:210px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:102.95px; ">
<br /><center>
CONTENT FOR FIRST SCROLLBOX
</center>
</div><div style="border:3px solid #eee;background:#E5DDDA; width:220px; padding:5px; border-bottom:none;-webkit-border-top-left-radius: 30px;-webkit-border-top-right-radius: 30px;-moz-border-radius-topleft: 30px;-moz-border-radius-topright: 30px;border-top-left-radius: 30px;border-top-right-radius: 30px;color:white;text-align:center;">
Title Scrollbox</div>
<div style="border:3px solid #eee;background:#none; width:210px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:110px; ">
CONTENT FOR SECOND SCROLLBOX</div></div></div></div></div></center>


  •  Dashboard > Layout > Add a Gadget (atas content blog) > paste dalam HTML / Javascript
  •  Header tu agak-agak macam ni : FONSO
  •  Biasanya aku coding dulu kat Real-time HTML Editor
  •  Kalau rasa code yang aku share tu memeningkan, pergi tengok balik code asal.
  •  Tak semestinya code yang aku re-code atas tu accurate dengan saiz yang dibayangkan. Perlu rajin try and error. Coding itu indah dan misteri hahaha dusta.

Btw, kepada sesiapa yang tanya. Aku guna Simple Template fosho dan selama-lamanya. Lagu blog ini ialah Eric Nam - Heaven's Door. 

[Photoshop + Photoscape] Tutorial GIF Graphics

something like this

Assalammualaikum.
1. Start adding text one by one.


2. Indicates layer visibility / click on eyes symbol on all text except the first text.


3. Save the layer which only have the first text.
4. Click eyes symbol on the second text to make it visible again. Save the second layer as the third layer of your GIFs. 


5. Select the second text, click Filter > Blur > Motion Blur. When the text blurred, I move the text a little bit to the left. Lol. Now, save the layer as the second layer of your GIFs.



6. Repeat steps 4 - 5 on the next text till you done.

Making GIFs
I obviously don't know how to combine layer become animated GIF using Photoshop even I've look on many tutorials. I still don't get it Lol so I use Photoscape to combine all layer become GIFs. Simply click on Animated GIF, then drag all layer. Change time as you like. Done. Good luck !


Tak faham tanya weh haha


Fonts

Search dekat Google untuk download. hehe


Freebies KPOP Boy-Groups Header

FULL + NOT TRANSPARENT
900 x 400 px
Brushes credit to chazzief
Comment before take them out. Ctrl + Click on header to save (:






Tutorial Shake Image


Blogskin / Classic Template
1. Dashboard > Template 
2. Copy code below and paste before / above </style>

.shakeimage{
position:relative
}

3. Copy code below and paste under <head>

<script language="JavaScript1.2">
/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script> 

4. Add code below inside the <img> tag of any images you want the effect applied to

class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()" 

Example :
<img src="URL PHOTO" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"> 

5. Preview > Save Template

Template Designer
1. Dashboard > Layout > Add a Gadget > HTML / Javascript
2. Copy code below and paste in HTML / Javascript space


<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">
/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
<img class="shakeimage" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" src="URL PHOTO" />

3. Save.

Cr : dynamicdrive

Freebies KPOP Cursor Part III

Take out by commenting  (⌒-⌒; ) Ctrl + Click cursor to copy code. Request for any KPOP group's symbol opened for this time being. Re-freebies is strictly not allowed. especially Infinite, BAP and EXO, it is own made. Thankgyu.


 





[Own Made] Freebies Tiles Background



Comment before take them out. Ctrl + Click photo to get code (⌒_⌒)


Blogskin : HUNHAN

Assalammualaikum.



Comment before using. Remove credit is strictly not allowed.

Tutorial Disable Dragging Image


Template Designer

1. Dashboard > Layout > Add a Gadget > HTML / Javascript
2. Copy code below and paste in HTML / Javascript space
<script type="text/javascript">
document.ondragstart = function () { return false; }; </script>

Classic Template / Blogskin

1. Dashboard > Template
2. Copy code below and paste after / below </style> 
<script type="text/javascript">
document.ondragstart = function () { return false; }; </script>


3. Preview & Save.