Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop


Membuat Icon PNG dengan Photoshop - Di zaman yang kian modern ini, mata kita tidak akan pernah lepas dari yang namanya icon. Hampir setiap saat mata kita dihadapkan pada yang namanya icon. Mulai dari icon aplikasi di smartphone, komputer, sampai icon-icon yang sering muncul di televisi. Hampir setiap hari, sebuah icon baru juga muncul bersamaan dengan hadirnya sebuah aplikasi baru. Peranan seorang desainer grafis tentu amat dibutuhkan di dalam pembuatan sebuah icon. Proses pengkreasian sebuah icon terkadang amat berpengaruh terhadap kesuksesan sebuah aplikasi. Terkadang seorang desainer grafis membutuhkan pengetahuan desain yang baik untuk bisa menciptakan sebuah icon yang efektif dan sesuai dengan kebutua\han dan keinginan dari sang programer. Itulah alasan mengapa pada kesempatan ini s aya mencoba memberikan sebuah tutorial sederhana tentang cara membuat sebuah icon calendar dengan menggunakan adobe photoshop.

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images


Pada tutorial photoshop yang diberikan dalam postingan kali ini, anda akan diajarkan untuk membuat sebuah icon berbentuk calendar dengan mengikuti langkah-langkah sederhana. Harapannya adalah agar anda memiliki pengetahuan dasar di dalam pembuatan sebuah icon sehingga nantinya anda bisa mengkreasikan sendiri desain icon sesuai dengan kreatifitas dan imajinasi anda.


Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop


Langkah Pertama

Seperti biasa, hal pertama yang perlu dilakukan adalah membuat sebuah dokumen photoshop baru. buatlah dokumen dengan ukuran kurang lebih 1200x700 px. kemudian anda dapat memberi warna background sesuai selera anda.

Langkah Kedua

sekarang kita mulai membuat gambar dasar untuk icon. pilih Rounded Rectangle Tool dan aturlah radiusnya menjadi 40 px. gambarlah sebuah kotak tepat ditengah-tengah background. jangan lupa untuk menekan tombol Shift ketika menarik gambar kotak tersebut agar bentuknya sempurna. berilah warna putih.

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images

Langkah Ketiga

tambahkan Drop Shadow dan Stroke pada blending moda (klik kanan pada layer > pilih blending option) atur angka-angka pada Drop Shadow dan Stroke shingga menghasilkan gambar yang kurang lebih seperti ini:

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images

Langkah Keempat

tambahkan efek lembaran kertas calendar. caranya amat mudah anda tinggal menduplikasi layer sebelumnya (CTRL + J) kemudian geser dengan Move Tool sedikit ke atas. jangan lupa untuk menghilangkan efek Drop Shadow dan Ubah warna Stroke menjadi Putih. Ulangi sampai anda mendapatkan beberapa lembar kertas.

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images

Langkah Kelima

Untuk membuat calendar menjadi lebih real, tambahkan efek border pada bagian atas icon. Pilih Rectangle Tool kemudian gambar kotak seperti yang ada pada gambar berikut ini, pilih warna sesuka anda.

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images

Langkah Keenam

Turunkan opacity dari layer tersebut, lalu hapus bagian-bagian yang keluar gambar dengan mneggunakan Eraser Tool ataupun anda bisa melakukan seleksi terlebih dahulu menggunakan Pen Tool. Kembalikan Opacity menjadi 100%. Tambahkan efek Drop Shadow dan Stroke sama seperti pada langkah ketiga agar gambar smakin menyatu.

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images


Langkah Ketujuh

Tambahkan efek garis putus-putus. Sebelumnya kita harus membuat brush terlebih dahulu. Tenang saja, caranya tidak terlalu sulit. Buatlah sebuah Layer baru, kemudian klik Brush Tool dan pilih brush yang bentuknya bulat, atur ukurannya sekitar 4 pixel. Pilih menu Window>Brush kemudian klik pada pilihan Dual Brush dan atur Diameter menjadi 10px, Spacing menjadi 250%, Scatter 0 dan Count menjadi 10. Brush sudah siap untuk digunakan, buat sebuah garis lurus dengan menggunakan Brush Tool. jangan lupa untuk menekan tombol Shift agar garis yang anda buat tidak miring atau melengkung.

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images

Langkah Kedelapan

Sekarang anda tinggal menambahkan tulisan tanggal, bulan, dan hari. dan icon calendar pun selesai dan bisa anda gunakan. silahkan anda menyimpannya dalam format PNG.

Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop
Source: Google Images


Kira-kira begitulah Tutorial Cara Mudah Membuat Icon PNG dengan Photoshop. Sebenarnya akan lebih mudah apabila anda membuat icon ini dengan menggunakan aplikasi CorelDraw. Tapi untuk menambah kemampuan editing anda dengan photoshop, tidak ada salahnya untuk mempelajari teknik sederhana untuk membuat icon anda sendiri dengan menggunakan software adobe photoshop.


",relatedTitleText:"Artikel Terkait",thumbWidth:192,thumbHeight:108,imgBlank:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=",relatedOuter:"ms-related-post"};for(e in relatedConfig)"undefined"!=relatedConfig[e]&&(b[e]=relatedConfig[e]);function t(e){var t=document.createElement("script");t.src=e,document.getElementsByTagName("head")[0].appendChild(t)}function v(e){var t,l,a=e.length;if(0===a)return!1;for(;--a;)t=Math.floor(Math.random()*(a+1)),l=e[a],e[a]=e[t],e[t]=l;return e}var B={relatedPosts:!0,jumlahRelatedPosts:4,relatedPostsThumb:!0,judulRelatedPosts:b.relatedTitleText,relatedPostsNoThumbImg:"//1.bp.blogspot.com/-sLMytth04W8/XtoBMx9lUjI/AAAAAAAAHmM/zK-toM5XTacePvBHnpIO_tfzjg63BD3ZgCK4BGAsYHg/w192-h108-n-k-no-nu-rw/nomage%2B%25281%2529.png"},l=(optionLinkMagz(B),"object"==typeof postLabels&&0':'")}},msRandomIndex=function(e){e=e.feed.openSearch$totalResults.$t-(B.jumlahRelatedPosts+1),e=1 .tr-caption-container");l?l.classList.add("fullwidth"):t&&t.classList.add("fullwidth")}!function(){var t={fullwidthImage:!0};optionLinkMagz(t),1==t.fullwidthImage&&fullwidthImg()}(); //]]>