Jumat, 22 Maret 2013

Membuat Favicon Website Ternyata Mudah



Favicon adalah icon kecil yang ada di dekat url browser. Mungkin bagi sebagian orang dianggap kurang penting namun sebetulnya favicon memberikan nilai tersendiri bagi web atau blog kita. Dengan Favicon maka website kita punya hiasan icon kecil yang imut dan menambah daya tarik website dan blog. Ok sekarang sy tidak perlu berpanjang lebar karena panjang x lebar nanti jadinya LUAS.


Cara membuat Favicon Website ? Mudah, begini caranya :

Langkah Pertama adalah Membuat Favicon di Photoshop

Buka Photoshop, ikuti langkah dalam tutorial Membuat Favicon website di Photoshop di bawah ini:

1. Buat Lembar kerja baru, Caranya : Klik File >> New ,
Setting seperti di bawah ini :
setting lembar kerja favicon
gambar : setting lembar kerja favicon

2. Sekarang desain favicon favoritmu di photoshop , disini saya menggunakan Rounded Rectangle Tool dan Text Tool
Contoh :
rounded rectangle tool dan gambar favicon
gambar : rounded rectangle tool dan gambar favicon

3. Save As dengan Format JPEG atau JPG atau bisa juga PNG, Bingung denga Format Gambar, Klik Extensi Image File
Tekan CTRL + Shift + S, namai dengan favicon
save as di photoshop
gambar : save as di photoshop

Simpan di komputer / Laptop anda.


Langkah Kedua yaitu Cara Merubah JPEG atau JPG ke format ICO

Ok sekarang tinggal mengkonvert file JPEG atau JPG tadi ke extension ICO. Caranya masuk ke www.favicon.cc
import image
gambar : import image

Klik Browse, lalu pilih file favicon hasil photoshop. Klik Upload
upload gambar favicon.jpg
gambar : upload gambar favicon.jpg

Sekarang download hasil convert favicon.ico
download favicon.ico
gambar : download favicon.ico

Tempatkan file hasil save di direktori utama website. Misal jika website kita bernama www.ilmugrafis.com , maka letakkan di tempat anda menempatkan file - file halaman seperti index dll.
direktori website dan favicon
gambar : direktori website dan favicon


Sekarang Cara Memanggil Favicon (Favico.ico) ke website

Gunakan Tag html ini :



tempatkan di antara tag

Contoh :
penempatan tag html favicon.ico
gambar : penempatan tag html favicon.ico

setelah itu save (CTRL + S) lalu upload (favicon.ico + file php / html website yang telah diberi favicon tag) ke server. Pilih Overwrite untuk menumpuk file di server dengan yang baru. Selesai hasilnya bisa dilihat di browser waktu online / mengakses website.
contoh favicon website
gambar : contoh favicon website

Hasilnya nanti akan terlihat seperti di atas. Sampai ketemu di tutorial web desain yang lainnya. Terima kasih semoga bermanfaat. Kunjungi juga Blog IlmuGrafis dan KUNJUNGI JUGA DI SINI GAN,,,:)untuk berita dan info menarik seputar desain grafis. Terima kasih semoga bermanfaat







Trik Membuat Vertikal Text dengan Cepat



RAFFI-BLOGGER.Bagaimana Anda menghasilkan dan membuat teks vertikal (eng : Vertical Text) dengan cepat di Coreldraw? Karena di Photoshop hal ini merupakan sesuatu yang mudah karena pada Toolbar Photoshop terdapat Text Tool dengan pengaturan vertikal maupun horisontal sedangkan di Coreldraw kita tidak punya pilihan teks vertikal seperti ini. Bagaimana metode lain agar hal yang simple dan sederhana ini bisa kita kerjakan di Coreldraw? Ikuti Trik CorelDraw berikut ini :

Perbandingan Text Tool Photoshop dan Corel
Gambar : Perbandingan Text Tool Photoshop (kiri) dan Text Tool Corel (kanan)


Mari belajar bersama Trik membuat text vertikal di Coreldraw

Buka Aplikasi Coreldraw, disini saya menggunakan Corel X5
Buat Lembar Kerja Baru, File >> New (CTRL + N)

A. Teks Vertikal 180 Rotation

Disini ada sedikit Trik dan Tips membuat teks Vertikal 180 degree Rotation (berputar 180 derajat) yaitu tekan CTRL + titik (.) untuk membuat teks di corel tertulis secara vertikal 180 Rotation. Untuk mengembalikannya ke posisi normal tekan pada CTRL + Comma (,) keyboard anda.
hasilnya :
Teks Vertikal 180 degree rotation
Gambar : Teks Vertikal 180 degree rotation

B. True Vertikal Text di Coreldraw

Anda bisa mengetik text vertikal di corel dengan menekan 1 huruf kemudian tekan enter, 1 huruf lagi lalu enter, dan seterusnya. Mungkin ini tidak akan membebani jika hanya sedikit kata yang ditulis, tapi jika terdapat banyak kata maka hal ini tidak efisien lagi. Berikut trik dan tips Vertikal Text di Coreldraw yang nantinya akan sama hasilnya dengan Vertikal Teks di Photoshop.

1. Tulis Teks yang akan dijadikan True Vertikal Text
2. Buat Garis lurus vertikal bisa dengan pen tool, maupun Freehand tool di corel
persiapan vertikal text
gambar : persiapan vertikal text

3. Dengan Shape Tool anda bisa mengatur renggang dan jarak antara huruf, tarik sesuai keinginian
mengatur renggang jarak antar text
gambar : mengatur renggang jarak antar text

4. tekan Pick Tool, klik text yang akan divertikalkan dan tekan menu Text >> Fit Text to Path , klik pada garis vertikal
Fit Text To Path
gambar : Fit Text To Path

5. Sekarang pilih Text Orientation paling bawah
Text Orientation
gambar : Text Orientation

6. Sekarang tinggal kita hilangkan garisnya, caranya Klik pick tool lalu klik kiri garis kemudian klik kanan pada X (tanpa warna)
menghilangkan garis
gambar : menghilangkan garis

Catatan :
a) untuk mengatur panjang pendek text anda bisa menggunakan Shape Tool (F10)
b) untuk mengganti huruf anda bisa klik text tool dan edit textnya dan otomatis secara langsung text akan terus vertikal
text true vertikal di CorelDraw
gambar : text true vertikal di CorelDraw

chinnese style letter
gambar : chinnese style letter

Demikian trik membuat teks vertikal di Corel Draw semoga anda semakin memahami dan menyukai desain grafis serta membantu anda mendesain suatu karya yang cantik namun cepat (efisien). Jangan lupa kunjungi juga Blog ILMUGRAFIS,dan KUNJUNGI JUGA DI SINI GAN,,,:) terima kasih semoga bermanfaat.