First is create your new Photoshop document. The size is up to you brother !

Step 1

Use shapping tool to grab a rectangle as your base screen of monitor. Take look my setting:

and I use #1a1a1a as base color. Give name for your shapping as “base”

Step 2

Select base path using Direct Selection Tool, and activate Add Anchor Point Tool. We will modify the bottom side of base shapping.

Now click one at the center of bottom side of base path. Move it to down side, approximately 30px.

Step 3

Repeat Step 2 for top side of base path. But on this step, move new anchor to up side, approximately 10px – 15px. The result showed on this screen shoot:

Step 4

Now press [CTRL+Click] at base path layer and activate Selection Tool with Intersect With Selection option. Select about 50px of your current selection area. You will get new selection.

Then chose menu Select > Modify > Contract : 2px, fill selection area with color #5e5e5e. Create new layer then change layer name as “top-shadow”.

Go to Menu Filter > Blur > Gaussian Blur. Give it about 2px.

Let’s change blending option of top-shadow layer to Screen.

Step 5

Press [CTRL+Click] again on base path to make a selection area, create new layer called as “top-line”. Chose menu Select > Modify > Contract : 2px. Fill selection area with color #ffffff.

Still on selection area, now move selection area to down side, it’s about 2px. Then hit [DELETE] button. You will see a line at top side of base path. Give it Gaussian Blur about 2px.

Step 6

Now duplicate your base path as screen layer, don’t forget to change screen shapping color to #ffffff.

Activate Direct Selection Tool. We wil make screen path smaller than base path.

Use Direct Selection Tool to select all anchor point at the bottom side if screen path. Then move it to top side. Like showed on this screenshoot:

Select another anchor point and move it to inside.

Step 7

Ouke, now delete two anchor point that located on top side and bottom side of screen path. Use Delete Anchor Point Tool to delete it.

Step 8

Repeat Step 4 to create bottom-shadow of base path

Step 9

Now press [CTRL+Click] again on base path, then chose Selection > Contract 2px. Fill selection area with color #ffffff.

Chose Selection > Contract again, and give 1px. Hit [DELETE] button. You will see stroke line inside of base path.

Chose Filter > Blur > Gaussian Blur 2px. Change blending option of layer as screen.

Untill this step, let’s review your design. Hmm…. not so bad but to make better screen, add some layer style for screen layer.

Nice !

Then add a glossy effect for screen using transparent gradient.

Step 10

Ouke! let’s illustrate a transparent glasses at the bottom of base and screen layer.

You may duplicate base path, and make it looks likely this screenshoot:

I give name of this path as “bottom-glasses”. Now duplicate bottom-glasses and move it to top about 5px

Step 11

I use gaussian blur to create blue light at the bottom of base path

Step 12

Create a text for “SyncMaster 933SN” then add stroke layer style for 1px with color #000000.

To make a little bit of shiny effect. I create a star using 1px vertical and horizontal selection or you may use brush tool.

Step 13

Add a text for “S MSUNG”. Note: I use “V” text and transform vertical it to get the real SAMSUNG text

Take look this screen shoot.

Step 14

We will create elipse to complete our monitor

Use Elipse Tool then grab it with color #1a1a1a

Change layer name as “bottom-elipse”

Repeat Step 4 to create shadow

Step 15

Duplicate bottom-elipse, move it to down side about 15px

Look at left and right side of elipse, looks likely not perfect. So, use poligon lasso tool, to make it perfect.

Good ! looks likely perfect!

Step 16

Create once again for elipse at center of bottom-elipse. Then add rounded rectangle between bottom-elipse and bottom-glasses.

Good job ! now you has finished to illustrate Samsung Monitor – SyncMaster 933SN Series.

You may add you desktop screenshoot into screen. Take look this one!

And add reflection effect to make it cool illustration

Thank for read my tutorial.

Share on Facebook

Seleksi menggunakan Magnetic Tool, Eliptical atao Rectangle Marquee Tool, adalah teknik dasar dalam belajar photoshop, nah kali ini gw kasi sedikit surprize bwat newbie. Bagaimana membuat seleksi menggunakan pen tool ? lalu bagaimana memanfaatkan nya dalam editing gambar ?

