Showing posts with label desain web. Show all posts
Showing posts with label desain web. Show all posts

Tuesday, 27 February 2018

Apa Pengertian Warna Kontras dan Contoh Gambarnya | ristofa.com

Tuesday, February 27, 2018 8


ristofa.com - Apa itu kontras, orang awan pasti akan bertanya hal tersebut. Pengertian kontras sendiri adalah perbedaan yang nyata antara yang satu dengan yang lain. Contohnya Tinggi dan Rendah, Besar dan kecil dan lain-lain.

Begitu pula pengertian warna kontras, Perbedaan yang nyata antara warna yang satu dengan warna yang lain. Contohnya warna biru dan merah, jika disandingkan akan terlihat jelas batas antara kedua warna tersebut.

Jadi disebut warna kontras apabila sebuah warna disandingkan denga warna-warna yang lain. Pada lingkaran warna Brewster, posisi warna yang saling berhadapan itu adalah pasangan warna kontras. Tapi menjadi pasangan kontras tidak harus pada posisi yang berhadapan atau berlawanan. Karena dipengaruhi juga oleh spektrum cahaya atau komposisi warna yang membentuknya. 

Untuk lebih jelasnya lihat gambar berikut



Berikut contoh warna yang kurang kontras dan cukup kontras






Tags # desain web # Photoshop # warna Continue Reading
By di 8 comments:
Label: , ,

Tuesday, 21 March 2017

Kategori Umum dan Jenis Huruf Dalam Tipografi | ristofa.com

Tuesday, March 21, 2017 0
Kategori Umum dan Jenis Huruf Dalam Tipografi | ristofa.com


Tipografi sangat penting dalam dunia desain grafis.Tipografi dalam desain grafis merupakan satu elemen yang sangat krusial dan juga merupakan elemen yang paling sering dipakai untuk melengkapi suatu desain. Jika perhatikan desain di sekeliling kita, desain poster, desain suatu produk, desain iklan, semua mengandung unsur tipografi. Dan kali ini saya akan membahas tentang klasifikasi huruf dalam tipografi.

Seperti yang kita tahu, desain grafis merupakan suatu bentuk komunikasi visual. Sehingga unsur yang ada di dalamnya juga harus memancarkan informasi yang ingin disampaikan. Hal ini berlaku untuk tipografi. Pemilihan tipografi yang benar akan membantu menyampaikan informasi yang ingin disampaikan secara tepat.

Seni tipografi adalah sebutan bagi tipografi dalam desain grafis. Seni tipografi menitik beratkan pada pengaturan huruf sebagai elemen utama dalam desain yang ingin dibuat.

Umumnya tipografi ada beberapa kategori, antara lain :

Roman atau Serif | ristofa.com
Contoh huruf tipografi - Roman


1. Roman atau Serif


Huruf di keluarga Roman memiliki ciri khas tersendiri yang muda dikenali. Huruf Roman memiliki ketebalan dan ketipisan pada setiap garis di huruf – hurufnya. Semua huruf yang ada di bawah naungan kategori Roman memiliki ciri khas klasik, anggun, tegas, lemah gemulai dan feminim. Font ini sangat populer dikalangan masyarakat karena jenis font Serif biasa digunakan untuk Hardcopy atau hasil cetak media offline, seperti buku, majalah, koran, dan sebagainya.

Keluarga huruf Roman sudah ada sekitar abad 11 atau 12. Karena itu, huruf Roman merupakan salah satu kategori huruf yang paling tua. 

Jenis font yang ada di kategori huruf Roman antara lain Bodoni, Georgia, dan Times New Roman.

Kesan yang ditimbulkan oleh kategori huruf ini adalah Feminim, Klasik, Lemah Gemulai.

Egyptian atau Slab-Serif | ristofa.com
Contoh huruf tipografi - Egyptian


2. Egyptian atau Slab-Serif


Huruf yang berada termasuk dalam kategori keluarga Egyptian memiliki ciri huruf seperti papan. Berbeda dengan kategori Roman yang memiliki tebal tipis di hurufnya, Egyptian memiliki ketebalan yang hampir sama di setiap hurufnya. 

Jenis font ini merupakan bagian dari jenis font Serif, hanya saja siripnya lebih tegas dan lurus menyerupai tongkat. Mungkin font ini cocok digunakan untuk produk yang berhubungan dengan lelaki. 

