2 Lens Effect Pada CorelDRAW

Di tutorial ini kita akan mencoba membuat atau mengaplikasikan Lens Effect pada CORELDRAW (semua versi mulai 11,12,X3,X4), dengan tutorial ini diharapkan kita dapat mengembangkan sendiri dari penggunaan Lens Effect menurut imajinasi kita masing-masing. Langkah-langkahnya sebagai berikut :

Mari kita mulai Tutorial Coreldraw Dasar kali ini:

1. Sudah pasti buka corelDraw dan buat blank page

2. Buatlah beberapa lingkaran seperti gambar dibawah ini


setelah itu seleksi dua lingkaran kiri dan lalu combine (Ctrl+L) lalu beri warna Hitam, dan buatlah satu lingkaran kecil lagi sehingga seperti pada gambar dibawah ini

Groupkan (Ctrl+G) semua lingkaran bagian Kanan, lalu seleksi semua object dan centerkan ( C ).

3. Buat satu lingkaran besar (lebih besar dari lingkaran pertama) dan beri warna putih, letakan sesuai keinginan seperti pada gambar dibawah ini

hilangkan Out Linenya.

4. Transparasikan lingkaran putih tadi dengan menggunakan Transparency tool

Lalu akan keluar submenu diatas, pilih radial


Setelah itu, masukan object Lingkaran putih tadi pada lingkaran hitam dengan menggunakan Power Clip (Effect >> Power Clip >> Place Inside Continer), Letakan Sesuai kehendak, Buatlah object baru berupa persegi dan gunakan Text Tool lalu klikan pada garis(tepat pada garis object)Persegi, tulis sesuka hati, Ungroupkan (Ctrl+U) lingkaran kanan pertama tadi dan seleksilah lingkaran kecil, beriwarna putih dan transparasikan kembali dengan menggunakan Transparency Tool dan pilih linier.

6. Seleksi lingkaran yag tadi satu group dengan lingkaran kecil, lalu klik Effect >> Lens pada menu


Maka akan muncul Docker Window seperti pada gambar dibawah ini



Pilih Magnify, dan sesuaikan Amount dengan keinginan kita, sehingga menjadi seperti pada gambar dibawah ini


Dan kita tinggal mengexportnya menjadi JPEG untuk membuatnya menjadi bitmap
Docker Window : Window yang menampilkan Perintah-perintah yang dapat kita gunakankembali saat kita melakukan editing

Hasilnya:

KAca PEmbesar

Kritik & Saran tinggalkan komentar

Read More »

0 Membuat Halftone CorelDRAW

Mungkin Tutorial Corel DRAW ini akan terlihat sangat sederhana, tapi tidak ada salahnya saya berbagi kan? :D

Cara membuat halftone kita hanya menggunakan tehnik-tehnik dasar, bisa dibilang sangat dasar, itulah kenapa saya selalu bilang, “Pelajari dasar-dasarnya dulu” pada orang yang bertanya kepada saya, “bagaimana caranya biar cepet bisa?” karena menurut saya, kalau sudah mengerti benar dasar-dasarnya, kita bisa mengembangkannya dengan menggabung-gabungkan tools yang ada, dan yang terpenting ide... hehehe...

Okeh... tidak usah terlalu banyak berita basi lagi gan...

Langkah-langkahnya :

1. Pasti tidak lupa, buka dulu Corel dan buat New Document


2. Lalu buat lingkaran dan warnai hitam, ingat hanya hitam.



3. Kemudian Klik menu Interactive Transparency Tool



4. Ubah transparency typenya menjadi Radial seperti yang saya tandai biru

Kemudian klik dua kali di bagian yg saya tandai merah, maka akan muncul Windows berikut

Pada bagian yang saya tandai dengan nomor 1, ubah warnanya menjadi Hitam, dan nomor 2 menjadi Putih, maka akan terjadilah gradasi seperti gambar berikut

Yang saya tandai merah diatas untuk menyesuaikan gradasinya.


5. Kemudian jadikan Bitmap, Bitmaps >> Convert To Bitmaps, akan muncul Windows seperti dibawah ini.

Jangan lupa untuk Check semua kotak yg ada di Options, lalu klik OK


6. Kemudian Klik menu Bitmaps >> Mode >> Grayscale (8-Bit)