sebelumna lihat Keterangan tool ada pada Adobe Photoshop Tool Guide

simak tutorial singkat ini.

Pertama search dolo di google, cari gambar mobil dan jalanan kosong (keword na: “cars” ama “on the road”)

pesen gw, jangan pernah make gambar yang dari flickr.com / sejenisnya, karena mereka tidak mengizinkan penggunaan gambar untuk tujuan komersil.

siapkan pen tool lu, dengan mode: path, sedangkan settingan yang lainna default aja

Buka gambar mobil na, klik di banyak tempat menggunakan pen tool, pada sekeliling body mobil. pembuatan titik berakhir pada ujung titik pertama kali dibuat.

sekarang gunakan direct selection tool, untuk mempreview path area yang udah lu bikin make titik titik pen tool tadi.

dengan add anchor point tool, klik pada bagian kap mobil, untuk nambahin titik baru.

trus klik dan drag titik yang lu bikin ke arag atas, ni bwat nglengkungin dan nyesuaiin bidang kap mobil na

lakukan hal yang sama untuk beberapa titik laiinya yang lu anggap perlu menggunakan titik lengkung path

untuk menggeser titik ke posisi yang berbeda (jika pengeditan diperlukan) gunakan direct selection tool, dan untuk titik lengkungan lu bisa coba convert point tool juga. dengan klik dan drag saja sudah cukup untuk menciptakan titik lengkung :))

sekarang kalo udah smua titik lu edit sesuai objek body mobil, lu klik kanan pada path na, dan pilih option Make Selection

seleksi body mobil bakalan kebentuk

pilih menu Edit > Copy atow pencet di kibod lu [CTRL+C] :))

nah saat na lu buka dokumen objek jalanan kosong na, lalu pilih menu Edit > paste atow [CTRL+V] di sana

woke, sekarng pilih menu Edit > Trasnform atow [CTRL+T]

kecilin dengan klik dan drag sambil mencet [SHIFT] pada salah satu ujung objek transform mobil ke dalem

hukih !!! dikit lagi, sekarang bikin layer dibawah layer objek mobil, ni bwat objek bayangan na. kasi nama layer na “shadow”.

bikin satu seleksi menggunakan eliptical marquee tool, lalu pilih menu Select > Transform Selection, miringin dengan cara klik dan drag ke arah kiri atas.

teken [ENTER], nanti hasil seleksi na ke gini

wabis ntu pilih teken [D] bwat mereset panel color menjadi hitam putih.

lalu pilih menu Edit > Fill bwat ngewarnain bidang seleksi, hasil na akan terbentuk bidang oval berwarna hitam

pencet [CTRL+D] bwat ngilangin seleksi na

sekilas tampak kurang bermakna bayangan na, nah kasiin blur dengan memilih menu Filter > Blur > Gaussian Blur

isikan nilai radius na = 3 pixels

tros kurangi opacity layerna menjadi 13 %

selesei sudah :))

Share on Facebook

Kali ini kita bakalan belajar cara membuat lipatan kertas. Sebenernye ada banyak trik / teknik dalam membwat lipatan kertas, tergantung style dan tujuan kreasina. Ada yang make seleksi, trasform warp, atau, dari seleksi di konvert ke path.

untuk sesi ini gw ambil contoh nyang paling sederhana, Trik Membuat Lipatan Kertas menggunakan seleksi. Keterangan tool ada pada Adobe Photoshop Tool Guide

Buka dokumen gambar lu, [CTRL+All] dan paste di area canvas photoshop yang kosong

Gunakan poligon lasso tool, untuk membentuk seleksi segi tiga di pojok kanan atas pada layer gambar

Tekan [DELETE] untuk menghilangkan bagian gambar yang diseleksi. Tekan [CTRL+D] atao pilih menu Select > Deselect

Bwat satu seleksi yang sama, tapi kali ini arah segitiga na berbeda.

