Membuat Layout Halaman Majalah Efek Envelope

Tentu diantara kita mungkin sering bertanya-tanya, gimana sih ngedisain tulisan dalam sebuah majalah tabloid atau koran kok bisa tulisannya mengikuti alur gambarnya, tenang karena hal itu juga pernah saya alami...

Baiklah disini akan saya beritahukan caranya, intinya semuanya mudah kalo kita tau caranya...
dan jangan pernah menyerah sebelum mencoba... ;-p

Apa yang kita butuhkan?
1. Gambar untuk tampilan pada majalah yang akan kita buat.
Supaya mempermudah sebaiknya untuk sementara pakai gambar yang backgroundnya putih
contoh:

Gambar Sasuke Uciha (Save As gambar di atas jika tidak punya)

2. Siapkan teks / tulisan yang akan dibuat sebagai isi dari halaman

3. Mainkan Musiknya.... Let's Gooooo....

Waktunya berkreasi...

- Langkah-Langkahnya:
1. Buka aplikasi coreldraw... pilih new

2. Copy teks kemudian ke lembar kerja coreldraw lalu tekan F8 untuk mengaktifkan Pen Tool kemudian buat ruangan dulu untuk teks yang akan dipindah dengan cara menahan klik kiri dan mendragnya dari ujung kiri atas ke kanan bawah agar teks bisa sesuai dengan yang diharapkan lalu paste ( ctrl - v ) teks ke dalam ruang teks yang telah dibuat dalam lembar kerja coreldraw.


3. Bagian yang paling menyenangkan... Yaitu memasukkan... Gambar maksudnya...
sekarang kita masukkan gambarnya ( File - Import - pilih gambar - OK - lalu saat di lembar kerja maka
"tahan klik kiri " dan drag untuk memberikan ruang pada gambar )

Loh teksnya tertutup? Tenang... Tenang...
untuk mengatasinya kalian klik kanan gambar tersebut dan pilih Order - To Back Of Layer

4. klik teks / tulisan pada lembar kerja kamu... Setelah itu, hehehe...
waktunya memberikan effek Envelope ( Effects - Envelope )
Pilih Add new - Apply

Dan... Kembali ke teks tadi... Lihat perbedaanya?
Gak Tau? Coba aja utak atik bagian samping kiri atas
( gunakan klik kiri dan tahan lalu drag / geser )
Sekarang tulisannya sudah bersifat dinamis...


5. Utak - Atik panahnya dan Sesuaikan dengan gambarnya...
Hasilnya:

Wah udah jadi ya tabloidnya....? Belum...

Tinggal diHias saja... ini tergantung kreatifitas kalian sendiri... Dan jadi deh...

Korannya Koran.. Korannya Koran.. Gratis Ayo siapa mau...

Pengenalan Macromedia Fireworks

Fireworks adalah aplikasi desain grafis yang dikhususkan untuk membuat website. Sesuai dengan definisi tersebut, Fireworks lebih diutamakan penggunaannya untuk desainer website dengan latar belakang keahlian desain grafis, yang melibatkan perangkat image editing, seperti Adobe Photoshop ataupun Corel Draw.


Fitur-fitur yang tersedia di Fireworks disesuaikan dengan latar belakang skill image editing, diantaranya adalah :
- Kemampuan mengedit berbagai jenis image dalam satu aplikasi.
- Kemampuan membuat efek animasi pada image
- Kemampuan mengedit image dan halaman web dalam satu aplikasi.

Untuk menghasilkan website yang profesional dan elegan, Fireworks harus dikombinasikan penggunaannya sesuai dengan peruntukan dan fitur unik masing-masing aplikasi. Pada bagian berikutnya kita akan melihat beberapa teknologi yang dapat dijadikan alternatif maupun pelengkap Macromedia Fireworks.

Tujuan utama Fireworks adalah untuk menghasilkan website. Perangkat alternatif untuk mencapai tujuan tersebut antara lain:
- Microsoft FrontPage
- Macromedia Dreamweaver

Terima kasih
Semoga bermanfaat

Link Tutorial
http://www.ilmugrafis.com/fireworks.php?page=pengenalan-fireworks

Layanan ilmugrafis.com
Maaf Belum Tersedia

+++ Hiburan | Feed The Fish ^_^


+++ Cara Bookmark Web / Tandai Website
Internet Explorer :
Favorites --> Add to Favorites...

Firefox Browser :
Tekan CTRL + D

Google Chrome:
Tekan CTRL + Shift + B --> Organize --> Add Page [ name: ilmugrafis & url: www.ilmugrafis.com ]



www.ilmugrafis.com by ilmuGRAFIS team

Pengenalan Dreamweaver dan Layout

Karena banyaknya request dari sana sini dan situ aduh pokoknya dari mana - mana tentang web desain dengan Dreamweaver maka saya akhirnya melaunching tutorial Dreamweaver di ilmugrafis rubrik web desain...