7. Lalu Klik kembali Bitmaps >> Color Transform >> Halftone... maka akan muncul windows previewnya seperti dibawah ini

Sesuaikan sendiri Blacknya lalu klik Ok


8. Disini Object masih berupa Bitmap, jika kita menginginkannya untuk menjadi Vector, kita tinggal Trace object tersebut. Berikut cara cepatnya :


9. Klik Kanan pada object >> Trace Bitmaps >> Line Art



10. Kemudian akan muncul Windows berikut

halftone

11. Sesuaikan Opsi-opsinya sesuka hati anda lalu klik OK


12. Jadi gan... Intinya seperti itu, kalaupun kita mau buat yg kotak juga bisa asal langkahnya seperti diatas hanya akan ada perubahan sedikit saja dan saya yakin juragan sekalian mampu mengatasinya


Kritk & Saran tinggalkan komentar

Read More »

0 Permasalahan Pencetakan / Dalam Mencetak

Artikel ini menjelaskan sedikit permasalahan yang kita alami dalam pencetakan atau print file pada Corel DRAW , mungkin artikel berikut ini bisa menjadi sedikit referensi untuk memaksimalkan hasil print dari CorelDRAW, semoga bermanfaat.

Jika menggunakan effect Drop Shadow pada corelDRAW Drop Shadow atau object dengan transparansi, mungkin akan ditemukan problem dalam hal pencetakan dengan printer komposit (laser printer, inkjet dan sebagainya) meskipun semuanya terlihat baik di monitor, akan tetapi masih saja tidak dapat menghasilkan cetakan yg tepat.