Bikin layer baru, dan ambil tool gradasi. Atur gradasina dengan mengklik panel gradasi di bawah bar menu

klik dan drag gradasi na dalam seleksi area, dengan arah dari kanan atas ke kiri bawah

jangan lepas Men-deselect seleksi dlu, langsung pilih, Eliptical Marquee tool, dengan setting Substract From Selection (-) atao Pilih Eliptical Marquee tool lalu pencet [ALT] sambil klik dan drag untuk memotong seleksi (-)

ulangi langkah diatas sekali lagi untuk sisi kiri seleksi na

Masih pada seleksi, selanjotna, tken [CTRL+SHIFT+I] atow pilih menu Select > Inverse untuk membalik seleksi

Kalo uda, teken [DELETE], ni bwat ngilangin bagian yang kita ambil seleksi na tadi

Wukih, sekarang kasiin layer style drop shadow, Pilih menu Layer > Layer Style.

Kalo udah lu bisa kasiin warna abu bwat background layer gambar na

dan ini hasil penambahan layer style stroke untuk gambarna

Share on Facebook

Tutorial membuat kreasi bulu unik dengan Photosop

bwat doku baru seukuran medium aja

ambil shapping tool, bwat bidang elipse ke gini

dengan direct selection tool, ubah bentuk beberapa titik, menyerupai bulu. ni bwat dasarna, ganti nama layer na menjadi “base”

lu miringin ke kiri

gunakan pen tool, dengan setting ke pada gambar, bwat bikin sela2 bulu na

kasiin gradient overlay bwat layer style na

kembali gunakan pen tool bwat bikin objek sisi kanan, tapi kali ini gunakan mode normal untuk shapping na

kasi gradient overlay juga

dan duplikat untuk sisi kirina

Selanjotna, duplikat layer shapping base, letakkan di paling atas, dan kecilin

lu bisa kreasiin warna gradasina, tros bikin satu objek lagi make pen tool juga, latih ketelitian lu dalam menggunakan pen tool

kasi gradasi ke layer base, tros dplikat juga untuk sebelah kiri na

terakhir lu bikinin batang bulu na, make pen tool, gunakan beberapa titik saja, sisana, lu bisa modif make add anchor pint tool / convert point tool

disini gw pakein brush item rada kabur pada layer baru, untuk membwat bayangan pada sela2 bulu na, tros gw kasiin gaussian blur 3px

tanda merah, adalah lokasi tempat ngasiin brush na

tros lu bisa modifikasi objek na dengan menduplikat ke beberapa objek, tros lu atur menjadi ke gini

wabis ntu gw bisa kreasiin dengan model2 yg laen

Share on Facebook

Bwat dokumen, berukuran 800 X 1100 pixel, dengan dpi = 300 300 pixels/inch, bikin guide untuk mistar pembantu dalam membuat objek selanjurna, pilih tool path, dengan settingan path ke pada gambar. lu bisa atur bentuk na menyerupai setengah gelas

Bwat layer baru, klik kanan pada area path, pilih Fill Path. Kasi warna #ccd9dd

Work path lu bakalan kebentuk di panel path, lalu duplikat layer na, tros trasnform horizontal. Kalo udah kebentuk gelas satu sisi dengan lainna, pencet [CTRL+E] untuk menyatukan na (merge layer)

kalo kira kira belum ngepas ama selera bentuk gelas na, lu bisa edit masing masing path na

beri nama layer glas ini sebagai “outer glass”, tros kasi layer style Gradient Overlay

duplikat layer “outer glass” menjadi “outer glass copy”, ubah namana menjadi “inner glass”, dan transform ukuranna, dengan W=95% dan H=94%

Kasi layer style gradient overlay, lu bisa klik dan drag arah gradasi na saat layer style aktif

Enter kalo udah beres !!!

lanjot ke pencet [CTRL+Click] pada Layer Inner Glass, untuk membentuk seleksi, tros transform rotate 180 derajat

geser seleksi na ke atas, ngepas di bagian mulut gelas

