Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

20 Excellent Logo Design Tutorials Using Illustrator

There are thousands of logo design tutorials out there. But finding the one that you need will probably take much of your time. To save you time from browsing and compiling logo design tutorials, we decided to compile only the best logo design tutorials in one post. You will notice that we only selected logo design tutorials that make use of vector-based program like the Illustrator (which is the Industry standard) since we believe that every logo should be created in a vector-based program like Illustrator for ease of use in any platform, be it for print or web. Remember, you are going to use your logo in different materials such as fliers, posters, brochures, corporate brand identity materials, online advertisements, and many more. Creating a logo in Photoshop and other bitmap-based programs make your logo resolution-dependent. To be a logo designer, therefore, one must have knowledge on how to use Illustrator or other vector-based program.

Simply click on the preview image to view and open each tutorial.

If you need some logo design inspiration, please visit our previous post on “20 Best Logo Design Galleries to Get You Inspired”

LOGO DESIGN TUTORIALS

01-Logo Design Process and Walkthrough for Vivid Ways
Recreate the logo of Vivid Ways, a blog focusing on the topic of personal development and colourful living, with this step-by-step tutorial in Illustrator from the logo designer himself.

logo design tutorials

02-Design a Grungy Circular Logo
This tutorial lets you create a text along a path in an interesting way and apply it to a common application. Although the circular logo has been used forever, it can still be effective if done well, while mixing in some modern design. In this tutorial, you are going to use vector art then grunge it up to achieve a worn beach look.

logo design tutorials

03-Web 2.0 Logo Reflection in Vector format with Illustrator
This tutorials shows you how to create a more flexible vector-based logo with a glossy web 2.0 look.There are hundreds of other tutorials in Photoshop that let you create the same effect. However, a vector-based logo is more advantageous especially if you are thinking of using your logo for print materials suchas business cards and brochures.

logo design tutorials

04-Glossy Vector Web 2.0 Logo Text in 5 Easy Steps
This tutorial explains how to create a vector-based, glossy logo with a web 2.0 look and feel in five easy steps. Again, this look can be easily achieved using programs like Photoshop but having a logo vector has many advantages.

logo design tutorials

05-How to Create a Trendy Retro Type Treatment
In this Illustrator tutorial, you are going to create a trendy retro type treatment with a free font, gradients, blends, and some scatter brushes. This is a relative easy tutorial containing techniques that can be quickly applied to many other type treatments and various graphic elements.

logo design tutorials

06-The Logo Design Process for Ultimate Potential
In this tutorial, designer Jacob Cass will guide you through the process of creating the logo for Ultimate Potential. This article offers insights into, not only the thought process behind creating the logo, but also the creation of the logo itself.

logo design tutorials

07-My Nite Life: A Logo Design Project Step by Step Walkthrough
In this tutorial, UK-based designer Chris Spooner walks you through the process of creating a logo design for a client, myNiteLife. Also discussed in this tutorial are the process of sketching, typeface selection as well as the digital illustration and production in Adobe Illustrator.

logo design tutorials

08-Creating a crazy cool logo
This tutorial will show you how the logo for a company called Zagora was created using Illustrator. Creating this logo involves the use of the Ellipse tool, the Direct Selection tool, and using effects and the Gradient tool for adding the finishing touches.

logo design tutorials

09-Design a Print-Ready Beer Label in Adobe Illustrator
This is a full-featured Adobe illustrator CS3 tutorial that walks you through from setup to production of a really cool beer label. This tutorial covers the use of different Tools like Type On A Path, Live Trace, and the Opacity Mask.

logo design tutorials

10-Logo Design Process and Walkthrough by Dry Icons
This tutorial provides a comprehensive overview of a logo design process and methods from conceptualization, research, drawing and using a drawing program like Illustrator to execute the design. This tutorial is useful for businesses who intend to have a logo designed by a professional logo artists as well as for designers who are interested in the process of designing and developing a logo.

logo design tutorials

11-Create a Silhouette Logo for a Steak House Restaurant in Adobe Illustrator
This tutorila walks you through some of the steps of creating a logo, with a custom silhouette logo mark, for a fictitious steak house restaurant named “Lone Star Steaks”.

logo design tutorials

12-Creating an Environmentally Friendly Green Type Treatment
Learn to create a typographic logo featuring an environment-conscious theme using Adobe Illustrator. The tutorial makes use of various techniques such asthe use of the Pen tool to draw the leaves and many more.

logo design tutorials

13-Quick Logos with Live Trace in Adobe Illustrator
Perhaps one of the most underutilized features in Illustrator is Live Trace, which can convert any photograph into vector art in just a few clicks. In this tutorial, you will learn how to use Live Trace to vectorize a photo for a logo design.

