article Search box

Wednesday, June 19, 2013

Tutorial Mengubah Desain Website dari Photoshop Menjadi Html


Mengubah Desain Website dari Photoshop Menjadi Html
Apabila pada tutorial sebelumnya tentang Belajar Membuat Template Website Menggunakan Photoshop kita telah mempersiapkan sebuah layout website sederhana yang di desain dari aplikasi photoshop, tentu saja layout tersebut masih dalam bentuk image dan belum siap apabila ditampilkan secara langsung pada browser.
Nah, proyek kita kali ini adalah mengubah desain website dari photoshop tersebut menjadi rangkaian file HTML yang bisa ditampilkan dengan sempurna pada browser, baik itu browser Chrome, Mozilla, Opera, Internet Explorer, Safari, dll. Sebelumnya kita telah mempunyai satu desain website seperti gambar dibawah ini :
desain web
Desain Website dari Adobe Photoshop
Desain website diatas sebelumnya sudah saya simpan dengan format image .jpg dari photoshop.
Proses Slicing (Pemotongan gambar) 
1. Buka program photoshop, kemudian klik Ctrl + O dan pilih file desain website yang sudah kita buat pada tutorial sebelumnya. Apabila sudah, kemudian klik Slice Tools (K) pada menu Photoshop. Selanjutnya slice atau potonglah bagian-bagian yang dipilih saja, lihat gambar:
Slicing
Proses slicing pada file image desain web
Kemudian setelah itu pilih menu File dan Save for web and devices… Select atau pilih pada slice yang diinginkan saja dengan cara klik Ctrl+Select pada bagaian slice yang ingin kita simpan:
slicing save
Proses pemilihan hasil file slicing dengan cara klik Ctrl+Select
Kemudian klik Save, pilih lokasi file penyimpanan dan terakhir akan menghasilkan folder Images yang berisi potongan-potongan gambar hasil slicing kita.
Selanjutnya kita buat file HTML dasarnya atau Rangka HTML, buka program teks editor anda kemudian ketikkan kode html seperti dibawah ini:
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar Membuat Desain Website by Syafaatfm</title>
<link href="setup_style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
 
<body>
<div id="main">
 
<div class="container">
 
<div id="header">
 
Logo / Menu
 
</div>
 
<div id="block_feature">
 
Featured Content
 
</div>
 
<div id="block_content">
 
Wilayah Content
 
</div>
 
</div>
 
</div>
 
<div id="footer">
 
<div class="container">
 
Wilayah Footer
 
</div>
 
</div>
</body>
</html>
Rangka dasar HTML sudah kita buat, selanjutnya adalah proses menyisipkan file-file image hasil slicing sebelumnya pada HTML Untuk menyisipkan file image ke html digunakan tag <img src=”lokasi gambar” />. Kode selengkapnya dari rangka dasar html diatas yang sudah saya modifiikasi sehingga bisa menampilkan desain website yang diinginkan, bisa dilihat dibawah ini:
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creatif</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="garis">
<div class="container">
 
<div id="header">
 
<ul id="menu">
<li><a href="http://www.jegulo.net/">HOME</a></li>
<li><a href="http://www.jegulo.net/">NEWS</a>
<ul>
<li><a href="http://www.jegulo.net/">Nasional</a></li>
<li><a href="http://www.jegulo.net/">Lokal</a></li>
<li><a href="http://www.jegulo.net/">Teknologi</a></li>
<li><a href="http://www.jegulo.net/">Sains</a></li>
</ul>
</li>
<li><a href="http://www.jegulo.net/">ABOUT</a></li>
<li><a href="http://www.jegulo.net/">SERVICES</a></li>
<li><a href="http://www.jegulo.net/">CONTACT</a></li>
</ul>
<div id="logo">
<h1>Belajar Web Design by Syafaatfm</h1>
 
</div>
</div>
 
</div>
</div>
<div class="featured container block">
<img src="image/featured.gif" alt="featured" class="fitur"/>
<div class="block_inside">
<div class="image_block">
<img src="image/sample_feature.jpg" alt="contoh gambar" />
</div>
<div class="text_block">
<div class="pas">
<h2>Design Created by Syafaatfm</h2>
<small>in <a href="http://www.jegulo.net/">web design</a> tagged <a href="http://www.jegulo.net/">website</a></small>
 
<br />
<div class="isi">
Foto yang disamping adalah merupakah salah satu daerah pegunungan yang berada didekat desa jegulo, anda bisa melihat sendiri bagaimana
damainya suasana yang ada, nampak begitu hijau dan elok dipandang mata. Silahkan siapapun boleh berkunjung kesini, di desaku desa jegulo.. Kami menunggu anda.
</div>
</div>
</div>
</div>
</div>
 