Mengapa hal ini dapat terjadi ... ;-(

Cara CorelDRAW memperlakukan transparansi

Di dalam mereproduksi sebuah object yang transparan, CorelDRAW akan membuat gambar bitmap dari object aslinya yang diberi effect Drop Shadow, seperti pada gambar dibawah ini

Sehingga hasil yg didapatkan adalah bahwa Drop Shadow Bitmap akan mempunyai batas pada vektor object.

Color Space Mapping
Pada saat melihat Drop Shadow pada Corel DRAW akan terlihat sempurna apabila dilihat pada monitor, akan tetapi bila dicetak akan menghasilkan hasil yang tidak sesuai dengan apa yang ditampilkan pada monitor. Jawaban dari pertanyaan tersebut akan kita coba membahasnya di bawah ini

Perbedaan alat Output atau Output Device untuk menampilkan reproduksi warna adalah jawaban yang tepat. Monitor mempunyai tiga unsur warna fosfor yang mempunyai tiga warna, yaitu red, green dan blue sering disebut RGB. Sedangkan pada peralatan cetak atau printing device mempunyai teknologi yang berbeda, yaitu mempunyai substraksi warna tinta Cyan, Magenta, Yellow dan Black yang sering disebut CMYK. Karena mempunyai teknik yang betul-betul berlainan dalam mereproduksi warna maka bukan hal yang tidak mungkin bahwa kedua teknik tersebut akan mempunyai cara pandang yang berlainan di dalam mereproduksi suatu warna alam yang ditangkap oleh mata manusia. Pada monitor RGB yang modern mempunyai jangkauan warna yang sangat beragam daripada teknologi printer CMYK, hal inilah yang sering menjadi masalah sangat serius didalam problem pencetakan. Designer harus selalu memakai cara pandang CMYK didalam melakukan kombinasi warnanya, bukan dengan standard RGB yang selalu dilihat dalam layar monitor

Terdapat dua cara untuk menterjemahkan permasalahan warna satu dengan warna yang lain :
1. Gantilah warna yang dekat dengan Output Device daripada yang terlihat pada layar monitor.
2. Berilah skala warna pada object asli untuk menentukan range warna Outputnya. Akan tetapi perbedaan secara relatif pada warna akan selalu ada.

3. Dua transfer warna secara algoritma dapat dijelaskan pada grafik dibawah ini :
Pada gambar tersebut: S – warna sumber asli, D – warna tujuan, B – range warna yang dapat ditampilkan output device, E – warna output device yang di skalakan dengan warna sumbernya

Saat menggunakan metode 1 (grafik kiri), warna pada daerah B dapat tercetak tanpa ada perubahan. Sedangkan range A dan C dapat diwakili dengan range warna yang mendekati dengan range B. sedangkan apabila menggunakan metode 2 (grafik kanan), semua warna yang ditampilkan akan mempunyai hasil yang khas walaupun tidak sesuai dengan warna aslinya

Metode 1 adalah metode yang paling tepat apabila menggunakan ilustrasi-ilustrasi berbasis vektor yang tidak menurut range warna yang sangat bervariasi. Pada gambar fotografi distorsi warna akan terjadi

Saat CorelDRAW mencetak documment tersebut pada printer komposit, akan menerapkan alogaritma yang kita bahas diatas. Secara defaultnya metode 1 diterapkan pada gambar dengan basis vektor, sedangkan metode 2 banyak digunakan untuk gambar-gambar bitmap

Untuk menanggulangi bencana diatas, dapat diikuti petunjuk dibawah ini :

Convertkan object ke bitmap, dari sini dapat dibuat Drop Shadow lebih bagus, atau cetaklah pada object yang berlainan. Hal penting yang harus diperhatikan adalah, jangan menggabungkan vektor dengan bitmap pada kotak warna yang sama.

Dalam CorelDRAW, aturlah pada menu Tools, pilih Option, Global, Color Management, General dan dapat dilihat pada menu Drop Down dengan nama “Mapping Mode” (“Rendering Intent”). Dan atur pada “Illustration” atau “Pjotographic” (“Saturation” dan “Perceptual”), pastikan jangan memilih “Automatic”.

Pada driver printer, sebagai contoh Canon iP1800 Series gunakan automatic color secara defaultnya pastikan mengatur pada dua metode dari pada type digunakan yang otomatis. Metode 1 sering disebut “Vivid Colors” dan metode 2 disebut “Match Colors On Screen”.

Read More »

0 Membuat Bangun Matematika di Corel

Kali ini kita akan belajar Dasar Coreldraw yaitu bagaimana cara membuat menggambar bangun 2 dimensi yang ada di pelajaran matematika seperti segitiga, trapesium, belah ketupat, jajar genjang, dll di Aplikasi Coreldraw.

Berikut langkah - langkahnya:

1. Buka Coreldraw, Start >> All program >> Corel >> New

2. Gunakan Rectangle tool, dan gambar kotak di lembar kerja corel
Tips: sewaktu menggambar tahan dan tekan tombol Ctrl + Shift untuk mendapatkan bujur sangkar


3. Setelah itu, Tekan Crtl + Q untuk mengubah bangun yg kita buat menjadi Curves

4. Setelah itu tekan F10 pada keyboard untuk memunculkan curve point

5. setelah itu klik kanan tengah tengah sisi canvas dan pilih ADD


Lalu atur "node" tepat di tengah - tengah

Sekarang kita bisa mengatur curve point sebelah kanan ke tengah dan sebelah kiri ke tengah sehingga membentuk segitiga sama kaki

Bisa juga dibuat trapesium, belah ketupat dan lain - lain

Bangun matematika, berapa cara menghitung luasnya? silahkan ditanyakan ke bapak/ibu guru :)
Inti dari tutorial ini adalah bagaimana kita membuat bangun kotak menjadi bentuk bangun lain dengan menggunakan Convert to Curves dan Node Tool

Kritik & Saran tinggalkan komentar

Read More »

0 Menguasai Teknik Penggabungan dan Shaping

Menguasai Teknik Penggabungan dan Shaping


CorelDRAW merupakan program yang memudahkan kita dalam menggambar, untuk itu kita akan mempelajari dasar dari menggambar yaitu teknik shaping...

Apa yang dimaksud teknik shaping?
Teknik shaping adalah teknik penggabungan untuk menggabungkan 2 bangun atau lebih.

contohnya:
Untuk menggambar arah panah maka kita harus menggambar sebuah kotak dan sebuah segitiga
1. Buka program corelDRAW - Pilih "new"
2. Lalu gambar kotak dan segitiga dengan menggunakan tool gambar kotak di sebelah kiri atau tekan F6


Lalu gambar segitiga dengan menggunakan tool "Basic Shape"
Caranya [klik kiri] basic tool di sebelah kiri,

lalu di sebelah atas ada pilihan properties gambar, klik panah dalam lingkaran dan pilih gambar segitiga,