Jenis font yang ada di kategori Egyptian adalah Rockwell dan Typo Slab – Serif.

Kesan yang ditimbulkan oleh kategori huruf ini adlah kokoh, kuat, kekar, dan stabil.

Sans Serif | ristofa.com
Contoh huruf tipografi - Sans Serif


3. Sans Serif


Huruf yang meruakan kategori keluarga Sans Serif hampir mirip dengan huruf dengan kategori keluarga Roman, hanya saja jenis huruf ini tidak memiliki sirip di ujung. Ketebalan hurufnya pun tidak tebal tipis, melainkan solid. Bisa dibilang huruf di kategori Sans Serif merupakan versi modern dari Roman. 

Jenis font yang ada di kategori Sans Serif adalah Arial, Century Gothic, Futura, Helvetica, Lucida Grande, Trebuchet MS, dan Verdana.

Kesan yang ditimbulkan jenis huruf ini adalah modern, kontemporer, dan efisien. 

Script | ristofa.com
Contoh huruf tipografi - Script


4. Script


Sama seperti namanya, huruf yang berada di bawah kategori ini memiliki rupa layaknya tulisan tangan Handwriting karena bentuknya yang menyerupai goresan tangan yang dikerjakan dengan pena, kuas, atau pensil tajam. Font ini banyak digunakan dalam tipografi tulisan tangan.

Biasanya huruf di bawah kategori ini memiliki ciri khas miring ke kanan. Biasanya font jenis ini digunakan untuk desain yang berhubungan dengan kemewahan, misalkan undangan pernikahan atau ucapan selamat untuk perusahaan baru dengan hiasan bunga.

Jenis font yang ada di kategori ini adalah Freestyle Script dan French Script.

Kesan yang ditimbulkan oleh kategori huruf ini adalah pribadi dan akrab. 

Miscellaneous atau Cursive | ristofa.com
Contoh huruf tipografi - Cursive


5. Miscellaneous atau Cursive


Keluarga font Miscellaneous atau Cursive biasa dikenal dengan nama fantasy font. Huruf yang berada di kategori ini tidak memiliki ciri khas atau rupa yang spesifik seperti kategori lainnya. Huruf yang berada di bawah kategori ini biasanya merupakan  pengembangan dari bentuk – bentuk yang sudah ada, hanya ditambahkan hiasan, ornament atau garis – garis dekoratif.

Font ini biasa digunakan untuk desain yang berhubungan dengan imajinasi seperti teks pada komik, produk anak anak untuk menarik pehatian mereka dengan bentuknya yang cute dan unique, dan lain-lain. 

Jenis font yang ada di bawah kategori ini sangat banyak, antara lain Comic Sans MS, Joker, dan Magneto.

Kesan yang ditimbulkan oleh kategori huruf ini adalah Dekoratif dan Ornamental.

Character Proportion | ristofa.com
Contoh huruf tipografi - Character Proportion


6. Character Proportion


Keluarga font Character Proportion memiliki ciri yang relatif mudah dikenali, yaitu memiliki lebar yang sama tidak peduli itu ‘R’ ataupun ‘J’ semuanya sama. Font jenis ini biasanya digunakan untuk pemrograman atau penyajian kode-kode HTML karena memiliki lebar huruf yang sama dan mudah dihitung spasinya. 

Contoh font Courier New.

Kesan : Canggih, Digitalis

baca juga sejarah tipografi.

Tags # Belajar Desain Grafis # desain web # Photoshop Continue Reading
By di No comments:
Label: , , ,

Monday, 20 March 2017

Cara Membuat Tombol Share Sosmed di Blogspot | ristofa.com

Monday, March 20, 2017 0
Cara Membuat Tombol Share Sosmed di Blogspot | ristofa.com

 Cara Membuat Tombol Share Sosmed di Blogspot - Bagi para blogger atau pun peselancar dunia maya pasti tidak asing dengan Sosmed. Dan untuk para blogger, pasti ingin mengenalkan atau pun mempopulerkan situs web nya ke semua orang. Salah satunya ya dengan membagikan situs nya di Sosmed.