TAHAAANN !!! :)) masih pada seleksi, sekarang sambil pencet [CTRL+SHIFT+ALT+Click] pada layer Inner Glass, jadi lu bakalan dapet seleksi terakhir ke gini

Bikin layer baru, dan kasiin warna #99b2bb, kasi nama layer “opening”

Lanjot ke pengambilan seleksi marquee tool, bikin seleksi menyeluruh di luar smua objek, lalu bikin layer baru namana “reflection”

ambil tool gradasi, gunakan gradasi Steel Bar yang udah ada dalam gradient preset default photoshop

Pencet [CTRL+M] bwat ngatur Curves na

Ubah Opacity layer refrelction menjadi 50%. tros transform warp objek na (Edit > Transform > Warp) atow, pencet [CTRL+T] tros kanan pada objek layer refrelction tros pilih Warp

ubah bentuk na jadi ke gini:

inget, gradasi pada layer reflection musti ngelebihin sluruh objek di belakangna.

pencet [CTRL+D] bwat ngilangin seleksi

lanjot ke [CTRL+Click] pada layer Outer Glass bwat bikin seleksi baru

Pilih menu Select > Invers atow [CTRL+SHIFT+I] tros pencet [DELETE]

Ubah blending layer menjadi Screen, dan opacity menjadi 70 %

masih pada layer reflection, kasi layer mask, dengan klik pada icon add layer mask

ambil gradient tool bwat ngasi gradasi mask dari atas ampe bawah, dengan settingan transparent ke gini

bwat path baru, bentuk na ke gini, ni nanti na bwat bikin aer jus na

klik kanan pada path na, pilih make selection

Pencet [CTRL+SHIFT+ALT+Click] pada layer Inner Glass

tinggal lu kasiin warna #ffb411 pada layer baru

kasi layer style

hasil na ke gini:

duplikat aer jus na menjadi jus copy, transform horizontal yak !

lu tinggal ubah Hue and Saturation na untuk layer jus pertama (dibawah layer jus copy)

merge dengan pencet [CTRL+E] bwat gabungin layer jus ama jus copy

bikin eliptical marquee tool pada layer baru, dan kasi gradasi (#fff200 ke # f7941d) dengan settingan ke gini

ubah nama layer na “Refraction”, transform jadi menipis ke gini:

dan kasi Filter > Blur > Gaussian Blur 3px

Oukeh, ampe sini cukup melelahkan bikin tutorial na :))

sekarang kita bikin brush preset na bwat glmbung aer jus, namana bubble

bikin dokument baru.

bikin bidang make eliptical tool

kasi layer style gradient overlay

dan inner glow, dengan mode screen, opacity 100 %, dan size 30 px

lanjot ke klik kanan pada tulisan effect pada layer buble, pilih Create Layer

layerna bakalan jadi tiga biji, dan merge ketiga2 na

ubah settingan curves na

klik ok kalo udah

dan pilih menu Image > Adjustments > Invert atow [CTRL+I]

Jangan lepas seleksi na, pilih menu Edit > Define Brush, kasi nama brush na, klik OK

woke, simpen aja dokumen bubble lu, sapa tau diperlukan bwat bikin brush baru lagi.

Beralih ke dokumen semula, klik pada tab brush untuk mengatur setting brush na

woke, ambil tool brush lu, pake ukuran 8px

bikin layer baru namana bubble, tros klik dan drug di area aer jus, lu kreasiin sndiri, kire2 glembung aer ke jimane.

lom slese broder ! lu bisa group atow merge smua layer objek segelas minuman jus lu, tros duplikat vertikal bwat bikin bayangan na

atur posisi layer duplikat na di bawah gelas utama

kasiin gaussian blur

ubah opacity na, dan hapus make eraser tool, pada bagian yang klebihan

lanjot ke pembwatan bayangan bwat bawah gelas na

bikin layer baru, gunakan eliptical marquee tool

kasiin gaussian blur juga

ubah opacity na menjadi 33 %

ni hasil na

