aero button – dremi.INFO https://www.dremi.info Software Development, Digital Marketing and News Tue, 26 Feb 2008 23:56:57 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 https://www.dremi.info/wp-content/uploads/2020/12/cropped-icon-32x32.png aero button – dremi.INFO https://www.dremi.info 32 32 Web 2.0 Layout With CSS Part-3 https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-3.html https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-3.html#comments Tue, 26 Feb 2008 23:56:57 +0000 https://www.dremi.info/?p=65 […]]]> Bikin Web Layout menggunakan teknik Web 2.0 – seru wabis, dibahas dari design layout ampe editing CSS na di Dreamweaver.

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>

    2. 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:
    submit modified

    bandingkan dengan tag input sebelum dimodifikasi:
    submit default
    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>.

    4. 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

]]> https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-3.html/feed 26 Web 2.0 Layout With CSS Part-2 https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-2.html https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-2.html#respond Tue, 26 Feb 2008 23:54:21 +0000 https://www.dremi.info/?p=64 […]]]> Bikin Web Layout menggunakan teknik Web 2.0 – seru wabis, dibahas dari design layout ampe editing CSS na di Dreamweaver.

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 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 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

]]> https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-2.html/feed 0 Web 2.0 Layout With CSS Part-1 https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-1.html https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-1.html#comments Tue, 26 Feb 2008 23:45:49 +0000 https://www.dremi.info/?p=63 […]]]> Bikin Web Layout menggunakan teknik Web 2.0 – seru wabis, dibahas dari design layout ampe editing CSS na di Dreamweaver.

hueheheheheeee…gi pilek niii…tapi pas gw di kamar, smpet bikin tutor ini ni, cara bikin web layout dengan teknik web 2.0

sbnernye masih sekitar design layout, cuma penekananna ada pada style CSS yang bakalan kita bikin ….

woke untuk mulai perancangan, tentuin dolo konsep design lu pada, kalo gw ngambil konsep iklan kosmetik yang lagi trend di TV kikikikkk…. hehehe…

dengan bantuan adobe sotoshop bikin dah design interface na dolo…

Part – 1 Design Interface

singket ceritanye, lu dah buka adobe na, bikin doku baru terserah lu…

ambil marquee tool marquee tool bikin seleksi kotak untuk top header na…dan kasi gradasi ke gini…

style gradasi na bisa lu donlot di paket data tutorial ini…enjoy it brother 🙂

bikin satu lagi seleksi kotak untuk footer na

woke….untuk menu sederhana saja, bikin kotak seleksi lagi di bawah top header, ini untuk skedar illustrasi saja, walopun nanti gambar hasil slice na ga bakal kita pake pas di layout web 2.0 na, karena bisa diganti pake warna background ma text biasa untuk menu na.

untuk bagian top body gw pake gambar latar salah satu merek kosmetik

kopi dengan seleksi pada sample gambar

bwat area seleksi untuk top body na…

gunakan menu Edit > Paste Into untuk masukin gambarna ke area seleksi (mirip dengan teknik masking)

sedikit modifikasi kopiin juga gambar bibir na….

ambil shape tool untuk bikin login form na di sebelah kana area header:

untuk filed login form gw kasi sedikit stroke 1 px, warna #b0c3d2

dengan shape tool kasi icon kecil di kiri area header…

woke review dolo hasil smentara layout lu…

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

]]> https://www.dremi.info/tutorials/photoshop/web-20-layout-with-css-part-1.html/feed 8 Green Layout Web 2.0 https://www.dremi.info/tutorials/photoshop/green-layout-web-20.html https://www.dremi.info/tutorials/photoshop/green-layout-web-20.html#comments Sun, 10 Feb 2008 13:12:24 +0000 https://www.dremi.info/?p=62 […]]]> Perkembangan design web ke arah web 2.0, bikin gw terbius..terkadang masih susah bwat nyesuaiin style baru ini, karena terbiasa menggunakan style Techno, tapi ini hanya sebuah referensi design, jadi style techno jangan sampe hilang, tapi tambahin web 2.0

hehek..nyengir dah lu…wkwkwkwkw

Entah knapa beberapa hari ini gw sulit banged dapet inspirasi…bwat ngedisgn …

apa ada pengaruh yak dari kerjaan kantor yang bejibun, trosss ga sesuai dengan bidang …

hmmm….kata tmen gw sih, kerjain aje…itung2 bwat duit rokok…tapi yaa itu tiap hari makan ati…kerjaannya …hmmm

sampe minggu ini gw dapet ngedesign dikit ..sederhana tapi mudah2an mudah dimengerti…. hehek

siapin dokumen baru ukuran standar web 760px..atow sesuka lu pada…..

bikin seleksi bwat menu bar diatasna