Seperti kata Pak Patah eh salah itu nama tetangga saya :) maksudnya Kata PEPATAH "Tak kenal maka tak sayang" oleh karena itu alangkah baiknya bila kita menilik apa itu Dreamweaver?
DREAMWEAVER (dulu milik dari macromedia namun sekarang menjadi milik dari Adobe) adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — dalam bahasa sansekerta artinya ( Apa yang kamu lihat akan menjadi seperti apa yang kamu inginkan) masih bingung ya intinya Kita tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs karena sudah disiapkan secara instant seperti membuat Table, Membuat Hyperlink, Memasukkan Gambar, termasuk memasukkan Flash Animasi, dll. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Mantab Bukan!!!


Gambar 1 . Tampilan LogoDreamweaver



Gambar 2 . Tampilan / Layout Dreamweaver


Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar.
- LEMBAR KERJA DREAMWEAVER adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya.
- INSERT TOOLBAR adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
- PENGATURAN HALAMAN berguna untuk melakukan pengeditan pada suatu elemen di Document Window.
- PANEL GROUP merupakan kumpulan dari panel-panel Dreamweaver.

Tunggu Edisi Selanjutnya...

Semoga Bermanfaat

Memasukkan Animasi Flash Ke Dalam Website

Pada tutorial belajar Dreamweaver kali ini penulis akan menjelaskan bagaimana cara memasukkan animasi flash berektension *.swf ke dalam website dengan dreamweaver...

Langkah - langkahnya:

1. Buka Dreamweaver dan pilih File - New
Atau tekan CTRL + N = Untuk membuat project baru sebagai latihan

2. Cara I : Pada Menu Utama
(help: untuk mengetahui letak menu utama bisa klik Pengenalan Dreamweaver dan Layout ) lalu pilih:
Insert - Media - Flash -
atau
Cara II : tekan CTRL + ALT + F

Ket:
swf = adalah extensi file animasi hasil olahan flash, file ini dapat dijalankan jika kita menginstal flash player ke dalam browser kita

untuk download adobe flash Player

3. Lalu pilih file berformat *.swf yang diinginkan
Disini penulis menggunakan contoh:

butterfly.swf yang dapat di download langsung disini password: ilmugrafis

berbagai macam contoh animasi untuk kebutuhan website kamu:
Langsung download aja

download Bom


Download Bendera Indonesia


Download Jam Analog

Tunggu Tutorial Dreamweaver Berikutnya...
Semoga Bermanfaat

Tentang Desain Grafis

Dewasa ini kita sering mendengar tentang Grafis dan Desain Grafis, apaan sih itu ?. Grafis artinya gambar, dimana setiap gambar mengandung sebuah pesan yang akan disampaikan si pembuat gambar kepada khalayak. Sedangkan Desain Grafis adalah sebuah ilmu dan keahlian dalam perancangan media komunikasi untuk menyampaikan pesan kepada orang lain baik itu berupa informasi mengenai sebuah produk dan jasa, ide ke dalam bentuk visual.

Sebuah produk desain yang sudah dipublikasikan kepada khalayak, tercipta melalui beberapa proses tahapan atau jenjang.

Visual Comunicator
Merupakan orang pertama yang menerima pesan dari klien dalam pembuatan sebuah produk informasi. Visual Comunicator mempelajari kepada siapa pesan disampaikan, dengan tujuan apa pesan disampaikan, siapa pembuat pesan dan membuat ide bagaimana bentuk visual dari pesannya itu.

Visualiser
Orang yang menindaklanjuti ide atau gagasan dari Visual Comunicator, dia bertugas untuk memvisualisasikan/ menggambarkan suatu ide yang asalnya masih dalam angan-angan menjadi bentuk sket kasar (draft) dari apa yang ditangkapnya. Diperlukan orang yang mempunyai kemampuan yang tinggi dalam menggambar ilustrasi yang ada pada posisi ini.

Copy Writer
Selesai membuat draft, selanjutnya menjadi tugas copy writer untuk merancang kata-kata yang pas untuk desain tersebut, terkadang keberhasilan seorang copy writer dalam mengolah kata-katanya mampu menjadi maskot dan mendongkrak perhatian kalangan terhadap desain grafis yang dibuat. Sorang copy writer harus mampu menangkap ide dan mengkomunikasikan ide tersebut kepada khalayak agar orang yang melihatnya mengikuti pesan yang kita sampaikan

Pekerja Grafis
Konsep sudah ada, draft sudah dibuat dan rancangan kata kata sudah disusun, selanjutnya menjadi tugas pekerja grafis untuk menyusun typographi, tata letak (layout), elemen gambar agar menjadi menarik, dan memiliki nilai artisitik yang tinggi. Yang selanjutnya tugas pekerja grafis ini mempersiapkan karya tersebut untuk diserahkan kebagian percetakan. Seorang deainer adalah perancang , membuat sebuah karya yang asalnya tidak ada menjadi ada , bukan mengulang sebuah karya yang sudah ada, jika desainer mengulang karya yang sudah ada sebelumnya, lebih tepat disebut seorang pekerja grafis. Seorang desainer tidak mempunyai alasan untuk mengulang sebuah elemen yang sama pada karyanya, karena tujuan dan penyampaian pesanya tidak akan pernah sama. Seandainyapun sama tentu dengan alasan kuat, misalnya dalam periode yang berbeda..