kreasiin dengan model nyang laen…

Share on Facebook

Tutorial ini merupakan tingkatan basic tutorial photoshop

Pernah liat badges untuk harga2 barang di Web2 E-Commerce kan ? nah kadang lu nmu yang kaya bakalan kita bwat sekarang.

Cobain aja….

Bwat doku standar default photoshop, siapkan tool shapping

ambil shapping untuk poligon tool, dengan sides = 20

dan klik pada drop down menu panah di sebelah kirina, tentukan Indent Sides By = 20% dan centang pada option Star

Klik dan drag pada kanvas, tentukan sendiri ukuran badges na

wabis ntu lu kasiin layer style, pilih menu layer > layer style > gradient overlay

kasi settingan ke gini

jadi ke gini hasilna

sekarang pencet [CTRL+Click] pada layer shapping na, untuk membentuk seleksi

kalo seleksi na dah kbntuk, pilih menu Select > Modify > Contract, pada jendela nyang muncol kasiin nilai na 2px

tujuan na bwat ngecilin bidang seleksi menjadi 2px ke dalem

woke, diemin dlu seleksi na, ambil tool Eliptical Marquee Tool [M], sambil mencel [ALT+SHIFT] klik dan drag pada seleksi tadi, ni bwat ngambil seleksi yang diinginkan saja

jadi bakalan kebentuk seleksi ke gini

sekarang bwat layer baru, pilih menu Layer > New > Layer. Ambil tool gradient, gunakan gradient transparent berwarna putih. Lihat pada gambar

dan tarik gradasi na dari atas ke bawah, pada area seleksi

gradasi dengan cara diatas namana efek glossy, nah jangan lupa kassin teks bwat harga na

bwat memperbanyak objek, lu duplikat aja semua layer badges na, atow bisa lu gabungin ksmuana ke dalam layer group, klik pada ikon layer group, lalu klik semua layer dan drag ke dalam layer group, nah lu kan tinggal duplikat layer group na, untuk membwat badges lainna, selamat mencoba :))

hasil akhir na ke gini

Share on Facebook

Membuat layout bertema grey shadow blue.

buka doku 760 px di photoshop lu

ambil tool bwat bikin shapping (radisu 10px), bikin ke gini, kasi style gradasi

tros pakein dua shapping lagi dengan radius 6 px, tapi ini kurangin opacityna masing masing 35 % dan 15 %

wuki wuki, ambil tool shapping lagi, kali ini radius na masih sama (6px) bikin satu bidang dlu bwat menu na

objek diatas ntu bwat dasar menu na

nah ini bwat satu lagi objek diatas na, kasi gradasi ke gini

good job brother, jangan nyerah dlu ! :))

kali ini kita bikin hiasan di bagian atas menu na… ambil pen tool, tros pilih substract mode

bikin titik2 segitiga

gedein bila perlu, gunakan guide untuk menentukan lokasi titik tengah objek menu

langsong kasi text menu Home

lanjot ke grouping layer2 menu tadi, wabis ntu lu bisa duplikat menjadi beberapa menu

ke nyan gw janjiin tadi, kite bakalan bikin kesan nature. kali ini dengan menambahkan logo green nature berupa dedaunan ama dikit rangke nye

ambil shapping elipse

dengan menggunakan pen tool selection, ubah beberapa titik untuk menentukan bentukna

bwat satu bidang lagi make pen tool untuk helai sebelahna, tapi nempatin na masih diatas objek daun pertama

konvert make convert point tool

lu atur atur aja make mouse centil lu :)) biar keliatan lengkungan na tapih

kasiin gradasi yang sama, cuman lu balik arah gradasi na kali ini

untuk tulang daunna, gw pake pen tool tapi kali ini gunakan path

ambil tool brush, atur dulu pixelna menjadi 2px, tros pindah lagi ke tool path, klik kanan pada objek path, pilih stroke path.

sekarang kasiin bwat efek cahayana, ni gw kasi in make pen tool juga

konvert titik na make konvert point tool biar lengkung an na mengikuti helai daun warna ijo