gambar segitiga tersebut di kanvas lalu [klik kiri] gambar tersebut sehingga gambar muncul tanda berputar, putar gambar
*Hasil Gambar:

satukan kedua gambar seperti gambar di bawah ini dengan menggunakan tool di sebelah kiri bergambar tanda panah yaitu "pick tool"

tekan tombol [shift] lau klik segitiga dan kotak
atau tekan [ctrl] + [A]
Hal ini untuk selected all / memilih semua

3. Setelah melakukan hal tersebut maka akan muncul properties shaping
Tiga proses shaping yang paling sering digunakan:
Weld = untuk menggabungkan dua bangun menjadi satu kesatuan
Trim = untuk memotong bangun yang dikehendaki dengan potongan yang sama dengan bagun pertama yang di pilih
Intersect = membuat bagun baru dari perpotongan kedua bangun atau lebih / irisan bangun

4. Pilih shaping "Trim"
Maka gambar akan menjadi satu kesatuan
Warnai gambar untuk mempercantik tampilan

Arah Panah "dengan teknik shaping - TRIM"

Read More »

0 Membuat Efek Scanline di Photoshop

sedikit mengisi liburan dengan menulis artikel di forum tercinta
efect scanline ini mungkin biasa,tapi jika anda kreative mungkin bisa jadi berbeda karna setiap tutorial dibuat untuk melatih pola pikir kreative kita.
sebenarnya efek scanline ini adalah efek dari garis-garis yang ada di monitor atau televisi jika kita teliti (jangan terlalu dekat yah melihatnya) berikut ini review dari efek scanline,saya menggunakan foto vokalis bring me the horizon (oliver) salah satu band favorite saya.



nah kurang lebih seperti itu,keliatan tidak realistis sama sekali hehehe iya nih sya juga dapat tutorial dari luar lalu saya langsung buatkan aja karna lagi enggak punya ide..
semoga saja oliver tidak menuntut foto nya yang saya jadikan tutorial di blog ini wkwkwk suram..

oke langsung saya ke step pertama.
seperti biasa,buka canvas baru dengan cara klik file > new,buat dengan ukuran 480×323 pixel.
dalam canvas berukuran kecil rubah warna putih menjadi warna dengan kode warna #08c2cc,dan masukan foto model yang akan dijadikan uji coba kita,kali ini saya menggunakan fotonya oliver bring me the horizon.




setelah itu buat layer baru diatas layer background,ingat layer background bukan diatas foto oliver,dan beri nama over.
dalam efek itu ganti blending mode normal ke overlay,disini kita akan membuat pencahayaan pada bagian belakang foto model tersebut.
caranya klik menu brush > klik kanan pilih soft brush dengan ukuran yang di sesuaikan,setelah itu tekan beberapa kali dibagian belakang hingga menjadi gambar seperti ini.



Step 2,Memberi Pencahayaan Pada Foto Objek

setelah memberikan efek light pada background sekarang saatnya kita membuat foto model kita agar lebih terang,caranya pilih layer foto modem lalau tekan CTRL+klik lalu klik menu Create new fill or adjutment layer yang ada pada bagian bawa fitur layer.



setelah itu pilih curves,disini saya tidak mau menentukan kecerahaan sebuah gambar,silahkan anda berkreasi memberikan cahaya yang anda sesuaikan,berikut ini screenshot yang sudah saya berikan efek cuves.



jika sudah sekarang waktunya memberikan efek dark atau kegelapan pada foto setelah anda memberikan efek pencahaan,fungsinya agar gambar lebih real.
kembali tekan CTRL+klik dan klik menu Create new fill or adjutment layer lalu pilih level,untuk memberikan efek gelap anda kecilkan sedikit jarum level ke gelap di dalam foto modem tersebut.



Step 3, Membuat Efek Scanlines Dengan Pattern
sebelumnya buat dulu layer baru dengan nama scanline,lalu buat canvas baru dengan ukuran 5×5 pixel,caranya klik file > new tapi dengan Background Content Transparent.
zoom canvas hingga full,lalu pada tool box pilih tools dengan nama Rectangular marquee tools atau tekan M pada keyboard,lalu seleksi canvas seperti gambar ini.



jika sudah berikan seleksi dengan warna hitam,caranya klik edit > fill > Use pilih Black. Example.