Namun kadang di template blogger bawaan tidak ada tombol berbagi (share) ke sosmed. Untuk kalian yang mungkin ingin memasang tombol share sosmed atau pun mengganti tombol share yang sudah ada. Kali ini saya akan membuat tutorial Cara Membuat Tombol Share Sosmed pada blogspot. 

Karena share button berguna untuk memudahkan pengunjung yang ingin berbagi artikel yang bermanfaat ke jaringan sosial media mereka. Seperti Facebook, Twitter, Google plus, dan Linkedin.

Yuk langsung saja...

Buka edit template pada blogger dan cari kode berikut... 

<data:post.body/>


 Kode diatas biasanya ada 2,,, untuk mobile dan untuk dekstop. Carilah kode yang kedua, yaitu yang ada di bawah  <b:includable id='post' var='post'>.

Setelah ketemu kode <data:post.body/> yang kedua, copy kode HTML berikut ini. Lalu pastekan di bawah kode <data:post.body/>..

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-ristofa'>
<div class='share-ristofa-fb'>
<a class='share-ristofa1-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='share-ristofa1-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> </a>
</div>
<div class='share-ristofa-twitter'>
<a class='share-ristofa1-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='share-ristofa1-twitter-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a>
</div>
<div class='share-ristofa1'>
<a class='share-ristofa1-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='share-ristofa1-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>
</div>
<div class='share-ristofa1'>
<a class='share-ristofa1-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='share-ristofa1-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'></a>
</div>
</div>
</b:if>


Lalu copy kode CSS berikut dan pastekan sebelum kode ]]></b:skin>.


/* Share Sosmed Ristofa */