tros kasi juga gradasi yg hampir sama

bikinin batang tangke na juga :))

wabis ntu lu bisa group objek2 daun dan tange na, nah lu diplikat ajah

lu kreasiin posisi na, biar menyerupai taneman :))

tros kasi juga beberapa efek brush, di bagian akarna, itu certianye tanah na :))

hihi ni gw kasiin brush biru lagi, dengan blending option overlay

nah dah jadi kan, tinggal lu tambahin asesories lainna

kire kire kalo digedein ke gini hasilna

Share on Facebook

Lma ga jumpa dlam tutorial photoshop, I miss you brother

Sebage makanan pembuka, let’s see my new photoshop tutorial …

Baru baru ini ada pameran computer di Braga Bandung, dapet brosur, tros.. liat ada model interface GUI untuk beberapa merk Hardware.. salah satuna Gigabyte …

Teknologi dari Gigabyte “Dynamic Energy Saver” yang mampu menciptakan efisiensi power bwat PC lu..

Nyok kita bikin logona…

Ambil elipse tool, bikin bidang shapping ke gini:

Transform dikit, miringin ke kiri….

huki….. kasi base style na:

bikin satu elipse lagi lebih kecil dari sebelonna (sekitar 97%), bisa duplikat dari yang sblonna, tapi setelah duplikat klik kanan pada layer na, pilih Clear Style

Ambil pen tool, tentukan setting substract from shape area (-)

bikin titik2 na, pada posisi sesuai gambar:

dengan menggunakan add anchor point tool (liat tutorial2 sebelumna), kasi titik pada tanda merah, lalu lengkungin ke luar, biar menyesuaikan bidang lengkung elipse berwarna putihna

lakukan hal yang sama untuk sisi sebelah kanan

Hasil sementara, let’s see…..

woke… lanjot ke tahap berikutna

[CTRL+Click] pada layer shape putih, transform seleksi na 97 % (Select > Transform Selection), bwat layer baru