caranya menjadikan gambar ini sebagai efek pattern kita pilih Edit > Define Pattern,isikan nama sesuai anda saja.
setelah itu hiraukan gambar ini,mau di save mau di buang juga gpp karna gambar ini sudah menjadi salah satu efek pattern di photoshop anda.

Step 4, Memberikan Efek Scanline Ke Gambar.

kembali ke projek awal kita tadi,ingat yang tadi anda membuat layer dengan nama scanline? kalau ingat klik layer tersebut.. hhe
dan yang aktif adalah layer yang anda klik tadi,dilayer scanline ini kita akan membuat efek scanlines,caranya klik Edit > Fill > Use pilih pattern > pada Custom Pattern pilih Efek yang tadi anda buat,review hasilnya seperti ini.



jika sudah pada belnding mode pilih overlay denga opacity tetap 100%..

Step 5, Memberikan Efek Blur Pada Lines Agar Lebih Real

masih tetap dilayer Scanlin kita tadi,dibagian ini kita akan memberikan efek blur pada garis-garis scanline,sebenarnya ketika kita merubah blending mode ke overlay itu membuat line lebih real pada efek tersebut,tapi disini kita akan membuatnya agak blur agar tidak terlalu kaku.
Pada menu Filter Pilih Blur > Gaussian Blur lalu gunakan Radiusnya 0.8 pixel.



dari blur tersebut akan tampil hasil seperti ini..



dan ini hasil akhirnya,selamat berkreasi di photoshop..

Read More »

0 Adobe Photoshop CS6

Adobe Photoshop CS6 merupakan salah satu program aplikasi tercanggih dan terpopuler saat ini yang ditujukan untuk menyunting dan memanipulasi gambar atau foto digital menjadi sebuah hasil karya yang lebih artistik dan tentunya menarik.
Adobe Photoshop CS6 mengubah digital imaging dengan alat-alat fotografi yang kuat dan kemampuan baru terobosan untuk pilihan gambar yang kompleks, lukisan realistis dan retouching cerdas.

Membuat dynamic range menakjubkan tinggi (HDR) gambar. Cat dengan stroke realistis dan campuran warna. Lepaskan kebisingan, tambahkan biji-bijian dan membuat sketsa dengan alat fotografi state-of-the-art. Manfaat dari memori lebih dan mendapatkan pengalaman kecepatan besar dengan dukungan 64-bit asli cross-platform, dan optimasi penuh untuk Windows 7. Adobe Photoshop terbaru : Adobe Photoshop CS6, Adobe Air Adobe Device Central CS6 Adobe Media Player Adobe Extended Script Toolkit CS6 Adobe Extension Manager Font Adobe CS6 CS6 Adobe Bridge CS6 INI SEPENUHNYA diupdate

Berikut fitur terbaru dari versi terbaru ini :
Adobe® Photoshop® CS6 Extended software delivers breakthrough capabilities for superior image selections, image retouching, realistic painting, and 3D extrusions. Experience 64-bit support for fast performance as well as dozens of time-savers throughout your workflow.

Persyaratan Sistem :

