Referensi Tutorial Photoshop

5 komentar

Salah satu cara agar bisa membuat web / blog adalah memiliki kemampuan untuk mengolah gambar. Salah satu software untuk mengolah gambar adalah adobe photoshop. Semakin sering menggunakannya dan berlatih maka semakin tinggi kemampuan mengolah data.

Kali ini, aku memberikan beberapa referensi url yang berisi tutorial menggunakannya. Semoga refernsi kecil ini bermanfaat. So, enjoy your image. *apa coba? ^_^

  1. Mengenal Toolbar (dasar) dan lanjutan
  2. Tentang Layer
  3. Membuat Objek Sederhana
  4. Tentang pen tool
  5. Membuat kotak melengkung, lingkaran, dll
  6. Button dengan effect bevel
  7. Tentang teks
  8. Membuat teks dengan outline
  9. 3-D teks
  10. 3-D fungky teks
  11. Tentang Blending Options
  12. Tentang brush
  13. Menu box
  14. Membuat gambar backgorund
  15. Slicing / Memotong gambar menjadi beberapa gambar
  16. Cara memotong gambar
  17. Contoh menggambar


Lihat tutorial lainnya di Azzahrah Design

Read More......

Tutorial 3 : Membuat Template dengan CSS

15 komentar

Tutorial sebelumnya mengenai pembuatan template Non CSS. Tutorial kali ini membahas penggunaan CSS atau Cascading Style Sheet. Merupakan pengumpulan data style yang kita gunakan dalam pembuatan template.
Template kita sebelumnya:
-----------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
<div id="header">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg" />
</div>
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile$>
amp;gt;
amp;gt;
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>
</div>
<div id="main" style="float:right; width:500px; padding:5px;">
<Blogger>
<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;">
........... <$BlogDateHeaderDate$> </h2>
</BlogDateHeader>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>
<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>">&lt;< Home</a></p>
</BlogItemCommentsEnabled>
</ItemPage>
</Blogger>
</div>
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
</div>
</div>
</body>
</html>
--------------------------------

Kalau diperhatikan, ada banyak tag style bahkan ada yang berulang penggunannya. Dengan menggunakan CSS, penulisan style dapat diringkas.
Tag style CSS diletakkan di antara tag <head>, yaitu:

<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>

<style type="text/css">
</style>
</head>


1. Body
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
Ambil isi dari style dan pindahkan pada CSS. Setiap titik koma (;) dibuat perbaris. Untuk url background diberi tanda petik, menjadi:

<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
}
</style>


Margin dituliskan dengan: margin:0 auto;.
Padding diatur: padding:0;.
Tentukan align dengan menulis text-align:center;.

Hasilnya menjadi:
<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;

}
</style>


2. TD

Pada bagian element body CSS, copy font, color, margin, padding, dan text-align kemudian buat element baru CSS yang dinamai TD :

td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}


3. Link

Pada bagian tag <body> masih terdapat unsur link, yaitu:
<body link="#000000" vlink="#000000">
Link ini, pada CSS dipisahkan menjadi elemen-elemen:

a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}


a:link merupakan pengaturan link. a:visited pengaturan link yang sudah pernah dibuka. a:hover pengaturan link yang disorot.

Untuk sementara, CSS yang sudah ada:
------------------------------
<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}
td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;

text-align:center;
}
a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}

</style>
---------------------------

4. Content

<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
Ambil style dan align untuk content, pindahkan pada CSS. Karena content merupakan tag id, maka pada CSS, penamaan content diawali dengan karakter # atau #content.

#content {
width:750px;
border-top:5px solid #FFE53C;
text-align:left;
}


5. Sidebar
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
Ambil style untuk sidebar, pindahkan pada CSS. Karena sidebar merupakan tag id, maka pada CSS, penamaan sidebar diawali dengan karakter # atau #sidebar.

#sidebar {
float:left;
width:230px; >
border-top:5px solid #FFE53C;
font-size:11px;
}


Selanjutnya, atur juga jarak antar baris pada paragraph sidebar, yaitu:

#sidebar p {
line-height:1.5em;
}


6. Sidebar Title
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>

Ambil style untyk h2, pindahkan pada CSS, namakan sidebar-title (boleh juga diberi lain, misal 'judul-sidebar' dengan aturan dasar tidak boleh ada spasi) dengan tata cara penulisan diawali dengan tanda titik atau .sidebar-title :

.sidebar-title {
background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg")
no-repeat 0 0;
font-weight:bold;
font-size:14px;
color:#A93101;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
}


Untuk menggunakan element sidebar title ini pada tag <h2> harus ditambahakan tag class, yaitu :
<h2 class="sidebar-title">...Hari Kemarin</h2>

Hal yang sama berlaku untuk semua judul yang ada di bagian sidebar. Hapus tag style dan tambahkan class-nya. Pada judul 'Kumpulan Arsip' dan 'Blog Teman.

7. Daftar List pada Sidebar (khusus sidebar)
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
Dipindahkan menjadi:

#sidebar ul {
list-style:none;
margin-left:0;
line-height:1.5em;
}


Hapus semua style yang terdapat pada tag <ul>.
<li style="background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif") no-repeat 0 .45em; padding-left:16px;">
Pindahkan menjadi:

#sidebar ul li {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif") no-repeat 0 .45em;
padding-left:16px;
}


Sama seperti tag <ul>, hapus juga semua style yang ada pada tag <li>.

8. Main
<div id="main" style="float:right; width:500px; padding:5px;">
Pindahkan style ke CSS menjadi :

#main {
float:right;
width:500px;
padding:5px;
}


9. Tanggal
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;">........... <$BlogDateHeaderDate$> </h2>

Ambil style untuk penulisan tanggal dan masukkan ke dalam CSS beri nama date-header :

.date-header {
text-align:right;
font:bold 85% Georgia,Serif;
color:#4487CD;
text-transform:uppercase;
letter-spacing:.3em;
}


Gunakan CSS ini dengan menggunakan class:

<h2 class="date-header">........... <$BlogDateHeaderDate$> </h2>

10. Judul Posting
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>

Ambil style untuk penulisan judul posting, masukkan ke dalam CSS dan beri nama post-title :

.post-title {
background: url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg") no-repeat 0 0;
padding:2px 14px 2px 25px;
font:bold Georgia,Serif;
color:#A93101;
border-bottom:1px dashed #000000;
}


Gunakan CSS ini dengan menggunakan class:

<h3 class="post-title"><$BlogItemTitle$></h3>

11. Isi Postingan

<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>

Ambil style ini dan masukkan ke dalam CSS, beri nama post :

.post {
background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right;
line-height:1.5em;
}


Gunakan CSS ini dengan menggunakan class:

<p class="post"><$BlogItemBody$></p>

12. Post Footer

<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>

@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>

Ada dua style:
Pindahkan style paragraph (p) menjadi:

.post-footer {
line-height:1.5em;
color:#4487CD;
text-align:right;
}

Gunakan CSS ini dengan menggunakan class:
<p class="post-footer>

Pindahkan style em menjadi:
.post-footer em {
float:left;
text-align:left;
}


13. Hyperlink Post Footer Komentar

<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>

Ambil style untuk link komentar, pindahkan ke CSS, beri nama comment-link. Karena ini merupakan link, maka diawali dengan a. :
a.comment-link {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}


Gunakan CSS ini dengan menggunakan class:
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>

NOTE !
Untuk penggunanan IE5/Mac, CSS yang digunakan:

html>body a.comment-link {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}


Sehingga kedua CSS ini dituliskan / digunakan.

14. Judul Komentar

<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>

Ambil style-nya, pindahkan ke CSS, beri nama comment-title :
.comment-title {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 1em;
padding-left:14px;
padding-top:10px;
font-size:14px;
border-top:1px dashed #000000;
}


Gunakan CSS dengan menggunakan class :
<h4 class="comment-title"><$BlogItemCommentCount$> Comments:</h4>

15. Komentar

<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>">
Ambil style, pindahkan ke CSS beri nama .comment-poster :
.comment-poster {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}


Aktifkan CSS ini dengan menggunakan class :
<dt class="comment-poster" id="c<$BlogCommentNumber$>">

16. Footer
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
Ambil style, pindahkan ke CSS, beri nama .footer :
#footer {
clear:both;
background:#FFE43B;
text-align:center;
padding:2px;
}


17. Blockquote

Blockquote atau kutipan bisa kita disain, misalnya:
blockquote {
margin:5px 90px 5px 5px;
border:1px dashed #01244F;
background:#CAD8E6;
border-width:1px 0;
padding:5px 15px;
font-style:italic;
}


18. Border untuk Gambar

Terakhir, bila ingin, kita dapat mengatur border gambar. Kalau ingin semua gambar pada #main memiliki border, maka element CSS yang digunakan adalah #main img. Namun, bila yang ingin diberi border hanya gambar-gambar postingan, maka element CSS nya .post img.
Misalnya, aku ingin memberi border untuk tiap gambar yang kuposting, maka element CSS yang kugunakan:

.post img {
margin:0 0 5px 0;
padding:3px;
border:1px solid #C86FC7;
}

-- Selesai --



Lihat tutorial lainnya di Azzahrah Design

Read More......

Feminin

8 komentar

klik pada gambar untuk memperbesar
[Click on image]





Ini skin diinspirasi oleh seorang sahabat, Nora. Untuk sementara, skin ini tidak untuk umum. Alasan utamanya adalah masih adanya tulisan nama sabahatku itu di sudut kiri atas.

Read More......

Si Imoet - Classic Skin

17 komentar

klik pada gambar untuk memperbesar Download : imoet-old.txt

Size : 9 kb

Info : Diawali dengan permintaan si imoet Zaa. Akhirnya muncullah skin model ini.

Read More......

Car - Classic Skin

7 komentar

klik pada gambar untuk memperbesar Download : car-old.txt

Size : 20 kb

Read More......

Sun Flowers - Classic Skin

4 komentar

klik pada gambar untuk memperbesar View : Live Demo











Download : sunflower.txt

Info :
Skin permintaan Diah. Ngakunya dia suka bunga matahari.... sama dung

Lihat Template lainnya di Azzahrah Design

Read More......

Oxalis - Classic Skin

5 komentar

klik pada gambar untuk memperbesar Download : oxalis-old.txt

Size : 22 kb

Read More......
-- -- --

Copyright © 2008 - Free Islamic Blogger Templates - powered by Blogger