Ambil tool brush, untuk melatih gerakan brush lu, bubuhkan disekitar seleksi, dengan ukuran brush: soft round 35 px berwarna abu2 (#dedede)

lu bisa simpen seleksi na, Select > Save Selection sewaktu 2 bisa lu ulangi langkah ini, lu masih bisa make seleksi na

bikin satu elipse lagi di tengah untuk border na.. dengan sdikit style dowank

good job brother, bikin lagi elipse bwat base objek di tengah na

kali ini cukup dengan style gradasi downk

masih lom ckup brother…

bikin satu shape elipse lagi …

kasi style na

tros kasiin efek gradasi dengan gradasi transparent pada layer baru, untuk shadow di atas na

smpurnakan dengan smudge tool, untuk meratakan bagian gradasi

kasi shapping rounded di sebelah kanan

dengan sedikit style untuk rounded di tengahna

kasi text GIGABYTE

well, almost done brother…. !!

dan ini hasil akhirna, mahap kalo intensitas wara hasil capture na kurang.. gw lupa ngubah setting capture na ke PNG

Share on Facebook

Part – 3 Layout Style with CSS

sesua ma tema na, kita bakalan bikin layout menggunakan teknik perancangan web 2.0.

Pendahuluan Apa itu CSS ?

Sebelumna gw sendiri yang bikin tutorial ini, belum pernah sma sekali membaca buku yang berisikan khusus penggunaan CSS dalam HTML. Tapi dari pengalaman coba-coba dan ulik-mengulik, mudah-mudahan penjelasanna bisa dimengerti.

Dalam teknik ini CSS (Cascading Style Sheet) sangat diandalkan sebagai pengatur tata letak dan modeling tampilan dalam layoutna. Tag-tag CSS diletakkan diantara kode HTML <HEAD> tag CSS disini </HEAD>

Konsep penggunaan CSS yang gw ketahui dibagi menjadi 3 kategori utama jenis style untuk objek layout:

1. Class
   Class dapat di gunakan pada tag HTML yang telah ditentukan sebelumnya, misalnya Class untuk link, akan dipasang pada tag a:
   <a href="#" class="firstClass"> test </a>

contoh style na:

.firstClass {
font-family: "Trebuchet MS";
font-size: 12px;
color: #009900;
}

hasilna dalam HTML:



Untuk style berjenis Class, diawali dengan titik { . } pada setiap nama style na

2. Tag
   Tag dapat di gunakan bwat me-modifikasi tampilan default sebuah tag HTML, misalkan tag untuk input
   input {
   font-family: "Trebuchet MS";
   font-size: 12px;
   color: #003399;
   background-color: #E6EEFF;
   padding: 4px;
   border: 1px solid #0099FF;
   }

   contoh kode html input:

   <input type="button" name="Submit" value="Submit" />

   coba modifikasi style input na ke tag style di atas, jadi gini dah style input {type = button} na:
   

   bandingkan dengan tag input sebelum dimodifikasi:
   
   Untuk style berjenis Tag, tidak diawali dengan titik { . } atow tanda # untuk nama style na

3. Anvanced ID
   Style ini sangat fleksible, dapat digabungkan dengan kedua jenis style sebelumnya, ciri nya diawali dengan tanda # untuk setiap penamaan style na:
   #slice {
   font-family: Tahoma;
   font-size: 11px;
   color: #339900;
   text-decoration: none;
   background-attachment: fixed;
   background-image: url(icons/slice-tool.png);
   background-repeat: no-repeat;
   background-position: left center;
   padding-top: 8px;
   padding-left: 30px;
   height: 22px;
   }

   Banyak digunakan pada DIV TAG dalam HTML, sebagai contoh, bwat style ke diatas (ingat selalu diantara tag HEAD) dan bwat DIV TAG na dalam area BODY :

   <div id="slice"> ini tool slice </div>

   jadi lengkapnya kalo dalam kode HTML ke gini:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>STYLE : ADVANCED ID</title>

   <style type="text/css">
   #slice {
   font-family: Tahoma;
   font-size: 11px;
   color: #339900;
   text-decoration: none;
   background-attachment: fixed;
   background-image: url(icons/slice-tool.png);
   background-repeat: no-repeat;
   background-position: left center;
   padding-top: 8px;
   padding-left: 30px;
   height: 22px;
   }
   </style>

   </head>

   <body>

   <div id="slice"> ini tool slice </div>

   </body>
   </html>

   hasil na ke gini:

   

   Jika dikombinasikan dengan kedua jenis style sebelumnya, misalkan ke contoh dibawah:

   
   #boxPan {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
   margin: 0px;
   padding: 0px;
   }

   
   #boxPan ul { list-style-type: none; }

   
   #boxPan li a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #006699;
   background-image: url(list.png);
   background-repeat: no-repeat;
   padding-left: 20px;
   height:20px;
   background-position: left center;
   text-decoration: none;
   font-weight: bold;
   }

   
   #boxPan li a:hover {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #CC0000;
   background-image: url(list-over.png);
   background-repeat: no-repeat;
   padding-left: 20px;
   height:20px;
   background-position: left center;
   text-decoration: underline;
   font-weight: bold;
   }

   • Style no. 1 : style ID pertama untuk identifikasi awal, di dalamna diatur margin dan padding

   • Style no. 2 : style ID kedua untuk identifikasi style TAG Unordered List (UL), dalam kode diikuti oleh TAG ul, yang artinya kalo style ID boxPan dapat digunakan untuk memodifikasi style TAG ul juga
     Baris list-style-type: none; digunakan untuk mendisable titik list item saat memberikan TAG <li>

   • Style no. 3 : style ID ketiga untuk identifikasi style TAG link , dalam kode diikuti oleh TAG li a, yang artinya kalo style ID boxPan dapat digunakan untuk memodifikasi style TAG link a yang terdapat dalam TAG <li>.

   • Style no. 4 : style ID keempat untuk identifikasi style TAG link , dalam kode diikuti oleh TAG li a:hover, yang artinya kalo style ID boxPan bisa mengatur tampilan saat mouse menyentuh text link na, namun masih dalam area TAG <li>.

