July 21, 2024

Membuat Templates Web My-PortFolio Tema Blog Diary

4 min read

Assalamualaikum… Hai…netters news palcomtech, pa kabar kamu semoga baek-baek wae, seperti pak rais ini.
Dalam tutorial ini saya ingin berbagi ilmu, bagaimana membuat interface  web yang latar nya dibuat menggunakan photoshop dengan gambar yang besar lalu untuk content di slicing, lalu dirapikan dengan menggunakan web editor dreamweaver ditambah bumbu penyedap css, hmmm nyummy. Bentuk interface yang akan dibuat seperti gambar berikut.

Dari tampilan gambar, tema yang dibuat adalah sebuah portlio yang berbentuk blog, atau dengan kata lain portfolio blog my diary, seperti itulah kira kira. Dalam pembuatan interface nya saya banyak menggunakan tools shape saja, ditambah efek belending options drop shadows, serta sedikit pemanis menggunakan brush yang berbentuk rumput.

A. Membuat interface dengan photoshop.

Langkah 1

Buka aplikasi photoshop kamu.

Langkah 2

Buat kanvas baru berukuran width : 800pixels, height : 600pixels, resolution :72, klik ok.

Langkah 3

Tampilkan mistar untuk membantu dalam meletakan gambar dan posisi header, isi, dan footer, klik menu view – pilih ruler, klik kanan mouse pada ruler jadikan pixels.

Langkah 4

Buat garis bantu secara vertical, 100 dan 700, klik menu view – pilih new guide. Pada jendela new guide klik vertical pada position isikan 100, klik ok, begitu juga untuk gars bantu yang 700.

Langkah 5

Buat garis bantu horizontal, langkah nya sama seperti vertical, 150 dan 550

Langkah 6

Buat layer baru, beri warna gradasi warna foreground : #00bff3 dan warna background : #bfeffd, seperti gambar berikut.

Langkah 7

Buat layer baru kembali untuk membuat latar putih, mengunakan shape rounded rectangulae tools, dengan sudut radius :25px, letakan ditengah kotak antara garis bantu, seperti gambar berikut.

Langkah 8

Tambahkan efek blending option drop shadow, seperti gambar berikut.

Langkah 9

Tambahkan aksesories seperti gambar menggunakan objek custom shape atur sesuai keinginan, seperti gambar berikut. Jangan lupa dibuat dalam layer baru. Namun hilangkan latar putih nya. Seperti gambar berikut.

Langkah 10

Buat judul my diary dan life story about me, menggunakan type huruf pristina, tambahkan efek blending options untuk my diary : stroke dan outer glow, size 48pt, sedangkan life story about me : drop shadow, size 20pt, seperti gambar berikut.

Langkah 11

Simpan dengan nama themes, tapi dengan penyimpanan sebagai web dan images only. Tampilkan kembali latar putih nya. Seperti gambar berikut :

Langkah 12

Kita lakukan slicing (slice) untuk header, isi dan footer, tapi dengan menghilangkan semua latar dibelakang, tambahkan garis bantu untuk bayangan dikedua sisi pada latar putih, seperti gambar berikut.

Kenapa dihilangkan background dibagian belakang Karena kita simpan sebagai png.

Simpan dengan penyimpanan web dengan type penyimpanan png. Untuk hasil yang maksimal pemotongan gambar tersebut dipotong satu persatu. Oke.

B. Membuat struktur layout di dreamweaver.

Buka jendela aplikasi dreamweaver kamu. Ketik struktur layout nya seperti berikut :

[sourcecode language=”php”]
<div id="header">
<img src="themes_03.png"  />
</div>
<div id="bungkus">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Guest Book</a></li>
</ul>
</div>
<div id="content">
<div id="isi">
<h2 class="head">Why ???</h2>
<h3>post by rais at 20:24 dec 2010</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna <a href="#">more…</a></p>
<h2 class="head">Are You Ready ???</h2>
<h3>post by rais at 20:24 dec 2010</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna <a href="#">more…</a></p>
</div>
<div id="kanan">
<div class="class_menu">
<h3 class="head">Profile</h3>
<img src="raise.png" alt="profile" />
<p>agus rais Palembang, Sumatera Selatan, Indonesia blog itu sebagai wadah berbagi ilmu. jadi maksud saya membuat blog untuk membagi ilmu, siapa tau dari internet juga dapet rizky yang halal <a href="#">Lihat profil lengkapku</a></p>
<h3 class="head">Category</h3>
<ul>
<li><a href="#">Cinta</a></li>
<li><a href="#">Sahabat</a></li>
<li><a href="#">Keluarga</a></li>
</ul>
<h3 class="head">Blog Roll</h3>
<ul>
<li><a href="#">Palcomtech</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>
</div>
<div id="cipta">
<p>desain oleh rais ( c ) 2010</p>
</div>
</div>
<div id="footer">
<img src="footer_03.png" />
</div>
[/sourcecode]