Karya seni murni berbeda dengan dengan karya desain grafis, pada desain grafis memiliki tujuan agar penerima pesan mengikuti atau terpengaruh terhadap pesan kita untuk selanjutnya mengikuti apa yang disampaikan oleh sipembuat pesan. Pada desain grafis lebih mementingkan prinsip komunikatif daripada artisitik. Akan menjadi karya grafis yang sia-sia jika sebuah karya Grafis memiliki nilai artistik yang tinggi, namun tidak memiliki nilai komunikatif untuk disampaikannya.

Semoga Bermanfaat
Terima kasih

Copy From Ilmugrafis

Cara Membuat E-mail dengan Nama Domain Sendiri

Tentunya kita pingin dong punya email dengan nama domain kita sendiri, misal namamu@domainmu.com. Nha sekarang ini google menyediakan fasilitas untuk membuat email seperti itu dengan cara yang lumayan mudah. Tapi sayangnya saat ini fasilitas tersebut belum bisa digunakan untuk blog yg masih menggunakan domain blabla.blogspot.com. Fasilitas ini hanya untuk yang memiliki domain sendiri, misal domainmu.com , .net. .org . dan top level doamin lainnya. Makanya itu bagi yang pengen, cepetan beli domain, aku sarankan beli di dodoldomain.com, murah lho (promosi...he..he..). Trus yang pake domain "co.cc" bisa gak? aku bilang "bisa", tapi sekarang aku pingin bahas yang pake domain .com/.net/.org, dll dulu. bagi yang punya domain "co.cc" sabar dulu ya.
Ok mari kita mulai tutorialnya bagaimana cara membuat email sendiri.

1. Buka alamat ini : http://www.google.com/a/cpanel/domain/new
2. maka km akan langsung disuguhi form seperti ini:




3. Isikan nama domain kamu didalam form tersebut lalu klik tombol "Get Started"
4. Kemudian akan muncul fomr lagi untuk mengisikan data-data yang diperlukan, Kalo sudah diisi klik "Continue"
5. Setelah itu akan muncul menu2 seperti ini :



6. Klik pada link "Activate email".
7. Setelah itu akan muncul lagi halaman untuk "Setup Email Delivery" , itu untuk setting MX Record. Caranya yaitu dengan mengisikan MX Record km dengan data2 yang ada disana. Datanya seperti ini :

MX Server address	Priority
ASPMX.L.GOOGLE.COM.	10
ALT1.ASPMX.L.GOOGLE.COM.	20
ALT2.ASPMX.L.GOOGLE.COM.	20
ASPMX2.GOOGLEMAIL.COM.	30
ASPMX3.GOOGLEMAIL.COM.	30
ASPMX4.GOOGLEMAIL.COM.	30
ASPMX5.GOOGLEMAIL.COM.	30

Bagi yang menggunakan DNS setting dari DNS park caranya yaitu : Klik domain kamu yg berada di "Domain list". Setelah itu pilihan "Type" pilih yg "MX". Pada kolom "Mail Domain" kosongi saja kolom tersebut. Pada kolom "Order" isikan data2 "Priority" diatas. Trus pada kolom "mail server" isikan dengan data "MX Server Address" diatas kemudian klik tombol "Update All". begitu terus sampai data diatas dimasukkan semua.

Bagi yang menggunakan DNS setting dari dodoldomain.com caranya : masuk ke menu "Domain-->LIst last 10", trus klik link "Managed DNS", kemudian klik tombol Manage DNS Record. Setelah itu klik tombol "MX Records" trus klik tombol "Add MX Record". Untuk kolom "Value" pilih yg bawah (yg "Type In A Fully Qualified Domain Name eg. abc.pqr.com.') . isikan data "MX Server address" di kolom tersebut. kemudian isikan data "Priority" dikolom "MX Priority". begitu terus sampai selesai semua data dimasukkan.
8. kalo sudah selesai klik tombol " I have completed these steps". Maka akan muncul page seperti ini lagi.



9. Sebenarnya sampai disini sudah bisa selesai, tp untuk membuka email km, km harus mengetikkan alamt URL seperti ini "http://mail.google.com/a/domainmu.com" . Nha klao misalnya km pingin menggantinya menjadi seperti : "http://mail.domainmu.com" maka ikuti lagi langkah berikut ini.

10. Klik link "Email" maka akan muncul halaman "Email setting"
11. Trus klik link "Change URL" , kemudian akan muncul halaman untuk "Change URL for email".
12. PIlih yg "custom" trus klik tombol "Continue".
13. Setelah itu km setting dulu DNS km, Tambahkan "CNAME Records" dan isikan "mail" di kolom "Hostname" dan isikan "ghs.google.com" dikolom http://naldoton.blogspot.com"Value"
14. Setelah itu klik tombol "I have complete these step"

Nha sekarang km sudah bisa memiliki email dengan nama doamin blogmu sendiri. Untuk setting2 lainnya pelajari sendiri ya. Udah capek nih.....

Cara membuat Template di Blogger

Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:



Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }

4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG.....

Copy From Trik Tips Blogging