* Intel Pentium 4 atau AMD Athlon 64 processor
* Microsoft Windows XP dengan Service Pack 3; Windows Vista Home Premium
* 1GB RAM
* 1GB ruang hard-disk yang tersedia untuk instalasi
* 1024x768 display (1280x800 disarankan
* QuickTime 7.6.2 lunak yang diperlukan untuk fitur multimedia

Download Via Easy-Share
http://www.easy-share.com/1913078953/AP6CS-bymagsterfgh.part1.rar
http://www.easy-share.com/1913078954/AP6CS-bymagsterfgh.part2.rar
http://www.easy-share.com/1913078998/AP6CS-bymagsterfgh.part3.rar
http://www.easy-share.com/1913079028/AP6CS-bymagsterfgh.part4.rar
http://www.easy-share.com/1913079030/AP6CS-bymagsterfgh.part5.rar
http://www.easy-share.com/1913079462/AP6CS-bymagsterfgh.part6.rar
http://www.easy-share.com/1913078962/AP6CS-bymagsterfgh.part7.rar
http://www.easy-share.com/1913078959/AP6CS-bymagsterfgh.part8.rar

Download Via Fileserve
http://www.fileserve.com/file/cCbmHk6/AP6CS-bymagsterfgh.part1.rar
http://www.fileserve.com/file/7kkfyYp/AP6CS-bymagsterfgh.part2.rar
http://www.fileserve.com/file/yWr7Ck2/AP6CS-bymagsterfgh.part3.rar
http://www.fileserve.com/file/5xNXy5C/AP6CS-bymagsterfgh.part4.rar
http://www.fileserve.com/file/5Xk6CJ3/AP6CS-bymagsterfgh.part5.rar
http://www.fileserve.com/file/kgkNee3/AP6CS-bymagsterfgh.part6.rar
http://www.fileserve.com/file/TH32VTM/AP6CS-bymagsterfgh.part7.rar
http://www.fileserve.com/file/AjwKFgD/AP6CS-bymagsterfgh.part8.rar

Serial Number Photoshop CS6:

1330-1971-4830-5668-6067-1762
1330-1912-2628-0850-0232-4869
1330-1148-0472-2735-6555-0617
1330-1544-4195-8131-3034-5634
1330-1886-0283-4688-9152-2034
1330-1118-3174-6558-8260-5378


note: ini info bagi yang belum tau saja ^_^

kalo yang udah tau,berbanggalah karena udah tau AP CS6

dilakan yang berminat donload aja

Read More »

0 Membuat Website Semantik Tanpa Table (tableless) dengan Photoshop dan Dreamweaver

Sekarang mari kita mulai membuat project website kedua yaitu membuat website semantik tanpa tabel dan tentunya masih menggunakan photoshop dan dreamweaver. Bila anda belum membaca tutorial sebelumnya, saya sarankan untuk membaca dan mempraktekannya terlebih dahulu supaya lebih mantap lagi untuk memulai project kita kali ini, untuk membacanya silahkan klik disini.

Project kali ini sedikit agak rumit dan bila koneksi anda menggunakan dial-up tutorialnya mungkin lumayan lama karena yang pasti kali ini banyak sekali gambar yang harus di load. Bila salah satu image dalam tutorial ini tidak muncul, klik kanan pada image kemudian pilih show image/reload image (untuk FFox, saya sarankan selalu menggunakan FireFox). Tampilan project website kita kali ini adalah sebagai berikut

Spoiler:

Apa yang harus saya kuasai untuk Mengerjakan Tutorial ini

Untuk mengerjakan tutorial saya ini maka Anda harus menguasai dasar dari CSS, HTML dan minimal bisa membuat website dengan table. Berikut daftar yang bisa anda pelajari terlebih dahulu:

Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
Cara Penerapan CSS pada HTML
Penjelasan menggunakan Styling CSS ( Cascading Style Sheet) untuk Text, Fonts, Links, List dan Table
Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline
Belajar Membuat Website dengan Photoshop dan Dreamweaver
Silahkan cari referensi lain untuk dasar HTML dan dasar ilustrasi Photoshop, banyak sekali di Google.


Membuat Desain Awal dengan Photoshop

Silahkan buka photoshop anda kemudian buat kanvas baru dengan ukuran 1280 X 800 pixel dan background content white, settingan yang lainnya tidak perlu dirubah.



Double click pada layer 0 yang baru saja dibuat, ganti nama layer menjadi background. Selanjutnya click kanan pada layer background dan pilih blending option :



pada dialog blending option centang dan klik gradient overlay kemudian atur gradasi warna sehingga menjadi seperti pada gambar berikut :



pilih ellipse tool kemudian buat bidang bulat pada layer background yang telah diberi warna gradasi hitam putih, sehingga menjadi sebagai berikut :



buatkan bidang yang sama dengan variasi warna yang berbeda sebanyak 5 buah sehingga menjadi sebagai berikut :



klik bidang yang telah dibuat kemudian pilih Filter - Blur - Gausian Blur, ubah radius Gausian Blur menjadi 90 seperti setingan pada gambar dibawah, lakukan setingan tersebut pada semua bidang :



apa yang kita lakukan diatas akan menghasilkan gambar sebagai berikut :



buat lagi bidang berwarna putih dengan ellipse tool kali ini buatlah bidang yang agak lonjong kemudian tempatkan disebelah atas :



Atur fill opacity bidang yang baru saja dibuat pada blending option menjadi 10 sehingga gambar menjadi sebagai berikut :



Dengan demikian background untuk website kita kali ini bisa dikatakan selesai, anda bisa saja menambahkan variasi sesuka anda. Sebagai catatan saja dari saya, background yang kita buat usahakan selalu dengan ukuran 1280 x 800 pixel atau lebih. Seperti yang kita ketahui rata-rata resolusi notebook adalah 1280 x 800 pixel, sedangkan rata-rata desktop berukuran hanya 1024 x 780 pixel. Jika kita membuat background dengan ukuran lebar 1024 tentu tidak akan tampil bagus pada resolusi diatasnya, lebih baik lagi bila kita bisa membuat background yang dinamis namun indah dan dengan ukuran byte yang rendah.

Setelah anda selesai dengan background diatas, selanjutnya mari kita buat design untuk layout content website kita.
Buatlah sebuah kanvas baru berwarna hitam dengan ukuran 640 x 640 pixel, kemudian pilih rounded rectangle tools ubah radiusnya menjadi 20px dan buatkan bidang berwarna putih.



geser layout content tersebut ke dalam background yang sebelumnya kita buat dengan menggunakan move tool .. klik kanan pada layout kemudian pilih blending option gunakan setingan berikut



hasil dari penambahan stroke dan gradient overlay pada layout content yang telah di gabungkan dengan background akan menghasilkan gambar sebagai berikut



buat sebuah kanvas kemudian tambahkan bulatan-bulatan hitam dengan ellipse tool diatas kanvas sehingga membentuk gambar seperti awan hitam, klik kanan pada layers kemudian pilih merge visible



Gabungkan gambar awan dengan design website sebelumnya kemudian tambahkan bulatan-bulatan hitam lain disekelilingnya sehingga kita mendapatkan design website seperti gambar berikut



OK sekarang content website dan background sudah jadi, selanjutnya mari kita buat Design Menu untuk website kita. langkah pertama adalah buat bidang persegi dengan rectangle tool pada bagian atas content selebar content atau 640 pixel kemudian tambahkan gradient overlay pada blending option dengan variasi warna merah tua dengan hitam (caranya sama seperti sebelumnya)



buatkan lagi bidang kali ini dengan rounded rectangle tool disebelah pojok kiri atas yang nantinya akan kita gunakan untuk input pencarian, beri gradisi warna seperti sebelumnya tambahkan icon pencarian diatas bidang. selanjutnya disebelah kanan atas tambahkan logo website anda sehingga bagian atas menu tampak seperti gambar berikut



Dengan demikian maka layout website kita sudah jadi dengan tampilan yang lumayan keren



Mark Up Design dengan xHTML dan CSS

Sekarang anda sudah memiliki design website yang anda buat sendiri dengan photoshop, nah langkah selanjutnya adalah membuat Mark Up atas Desain yang telah kita buat kedalam xHTML dan CSS, silahkan buka Macromedia Dreamweaver anda.

Buat sebuah file HTML baru dengan tipe dokumen DTD XHTML Strict 1.0 save file dengan nama index.html.



Setiap kita membuat file baru maka akan ditampilkan tag html bawaan, ubah tag <title>Untitled Document</title> yang berfungsi untuk memberi title website pada tab browser sesuai dengan title website yang anda kehendaki.

Code:

<!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=iso-8859-1" />   <title>Welcome | Websiteku </title> </head> <body> </body> </html>

Sebelum melanjutkan XHTML mari kita kembali lagi ke photoshop untuk menyiapkan background dokumen, pastikan save gambar pada photoshop yang telah kita buat dengan ekstensi psd. Delete dulu semua image menu, kemudian pada blending option untuk layout content centang dan ubah color overlay menjadi hitam pekat ( #000000 )





potong atau crop gambar sehingga memiliki ukuran dengan kb yang lebih kecil, buat persis menjadi sebagai berikut dan pastikan layout hitam berada ditengah-tengah..



Simpan gambar background yang telah di crop dengan nama background.jpg, tempatkan pada direktori image yang terdapat pada direktori index.html. Ingat pada saat menyimpan gambar, gunakanlah save for web sehingga kita bisa mengoptimasi ukuran byte gambar dan gambar lebih cepat untuk di load oleh browser

kita terapkan CSS untuk Tag body XHTML. Sementara untuk memudahkan kita, terapkan CSS dengan cara internal style sheet dulu baru kemudian setelah semua mark up selesai kita pindahkan menjadi eksternal stylesheet dengan ekstensi tersendiri. bila anda belum paham dengan penerapan CSS silahkan buka artikel saya sebelumnya Pengertian CSS dan Cara Penerapan CSS pada HTML. OK, tambahkan tag CSS berikut dibawah tag title html

Code:

<style media="screen"> body {     margin:0;     background:#000000 url(images/background.jpg) no-repeat top;     font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif } </style>

Penambahan mark up css diatas bila kita lihat di browser akan menampilkan dokumen web sebagai berikut



Sekarang kembalikan lagi layout content web menjadi putih kembali ( undo color overlay ) kemudian delete layout background sehingga kita mendapatkan gambar sebagai berikut



klik kanan pada layer kemudian pilih merge visible pastikan bagian tetap transparent persis seperti gambar diatas. Selanjutnya potong gambar dengan crop menjadi tiga bagian, bagian yang harus dipotong dapat anda lihat pada gambar dibawah ditandai dengan warna merah, pastikan presisi pemotongan gambar sama..



simpan (save for web) ketiga gambar yang telah dipotong dengan ekstensi PNG pada folder images.

Potongan #1 simpan dengan nama bgheader.png
Potongan #2 simpan dengan nama bgcontent.png
Potongan #3 simpan dengan nama bgfooter.png

saya tidak memberi patokan ukuran masing-masing potongan, maka dari itu buka semua potongan yang tadi telah disimpan klik kanan pada bagian title kemudian pilih image size untuk mengetahui ukuran pixel potongan anda dan ingat baik-baik ukuran pixel gambar2 tersebut.

Selanjutnya pada style css dibawah body tambahkan kode sebagai berikut

Code:

<style media="screen"> .header{     width: 646px;     height: 170px;     margin: 0;     background:url(images/bgheader.png) bottom right no-repeat; } .content{     width: 646px;     margin: 0 auto;     height:500px;     background:url(images/bgcontent.png); } .container{     padding : 10px; } .footer{     width: 646px;     height: 30px;     margin: 0 auto;     background:url(images/bgfooter.png) top right no-repeat; } </style>

Ukuran width dan height pada property css diatas tergantung dari hasil potongan gambar anda, oleh karena itu untuk width dan height-nya jangan mengacu pada kode diatas silahkan mengacu pada gambar anda.

tambahkan juga tag HTML berikut pada body

Code:

<div class="header"></div> <div class="content">     <div class="container"> </div> </div> <div class="footer"></div>

Dengan demikian maka tag HTML sekarang menjadi sebagai berikut

Code:

<!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=iso-8859-1" /> <title>Welcome | Websiteku</title> <style media="screen"> .header{     width: 646px;     height: 170px;     margin: 0;     background:url(images/bgheader.png) bottom right no-repeat; } .content{     width: 646px;     margin: 0 auto;     height:500px;     background:url(images/bgcontent.png); } .container{     padding : 10px; } .footer{     width: 646px;     height: 30px;     margin: 0 auto;     background:url(images/bgfooter.png) top right no-repeat; } </style>     <div class="header"></div>     <div class="content">         <div class="container"> </div>     </div>     <div class="footer"></div> </body> </html>

Tag HTML diatas sementara akan menghasilkan dokumen website seperti gambar dibawah. Apabila tidak tampil seperti gambar dibawah berarti ada yang salah dengan presisi width dan height pada property CSS, trus utak-atik ukuran width dan heightnya hingga mempunyai presisi yang benar.



Div dengan atribut class content akan mengikuti isi karena tidak dipatok dengan ukuran height. sedangkan isi content sendiri kita masukan didalam container. bila kita menambahkan beberapa heading (h1) dan paragraph (p) pada content maka kita akan mendapatkan tampilan sebagai berikut click untuk memperbesar

Spoiler:

Ok tutorial membuat website table less dengan photoshop dan dreamweaver bagian pertama hanya sampai disini.. dibagian kedua nanti kita akan belajar membuat menu navigasi dan mengisi kolom content kita sehigga content kita tidak hanya paragraph saja, he.... Bila anda ingin mengetahui dan

Read More »