Maskot Setyawan Berbagi

Notifications

  1. Proses Design sudah mencapai 80%, tinggal proses penambahan sedikit element serta meresponsivekan template.
  • Anime Cover Magazine

    Salam semua... Setelah lama tak posting dikarenakan kesibukan kini saya kembali posting. Kali ini saya akan membagikan file psd berupa Cover Magazine, masih dengan tema Anime tentunya.

    Design, Cover Magazine, Anime, SETYAWAN BERBAGI

    Cover Magazine ini awalnya tak sengaja saya buat, karena kemarin ada waktu luang saya pergunakan iseng-iseng memainkan photoshop dan akhirnya terciptalah sebuah sampul majalah. Untuk tampilan Cover Magazine bisa melihat gambar dibawah ini:

    Design, Cover Magazine, Anime, SETYAWAN BERBAGI


    Okelah, sampai disini dulu postingan kali ini, semoga Cover Magazine ini dapat menjadi referensi sobat sekalian. Sayounara...
  • Membuat Papan Pengumuman Sederhana pada Blog

    Tutorial, Papan Pengumuman, Blog, SETYAWAN BERBAGI
    Salam semua... Setelah sekian lama tidak posting karena masih dalam perbaikan template blog kini saya sempatkan berbagi sedikit tutorial sederhana. Dalam proses edit template saya menambahkan 1 fitur baru, yaitu papan pengumuman yang hanya berada pada Homepage. Lalu apa gunanya?... Papan pengumuman ini dapat kita gunakan sebagai pemberi informasi singkat pada pengunjung blog kita, dan tidak akan mengganggu kecepatan loading. Nah, bagi yang penasaran seperti apa tampilan dari papan pengumuman itu bisa sobat lihat dibawah ini. Selain itu untuk variasinya bisa sobat lihat di Homepage/Beranda Setyawan Berbagi.

    Notifications

    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    3. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
    4. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

    Bagaimana?... Walaupun sederhana tapi dengan css kita dapat membuatnya tampil menarik bukan?... Dan tentunya tidak memberatkan loading blog kita. Tertarik untuk mencobanya?... Silahkan ikuti tutorial dibawah ini.

    Pasang kode HTML ini di dalam tag <body>...</body>

    
    <div id="pesan">
    <div id="notif">
    <h2>
    Notifications</h2>
    <ol>
    <li>Text 1</li>
    <li>Text 2</li>
    <li>Text 3</li>
    <li>Text 4, dst</li>
    </ol>
    </div>
    </div>
    

    Lalu letakkan css ini di dalam kode <b:skin>...</b:skin> atau di dalam kode <style type='text/css'>...</style>

    
    #pesan {
    position: relative;
    width: 420px; /* Lebar papan pengumuman */
    height: 240px; /* Tinggi papan pengumuan */
    }
    #notif {
    background: #34495E; /* Warna latar belakang */
    position: absolute; 
    bottom: 0;
    padding: 15px;
    color: #ECF0F1; /* Warna text */
    border: 7px solid #1ABC9C;
    overflow: auto;
    }
    #notif h2 {
    text-transform: uppercase;
    font-family: 'arial', sans-serif; /* Jenis huruf */
    font-size: 17pt; /* Ukuran huruf */
    }
    #notif ol {
    text-align: left; /* Rata text */
    margin: 5px auto;
    padding-left: 30px;
    }
    

    Nah, bagaimana?... Cukup mudah diterapkan bukan?... Okelah, sampai disini dulu tutorial kali ini, semoga tutorial ini dapat bermanfaat bagi sobat sekalian...
  • Arti Warna Dalam Design

    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Salam semua... Kali ini saya akan repost salah satu artikel dari blog saya dulu tentang Arti Warna dalam Design. Warna merupakan salah satu elemen penting dalam Design, termasuk juga dalam design web. Sadar atau tidak setiap warna akan memberikan efek tersendiri bagi suatu design, bahkan hitam dan putih sekalipun. Kombinasi dari dua warna atau lebih juga akan berdampak pada hasil dari suatu karya design, bisa membuatnya menjadi lebih indah, bisa juga malah merusak keindahan design tersebut. Oleh karenanya pengetahuan akan arti dari masing-masing warna tersebut akan sangat membantu bagi kita sebagai seorang web designer dalam membuat sebuah karya yang bagus.

    Okelah, mari kita bahas arti dari masing-masing warna berdasarkan psikologi warna yang sering digunakan dalam design.

    1. Merah (Bold)
    Power, energi, kehangatan, panas, cinta, nafsu, marah, agresi, bahaya, berpendirian, dinamis, percaya diri, erotisme, keberanian, darah, resiko, ketenaran, perjuangan, perhatian, perang, bahaya, kecepatan, dan kekerasan.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Secara umum warna merah berhubungan dengan perasaan yang meledak-ledak atau amarah. Selain itu warna merah juga mudah menarik perhatian dan meningkatkan nafsu makan, karena itulah banyak restoran atau produk makanan yang menggunakan warna merah sebagai warna dasar atau logo mereka.

    2. Biru (Cold)
    Kepercayaan, ilmu pengetahuan, keamanan, teknologi, kebersihan, keteraturan, damai, menyejukkan, spiritualitas, kesabaran, tenang, profesionalisme, serius, kebijakan, kelembutan, kreativitas, loyalitas, kesedihan, dan ketulusan.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Biru adalah warna favorit saya, kenapa?... Biru merupakan warna yang menawan, tenang dan memberi kesan terhadap wawasan yang tinggi. Warna biru sangat baik untuk menumbuhkan loyalitas konsumen. Oleh karenanya banyak perusahaan yang menggunakannya sebagai warna dasar mereka. Selain itu di dunia pendidikan-pun juga sering menggunakan warna biru.

    3. Kuning (Aglow)
    Optimis, ceria, hangat, bersahabat, harapan, ingatan, imajinasi logis, energi sosial, kerja sama, kecemburuan, optimisme, musim panas, resah, ketidakjujuran, pengecut, pengkhianatan, pencerahan, dan intelektualitas.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Kuning adalah warna yang ceria, hangat, dan menyenangkan, biasanya identik dengan sesuatu yang baru. Sering kali warna ini digunakan untuk mendapatkan perhatian orang, oleh karenanya warna kuning sering digunakan untuk memperkenalkan sebuah produk atau ciptaan baru.

    4. Orange (Carefree)
    Energy, keseimbangan, kehangatan, kuat, muda, fun, keterjangkauan, antusiasme, pencapaian bisnis, kesehatan pikiran, daya tahan, keadilan, kegembiraan, pertumbuhan, ketertarikan, kebebasan, dan pembuat gaduh.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Warna orange adalah hasil peleburan antara merah dan kuning, sehingga masih memiliki beberapa kesamaan dari warna pembentuknya, yaitu kuat dan hangat, dan satu hal baru, yaitu efek riang. Warna ini sering dianggap sebagai warna dari inovasi dan pemikiran modern.

    5. Hijau (Fresh)
    Alami, sehat, keberuntungan, pembaharuan, penyembuhan, kelimpahan, keajaiban, muda, kesuksesan materi, daya tahan, ketergantungan, pertumbuhan, kesuburan, harmoni, optimisme, kebebasan, dan keseimbangan.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Hijau adalah warna yang tenang karena biasanya dikaitkan dengan lingkungan dan alam. Di dalam desain grafis, kita bisa menggunakan warna hijau untuk memberikan kesan segar. Warna ini juga memiliki arti lain seperti pertumbuhan dan kesegaran, karenanya warna ini popular digunakan oleh produk-produk organik. Ada yang mengatakan bahwa warna ini dapat menetralisir mata dari warna yang panas.

    6. Ungu (Majestic)
    Misterius, artistik, kreatif, spiritual, kebangsawanan, pandangan ketiga, rahasia, upacara, telepati, pencerahan diri, arogan, kekasaran, ambisi, magic atau sihir, harga diri, keangkuhan, mandiri, dan transformasi.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Warna Ungu adalah warna yang unik, karena sulit untuk dipadukan dengan warna lain selain hitam dan putih, dengan proporsi yang tepat tentunya. Warna ini cocok untuk warna tambahan atau pemanis dalam desain, karena jika terlalu banyak penggunaannya warna ini akan merusak desain dan akan memperlihatkan kesan jahat. Oleh karenanya hati-hati dalam penggunaannya.

    7. Merah muda (Energetic)
    Cinta, kasih sayang, feminim, romantis, persahabatan, kepercayaan, niat baik, damai, perasaan yang halus, manis, indah, cengeng, dan pengobatan emosi.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Merah muda adalah warna yang melambangkan perasaan perempuan karena mengandung kesan feminim. Selain itu warna ini juga halus, mudah dikombinasikan dengan warna lain juga. Warna ini banyak digunakan sebagai lambang cinta atau kasih sayang.

    8. Coklat (Warm)
    Tanah atau bumi, daya tahan, pemikiran yang meterialis, stabilitas, berbobot, aman, kuat, reliabilitas, kedamaian, produktifitas, praktis, kerja keras, materialis.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Coklat adalah warna bumi, memberikan kesan hangat dan aman. Dalam desain warna ini cocok digunakan sebagai background dari sebuah objek. Karena coklat dekat dengan warna Emas maka bisa terlihat kesan mahal dalam warna ini.

    9. Putih (Pure)
    Suci, kebersih, kedamaian, permohonan maaf, pencapaian diri, spiritualitas, natural, kosong, netral, awal baru, kemurnian, kesederhanaan, cahaya, persatuan, kedewaan, dan keperawanan.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Putih adalah warna murni, mencerminkan kesan suci dan bersih. Warna ini bisa dipadukan dengan warna apapun, biasanya banyak digunakan sebagai background dengan objek yang menggunakan warna lebih gelap. Design yang menggunakan warna putih sebagai warna pokoknya akan membuat design itu terkesan simple dan elegant.

    10. Hitam (Mixed)
    Power, kecanggihan, kematian, ketakutan, misteri, kesedihan, keanggunan, kebebasan, berwibawa, penyendiri, disiplin, kekal, kemakmuran, elegant, perlindungan, pengusiran, mengikat, pelanggaran, dan formalitas.
    Arti Warna, Color, Design, SETYAWAN BERBAGI
    Warna hitam memiliki arti ganda yang bertolak belakang. Di satu sisi ia memberi makna kekuatan dan kecanggihan, tapi di sisi lain ia bermakna kejahatan dan kematian Akan tetapi dalam design semau warna jika digabungkan dengan warna hitam akan terlihat lebih menonjol dan keren.

    Dalam psikologi warna beberapa warna memang memiliki arti sama, hal tersebut dikarenakan warna tersebut masih satu rumpun atau jenis. Selain itu warna-warna tersebut memiliki sisi baik dan sisi buruk, oleh karenanya kita perlu menggabungkan beberapa warna untuk memperjelas arti dari masing-masing warna tersebut.

    Nah, seperti itulah kira-kira arti dari masing-masing warna. Mungkin ada beberapa yang membuat sobat bingung?... Jika masih bingung silahkan ditanyakan dalam kolom komentar. OK, sekian dulu postingan saya kali ini. Semoga bermanfaat...
  • Fast Loading VS Perfect Design, Tentukan pilihanmu!...

    Fast Loading, Perfect Design, Info Blog, SETYAWAN BERBAGI
    Salam semua... Masih dalam suasana tahun baru saya kembali posting. Kali ini saya posting artikel yang bisa dijadikan referensi sobat sekalian dalam memilih tampilan blog seperti apa yang sobat butuhkan, yaaa semoga saja dapat bermanfaat. Langsung saja kita bahas...

    Banyak di antara para web designer yang menginginkan tampilan memukau tanpa membebani loading website/blog mereka, perlu diketahui bahwa hal tersebut hampir mustahil. Jika kita menginginkan loading yang cepat maka kita harus meminimalkan penampilan, begitu pula jika kita menginginkan design yang memukau kita harus bersedia mengorbankan kecepatan loading blog kita. Kedua pilihan tersebut harus kita sesuaikan dengan kebutuhan blog kita, akankah kita lebih butuh tampilan ataukah kecepatan loading?... Untuk lebih jelasnya bisa sobat baca penjelasan lebih lanjut dibawah ini:

    Fast Loading
    Dalam tipe ini para web designer lebih mengutamakan content atau isi website/blog mereka dibandingkan tampilan yang memukau. Pemakaian widget-pun juga diminimalisir dan biasanya hanya berisi widget pendukung content seperti popular post dan recent post. Website/blog berjenis berita sering memakai tipe ini dikarenakan mereka lebih memfokuskan pada content daripada tampilan, karena bagaimanapun tujuan pengunjung adalah membaca artikel yang disajikan bukan menikmati tampilannya.
    Perfect Design
    Kebalikan dari fast loading, dalam tipe ini para web designer lebih mengutamakan interface atau tampilan website/blog mereka dibandingkan isinya. Biasanya tipe ini lebih menonjolkan gambar dibanding tulisan. Perlu diketahui, blog dengan banyak widget yang tidak penting disana-sini sampai memenuhi tampilan itu bukan disebut perfect design. Memang mungkin kita merasa ingin sekali memasukkan semua kedalam blog kita, namun seperti yang kita ketahui apapun jika berlebihan pasti berdampak buruk, baik dalam segi loading maupun dalam segi tampilan. Gunakan saja widget yang mendukung dan memperindah tampilan pada bagian post. Website/blog seperti online shop, graphic design, dan contest biasa memakai tipe ini dikarenakan keharusan yang membuat tampilan yang memukau pengunjung.

    Kedua tipe diatas sebenarnya dapat kita gabungkan tentunya sesuai kebutuhan dan dengan keseimbangan diantara keduanya. Dengan begitu kita dapat memakai tipe ketiga, yaitu Balance Design.

    Balance Design
    Dengan menggabungkan kedua tipe diatas kita dapat membuat keseimbangan dalam segi tampilan dan tentunya tidak terlalu memberatkan loading blog. Lalu bagaimana caranya?...
    • Minimalkan dalam pemakaian script dan gambar dengan ukuran besar, jika memungkinkan gunakan gambar dengan ukuran dibawah 100kb.
    • Tapi jangan lupakan content, manfaatkan sistem thumbnail pada homepage yang memuat gambar beserta cuplikan post.
    • Hilangkan widget yang tidak penting seperti animasi, jam, kalender, games, dsb jika dirasa tidak dibutuhkan.
    Dengan beberapa cara diatas kita dapat membuat sebuah design yang seimbang tanpa membuat loading blog kita terlalu lama.

    Okelah, sampai disini dulu posting kali ini, semoga artikel ini dapat bermanfaat bagi sobat sekalian. Sayounara...
  • Good Bye 2014 Welcome 2015

    Salam semua... Sebelumnya saya ucapkan Selamat tahun baru... Semoga kita dapat menjadi pribadi yang lebih baik dari tahun sebelumnya, Amiin... Kembali lagi saya posting di awal tahun 2015 ini. Setelah sempat pasif di akhir tahun 2014 saya membulatkan tekat untuk kembali aktif di 2015 ini dan semoga saja dapat membuat blog kecil ini berjaya seperti blog pendahulunya ^_^

    2015, Catatan Admin, New Year, Tahun Baru, SETYAWAN BERBAGI

    Berbagai harapan baru tentu saja menghiasi pikiran kita, saya sendiri juga mempunyai banyak harapan baru serta target-target yang harus saya selesaikan di tahun 2015 ini. Salah satunya adalah menghidupkan kembali blog ini agar di kenal dan di kunjungi banyak orang, selain itu dapat menjadi sumber referensi dan dapat bermanfaat bagi banyak orang tentunya. Walaupun di terpa dengan kesibukan seorang mahasiswa saya usahakan untuk tetap aktif di dunia maya dan salah satunya di dunia Blogger ini.

    Okelah, semoga semua harapan kita di tahun ini terkabulkan. Sampai disini postingan singkat kali ini. Sampai bertemu lagi di hari berikutnya... Sayounara...
  • Cara Membuat Anime ID Card

    Design, ID Card, Tutorial, SETYAWAN BERBAGI
    Salam semua... Setelah lama tak posting kini SB kembali posting. Kali ini saya posting sebuah tutorial design, yaitu Cara Membuat Anime ID Card. Sudah pada tahu kan apa itu ID Card?... ID card adalah sebuah kartu identitas seseorang, bisa berupa KTP, kartu pelajar, kartu group, dsb. ID card dalam tutorial ini nanti mungkin lebih mirip ke jenis ID card group atau komunitas. Mungkin sudah banyak yang membuat tutorial yang serupa seperti ini, namun saya coba dengan sedikit design yang unik dan pastinya elegant.

    Penasaran seperti apa ID Card yang akan kita buat nantinya?... Jika semua yang sobat lakukan benar sesuai dengan tutorial yang saya berikan maka hasilnya akan mirip dengan ini:

    Design, ID Card, Tutorial, SETYAWAN BERBAGI

    Tutorial saya kemas dalam bentuk ebook agar lebih mudah dan tidak memakan banyak tempat pada postingan ini. Jadi bagi sobat yang ingin mencoba tutorial ini silahkan di download ebook-nya. Jangan kawatir, tutorial ini saya buat untuk mudah dimengerti bahkan bagi newbie sekalipun, asalkan tahu dasar-dasar Photoshop pasti bisa mengikuti tutorial ini dengan mudah.


    Okelah, sampai disini dulu postingan kali ini, semoga tutorial saya ini dapat dimengerti dengan mudah dan bermanfaat bagi sobat sekalian... Sayounara...
  • Font Awesome - Solusi Penggunaan Icon di Blog

    Salam semua... Pada kesempatan kali ini saya akan posting mengenai Font Awesome. Apa dan seperti apakah font awesome itu?... Mungkin diantara sobat sudah ada yang mengetahuinya, namun belum tentu semua tahu bukan?... Untuk mengetahui jawabannya sobat bisa membaca penjelasan saya mengenai font awesome di bawah ini:

    Font Awesome, Info Blog, Icon, SETYAWAN BERBAGI

    Apa itu font awesome?...
    Font awesome adalah sekumpulan font web yang berbentuk icon untuk antarmuka web. Dengan menggunakan  icon awesome kita dapat mengubah warna serta ukuran icon dengan menggunakan css tanpa harus khawatir mengurangi kualitas icon. Sampai saat artikel ini dibuat font awesome telah sampai pada versi 4.2 dan memiliki lebih dari 400 variasi icon.

    Apa kelebihan menggunakan font awesome?...
    • Dengan adanya font awesome kita tidak lagi repot-repot mencari atau membuat gambar sendiri, kita hanya perlu mengetik kode font-nya saja untuk mendapat icon yang kita cari.
    • Pada versi 4.2 ini kita bisa memilih 479 icon yang telah tersedia, dan tentunya kita bisa memberi warna sesuka kita serta mengatur ukuran dan menambah bayangan. Semua hal tersebut dapat kita lakukan dengan mengaturnya dengan css. Dengan kata lain, selain bentuk kita dapat memodifikasi font awesome sesuai keinginan.
    • Karena font awesome berupa vector kita dapat menyesuaikannya pada resolusi tinggi maupun rendah. Karena hal ini pula kita dapat mengatur ukuran icon tanpa merusak kualitas icon itu sendiri.

    Berikut adalah preview dari font awesome versi 4.2

    Font Awesome, Info Blog, Icon, SETYAWAN BERBAGI
    Untuk melihat lebih lengkapnya bisa mengunjungi website resminya:
    http://fortawesome.github.io/Font-Awesome/icons

    Bagaimana cara menggunakan Icon Awesome?...
    Hal pertama yang harus kita lakukan adalah memasang css font awesome dibawah ini kedalam tag <head>...</head> pada HTML template sobat.
    <Link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
    "Jika sobat masih memakai font awesome versi lama silahkan hapus kode yang terlihat serupa dengan kode diatas."

    Setelah kode css terpasang selanjutnya adalah cara menerapkan font awesome pada blog atau website. berikut adalah contoh penerapan css font awesome:
    <i class="fa fa-home"></i>
    Dapat kita lihat dari contoh tersebut bahwa untuk menerapkan font awesome kita dapat menggunakan tag <i></i> lalu di ikuti class dan dilanjutkan nama font. Dengan sedikit tambahan teks kita dapat menuliskan kodenya seperti ini:
    <i class="fa fa-home"></i>
    Hasil dari code tersebut akan menjadi seperti ini:  fa fa-home

    Untuk dasarnya seperti itu, akan tetapi kita tidak hanya dapat menggunakannya sebatas itu. Seperti yang telah saya katakan sebelumnya bahwa font awesome memiliki keunggulan yaitu selain bentuk icon kita dapat memodifikasi sesuai keinginan. Lalu modifikasi seperti apa saja yang dapat kita lakukan?...

    Untuk mengetahui modifikasi apa saja yang dapat kita lakukan sobat bisa mengunjungi website resminya atau klik link berikut: http://fortawesome.github.io/Font-Awesome/examples

    Okelah, sampai disini dulu penjelasan saya mengenai Icon Awesome, semoga artikel ini dapat bermanfaat bagi sobat sekalian. Thanks...
  •