C. Merapikan templates dengan css

Buka file baru dengan type css, ketik kode nya seperti berikut :

[sourcecode language=”css”]
*{margin:0 auto; padding:0;}

html {background:url(latar_01.gif) #beeefb repeat-x;}

body{background:url(themes.jpg) no-repeat top center;
width:100%;
display:table;}

#header {margin: 150px auto 0;
width:610px;
z-index:1;}

#bungkus{ width:610px;
background:url(isi_03.png) repeat-y;}

#menu {width:610px; }

#menu ul {clear:both;
width: 600px;
height: 38px;
background:#FFCC33;
list-style: none;}

#menu li {float: left;
height: 38px;
background: url(img04.jpg) no-repeat right top;}

#menu a {display: block;
padding: 10px 30px 7px 30px;
text-decoration: none;
font: 12px/14px Arial, Helvetica, sans-serif;
font-weight: bold;
color:#000099; }

#menu a:hover {text-decoration: underline;}

#isi {width:380px;
padding:5px 5px 0 10px;
float:left;}

#isi h3 {font:10px/12px arial;
padding-bottom:5px;}

#isi p{line-height:1.5em;
padding-bottom:15px;}

#kanan { width:190px;
float:right;
margin:5px 10px;}

.head{font: bold 14px Arial;
color: white;
background: url(judul.png) repeat-x center left;
margin-bottom: 5px;
text-transform: uppercase;
padding: 4px 0 4px 3px; }

p {font-family:verdana;
font-size:12px;}

h1 {top:100px;
text-align:center;}

.class_menu{width: 190px; }

.class_menu .head{font: bold 14px Arial;
color: white;
background: url(judul.png) repeat-x center left;
margin-bottom: 5px;
text-transform: uppercase;
padding: 4px 0 4px 10px; }

.class_menu ul{list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; }

.class_menu ul li{padding-bottom: 2px; }

.class_menu ul li a{color: #A70303;
background: url(panah.png) no-repeat center left;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;}

.class_menu ul li a:hover{color:#0000FF;
text-indent:5px;}

.class_menu img {width:70px; height:65px;
float:left;
padding:3px 3px 0 0;}

.class_menu p{padding-bottom:5px;
line-height:1.5em;}

#cipta {width:610px;
text-align:center;
height:20px;
clear:both;}

#footer {width:610px;}
[/sourcecode]

Demikianlah tutorial pembuatan templates menggunakan 3 aplikasi, photoshop, dreamweaver dan css, semoga bermanfaat untuk bahan refrensi pembuatan project tcs. Silahkan di download file nya untuk dipelajari, jika masih ada yang bingung silah kamu berkomeng-komeng untuk menanyakan. Refrensi pembuatan templates ini dengan kata kunci large background.

Terima kasih atas perhatiannya, terima kasih sudah meng-like-it nya, see u next tutorial.

Unduh File Tutorial ini disini : [download id=”183″]

0 thoughts on “Membuat Templates Web My-PortFolio Tema Blog Diary

  1. :Pertamax pak…………release juga template layout web pake css nya pak yang kemaren dicritain ……nice share pak…..

    1. ehem…iya neh…

      kalau masih bingung membaca kode css nya silahkan berkomeng komeng nyak di sini…

      sebab mau nya seh di buat satu persatu pas mau merapikan tampilannya dengan css

      takut jadi 2 sesi makanya dibuat sekaligus gitu…

      inti nya harus ada slicing untuk latar…sebesar 1px setipis mungkin…

      di kode css ini

      html {background:url(latar_01.gif) #beeefb repeat-x;}

      :kr :cystg

    1. oke…wait liss lah..ini lha ado kok nak di angkat ke portal…

      pilih nyang mano
      1. materi box
      2. kreasi menu

      hehehehe, stok tutorial banyak lah…

      (sombong mode on)
      :tkp :2thumbup

  2. Like This pak, apa lg warna gradasi nya yg saya suka pake klo lg belajar desain,, Sotoshop nya emang mantap, pas bener racikan bumbunya :2thumbup :beer:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.