Tutorial : Gradient Bakground

Assalammualaikum.
Dashboard > Template > Edit HTML > Tick Expand Widget Templates

Cari code background yang korang nak tu untuk tukar kepada gradient background.

Background yang ada gambar ke warna ke buang code tu. Ganti dengan code gradient yang korang pilih dekat bawah ni. Btw, jangan buang semua code pulak ye.

Post Title:

.post-title { 

h3.post-title, .comments h4 { 

Sidebar :

.sidebar h2 { 

h2 { 

Blockquote:

blockquote { 

.post blockquote { 

Post Footer:

.post-footer {

Bila dah jumpak bahagian background yang korang nak tukar tu pilih gradient background dekat bawah ni. Pilih yang maa korang nak. Lepas tu copy dan paste macam biasa. Yang tak faham tu silalah tanya dekat comment sini .

Contoh gradient bahagian 1

background-image: -webkit-linear-gradient(left, #BE81F7, #FFFFFF, #FFFFFF, #BE81F7);
text-align: center;
}

Contoh gradient bahagian 2

background-image: -webkit-linear-gradient(left, #FFFFFF, #BE81F7, #BE81F7, #FFFFFF);
text-align: center;
}

Contoh gradient bahagian 3

background-image: -webkit-linear-gradient(left, #BE81F7, #BE81F7, #FFFFFF, #FFFFFF);
text-align: left;
}

Contoh gradient bahagian 4

background-image: -webkit-linear-gradient(left, #FDFFBA, #BAFFBC, #F5BAFF, #FDFFBA);
text-align: center;
}


NOTE:
Merah: Tukar kepada warna yang korang nak ye

Credit : Faqihah Husni 

Read More

Tutorial : Transparent Text To An Image - Photoshop

Assalammualaikum
Contoh macam picture bawah ni. Saya guna ps cs3. Guna cs berapa pun tak kisah. Nak buat tutorial ni perlukan 1 picture. Kalau boleh pilih picture yang gelap. Picture yang saya pilih ni tak gelap sangat sebab tu tulisan tak berapa nampak. Lagi gelap picture lagi jelas tulisan. Nak lebih jelas dan besar klik picture ok.

open photoshop > File > Open > pilih gmbar  > klik OK

bila 2 layer tu masuk dalam group, layer akan ke bahagian tengah sedikit. cara nak masukkan layer dalam group tarik layer yg tulisan tu ke layer group dan cara yang sama untuk Layer 1.

lepas selesai masukkan layer dalam group klik button yang dalam kotak merah ni. pastu pilih Blending Options. 

Okay, siap. Save :')
Selamat mencuba.

Read More

Tutorial : Multiple Strokes Text - Photoshop

Assalammualaikum
Contoh macam bawah ni. Saya guna photoshop cs5. Photoshop cs lain pun boleh guna. Klik picture kalau nak lebih besar dan jelas.

Open photoshop > File > New > Letak saiz yang korang nak > klik OK

klik kotak merah 1 tu dan taip apa yang korang nak dan boleh tukar warna dekat tepi sebelah kanan tu. Pastu klik kotak merah 2

Okay, done :)
Kalau nak tambah lagi stroke, ulang lagi lepas buat convert to smart object tu. Ni saya buat 2 kali saja. Btw, boleh guna untuk brush atau picture yang korang nak letak stoke. Selamat mencuba ^_^

Read More

Tutorial : Tulisan Warna Warni - Photoshop

Assalammualaikum
Saya guna photoshop cs3. Kalau tak ada boleh cari dekat sini bahagian download.
Klik picture untuk nampak lebih besar dan jelas. Ikut step ye.

Open photoshop > File > New > letak size yang korang nak (macam dekat atas ni)

Klik yang petak 1 tu lepas tu tulis. Pastu klik kotak number 2 

Highlight huruf satu persatu dan klik warna ikut turutan macam dalam kotak merah atas ni

Nak bagi lawa lagi klik dekat layer tulisan tu sebelah kiri pastu pilih Blending Options. Akan naik macam picture atas ni dan tick yang dalam kotak merah tu pastu klik OK

Tekan kotak number 1 sampai jumpa number 2 dan tekan number 3 . Pilih warna dekat number 4 dan klik ok dekat kotak 5. Tekan ok sekali lagi dekat kotak 6.

Dah selesai buat save pulak ye.
File > Save As > File name > Format (png atau jpeg) > Save

Okay, siap :)

Read More

Tutorial : Post title & Sidebar title : Huruf depan berbeza

1. Dashbord > Template > Edit HTML > Proceed > Tick Expand Widget Templates

2. CTRL+F cari code ni :

h3.post-title, .comments h4 {

kalau tak jumapa cari code ni :

.post-title {

3. Copy code ni :

.post-title:first-letter {
font-size: 22px;
font-family: Pristina;
font-weight: bold;
color: #BE81F7;
}

4. Paste bawah code ni :

h3.post-title, .comments h4 {

ataupun

.post-title {

5. Kalau untuk sidebar sama jugak macam atas . Cuma korang perlu cari code ni :

h2 {

kalau tak jumpak cari code ni :

.sidebar h2 {

6. Copy code bawah ni :

.sidebar h2 : first-letter {
font-size: 22px;
font-family: Pristina;
font-weight: bold;
color: #BE81F7;
}

7. Paste bawah code ni :

h2 {

atau

.sidebar h2 {

8. Preview & Save

Contoh macam bawah ni .

Note:
Merah : Saiz tulisan
Biru : Nama tulisan
Hijau : Warna tulisan

Read More

Tutorial : Background belakang content / border bergambar

Background ni akan nampak macam ada border bergambar . Aku dah sediakan . Kalau rasa nak guna ambil okay . Untuk mudahkan korang faham tutorial ni ikut je satu persatu . Aku buat seringkas yang boleh supaya korang faham . Tak nampak gambar dengan jelas tekan je gambar . Oh satu lagi , yang aku buat ni hasil dia macam dekat bawah ni sekali . 

1. Dashboard>Design/Template>Customize

2. Dashboard>Design/Template>Edit HTML

CTRL+F :  #content-wrapper {

Copy code ni letak macam dekat atas : 

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCC5ImCPqwTiAMUnW1tloQfpXf4y-UDJLIklk8QXuEIG2bgtl9gOsvrUscCyPX-Mn425wThMQ5QIdC-Gnq3jhw29WEeN9REoAnj2nid6t_HLsXZn-whK49pIRrg-EQK6RR-IaNUSx1MRs/s1600/tuto1.jpg) repeat-y;

CTRL+F :  #header-wrapper {
Letak code ni macam dekat atas :
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAB-wTUIIQ8tXImY8TRtczMNL9FMie_7qEZog3YZB-Q1zFq_RU55RKx6gDGkHIwtNQAEU41LgQ9rKgLr5cLBZcRM6JtA73mKJtncBrYVIh0rjwoyUGUycMT4X9S1DT93bIXHyG8fGnK3qH/s1600/tuto2.jpg) no-repeat bottom ;

CTRL+F : #footer {
Letak code ni macam dekat atas :
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAB-wTUIIQ8tXImY8TRtczMNL9FMie_7qEZog3YZB-Q1zFq_RU55RKx6gDGkHIwtNQAEU41LgQ9rKgLr5cLBZcRM6JtA73mKJtncBrYVIh0rjwoyUGUycMT4X9S1DT93bIXHyG8fGnK3qH/s1600/tuto2.jpg) no-repeat bottom ;
padding-bottom:10px;

CTRL+F : /* Posts
Nak letak code ni tengok macam dekat atas ni okay .
padding: 0px 9px;
padding: 8px 9px;

CTRL+F : .sidebar .widget {
Letak code ni :
padding: 0px 9px;

Sebelum save tu preview dulu . Done :)

Wish me luck  for my upcoming trial SPM .

Read More

Tutorial : Tulisan Bercahaya - Photoshop

Assalammualaikum .
hari ni saya buat tutorial photoshop lagi .  nak buat tulisan macam ni sesuai bila background warna gelap/hitam . baru dia nampak bercahaya . contoh macam bawah ni .

saya guna photoshop cs3 . tutorial ni nak sama macam tutorial ni . nak buat ??? jumm start :)

bukak Photoshop > File > New > dapat macam picture atas ni > letak size yang korang nak > Background Contents : Transparent > click OK.

tekan text tool (T) untuk tulis .

 dah siap > File > Save As > nama file > format pilih PNG.

ni hasilnyaaa . tapi tak berapa sesuai kan bila background cerah . sebab tu kena buat untuk background gelap macam contoh atas sekali tu . selamat mencuba :)

saya rujuk tutorial ni dekat sini : fizgraphic.com

Read More

Tutorial : Buat Corak dalam Tulisan/Huruf - Photoshop

Assalammualaikum
sebelum ni saya dah pernah buat tutorial ni yang tak transparent. tapiiii semua picture tu hilang. so saya buat lain tapi yang transparent punya. saya guna photoshop cs3. contoh macam picture bawah ni.

nak buat ni korang kena ada background/wallpaper sebagai corak dalam tu. yang tu cari je dekat google. tapi jangan ambik yang size kecik pulak ye.

bukak Photoshop > File > New > pilih size yang korang nak > Background Contents pilih Transparent > click OK.

click T tu untuk tulis perkataan yang korang nak

click File > Open picture yang korang simpan tadi. pastu tengok yang dalam kotak merah tu. Change Screen Mood atau tekan saja F untuk dalam screen macam tu. kalau dah dapat okaylahh.

korang pilih file yang picture tu, pastu click yang dalam kotak merah tu. yang ni saya tak tawu nak buat ayat macam mana untuk korang paham tapi korang memang kena crop picture tu kalau boleh seluruh bahagian picture tu. then tekan CTRL + C (serentak).

ambek file tulisan pulak, pastu tekan CTRL+V (serentak). akan dapat macam picture atas ni.

click sebelah kiri dan pilih Create Clipping Mask.

click sebelah kiri dekat layer tulis pastu tekan Blending Options..

tick yang mana korang nak. nak ikut macam saya tick pun tak apee. pastu tekan OK.

nak tukar warna line stroke, korang click dekat bawah leyer tulisan tu. akan dapat macam atas ni.

okayy, save.
File > Save As > nama file > format pilih PNG.

saya rujuk tutorial wan hazel dengan nana johari :)

Read More