bijimane kalo gw pake style web 2.0 ke gini:

jadi ke gini hasil style na…

bagian bawah na, kasi kotak, make style ke gini:

hasilna

bikin shape di sebelah kiri na, pake rectangle tool

ambil add anchor point tool

tambahin titik untuk bagian bawah …dan tarik titik na ke atas …

tros tarik kedua ujung titik baru ke arah tengah, biar bentuk na ga melengkung

tambahin satu titik lagi di bagian atas… na, kali ini bikin bentukna menjadi lengkung setengan lingkaran, dengan cara tarik kedua ujung titikna ke luar

woke kasi style untuk shape baru lu….

Lanjot ke [CTRL+Klik] pada layer shapping lu, tros pilih menu Select > Modify > Contract , kasi 2 px

ambil marquee tool , dengan mode Substract from selection

hilangkan setengah seleksi sebelah kanan …

ambil gradasi tool, kasiiin gradasi kuning ke transparan

Untuk pusat objek layout, gunakan teknik Photoshop Magic Sphere bwat ngebikin bola kristal na…taro di atas shape lu, ubah mode layerna menjadi overlay

tambahin text Green Layout di area header

beberapa variasi bisa lu tambahin juga, jangan lupa bikin menu na, dan kasiin teks style web 2.0 di area kanan shapping lu

nah ntu bwat badges web 2.0 na

woke jadi dah web 2.0 layout lu…hehehehe…

Green Layout Web 2.0 (Klik bwat ngegedein)

Â

]]> https://www.dremi.info/tutorials/photoshop/green-layout-web-20.html/feed 12 Photoshop Magic Sphere https://www.dremi.info/tutorials/photoshop/photoshop-magic-sphere.html https://www.dremi.info/tutorials/photoshop/photoshop-magic-sphere.html#comments Wed, 06 Feb 2008 18:08:08 +0000 https://www.dremi.info/?p=60 […]]]> hehe..awal mula pindah server memang kurang menyenangkan, ada sebagian member dan pengunjung menganggap dremi.info dah ga OL lagi…sebagian lagi rajin kirim email, nanyain ada tutor baru ga ? hmm…tapi inilah dunia seni …

hehe..awal mula pindah server memang kurang menyenangkan, ada sebagian member dan pengunjung menganggap dremi.info dah ga OL lagi…sebagian lagi rajin kirim email, nanyain ada tutor baru ga ?

hmm…tapi inilah dunia seni, gw ga peduli apapun kata mereka, gw bakalan terus berkarya. itu Prinsip !!! dan idealisme gw.

karena seni itu adalah sebuah keajaiban layakna MAGIC 😀

woke brother, ada tutorial photoshop keren, bikin magic sphere.

siapin doku lu…biasana gw pake 1024 pixels kalo bwat dijadiin wallpaper.

ambil eliptical marquee tool bikin buletan, kasi warna #001122 pake paint bucket. ganti nama layerna menjadi “gradient”

lanjot, ke menu Filter > Render > Lighting Effect

kasi setting ke gini:

Klik OK kalo dah, tros Pencet [CTRL+D]

Pake Dodge Tool ama blur tool bwat nerangin dan ngerataain efek pencahayaan

Lu bisa tambahin efek terang dan kontras pake Image > Adjustments > Brightness and contrast

Bikin layer baru namana “glass”, bwat elipse ke gini bisa pake marquee juga:

woke, ke teknik yang sblumna gw jelasin di tutorial photoshop Aero Button, kita bikin gradasi na pake vector mask

kasi vector mask tros gradasi hitam putih

bikin layer baru, bwat stroke 5px untuk lintasan bola na,

kasi vector mask lagi dan gradasi hitam – putih

Duplicat layer stroke na , tros trasform, dengan pusat transform kira2 di lokasi titik terang

Pake Brush dan Blur Tool bwat bikin titik2 penghubung pada lintasanna.

Tambahin gradasi bergaya web 2.0 untuk background na…, dan jangan lupa text “Photoshop Magic Sphere”

Lu juga bisa download di packet data tutorial ini, untuk layer style web 2.0 na

neeehhh hasil ahirna…. :))

Photoshop Magic Sphere (Klik bwat ngegedein)

]]> https://www.dremi.info/tutorials/photoshop/photoshop-magic-sphere.html/feed 9 Aero Button Web 2.0 https://www.dremi.info/tutorials/photoshop/aero-button-web-20.html https://www.dremi.info/tutorials/photoshop/aero-button-web-20.html#comments Mon, 04 Feb 2008 18:36:15 +0000 https://www.dremi.info/?p=59 […]]]> hmm… bwat pendahuluan dan penyegaran ingatan kembali, lu gw kasi tutor agak mengarah ke web 2.0 style…