logo design tutorials

14-Create the Volkswagen Logo in Illustrator
In the following tutorial you will learn to create the Volkswagen logo. You will only need some simple circles, gradients, strokes and some basic effects. You might face some problems with the letter shapes but the grid and the snap to grid will simplify your work.

logo design tutorials1

15-Create the Mini Logo in Adobe Illustrator
In the next tutorial you can learn to create the Mini logo. You will start with some basic tools and simple shapes. Then, with the Pathfinder options and some Warp effect you will get the desired shapes. Finally, you will need several gradients and strokes plus some Gaussian Blur and Drop Shadow effects.

logo design tutorials

16-How to make a vector badge logo in Adobe Illustrator
In this tutorial you will learn how to make a logo with a badge, fence and barbed wire, using simple shapes, a custom brush and few simple Illustrator.

logo design tutorials

17-Create the Toyota logo
In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.

logo design tutorials

18-Creating a Gradient Flower Icon Logo in Adobe Illustrator
Here is a tutorial about how the Cecif.com logo icon was created. This process lets you use basic Illustrator techniques such as the Pen, Reflect, Scissors and Gradient tools, and of course the super timesaving Transform again technique.

logo design tutorials

19-Create a Swirly Type Treatment
In this Illustrator tutorial, you will learn how to create a swirly type treatment. With a free font, some brushes, and gradients you can easily create this type treatment. Moreover, you can apply these techniques to other type treatments, logos, and illustrations as well.

logo design tutorials

20-Make a Logo Flow in Illustrator
Here is a walkthrough on the process of developing a logo for a conference in Thailand on protecting the health and safety of the world’s rivers by Innosanto Nagara of Design Action.

logo design tutorials

sumber:
http://bestdesignoptions.com/

[Tutorial] Bedah Desain: Struktur Blog dan Penerapannya

bedah_desain_struktur_blog

Fungsi sebuah blog sudah bergeser dari yang tadinya hanya sebatas tempat curhatan sang penulis, sekarang menjadi media publikasi bagi orang banyak (istilah keren nya, Citizen Journalism). Pada posting ini kita akan membahas beberapa elemen visual yang menjadikan desain sebuah blog menjadi efektif.

Sinergi Desain & Konten

bedah_blog_sinergi_desain_konten

Inti dari blog memang ada pada konten blog itu sendiri, tetapi seperti diskusi kita terdahulu, konten yang bagus jika tidak didukung dengan desain yang efektif maka tidak akan berhasil. Sebagian mungkin bisa bertahan karena faktor senioritas atau konten yang tidak dapat di temukan di blog lain. Tapi bagaimana dengan blogger junior yang walaupun mempunyai konten yang bagus tetapi kurang/belum memperhatikan desain blognya sendiri?

Lagipula, apa salahnya memanjakan pembaca dengan presentasi desain yang nikmat di mata? Selain membuat pembaca lebih betah berlama-lama di blog kita, manfaat lain tentu membuat pesan yang ingin kita sampaikan lebih mudah di tangkap.

Berikut adalah beberapa poin/tips yang bisa di gunakan untuk membuat desain blog menjadi lebih efektif.

Tata Letak Kolom Konten

Dari hasil pengamatan saya, ada 5 macam jenis tata letak kolom yang sering digunakan pada desain blog. Masing-masing tata letak mempunyai kelebihan dan kekurangan, namun kita bisa menentukan yang terbaik bagi keperluan blog yang akan kita desain.

1. Menurun Single (1 kolom)

bedah_blog_layout_single

Jenis ini merupakan tata letak yang standard dan hampir semua blog menggunakan metode ini. Dikarenakan sistem dokumentasi dan penanggalan blog yang berdasarkan hari, maka posting terbaru akan di letakkan di paling atas.

Kelebihan :
  • Pembaca sudah familiar dengan tata letak ini
  • Mudah menemukan posting terbaru
  • Ruang untuk konten lumayan luas
Kekurangan :
  • Dari segi visual terlihat biasa saja
  • Pembaca akan mengalami sedikit kesulitan bila ingin melihat posting terdahulu

2. Menurun Paralel (2 kolom)

bedah_blog_layout_paralel

Sama dengan tipe menurun yang pertama, perbedaannya hanya pada kolom konten yang di bagi menjadi 2, sehingga dapat memuat lebih banyak konten di dalam satu halaman.

Kelebihan :
  • Pembaca dapat dengan mudah melihat beberapa posting terbaru
  • Memberikan pilihan kepada pembaca
  • Blog terasa lebih kaya akan konten
