Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Web Design
Design

Pelajari Alur Kerja Profesional untuk Menggambarkan Gambar Header Bergaya Komik

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Web and Interface Design With Vector.
Create a Stylized Navigation Bar and Slice it for Web
Quick Tip: Create Colorful Glossy Rating Stars

Indonesian (Bahasa Indonesia) translation by Sela Sinta (you can also view the original English article)

Dalam tutorial ini, kita akan meninjau alur kerja profesional untuk menggambarkan gambar header situs web dalam gaya komik, yang diperuntukan untuk diintegrasikan ke dalam theme Wordpress. Ini merupakan cara yang bagus untuk membuat blog Anda menonjol dan dipromosikan di galeri desain web teratas. Ayo mulai!

Pratinjau Gambar Akhir

Di bawah ini adalah gambar terakhir yang akan kami garap. Ingin akses ke file Sumber Vector lengkapnya dan salinan yang dapat diunduh dari setiap tutorial, termasuk yang ini? Bergabunglah dengan Vector Plus hanya dengan $9 sebulan. Anda dapat melihat karya seni akhirnya, desain situs web final dalam ukuran penuh, atau mengunjungi live site-nya.

Langkah 1 - Melihat ThemeWordpress

Di bawah ini adalah theme Wordpress saya, seperti yang Anda lihat temanya terdiri dari beberapa zona, seperti "header." Di sini saya ingin mengubah gambar background header dan memposting sesuatu yang dapat mengekspresikan lebih banyak tentang saya sebagai desainer dan juga ilustrator.

Langkah 2 - Mulailah dengan Membuat Sketsa di Atas Kertas, Tanpa Digital Di Sini!

Saya selalu mulai dengan beberapa sketsa di atas kertas. Ini sangat membantu saya untuk memfokuskan beberapa ide dengan lebih baik dan memiliki sesuatu untuk dilacak sesudahnya di Illustrator. Di sini ada video menyenangkan yang saya lakukan untuk tutorial ini.

Langkah 3 - Sketsa

Jadi ide saya adalah menciptakan dunia masa depan yang aneh dengan pekerja robot dan seorang gadis sebagai komandan. Sketsa awal ditunjukkan di bawah ini.

Gambar di bawah ini menunjukkan sketsa pensil final untuk dikirim di Illustrator sebagai template.

Langkah 4 - Mulai dengan Illustrator CS4

Sekarang saya siap untuk duduk di depan PC saya dan mulai dengan Adobe Illustrator CS4. Saya membuka dokumen baru dan menempatkan sketsa tersebut sebagai sebuah template (dengan mengklik dua kali pada layer dan memeriksa Template).

Sekarang saya membuat layer baru di atas layer "template". Lalu saya mulai membuat garis sketsa dasar. Saya selalu membuatnya dengan membuka palet Pen Tool untuk bekerja lebih cepat (tips kecil).

Ikuti langkah-langkah pertama dalam video di bawah ini.

Langkah 5 - Pemberian Tinta

Dengan Pen Tool, saya membuat tinta hitam; Saya suka menyebutnya sebagai tinta karena saya menyukai seni buku komik. Lihat video di bawah ini.

Pada akhirnya, Anda dapat melihat layer dengan tinta karakter.

Lihat juga di bawah background layer ink.

Layer "template sketch" tidak perlu digunakan lagi, jadi saya menghapusnya. Di sini semua layer ditempatkan bersama.

BG-TOP3

Langkah 6 - Langkah Pemberian Warna Dasar

Setelah tinta, saya perlu beberapa warna dasar, inilah layer "basic color characters".

Di bawah ini background warna dasar ditunjukkan di bawah.

Inilah semua layer warna dasar saat dikumpulkan bersama.

Langkah 7 - Kedalaman dan Bayangan

Setelah warna-warna dasar, saya perlu kedalaman (depth) dan bayangan (shadow) untuk membuat ilustrasi lebih nyata. Berikut ini adalah studi singkat tentang bagaimana cahaya akan “jatuh” dalam ilustrasi ini.

Saya kembali dalam ilustrator dan saya mulai melacak di mana bayangan diperlukan. Bagi mereka saya sering copy dan paste shape kemudian menerapkan Divide dari palet pathfinder.

Pada akhirnya gambar akhir ditunjukkan di bawah ini, atau lihat karya seni akhirnya.

Langkah 8 - Menyimpan Gambar untuk Wordpress

Dari gambar ini, saya membutuhkan dua bagian untuk theme Wordpress saya, satu untuk header dan satu untuk body-nya. Dengan panduan yang ada saya menggambar dua zona.

Setelah menempatkan panduan, saya membuat irisan dengan menuju ke Object > Slice > Create From Guides.

Sekarang saya menyimpan dua gambar ini dengan pergi ke File > Save For Web (Saya hanya menyimpan gambar dan tidak ada html). Kemudian saya mengunggah gambar terakhir yang diekspor itu ke folder theme di Wordpress. Sekarang sudah siap untuk dikodekan ke dalam theme tersebut.

Kesimpulan

Anda dapat melihat hasil akhir di bawah ini, yang telah sepenuhnya diintegrasikan ke dalam theme Wordpress final. Anda dapat melihat karya seni akhir, desain situs web final dalam ukuran penuh, atau mengunjungi live site-nya.

Subscribe ke Vectortuts+ RSS Feed untuk mendapatkan informasi terbaru tentang tutorial-tutorial dan artikel-artikel vector .

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.