Wokeh, gw akhirna bisa ol lagi ngasi tutor, yang ga support minggir, yang support sini lu pada….

wkwkwkwkwkwkwkw…

hmm… bwat pendahuluan dan penyegaran ingatan kembali, lu gw kasi tutor agak mengarah ke web 2.0 style…

sbnarnye cuma sekedar permainan efek glossy dowank….dan gloss adalah ciri khas dremi.info :))

bwat layer baru kira2 ngepas bwat design lu kali ini…

ambil tool eliptical marquee tool (M), bikin bola elipse ke gini:

Bikin layer baru (Layer1), kasi gradasi pake mode Radial Gradien

Tarik 2 buah garis pembantu, ambil elipse tool Shape (U), klik dan tarik bidang seleksi pada pusat garis pembantu tros pencet [SHIFT] + [ALT] biar bidangna tepat di tengah dan ukuranna proporsional

gunakan add anchor point tool bwat ngatur bentuk shaping na.

tros kasi Add Layer Mask

woke, pastikan lu klik dah di layer mask na. ambil tool gradasi putih-hitam (teken D bwat ngerest warna menjadi hitam-putih). tarik gradasina dalam layer mask dari atas ke bawah.

ambil lagi eliptical marquee tool (M), klik dan tarik bidang seleksi, jangan lupa pake [SHIFT]+[ALT].

Bikin layer baru (Layer 2), dari seleksi yang terbentuk, kasi stroke 5px putih, outside. (Menu: Edit > Stroke)

Kasi Layer Mask , ambil tool gradasi putih-hitam. tarik gradasina dalam layer mask dari atas ke bawah

Duplikat Layer 2, pilih Edit > Transform (CTRL+T), klik kanan : Pilih Flip Vertical

Kasi Layer Mask lagi, dan gradasi putih-hitam dari atas ke bawah, bwat efek bayangan stroke na.

wah hehe, ke ada bayangan gitu say .. wkwkwkwkww 😀 😀

tambahin drop shadow secukupna ….

Untuk pelengkap, kasiin element player na…

Aero Button Web 2.0 (klik bwat ngegedein)

]]> https://www.dremi.info/tutorials/photoshop/aero-button-web-20.html/feed 1 Meteor Text Effect https://www.dremi.info/tutorials/photoshop/meteor-text-effect.html https://www.dremi.info/tutorials/photoshop/meteor-text-effect.html#respond Fri, 07 Dec 2007 10:00:41 +0000 https://www.dremi.info/?p=54 Fill . ambil Lasso Tool, bikin buletan bebas oval ke […]]]> siapin doku baru (wallpaper 1024 x 768 px). warnain background dokumen pake #121617 ( bisa pake paint bucket tool / [ALT+BackSpace] / menu Edit > Fill . ambil Lasso Tool, bikin buletan bebas oval ke gini:

]]> https://www.dremi.info/tutorials/photoshop/meteor-text-effect.html/feed 0 Smooth Window Frame https://www.dremi.info/tutorials/photoshop/smooth-window-frame.html https://www.dremi.info/tutorials/photoshop/smooth-window-frame.html#comments Fri, 07 Dec 2007 08:48:32 +0000 https://www.dremi.info/?p=53 […]]]> Bwat bikin bingkai gambar bwatan lu, atow foto2 lu, gue punya sample sederhana cara bikin frame na. siapin doku baru persegi, bg na putih. ambil tool gradasi, tarik warna gradasi #d4d4d4 ke transparent

]]> https://www.dremi.info/tutorials/photoshop/smooth-window-frame.html/feed 8 Black Smooth Mp3 Player https://www.dremi.info/tutorials/photoshop/black-smooth-mp3-player.html https://www.dremi.info/tutorials/photoshop/black-smooth-mp3-player.html#respond Fri, 16 Nov 2007 07:02:46 +0000 https://www.dremi.info/?p=52 Pulang ngantor enak nye ngopi,, haha… wadoooowww.. ni.. ada tutor bikin Mp3 Player, bergaya iPod dengan efek gradasi smooth. Cobain deh…hahak..kaya iklan ajeee….

]]> https://www.dremi.info/tutorials/photoshop/black-smooth-mp3-player.html/feed 0 Simple Polar Coordinat https://www.dremi.info/tutorials/photoshop/simple-polar-coordinat.html https://www.dremi.info/tutorials/photoshop/simple-polar-coordinat.html#respond Fri, 16 Nov 2007 06:28:19 +0000 https://www.dremi.info/?p=51 Bikin canvas baru ukuran sama, misalkan 600 X 600 pixels. Double click pada layer background, klik OK pada jendela yg muncol, biar koncian layerna

]]> https://www.dremi.info/tutorials/photoshop/simple-polar-coordinat.html/feed 0