Copyright© All Rights Reserved auddreysindhutomo.blogspot.com

Minggu, 25 Maret 2012

Mempercantik Website dengan css

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).

Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi.

Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:

1. Metode Table
2. Metode Div

Manfaat dari CSS:

  1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
  2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
  3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
  4. Dapat berkolaborasi dengan JavaScript.
  5. Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

  • Static –> posisi normal (default).
  • Relative –> posisi elemen tergantung dari elemen yang lain.
  • Absolute –> posisi elemen berpatokan pada jendela browser.
  • Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

  • Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
  • Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
  • Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
  • Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
  • Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin –> jarak/batas elemen dengan elemen lain

Border –> border/gari tepi elemen

Padding–> jarak elemen dengan isi elemen (elemen anak)

Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

contoh penulisan css :






Sample



Header Left

Header Right



Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:

  1. External Style Sheet (file CSS berbeda dari file HTML),
  2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
  3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).

Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini:

Penempatan CSS dalam HTML

Internal CSS

Metode penulisan kode CSS langsung dalam file HTML. contoh:






Eksternal CSS

file CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:



css” href=”public.css”/>



Inline CSS

Penulisan kode CSS dalam tag HTML. contoh:




Inline CSS


Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag yang diletakkan diantara tag. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian saja bagian yang didalam tidak usah diapa-apakan.

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag .

Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:

Serif font

Link

Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya.

Coba kode CSS berikut:

a.link1:link { font-weight: bold;  font-size: 12px;  color: #C87C28;  font-family: Times New Roman;  text-decoration: none; } a.link1:visited { font-weight: bold;  font-size: 12px;  color: #CC6600;  font-family: Times New Roman;  text-decoration: none; } a.link1:hover { font-weight: bold;  font-size: 12px;  color: #C87C28;  font-family: Times New Roman;  text-decoration: underline } a.link1:active { font-weight: bold;  font-size: 12px;  color: #C87C28;  font-family: Times New Roman;  text-decoration: none; } a.link2:link { font-weight: bold;  font-size: 12px;  color: #663300;  font-family: Arial, Helvetica, sans-serif;  text-decoration: underline; } a.link2:visited { font-weight: bold;  font-size: 12px;  color: #800000;  font-family: Arial, Helvetica, sans-serif;  text-decoration: none; } a.link2:hover { font-weight: bold;  font-size: 12px;  color: #ff6600;  font-family: Arial, Helvetica, sans-serif;  text-decoration: underline overline; } a.link2:active { font-weight: bold;  font-size: 12px;  color: #ff6600;  font-family: Arial, Helvetica, sans-serif;  text-decoration: underline; }


Sumber :http://ilmuti.com/2011/05/29/mempercantik-website-dengan-css/

Sharing is caring ^_^ # Auddrey

Widget Pilihan untuk mempercantik website

jika berhubungan dengan web ataupun blog maka yang dimaksud adalah sebuah tool (alat yang berguna) dalam memaksimalkan keindahan, kecantikan, serta “kenarsisan” blog Anda. *heuheu* Widget sendiri merupakan sebuah elemen yang berguna dan mudah digunakan baik yang telah disediakan oleh penyedia layanan blog yang Anda gunakan maupun berasal dari third party atau pihak ketiga.

Penggunaan serta pemasangan widget telah sangat dimudahkan oleh pihak-pihak penyedia layanan, sehingga yang Anda perlukan *biasanya* hanya mendaftar atau bahkan ada yang tidak perlu mendaftar sama sekali, cukup mengcopy scrift yang telah disediakan dalam element blog Anda. Nah berikut ini 58 Widget pilihan untuk mempercantik tampilan blog Anda.

  1. MyBlogLog’s Recent Readers – Widget satu ini sejak kehadirannya didunia lain blog langsung mendapat sambutan meriah layaknya seleb baru yg lagi naek daun. Widget ini memperlihatkan avatar dari para pengunjung blog Anda. Dan dengan kepopuleran widget satu ini sampai-sampai manajemen MyBloglog mampu meyakinkan Yahooo (baca: yahuu) untuk membeli sahamnya. *Mantab sangad* So, yang Anda perlukan untuk mendapat widget ini adalah mempunyai account yahuu.
  2. Mashable – Widget ini menyediakan semacam newsreel (headline news) dalam element blogger yang memberikan cuplikan berita/postingan dari sosial networking. Bedanya ada pilihan warna untuk disesuaikan dengan layout blog Anda.
  3. Headline News – Seperti widget mashable, widget ini pun menampilkan cuplikan headline berita dari situs-situs di seluruh penjuru dunia.
  4. Flickr Flash Photo Stream Badge – Widget ini menampilkan photo-photo dari profil flickr Anda secara berurutan dan dengan sentuhan flash. Flickr merupakan bagian dari yahoo jadi untuk mendapatkan widget ini Anda memerlukan account yahoo seperti pada widget MyBlogLog di atas.
  5. Preview Anywhere – sudah cukup terkenal juga nama snapshots bagi pengguna blogger bahkan untuk wordpress widget ini menjadi rekomendasi khusus dalam dashbord admin penggunanya. Fungsinya untuk melihat preview link keluar dengan tampilan popup yang tidak terlalu besar ketika pengunjung mengarahkan mouse pada teks atau banner yang “mengandung” link. Pro-kontra memang selalu ada; sebagian menganggap widget ini berguna karena menandakan kejujuran kita selaku pemilik blog, namun ada juga yang mencap kambing hitam sebagai biang lojalabo. *heuheu*
  6. Twitter Badge – Jika dalam keseharian hidup Anda banyak hal-hal menarik dan begitu penuh warna dengan segudang aktifitas serta ingin agar orang lain tahu dan menampilkan cuplikan kalimat-kalimat pendek *satu paragraf misalnya* (140 karakter) Anda sedang melakukan kegiatan ini, Anda sedang berada dimana, Anda sedang bersama siapa, Anda sedang, sedang, dan sedang lainnya…. Maka widget ini cocok untuk dipasang pada blog Anda. Daripada bikin sendiri element blogger/wordpress *secara manual* menuliskan teks sebagai pesan kepada pengunjung blog Anda bahwa Anda sedang ini-itu, saya sarankan lebih baik menggunakan widget ini. Widget ini akan menampilkan “tweet” terbaru Anda. Dan untuk pengguna WP sudah ada plugin untuk memposting twitter langsung dari blog Anda, contohnya di sidebar blog ini ada celotehan saya sekedar catatan apa yang tengah saya kerjakan menggunakan plugin tersebut.
  7. Digg News – Widget ini manampilkan Link terakhir yang masuk ke Digg sebuah social bookmarking yang sudah “kakoncara” dijagat perbloggan mah lah… *halaaah* Pilihan theme dan warna mudah untuk Anda atur agar sesuai dengan template blog Anda.
  8. FEEDJIT – Widget ini paling wuenak diantara widget lainnya, misalkan kalo kita lagi cape, lesu, sendi-sendi lagi nggak enak, otot kaku, badan pegal, masuk angin… maka suruh aja si mbok untuk feedjit *oooh itu pijit ya* heuheu. Feedjit merupakan layanan real time traffic pada blog Anda. Ada empat pilihan widget Feedjit yang bisa Anda gunakan, silahkan kunjungi saja Feedjit dan lihat empat widget apa saja yang tersedia.
  9. LineBuzz – Komentar dalam widget inline untuk Blog Anda. Widget ini sangat berguna bagi blog yang memiliki frekuensi di atas 900 Mhz tinggi dalam menerima komentar, sehingga memudahkan berkomentar jika terjadi diskusi yang berkepanjangan *waaah keren euy*. Hanya sayang, pengunjung harus terdaftar LineBuzz dulu untuk berkomentar *bikin berabe juga*
  10. Flixn – Jika kompi atau laptop Anda terpasang webcam, maka widget ini bisa digunakan untuk memperlihatkan ekspresi “narsis” Anda langsung melalui blog Anda *heuheu* . Jadi pengunjung blog tidak hanya membaca postingan Anda tapi bisa menyaksikan “konser” Anda didepan monitor, mirip webcam yahoo.
  11. 3Jam – Widget ini memudahkan pengunjung blog untuk berinteraksi dengan Anda dengan mengirimkan SMS pada henpun Anda tanpa mereka tahu nomor HP Anda.
  12. Jaxtr – Seperti halnya widget 3jam di atas, dengan menggunakan widget Jaxtr ini, pengunjung blog bisa menghubungi HP Anda tanpa mereka tahu nomor HP Anda. *nomor HP Anda dijamin kerahasiaannya*
  13. LinkedInABox – Menampilkan profile Anda di LinkedIn. Dan widget ini sangat cocok untuk blog personal.
  14. Box Widget – Dengan widget ini, memudahkan pengunjung blog Anda untuk mengupload file ke tempat penyimpanan online box.net melalui widget box.net pada blog Anda.
  15. Price of gas – Menampilkan harga bahan bakar kendaraan bermotor secara online (US$), kalo di Indonesia mungkin seperti harga Bensin premium, pertamax dan solar. “sangat cocok” untuk pengunjung blog Anda yang mobilitasnya tinggi. *terasa aneh* tapi kalo blog Anda memang membahas masalah gas bumi, bahan bakar dan yang sejenis maka widget ini sangat cocok, lagian tidak perlu mendaftar hanya mengcopas scrift yang disediakan Gas-Cost.Net.
  16. iBegin Weather Widget – Menampilkan laporan cuaca untuk wilayah Kanada dan Amerika. Seperti widget Price of Gas di atas widget ini hanya cocok untuk blog yang memang membahas masalah yang sama.
  17. ClockLink – Sepertinya widget ini yang paling banyak diminati dan digunakan para blogger yang peduli dengan manajemen waktu *ekhm* seperti namanya clock, widget ini menampilkan petunjuk waktu atau jam pada blog Anda.
  18. Film Loops – Menampilkan kesimpulan filem terakhir yang Anda tonton melalui account FilmLoops Anda.
  19. Daily Painters – Widget ini sangat cocok bagi Anda yang berjiwa seni tinggi karena widget ini menampilkan lukisan-lukisan dari pelukis terkenal di dunia.
  20. WhoLinked – Memperlihatkan kepada pengunjung blog Anda situs-situs yang telah melink pada blog Anda. tidak perlu mengupdate karena WhoLinked ini secara teratur mengupdate sendiri web/blog yang melink blog Anda.
  21. Criteo AutoRoll – Widget ini memperlihatkan link menuju blog-blog yang sehaluan dengan blog Anda. Sehaluan…? Secara…! Heuheu.
  22. Calender – Berbeda dengan wordpress yang sudah mempunyai widget ini di dalamnya, untuk pengguna blogger widget kalender belum tersedia, oleh karenanya jika Anda ingin menampilkan kalender maka widget satu ini pantas di perhitungkan.
  23. Bitty Browser – Menampilkan web browser “mini” pada sidebar blog Anda. Tapi mesti hati-hati sama yang namanya “mini” ada rok mini, metro mini, dan mini-mini yang lainnya… *beuh ga nyambung*
  24. Leafletter – Ini juga sama masih masalah mini, widget ini membuat website mini dan menyimpannya pada blog Anda.
  25. WikiSeek – Menampilkan widget untuk pencarian pada Wikipedia.
  26. FeedCount – Menampilkan jumlah pengunjung blog Anda melalui banner kecil dan widget ini berhubungan dengan account feedburner Anda.
  27. Technorati Link Count – Menampilkan reaksi jumlah link yang menuju blog Anda dari salah satu directory blog terbesar dan terpopuler abad ini… dialaaaaaaah Technoraaaaati. *juara tinju dunia kita* halaaaah.
  28. MyPageRank – Inilah cara lain untuk sombong menunjukkan betapa hebat dan bermanfaatnya blog Anda dengan menampilkan Ranking Google atau Google PageRank (PR). Penilaian PR google ini seperti saat kita SD dulu ada rangking 1 sampe 10, bedanya PR yang baik menurut google itu yang lebih besar alias 10, kalo baru satu berarti belum besar-besar amat blog Anda.
  29. CheckPageRank – Pilihan lain untuk menampilkan PR blog Anda, namun kelebihannya widget ini menampilkan juga ranking Alexa.
  30. 30. Counter Statistic – Bagi Anda yang ingin melihat jumlah pengunjung Anda sehari-hari, maka widget ini adalah salah satu yang menyediakan fasilitas tersebut.
  31. Web/Blog Counter – Widget ini datangnya dari Histats.Com yang memungkinkan Anda bisa melacak pengunjung datang dari mana saja, lewat pintu mana saja, dan menghitung jumlah pengunjung blog Anda sehari-hari berapa, referer dari blog mana saja, dan jika melalui search engine semisal google, yahoo, msn menggunakan keyword apa. Jika Anda ingin melihat IP Address pengunjung blog Anda, widget histats ini yang bisa saya rekomendasikan.
  32. BlinkxIt – Widget mantab sangad karena menampilkan banner kecil dibawah setiap postingan blog Anda, ketika banner BlikxIt itu di klik maka keluar mini popup seperti snapshot dan menampilkan video yang berhubungan dengan postingan blog Anda.
  33. Skype button – Seperti widget menampilkan status online YM pada blog Anda, widget ini pun hampir sama cuma bedanya status online/offline pada account skype Anda yang ditampilkan.
  34. RockYou Horoscope – Saya tidak menganjurkan widget ini pada blogger muslim, soalnya ini berupa ramalan yang sudah jelas-jelas dilarang oleh agama kita sodara-sodara! Konsekuensinya jika Anda percaya ramalan maka 40 hari shalat Anda tidak diterima *mode galak* Heuheu…
  35. Bravenet Horoscope – Seperti halnya widget di atas, bravenet pun menyediakan widget horoscope untuk blog Anda.
  36. del.icio.us Tagometer – Widget ini menampilkan berapa banyak pengguna del.icio.us membookmark blog Anda.
  37. 37. del.icio.us Linkrolls – Widget ini menampilkan bookmark terakhir Anda dari del.icio.us.
  38. 38. Timelines – Perlu membuat timeline untuk blog Anda? Maka widget cukup mudah digunakan, hanya perlu memasukan RSS blog Anda lalu memasukkan ukuran lebar dan tingginya.
  39. PollDaddy – PollDaddy memberikan Anda kemudahan membuat sebuah poling atau survey interaktif padamu negeri dengan theme yang sangat cantik dan menawan hati tanpa batas waktu yang harus memisahkan antara kita berdua, biar langit dan bumi yang menjadi saksi cinta suci nan tulus kita berdua.
  40. Vizu – Pilihan widget lain untuk membuat poling pada blog Anda, kelebihannya widget ini cocok dengan platform blog manapun.
  41. AnswerTips – Memperlihatkan jawaban dari Answers.com untuk berbagai macam istilah yang terdapat pada blog Anda *berguna jika pengunjung blog Anda adalah mas tukul*. pis mas… Heuheu.
  42. AnswerBoxes – Masih widget dari Answer.Com hanya saja widget ini memberikan kesempatan pada pengunjung blog Anda untuk memasukan istilah yang tidak dimengerti dan mendapat jawaban segala risau hatiku dari Answer.Com.
  43. Now Playing – Jika Anda ingin sharing playlist musik yang sedang Anda dengarkan dan ingin agar pengunjung blog Anda juga mendengarkan, nah Signamp menawarkan widget ini, biar signamp yang melakukan trik bagaimana hal itu mungin terjadi.
  44. BuzzBoost – Menampilkan headline dari RSS FeedBurner blog Anda pada blog Anda sendiri ataupun blog Anda yang lain atau juga pada blog teman Anda atau mungkin blognya sodara Anda atau juga pada blognya dia, mereka dan dirinya. *jangan maksa deh*
  45. LibraryThing – Tampilkan buku terakhir yang telah Anda baca wahai kutu buku!
  46. Plaxo Address Book – Izinkan pengunjung setia yang telah Anda percayai untuk mengakses buku tamu mereka langsung dari blog Anda.
  47. AuctionAds – Widget yang menampilkan pelelangan barang dari eBay, dan memberikan kesempatan pada untuk mendapat persentase *uang denger gitu loh* dengan catatan pengunjung blog Anda membeli barang lelang tersebut.
  48. aStore – Hampir mirip dengan AuctionAds di atas, hanya saja widget ini datangnya dari Amazon. Widget ini memungkinkan Anda menampilkan “warung sederhana” tapi jika ada yang beli lewat warung Anda tersebut Anda mendapatkan keuntungan dari Amazon. Btw, sudah daftar amazon belum? Kalo belum Klik Disini untuk daftar dan langsung buat “warung sederhananya”. Heuheu.
  49. Deal of The Day – Masih dari Amazon ini merupakan widget paling anyar yang dirilis amazon. Yang menarik dari widget ini adalah diskon besar-besaran yang ditawarkan untuk pengunjung blog Anda. Dan jika ada yang membeli barang dari widget tersebut tentu Anda mendapat persenan dari amazon, lumayanlah buat beli kacang goreng. Heuheu.
  50. Plazes – Widget ini menampilkan dimana posisi Anda, apakah sudah PW atau belum…? Kalo belum PW cari dulu deh tempat yg nyaman buat ngeblog biar PW . Nah widget ini menampilkan lokasi peta dimana kamu berada. *nyambungkah?*
  51. Stockalicious – Perlihatkan portfolio Anda dengan widget ini, dan sharing dengan blogger lain. Biar semua orang tahu berapa banyak dana yang telah Anda keluarkan untuk ngeblog. *mudah2an ada yg mau nyumbang* heuheu.
  52. Yahoo! For Good – Widget ini untuk membuat “kotak amal” dan akan didonasikan kepada yang berhak menerimanya. *kata Yahoo* Jadi bagi Anda yang berjiwa sosial, rasanya widget ini perlu, anggap saja blog Anda warung atau toko yang menerima penitipan kotak amal. ^_^
  53. Giftspace – Sahabat ataupun teman blogger akan memberi hadiah di hari Ultah Anda tapi mereka tidak tahu harus membeli hadiah apa yang sekiranya Anda inginkan. Nah melalui widget ini biarkan mereka tahu kado apa yang sebenarnya Anda inginkan. *meski diberi nawar boleh donks* heuheu.
  54. MixMap – Dari widget ini Anda bisa melihat pengunjung profile MySpace Anda dari sebuah Peta.
  55. Google Map Widget – Perlihatkan pencarian pada peta google dari blog Anda.
  56. Google Video Search – Tampilkan form pencarian video dari video pilihan pada blog Anda.
  57. This Day in History – Widget ini menampilkan cuplikan bahwa hari ini ada sejarah apa pada masa lalu.
  58. Shoutbox – Fungsi shoutbox adalah untuk menampung pesan singkat teman atau para blogger yang tengah blogwalking. Untuk shoutbox banyak pilihan yang bisa Anda gunakan diantaranya, Shoutmix, Cbox, atau kalo Anda berorientasi nasionalis dan cinta produk dalam negeri Anda bisa memilih Oggix. Dan awal 2008 ini oggix pun meluncurkan versi blognya, jika Anda ingin berpindah layanan atau sekedar mencoba blognya oggix silahkan daftar. Pssst jangan bilang kalo saya udah nyoba blognya oggix.

Sumber :http://sarimbi.wordpress.com/


Sharing is caring ^_^ # Auddrey

Template Website Gratis

freewebsitetemplates

sekarang kita gak perlu pusing pusing dalam membuat desain website.
memikirkan pola desain, olah gambar photoshop, dan lain sebagainya.
karena banyak sekali template website gratis tersedia, tinggal download.
beberapa template website gratis

1. http://www.freewebtemplates.com
2. http://www.freelayouts.com
3. http://www.templatesbox.com
4. http://www.freesitetemplates.com
5. http://www.steves-templates.com
dalam setiap template, biasanya terdapat screenshot untuk memudahkan dalam melihat tampilan utama website.
komponen yang kita perhitungkan ketika mencari template yang bagus.
1. file css(cascading style sheet) yang harus tersedia.sehingga memudahkan dalam
melakukan editing.
dengan CSS, desain juga lebih efisien dan terjamin.
2. mencari desain yang sesuai dengan kebutuhan. sehingga lebih memudahkan dalam
menata ulang desain halaman sesuai keinginan.
3. tag penjelasan dalam struktur penulisan web. bagi pemula seperti saya mungkin akan memakan banyak
waktu untuk merubah dan memodifikasi.untuk memudahkan kita bisa memakai editor web, seperti dreamweaver.
4. terlalu banyak gambar, juga mempengaruhi waktu loading dari website. walaupun bagus
tetapi faktor ini juga harus diperhitungkan.
semoga bermanfaat.

sumber : kopi-paste.com

Sharing is caring ^_^ # Auddrey

75 PSD Template Website Company Gratis

Ada sekitar 75 psd web template company yang bisa di download secara gratis, mungkin ini bisa membantu sebagai contoh layout web dan sebagai inspirasi desain template web company. berikut ini adalah 75 preview template yang bisa anda download.

#Template 001

#Template 002

#Template 003

#Template 004

#Template 005

#Template 006

#Template 007

#Template 008

#Template 009

#Template 010

Untuk Lebih Lengkapnya silahkan Download disini


Sumber : kopi-paste.com


Sharing is caring ^_^ # Auddrey

Penjelasan Tentang Plug-ins Photoshop

Apakah yang dimaksud Plug-in, Plug-in adalah suatu tambahan fitur dari pihak ketiga untuk mengupgrade kemampuan Photoshop anda. Sifatnya sama seperti anti virus yang setiap saat bisa di up-date dan di instal ke photoshop anda. Dengan menambah plug-ins maka akan semakin memudahkan anda dalam mendesain maupun menciptakan sesuatu yang baru serta membuat desain menjadi semakin simple dan cepat....


Macam - macam Plug-ins pada Photoshop:
Sebenarnya ada banyak namun yang terpenting adalah 2 plug-ins ini

- Plug ins untuk BRUSH
Dengan Plug-ins brush maka koleksi BRUSH Tool anda akan semakin banyak

Contoh Plug-ins untuk Brush - Tree Brushes By BlazteR [JavierZhX].abr

Gambar BRUSH di atas tidak akan ada pada default Photoshop kecuali kita sendiri menambahkannya


- Plug-ins untuk FILTERS
Contoh: Reflection Filters - dengan plug-ins tersebut maka kita dapat membuat gambar dengan efek refleksi lebih cepat...


Cara mencari Plug-ins Photoshop
=====================

Sangat mudah karena kita hanya tinggal browsing di Google Services dan mengetikkan kata kunci yang tepat seperti: Photoshop Plug-ins atau Plug-ins for Photoshop


Tutorial Selanjutnya!!!
================
Bagaimana Cara Menginstal atau Load Plug-ins BRUSH ke Photoshop
Misalkan anda telah mendownload suatu plug-ins maka tinggal kita Load saja,,,
Plug-ins berekstensi *.abr

Penjelasan:
Jadi Klik BRUSH TOOL kemudian klik panah segitiga kecil sehingga muncul pilihan menu dan pilih Load Brushes lalu terakhir cari direktori tempat anda mendownload Plug-ins dan pilih Load

Sumber : ilmugrafis.com
Sharing is caring ^_^ # Auddrey

Seleksi Objek pada Photoshop - Select - Deselect - Inverse

Mungkin bagi para desainer grafis yang sudah professional dalam mengolah Photoshop, Coreldraw, dan lainnya telah mengetahui apa yang dimaksud seleksi pada object, Deselect, maupun Inverse. Tapi bagi mereka yang pemula baru belajar dan ingin belajar maka tidak ada ruginya membaca penjelasan ini...

Ok, sekarang kita mulai dengan apa yang dimaksud

1. Select atau Seleksi pada Objek
Select / Seleksi pada object adalah pengambilan area atau bagian tertentu pada objek sesuain dengan yang kita inginkan,
Beberapa alat untuk menyeleksi yaitu:

Standart Selection (Untuk Objek yang bersudut)

- Rectangular Marque Tool = Untuk menyeleksi dengan bentuk Kotak
- Eliptical Marquee Tool = Untuk Menyeleksi dengan bentuk bidang Lingkaran
- Single Row Marquee Tool = Menyeleksi 1 Baris Secara Horisontal
- Single Column Marquee Tool = Menyeleksi 1 Kolom Secara Vertical

Dinamic Selection (Untuk Objek yang tidak bersudut)

- Lasso Tool = Menyeleksi bidang layaknya lasso dengan lebih leluasa dan sesuai dengan keinginan
- Polygonal Lasso Tool = Menyeleksi dengan menghubungkan garis - garis poligonal
- Magnetic Lasso Tool = Seperti halnya Polygonal Lasso Tool namun dengan sedikit kecanggihan dan kemudahan dalam seleksi object yang tidak bersudut

Misalkan:
Pada gambar ikan di atas kita ingin menyeleksi bagian 2 ikan lumba - lumba di tengah maka yang paling tepat sebaiknya menggunakan Dinamic Selection

Garis hitam putih tersebut menunjukkan area seleksi jadi kita akan bekerja dengan area seleksi jika mengaktifkan mode seleksi

2. Desellect ( CTRL + D )
Perintah Desellect adalah perintah untuk membatalkan atau mengakhiri proses seleksi - Dengan kata lain keluar dari mode seleksi sehingga memungkinkan kita untuk menyeleksi object yang lain
Hal ini berkaitan dengan Tutorial: Foto Hitam Putih Menjadi Berwarna

3. Inverse ( CTRL + Shift + i )
Inverse adalah membalik area seleksi misalkan kita menjalankan inverse setelah menyeleksi gambar ikan lumba - lumba yang ada di tengah maka wilayah seleksi area kita akan berubah tidak lagi pada ikan lumba lumba tersebut melainkan pada gambar di luar area seleksi lumba lumba
Gambar:

Area Seleksi Berubah menjadi di luar area seleksi lumba lumba

Ok semoga penjelasan di atas bermanfaat


Sumber : ilmugrafis.com
Sharing is caring ^_^ # Auddrey

Mengenal Style Pada Photoshop

Hai teman - teman lama tidak menerbitkan tutorial, senang rasanya bisa berbagi tutorial Photoshop kembali. Kali ini kita akan membahas masalah Style dalam Photoshop, dengan Style Photoshop kita bisa membuat banyak kreasi seperti bingkai / frame foto, banner, efek foto, dll...

Ok tanpa berlama - lama mari kita mulai, pertama adalah memunculkan jendela Style
Caranya:

Pilih Window - Style (Dalam Hal ini Style Harus Sudah TerCENTANG)

Hasilnya:

Gambar di atas adalah jendela STYLE

Kita bisa memilih macam - macam Style sesuai dengan yang disediakan

Ok, Sebagai Contoh:
Coba kita menggambar kotak dengan menggunakan Rectangle Tool, kemudian pilih / klik style yang diinginkan. Disini saya mencoba beberapa Style diantaranya:


Seperti yang telah saya katakan sebelumnya, dengan sedikit kreasi kita bisa membuat efek - efek menarik lainnya:
diantaranya adalah FRAME FOTO
[+] Klik gambar untuk memperbesar ukuran
mmmm... Bautiful Girl in Chromed Frame

Ok bagi kalian yang ingin mengetahui bagaimana cara membuat Frame Photo seperti di atas... Silahkan klik link di bawah ini...

Membuat Chrome Frame Dengan Style Photoshop --- Foto Efek

Semoga penjelasan di atas bermanfaat

Terima Kasih


Sumber: ilmugrafis.com
Sharing is caring ^_^ # Auddrey

Mengatur Ukuran Kanvas atau Lembar Kerja

Banyak Sekali pertanyaan tentang bagaimana membuat pas foto atau bagaimana cara pengaturan agar ukuran gambar sesuai dengan keinginan kita...

Caranya simple saja yaitu dengan mengatur page setup layaknya pada microsoft word atau semacamnya...

Kuncinya terletak pada setting berikut:

1. Saat kita pertama kali membuat lembar kerja baru atau kanvas baru dalam photoshop ( CTRL + N )
maka akan muncul jendela tampilan seperti ini:

Ket:
No.1 - Name = Adalah nama dari kanvas
No. 2 - Preset = Adalah ukuran (standart) yang disediakan oleh photoshop seperti

Nah ini dia... ada buat pas foto 2 x 3, 4 x 6
Trus A4, A3, B5... dll
Untuk 3 x 4 bisa dibuat sendiri caranya dengan mengutak atik

Width dan Height - ubah dari ukuran pixel ke cm ( centimeter ) trus masukin deh angka 3 dan 4 nya
jadi foto 3 x 4

Gunakan move tool dan transform tool untuk memindahkan / mengedit dan mengepaskan ukuran gambar dengan kanvas

hehehe... mantab...

Semoga penjelasan di atas bermanfaat

Sumber: Ilmugrafis.com
Sharing is caring ^_^ # Auddrey

Mengenal Resolusi Photoshop

Pada pembuatan document baru untuk Photoshop secara default adalah color mode, RGB resolusi adalah 72 pixel/inch. Bagi disain pemula mungkin belum begitu mengerti tentang color mode RGB resolusi tsb. karena dengan resolusi 72 pixel/inch akan berakibat image kurang maximal untuk cetak/offset dengan Lpi 150/175. Untuk standar cetak pada umumnya file Photoshop adalah resolusi 300 pixel/inch, bukan per cm untuk pemakaian file 100%.

resolusi Photoshop
Perbandingan Resolusi 72 dpi dengan 300dpi

Memang untuk tampilan di monitor untuk file resolusi 72 dpi atau 300 dpi tidak begitu kelihatan, tapi untuk hasil cetak 150/175 lpi jauh berbeda. Sedangkan untuk color mode RGB dengan CMYK akan menghasilkan warna yang berbeda pada hasil cetaknya. Dengan begitu kalau misalkan anda disain mungkin kalau boleh saya sarankan untuk file Photoshop color mode CMYK dan Resolusi 300 DPI.
Semoga penjelasan di atas bermanfaat

Terima Kasih

Semoga Bermanfaat


Sumber: ilmugrafis.com
Sharing is caring ^_^ # Auddrey

Pemasangan dan Penggunaan Brush Photoshop Lengkap

Penjelasan Tentang Brush Standart Photoshop
Sebelum kita mulai dapat saya jelaskan sedikit disini, sebetulnya Adobe PHOTOSHOP telah menyediakan Fitur Brush yang Standart ( bawaan / Default ) namun sebagai seorang desainer Grafis hal tersebut akan sangat membatasi imajinasi dan kreativitas men-Desain dan Berkarya secara maksimal.

Cara Pemakaian brush Photoshop:
1. Untuk memakai brush photoshop maka kita harus mengKlik kanan ikon Brush yang bergambar
tutorial photoshop pada Tool Box, atau bisa dengan menggunakan short cut yaitu dengan menekan Tombol (B) pada keyboard
Jika masih belum tahu dimana letak tool box maka silahkan lihat Layout Photoshop

2. Lalu setelah itu aktifkan preview brush dengan dengan menekan panah di samping brush,
tutorial photoshop
panah bawah yang dilingkari hitam, nah sekarang akan muncul standart brush yang disediakan photoshop (standart Brush)

Pemasangan dan Penambahan Brush Pada Photoshop
Setelah membaca penjelasan di atas penulis berharap sekarang para pembaca bisa memahami apa yang dimaksud Brush Standart Photoshop. Namun tenang saja karena Adobe Photoshop bisa menerima Plug-in Brush dari pihak luar dalam hal ini adalah menambahkan Brush yang lain dalam Photoshop anda.

Caranya:
Sebelum mencoba silahkan download Contoh Brush ( FLOWER BRUSH ) yang akan kita gunakan untuk latihan
File Tersebut bisa ilmugrafis.com
klik: Photoshop Tools
Simpan dalam komputer dan Extract ,
tutorial photoshop
nama file Brush tersebut adalah "flower brush-3.abr"
( file Tersebut adalah plug-in Brush untuk menambah koleksi brush photoshop )

Ok sekarang akan saya jelaskan cara pemasangannya hingga Brush tersebut dapat digunakan
Caranya:

1. Copy File "flower brush-3.abr" yang telah kita download dari IG Photoshop Tool dan Paste pada Direktori Folder Brushes Photoshop Anda
Secara Default letaknya ada di:
C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Brushes\ (Paste Disini)
tutorial photoshop

2. Buka Photoshop anda dan Brush Photoshop akan Ter-LOAD / Terpasang secara otomatis
Untuk mengganti standart brush di photoshop tersebut kita harus meload / mengaktifkan brush yang diinginkan. Caranya klik panah maka akan muncul menu pilihan:
tutorial photoshop
Disini brush yang akan saya aktifkan adalah Flower Brush-3 jadi klik pada Flower Brush-3 Tersebut.
Sekarang tinggal pilih brush dan klik pada kanvas photoshop
tutorial photoshop
Brush Dengan Tema Bunga - Hipp.. Hippp Horaaayyy ;P

Sekarang akan saya jelaskan bagaimana cara Pewarnaan Brush dan cara Mewarnai Brush

Ok Sekarang tinggal bagaimana cara anda berkreasi dengan BRUSH PHOTOSHOP tersebut

Contoh Karya Penulis dengan Brush
tutorial photoshop [+] Zoom image




Sumber: ilmugrafis.com
Sharing is caring ^_^ # Auddrey

Copy dan Paste Selection Publish

Tutorial Photoshop kali ini mengenai copy dan paste selection, mungkin ini adalah pelajaran dasar tapi hal ini diperlukan bagi pemula yang baru mengenal photoshop agar lebih paham apa yg dimaksud seleksi dan layer
Tutorial ini merupakan kelanjutan dari sekian tutorial dasar yg disuguhkan disini sebagai pengembangan dari proses seleksi dan pengenalan layer

Sesuai dengan pengalaman penulis dalam hal ini saya pribadi ^_^ dalam menggeluti Photoshop pertama kali memang kesulitan dalam membuat bangun kotak lingkaran maupun bangun lainnya. inilah yg membedakan antara bermain photoshop dan coreldraw , di coreldraw kita bisa dengan mudah membuat bangun bangun vector dengan hanya menggunakan rectangle tool namun di photoshop kita harus pandai - pandai memanfaatkan seleksi (selection).

Seleksi (selection) merupakan magic yang harus dikuasai dalam photoshop apapun dan bagaimanapun caranya. Keahlian seorang master photoshop dimulai dari tahap ini.
Demikian gambaran tentang photoshop semoga bermanfaat bagi para pembaca IG (ilmu Grafis) ^_^

Nah saatnya pengenalan cara pembuatan bangun (kotak) dengan memanfaatkan selection tool

1. Buka Photoshop , disini sy menggunakan photoshop cs4 namun hal ini bukan masalah bagi anda yg masih menggunakan photosohp 7 , CS , CS2 maupun CS3 karena teknik ini bisa diaplikasikan di photoshop manapun

2. Buat lembar kerja baru
Caranya: File >> New (CTRL + N)
Langsung saja tekan OK menurut default photoshop anda

3. Sekarang Buat NEW LAYER (CTRL + SHIFT + N)
nah inilah tadi yg membedakan photoshop dan coreldraw, di corel kita tidak perlu repot membuat layer baru, namun jika di photoshop anda harus membuat layer baru agar gambar yg anda punya tidak tercampur dengan gambar yang lainnya.
Contoh:
buat seleksi dengan
tutorial photoshop
Rectangular marquee tool (M) dan taruh pointer ke kanvas ( Lembar kerja anda)
Tahan Klik kanan dan terbentuklah seleksi yang ditandai dengan bintik - bintik hitam putih
tutorial photoshop

Klik Fill Tool
tutorial photoshop
Lalu klik seleksi yang anda buat tersebut
taraa akhirnya jadi berwarna
tutorial photoshop
tekan CTRL + D untuk menghilangkan seleksi / bintik hitam putih tersebut

Nah disini kita bisa lihat bahwa kita mempunyai dua buah layer:
tutorial photoshop
yang artinya bangun kotak yang kita buat akan memiliki kebebasan bergerak yang tinggi (FREE)

4. ok sekarang sesuai judul tutorial ini maka kita akan membahas mengenai membuat copy (cara mengcopy) dari seleksi agar bangun yang kita buat simetris
buat seleksi lagi dengan
tutorial photoshop
Rectangular marquee tool (M)
kira - kira seperti ini
tutorial photoshop
Lalu Tekan CRTL + C (ini adalah perintah untuk meng COPY) dilanjutkan ke CTRL + V (perintah untuk memPASTE hasil copy)
VIOLA
tutorial photoshop
kita dapatkan bangun yang dimetris

Dengan teknik diatas anda bisa membuat berbagai hal, contohnya bendera INDONESIA:
tutorial photoshop


Sumber: ilmugrafis.com
Sharing is caring ^_^ # Auddrey

Seleksi dengan Color Range


1. Buka Photoshop , disini sy menggunakan photoshop cs4 namun hal ini bukan masalah bagi anda yg masih menggunakan CS , CS2 maupun CS3 karena teknik ini bisa diaplikasikan di photoshop manapun

2. Open image yang ingin di seleksi (file - Open)
tutorial photoshop
Saya menggunakan image ini "gantungan kunci" yang bisa di download disini -> download file latihan | klik save as dan simpan ke komputer anda

3. Kemudian pada main menu pilih Select >> Color Range
Maka akan anda akan mendapatkan hasil gambar seperti di bawah ini
tutorial photoshop

4. Setelah itu, klik warna dasar yang ingin di seleksi
Disini saya menggunakan warna dasar putih, klik menggunakan eyedropper yg sudah tertera di color range tersebut.

Jika sudah anda akan mendapat hasil seperti gambar di bawah ini.
tutorial photoshop
lalu klik OK

kemudian anda akan mendapatkan area seleksi seperti gambar di bawah ini.
tutorial photoshop

5. Jika sudah , tingal di Inverse saja.,
SELECT > INVERSE atau tekan pada keyboard tombol -> SHIFT + CTRL + I
Hal ini dilakukan untuk membalik proses seleksi sehingga yang sekarang terseleksi adalah gantungan kunci tersebut

Jika sudah maka anda akan menemukan area select yang berbeda, tampak seperti gambar di bawah..
gantungan kunci

Tahap selanjutnya anda tinngal membuat double layer,Atau tekan “ CTRL + J “
Dan anda akan mendapatkan 2 buah layer, tampak seperti gambar di bawah .
tutorial photoshop

6. Tahap akhir anda Hide layer Background
Daaaaaan… tralaaaa.., anda mempunyai hasil seleksi yg sudah jadi. Tanpa harus melakukan seleksi berulang kali dengann menggunakan Magic Wand Tool.
Lebih menghemat waktu :)
gantungan kunci
Gantungan kunci yang terseleksi (tanpa background)


Sumber: ilmugrafis.com
Sharing is caring ^_^ # Auddrey