Kekurangan :
  • Layout secara keseluruhan akan terlihat penuh
  • Kalau pengaturan masing-masing kolom tidak di perhatikan (tinggi kolom), akan terlihat berantakan
  • Beberapa pembaca akan bingung mana yang mau di baca terlebih dulu

3. Grid (4-6 kolom)

bedah_blog_layout_Grid

Sesuai dengan namanya, tata letak ini menggunakan sistem grid untuk mengatur tata letak kolom kontennya. Desainer bebas menentukan akan menggunakan berapa kolom, tergantung dengan kebutuhan dan jenis konten (lebih banyak gambar atau tulisan).

Kelebihan :
  • Secara visual terlihat menarik
  • Semua posting dapat tampil dalam satu halaman
Kekurangan :
  • Akan membingungkan pembaca
  • Dari sisi layout ada kemungkinan akan terlihat berantakan

4. Full Width

bedah_blog_layout_full

Tipe yang satu ini tidak menggunakan kolom, tetapi menggunakan seluruh lebar halaman yang ada. Bahkan bagian sidebar kanan atau kiri tidak di gunakan, namun ada juga beberapa yang tetap menggunakan sidebar tetapi dengan porsi yang sangat minim.

Kelebihan :
  • Konten menjadi sorotan utama
  • Terlihat unik karena belum banyak yang menggunakan
  • Lebih nyaman di baca
  • Pembaca akan fokus kepada posting tanpa ada gangguan banner atau widget lain
Kekurangan :
  • Terlihat “sepi”
  • Agak sulit menampilkan posting-posting sebelumnya
  • Butuh strategi khusus untuk menempatkan banner iklan atau widget lain

5. Custom Posting

bedah_blog_layout_custom

Kalau kamu mempunyai keahlian di bidang coding, pilihan ini mungkin bisa kamu pertimbangkan. Tipe ini merupakan tipe “break the rules” karena sama sekali tidak menggunakan template yang sama pada setiap posting. Melainkan menyesuaikan desain dengan konten dalam arti yang sebenarnya. Konsep nya sama seperti majalah yang melayout setiap artikel nya secara personal.

Kelebihan :
  • Sudah pasti terlihat unik
  • Sinergi konten dan desain sangat dapat dirasakan
  • Pembaca akan melihat seluruh posting karena penasaran akan tampilan visualnya
Kekurangan :
  • Butuh waktu yang lumayan lama untuk membuat 1 posting saja
  • Tidak semua orang menguasai coding

Pengaturan Font

Konten adalah jiwa dari sebuah blog karenanya kita harus memperhatikan cara kita menggunakan dan menampilkan text dengan baik. Tujuannya tak lain adalah agar nyaman di baca. Berikut ini beberapa hal yang harus di perhatikan,

1. Jenis Font

bedah_blog_font_jenis

Di dalam blog pasti ada 2 jenis font yang harus di gunakan, yang satu sebagai heading, dan yang lain sebagai body text. Untuk bagian heading kita bisa menggunakan font yang jarang di pakai oleh desainer lain atau disesuaikan dengan kebutuhan dasar headline itu sendiri, yaitu untuk menjadi pusat perhatian.

Pada bagian heading kamu bisa menggunakan font yang tebal atau mencari font dengan bentuk yang unik (namun tetap terbaca). Penggunaan font yang tidak biasa pada heading juga bisa menjadi pembetukan karakter desain sebuah blog.

Yang kedua adalah font untuk body text. Di bagian ini sebaiknya kita menggunakan font standard yang memang di fungsikan untuk body text, alasan utamanya adalah agar text dapat di tampilkan dengan baik di semua monitor pembaca.

2. Ukuran Font

bedah_blog_font_ukuran

Yang akan lebih di bahas di sini adalah ukuran font pada body text. Karena perkembangan resolusi monitor saat ini, ukuran 12 point adalah ukuran standard. Tapi kalau kamu mau lebih meningkatkan kenyamanan dalam membaca bisa menggunakan 14 – 16 point, ukuran ini tergantung kepada jenis font yang kamu gunakan.

3. Line Spacing

bedah_blog_font_linespacing

Bagian ini sangat kecil, namun penting untuk menjaga kenyamanan saat kita membaca artikel. Rumus yang biasa di gunakan adalah besar font yang di gunakan, di tambah 4 point. Misalnya, kamu menggunakan font 14 point, maka line spacing yang ideal adalah 18 point.

Namun pengaturan line spacing harus di coba secara langsung, terkadang bisa juga line spacing 20 point (dengan besar font 14 point) lebih nyaman di baca karena bentuk dan jenis font juga mempengaruhi.