<div id="block_content" class="container">
<div class="pas">
<h2 class="konten">Posting hari ini</h2>
<small>Update on <a href="">February 21</a> in <a href="">web design</a> tagged <a href="">Web</a></small>
<br />
<div class="isi">
Disini adalah area konten untuk website, bisa diisi dengan artikel-artikel yang ingin anda postingkan maupun galery-galery gambar
yang menarik buat anda. Bebas berkreasi..
</div>
<h2 class="konten">Pernahkah Dulu by Angel Paff</h2>
<small>Update on <a href="http://www.jegulo.net/">February 21</a> in <a href="http://www.jegulo.net/">web design</a> tagged <a href="http://www.jegulo.net/">Web</a></small>
<br />
<div class="isi">
<b>Pernahkah Dulu</b><br />
Pernahkah dulu aku paksakan
Kau harus menulis
Surat cintamu
Pernahkah dulu
Aku paksakan
Kau harus mengajak
Aku berkencan
Tapi maumu sendiri
Tapi memang kita suka
Semua karena rasa cinta
Pernahkah dulu
Aku meminta
Gaun pengantin berenda biru
Pernahkah dulu aku meminta
Kita bersumpah di depan penghulu
Walau tanpa restu
Kedua orang tua
Rela aku rela demi kamu
Tapi setelah diri
Berkorban seutuhnya untukmu
Tega kau lakukan itu
Tinggal serumah dengan yang lain
Jangankan diriku
Semuapun kan marah
Wanita mana yang mau dimadu
du du du
Tapi sekarang
Aku yang minta
Putuskan saja ikatan cintaku
Biar kusendiri
Mencari jalan hidupku
</div>
</div>
</div>
<div id="sidebar" class="container">
<img src="image/menu.gif" alt="menu" class="kanan" />
<h2 class="cinta">
Kategori
</h2>
<div>Kategori 1</div>
<div>Kategori 2</div>
<div>Kategori 3</div>
<h2 class="cinta">
Kategori
</h2>
<div>Kategori 1</div>
<div>Kategori 2</div>
<div>Kategori 3</div>
</div>
</div>
<div id="footer">
<div class="container">
 
© Copyright 2013 All Rights Reserved |&nbsp;<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</div>
</div>
</body>
</html>
Berikut adalah file CSS-nya(style.css) :
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
@charset "UTF-8";
/* Background-Styles */
body {
margin:0px; padding:0px;
background-color:#fff;
}
#main {
background:#fff url(image/atas.gif) repeat-x;
 
}
#garis{
border-bottom:gray solid 4px;
}
#block_content{
float:left;
padding:10px;
width:537px;
margin:20px 0px 20px 20px;
min-height:500px;
background:url(image/bg.gif) repeat-x;
}
#footer {
clear:both;
background:#696a6f;
border-top:3px gray solid;
color:#fff;
background-image:url('');
background-repeat:repeat-x;
padding:40px;
}
#footer img{
margin-bottom:-4px;
}
.container {
width:950px;
margin: auto;
position:relative;
}
#header {
padding-top:2px;
}
#logo h1 {
padding-top:110px;
display:block;
color:green;
font-weight:bold;
}
#logo {
background-image:url(image/logo.gif);
background-repeat:no-repeat;
width:600px;
height:152px;
display:block;
margin-top:35px;
}
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:20px;
top:75px;
list-style:none;
 
}
ul#menu li {
float:left;
display:inline;
padding:5px;
}
ul#menu li a{
font-weight:bold;
display:block;
color:#666ce7;
text-decoration:none;
text-shadow:black .1em .15em .15em;
}
ul#menu li a:hover{
color:#000;
}
ul#menu li ul
{
display: none;
width: auto;
position:absolute;
top:30px;
padding:0px;
margin:0px;
}
ul#menu li:hover ul
{
display:block;
position:absolute;
}
ul#menu li:hover li
{
float:none;
list-style:none;
}
ul#menu li li a:hover{
background:blue;
}
/*featured*/
.featured{
margin-top:30px;
}
.block {
border:5px solid #747171;
 
background-color:#ffffff;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #393;
background: #ffffff ;
padding:30px;
overflow:auto;
}
.image_block {
border:1px solid #b5b5b5;
background-color:#d2d2d2;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
.text_block {
float:left;
width:430px;
margin-left:30px;
}
.fitur{
position:absolute;
top:-10px;
right:-15px;
}
/*Sidebar*/
#sidebar{
float:left;
background-color:#d2cecd;
margin:20px 0px 20px 30px;
position:relative;
padding:10px;
width:350px;
min-height:300px;
border:2px red solid;
}
.kanan{
position:absolute;
top:-4px;
right:-11px;
}
h2.cinta{
line-height:3px;
color:blue;
}
h2.konten{
color:green;
text-shadow: black .1em .15em .15em;
font-weight:bold;
}
small{
 
}
small a{
color:blue;
text-decoration:none;
}
.pas{
line-height:1px;
padding: 20px 0px 0px 20px;
}
.isi{
margin-top:20px;
line-height:1.5em;
}
Demikian tutorial dari saya tentang Belajar Membuat Template Website Menggunakan Photoshop. Karena terbatasnya waktu, tempat, dan kondisi mohon maaf apabila penjelasan dari saya kurang begitu mendetail. Untuk penjelasan lain boleh langsung ditanyakan via komentar. Terimakasih…
Download sorce code :  http://www.4shared.com/zip/omu_bc5T/website.html

Artikel Terkait

Diposkan oleh di 9:33 PM
Label: , ,

0   komentar

Post a Comment

Cancel Reply
Subscribe to: Post Comments ( Atom )