.share-ristofa{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.share-ristofa-fb,.tombol-berbagi{float:left;width:21%;height:inherit}
.share-ristofa-twitter,.share-ristofa1,.share-ristofa1-lk{float:left;width:21%;height:inherit;border-left:solid 1px #dadada}
.share-ristofa1-fb,.share-ristofa1-twitter,.share-ristofa1-gp,.share-ristofa1-lin,.share-ristofa1-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRVoqUczYXEqpjMrFGeW1yVrJ_QvU3ljmSfYmAIwQ7dfPIkoHU1-1T9DXxEOUpQO3TNWDUOUMrLFerNE8n43bjev0ZAV6xFdpNKtafCG5xlItrg6KprzoliYnh71qsXTVYhiZ5iShNLKz/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.share-ristofa1-fb-label{color:#2d609b}
.share-ristofa1-fb-label,.share-ristofa1-twitter-label,.share-ristofa1-gp-label,.share-ristofa1-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.share-ristofa1-twitter{background-position:0 -43px}
.share-ristofa1-twitter-label{color:#00c3f3}
.share-ristofa1-gp{background-position:0 -86px}
.share-ristofa1-gp-label{color:#f00}
.share-ristofa1-lin{background-position:0 -129px}
.share-ristofa a{color:#999;transition:all .3s;}
.share-ristofa a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.share-ristofa1,.share-ristofa-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.share-ristofa1,.share-ristofa-tw,.share-ristofa1-lk{float:left;width:48%;padding:0;border-left:0}}


Selesai. Simpan template. Lalu coba cek di salah satu postingan apakah tombol share sosmed sudah muncul di postingan Anda. Mudah bukan, Cara Membuat Tombol Share Sosmed di Blogspot.

Jika berhasil silakan share postingan ini ke sosmed Anda. Terima Kasih.

 Praktekan juga cara membuat menu navigasi dropdown ala ristofa.com. 

Tags # desain web # template # tutorial Continue Reading
By di No comments:
Label: , ,

Friday, 17 February 2017

Tips Pemilihan Warna Untuk Memulai Membuat Karya Desain Grafis | ristofa.com

Friday, February 17, 2017 8

Tips Pemilihan Warna Untuk Memulai Membuat Karya Desain Grafis | ristofa.com


Tips Pemilihan Warna Untuk Memulai Membuat Karya Desain Grafis - Kali saya akan membahas tentang suatu pokok bahasan yang biasa, namun cukup penting dalam memulai membuat karya desain grafis, yaitu pemilihan warna pada Desain kita.

Apa saja hal yang harus kita perhatikan saat memilih warna-warna pada desain kita, berikut tips-tipsnya..

1. Konsep Desain

Ketika desain sudah jadi dan tinggal melakukan pewarnaan, pasti kita telah mendapatkan suatu gambaran tentang konsep yang kita ambil untuk desain kita. Penentuan konsep ini sangat penting. Bila kita telah menentukan konsep desain kita, dan kita dapat mulai berpikir apakah desain kita ini membutuhkan warna yang colorful, monochrome, kontras, atau variasi warna lainnya. Nah, sebelum kita mulai menentukan warna pada desain kita, sebaiknya kita telah menentukan konsep desain kita ini secara matang.

2. Audiens

Desain yang kita buat sudah pasti memiliki tujuan tertentu. Misalkan saja, kita membuat desain ini untuk membuat suatu Logo Perusahaan yang memproduksi mainan anak-anak. Audiens untuk mainan anak-anak ini itu tentu saja anak-anak! Sehingga kita harus mencari tau, warna-warna apa saja yang menarik bagi anak-anak. Kebanyakan anak-anak cenderung tertarik pada warna yang colorful, jadi kita membutuhkan warna yang colorful, seperti merah, kuning, hijau, atau warna lainnya.

3. Seleksi Warna

Membuat Desain yang menarik tidak harus menggunakan seluruh warna yang ada di color chart. Sebaiknya kalau kita memilih 2 atau 3 warna yang dominan di desain kita ini. Setiap warna pasti akan saling bersangkutan, misal warna kuning dan hijau yang bersangkutan karena merupakan campuran antara warna kuning dan warna biru menciptakan warna hijau, atau warna-warna lainnya. Namun, ada baiknya bila kita memilih warna yang dekat dengan warna lainnya.

Untuk memahami warna dan cara mengkombinasikannya, kita bisa belajar menggunakan Teori Brewster.

Teori Brewster sendiri adalah teori yang menyederhanakan warna yang ada di alam menjadi 4 kelompok warna. Dan  keempat kelompok warna tersebut, yaitu: warna primer, warna sekunder, warna tersier, dan warna netral.
  • Warna Primer


warna primer | ristofa.com
Warna Primer adalah sebuah warna dasar/asli yang tidak tercampur oleh warna-warna lain,. Warna primer ini adalah warna Merah, warna Kuning dan warna Biru. Skema diatas merupakan sebuah skema warna primer menurut Teori Brewster.
  • Warna Sekunder

warna sekunder | ristofa.com
Warna Sekunder adalah hasil dari pencampuran warna primer, yang di dalam lingkaran warna, warna primer jika bertemu warna primer lainnya dan membuat warna baru dari kedua warna tersebut. Contohnya warna Merah dan Kuning akan menghasilkan warna sekunder yaitu Jingga, sedangkan warna primer kuning dan biru pasti akan menghasilkan warna sekunder Hijau, dan warna primer biru dan warna sekunder merah akan menghasilkan warna sekunder ungu. Itulah proses terjadinya warna sekunder dimana warna primer jika dicampur warna primer lainnya dengan komposisi 1:1 akan menghasilkan warna sekunder.
  • Warna Tersier


wana tersier | ristofa.com

Warna Tersier adalah hasil dari pencampuran satu warna primer dengan warna sekunder. Contohnya warna merah dan jingga akan menghasilkan warna tersier yaitu Merah kejingga-jinggan, sedangkan warna jingga dan kuning akan menghasilkan warna tersier jingga kekuning-kuningan.
  • Warna Netral
Warna Netral disini bukan berarti netral atau pun tidak tercampur warna apapun, namun warna netral ini adalah hasil dari campuran semua warna yaitu Warna Primer dan Warna Sekunder dan Warna Tersier. Warna-warna pada jenis ini cenderung tidak secerah warna-warna yang ada pada Warna Primer. Hal ini disebabkan karena warna ini merupakan hasil campuran dari semua elemen warna dengan komposisi 1:1:1.

Dan dengan memanfaatkan skema warna yang terdapat pada Teori Brewster ini, tentu kita dapat lebih mudah menentukan warna-warna mana saja yang cocok untuk desain kita. Selain itu, skema warna ini dapat membantu kita dalam menerapkan beberapa teknik pewarnaan.

Untuk tips menentukan warna silahkan baca pengertian warna harmonis.

Selamat mencoba. baca juga perbedaan RGB da CMYK.
Tags # Belajar Desain Grafis # desain web # Photoshop Continue Reading
By di 8 comments:
Label: , , ,

Wednesday, 15 February 2017

Cara Mengatasi Semua Error Pada Tes Structured Data Pada Template Blogger

Wednesday, February 15, 2017 0
Cara Mengatasi Error Pada Tes Structured Data Pada Template Blogger | ristofa.com

 Cara Mengatasi Error Pada Tes Structured Data Pada Template Blogger - bagi para blogger pemula pasti sedang semangat-semangatnya nge-blog dan otak-atik template. Dan pasti akan dites template tersebut apakah sudah bagus kecepatan loading, apakah sudah SEO Friendly dan apakah sudah lolos saat Tes Sructured Data pada webmaster tool. 

Pasti akan kecewa jika hasilnya ternyata kurang atau tidak memuaskan. Oleh karena daripada itu, kali ini saya akan membahas cara mengatasi template yang tidak lolos Tes Sructured Data.

Saat Tes Sructured Data,kadang ditemukan 9 error berikut,
  1. Error image_url
  2. Error blogId
  3. Error postId
  4. Error datePublished
  5. Error headline
  6. Error image
  7. Error publisher
  8. Error dateModified
  9. Error mainEntityOfPage

Jadi bagaimana cara mengatasinya ??? Yuk disimak !!

1. Mengatasi Error Image_url

Untuk mengatasi error image-url, cara sangat mudah. Pada edit html cari kalimat
image url
 lalu ganti dengan kalimat
thumbnailUrl
Save/simpan dan cek pada webmaster tool untuk mencobanya.

2. Mengatasi Error blogId

Untuk mengatasi error blogId juga mudah. Cari kode berikut 
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
  lalu hapus kode tersebut. biasanya ada 2 kode.

3. Mengatasi Error postId

Sama seperti no.2. cari kode 
<meta expr:content='data:post.id' itemprop='postId'/>

   lalu hapus juga kode tersebut. biasanya ada 2 kode.

4. Mengatasi Error datePublished

Untuk mengatasi error datePublished tidak perlu mencari kode-kode html. Caranya adalah dengan mengatur bahasa format dan tanggal pada blogspot.Masuk menu Stelan dan pilih bahasa dan pemformatan dan atur kolom-kolom berikut,

5. Mengatasi Error headline
Caranya dengan mengganti kata name pada tag <h1>,<h2>,<h3> dengan kata headline. Sebagai contoh ganti 
<h3 class='post-title entry-title' itemprop='name'> dengan 

 <h3 class='post-title entry-title' itemprop='headline'>

6. Mengatasi Error image

Caranya dengan menambah kode ( blok dan tekan CTRL + C pada kode berikut )
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta itemprop="url" expr:content='data:post.firstImageUrl'/>
<meta itemprop="width" content='700'/>
<meta itemprop="height" content='700'/>
</div>
</b:if>

 dibawah kode
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

7. Mengatasi Error publisher

Caranya dengan menambah kode. ( blok dan tekan CTRL + C pada kode berikut )
<div itemprop="publisher" itemscope='itemscope' itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope='itemscope' itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://www.ristofa.com/favicon.ico"/>
<meta itemprop="width" content="600"/>
<meta itemprop="height" content="600"/>
</div>
<meta itemprop="name" expr:content="data:blog.title"/>
</div>

dibawah kode dari nomor 6. Dan ganti teks hijau dengan url logo website Anda.

8. Mengatasi Error dateModified

Untuk mengatasi error dateModified caranya sangatlah mudah anda hanya perlu mencari kode dibawah ini.

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>

Cari semua kode itu lalu tambahkanlah didepannya dengan
 <span itemprop='dateModified'>
dan dibelakangnya dengan </span>. 

seperti contoh berikut,

<span itemprop='dateModified'><a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a></span>

9. Mengatasi Error mainEntityOfPage


 Caranya hanya dengan menambah kode. ( blok dan tekan CTRL + C pada kode berikut ).
<div itemscope='itemscope' itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage"/>

dibawah kode
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

 Itulah Cara Mengatasi Error Pada Tes Structured Data Pada Template Blogger. Semoga lancar. 
Tags # Belajar Desain Grafis # desain web Continue Reading
By di No comments:
Label: ,