ni Kode HTML lengkapna na:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>STYLE : ADVANCED ID</title>

<style type="text/css">

#boxPan {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
margin: 0px;
padding: 0px;
}

#boxPan ul { list-style-type: none; }

#boxPan li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006699;
background-image: url(list.png);
background-repeat: no-repeat;
padding-left: 20px;
height:20px;
background-position: left center;
text-decoration: none;
font-weight: bold;
}

#boxPan li a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CC0000;
background-image: url(list-over.png);
background-repeat: no-repeat;
padding-left: 20px;
height:20px;
background-position: left center;
text-decoration: underline;
font-weight: bold;
}

</style>

</head>

<body>

<div id="boxPan">
<ul>
<li><a href="#1" title="slice 1"> slice 1</a></li>
<li><a href="#2" title="slice 2"> slice 2</a></li>
</ul>
</div>

</body>
</html>

 

Woke sebagai contoh ni hasilna:

Menggabungkan Style Sheet

Dalam menggabungkan kode style CSS ke dalam HTML ada 2 (dua) pilihan cara.

1. Style Sheet Internal (langsung)
   Yang gw maksud internal (langsung) adalah memasukkan TAG CSS langsung dalam kode HTML, tag style CSS terletak diantara TAG <HEAD>tag CSS</HEAD> . Dimana tag CSS sendiri diawali dengan TAG <STYLE>, dan ditutup dengan TAG </STYLE>
   <html>
   <head>
   <title>Style Sheet Internal </title>

   <style type="text/css">
   .mainText {
   font-family: Tahoma;
   font-size: 11px;
   color: #000000;
   }
   </style>

   </head>

   <body>
   </body>
   </html>

2. Attach Style Sheet External
   Dengan attach style sheet via file external, cenderung lebih mudah, karena saat menghendaki perubahan style, kita cukup merubah 1 file external CSS saja. File external ini berekstensi *.CSS

   Dalam TAG HTML, digunakan TAG <LINK> untuk menghubungkan kode HTML dengan style CSS yang dibuat terpisah di file external.

   <html>
   <head>
   <title>Attach Style Sheet External </title>

   <link href="style.css" rel="stylesheet" type="text/css" />

   </head>

   <body>
   </body>
   </html>
   

Untuk modifikasi layout di Dreamweaver terusin ke babak berikutna

Part-1 | Part-2 | Part-3 | Part-4

Share on Facebook

Part – 2 Slicing in Image Ready

Pindah / jump ke adobe image ready, ato slicing bisa dilakukan langsung di adobe sotoshop, sesuai selera yang biasa lu pake

Untuk diketahui, web 2.0 memiliki ciri less table dan gambar. Jadi disini kita akan belajar memilih objek slice yang akan digunakan saja pada saat perancangan layout web 2.0 na, jadi ga musti semua bagian gambar lu slice…

Bagian yang perlu di slice:

1. Top Header Background
2. Top Body Image
3. Icon Area
4. Footer Backrgound

sedangkan untuk menu dan field form bisa diganti dengan tanpa menggunakan gambar di Macromedia Dreamweaver, sebagai tool editor yang biasa gw pake dalam membwat layout editing website.

Pertama hidden dolo menu di atas na, ambil slice tool

slice lah pada bagian top header, pertama tarik lebar dengan bebas, kemudian ubah ukuran lebarna menjadi 1 px, ni untuk background top header nanti yang akan di repeat berulang2 oleh CSS na.

lakukan hal yang sama bwat ngambil background footer na.

slice juga area icon na…perbesar dengan zooming tool kalo kurang jelas

untuk gambar top body slice semua aja

kalo lu ngerasa semua kperluan gambar dah cukup sesuai dengan yang ada di imajinasi lu, optimize aja gambar2 slice na gw pake preset PNG-24

lanjot ke menu File > Save Optimize As

Part-1 | Part-2 | Part-3 | Part-4

Share on Facebook