Desain Header & Logo

Sesimpel apapun desain header dan logo yang kamu buat haruslah menarik. Ibaratnya, header dan logo adalah wajah seseorang. Karena ini desain untuk blog, maka logo mungkin tidak menjadi keharusan, tetapi akan lebih baik jika kamu mempunyai logo walaupun hanya berbentuk tipografi (logotype). Desain logo yang unik akan menjadi identitas blog.

Desain header dapat disesuaikan dengan “feel” keseluruhan blog yang ingin kamu dapatkan. Kamu bisa bereksplorasi dengan ilustrasi, texture, atau bahkan bermain dengan white space.

Inspirasi Desain Header Blog

bedah_blog_header_boxoffice

bedah_blog_header_foster

bedah_blog_header_6creations

bedah_blog_header_webislove

bedah_blog_header_makefilmwork

Styling Image

Sebenarnya trik ini sangat simpel, hanya menambahkan border di sekitar image/photo yang kita gunakan pada posting. Dengan cara ini image akan tampil lebih menarik walaupun efek nya tidak terlalu terlihat. Akan terasa perbedaanya antara yang menggunakan dan tidak menggunakan styling image.

Contoh Penerapan Border Pada Gambar

bedah_blog_img_style_spoon

bedah_blog_img_style_wdw

Optimasi Sidebar

Mayoritas blog mempunyai sidebar, tapi terkadang kita suka bingung ingin menaruh fitur/widget apa di bagian ini. Sebelum kamu menambahkan widget dengan membabi buta, lebih baik pikirkan dulu hal selain konten yang ingin kamu sampaikan kepada pembaca.

Untuk optimasi sidebar ini tidak ada tips yang baku, semuanya kembali lagi kepada kamu. Dari hasil pengamatan saya, sidebar pada blog biasanya di gunakan untuk,

  • Komentar Terkini
  • Posting Pilihan (Featured)
  • Posting Terpopuler
  • Banner Iklan
  • Twitter / Facebook Page stream
  • Icon Social Media
  • Flickr Gallery
  • Kategori Posting
  • Archives
  • Voting Widget (menampilkan voting atau hasil voting)
  • Peringkat Komentator
  • ( Kemungkinan lain, silakan beritahu saya melalui kolom komentar :) )

Inspirasi Sidebar

bedah_blog_sidebar_engadget

bedah_blog_sidebar_bhoff

bedah_blog_sidebar_pvm

bedah_blog_sidebar_relevant

bedah_blog_sidebar_wdl

Kolom Komentar

Bagian yang ini memang sudah menjadi default dari semua blog engine yang ada dan tujuan nya semua sama, yaitu untuk menciptakan komunikasi 2 arah antara penulis dan pembaca.

Banyak cara untuk menjadikan kolom komentar menjadi menarik, selain dari segi visual, penggunaan kata-kata yang unik juga menjadi faktor tambahan supaya pembaca mau menulis komentarnya. Agar pembaca nyaman menulis komentar, sebaiknya bagian field komentar di buat lebih lebar dan agak tinggi, ini akan berguna bagi pembaca yang ingin menulis komentar yang lumayan panjang.

Inspirasi Kolom Komentar

bedah_blog_comment1

bedah_blog_comment2

bedah_blog_comment3

bedah_blog_comment4

bedah_blog_comment5

Optimasi Footer

Trend Big Footer sepertinya masih akan berlangsung lama karena fungsinya sebagai area pemberhentian kedua setelah area konten yang berada di paling atas.

Ada 2 tujuan dasar mendesain big footer pada blog,

  1. Untuk meletakan fitur tambahan yang tidak cocok (tidak muat) di letakan di sidebar atas.
  2. Membuat pembaca lebih mendalami konten blog (misalnya, dengan menaruh widget “Most Discussed Articles”)

Yang pasti footer bukan lagi ruang yang di anak-tiri kan lagi, malah bisa mendukung keseluruhan konten blog.

Inspirasi Footer Efektif

bedah_blog_footer

bedah_blog_footer2

bedah_blog_footer3

bedah_blog_footer4

bedah_blog_footer5

Kesimpulan

Blog dengan konten yang bagus akan menjadi lebih bagus lagi jika menggunakan desain yang efektif dan cantik. Konten dan desain tidak lagi menjadi hal yang terpisah, melainkan bersinergi menghasilkan suatu blog yang memukau dan berguna bagi banyak orang.

Sudah siap mendesain (atau me-redesain) kamu? Atau ada elemen yang tertinggal? Mari berkomentar! :D

sumber: jurusgrafis.com