Tuesday, October 4, 2011

Membuat WEBSITE - Basic HTML

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code 
tutorial dreamweaver
disini anda akan menemui tag - tag semacam ini:
<HTML>
</HTML>
Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing.  
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash(garis miring) di depan awal tulisannya. 
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser. 

Sekarang kita akan beralih pada tag selanjutnya.
<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita. 

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombolRefresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:
tutorial dreamweaver
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU 
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:
tutorial dreamweaver
Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.

Monday, May 16, 2011

Tips Membuat Banner Baliho


  Ada beberapa hal yang harus di perhatikan bagi seorang desain grafis bila ingin mendesain sebuah banner maupun baliho, karena sizenya yang besar sehingga sangat mungkin mengurangi memory ram dan daya kerja di Komputer, komputer kita bisa menjadi sangat lambat aksesnya dan akhirnya memakan waktu yang lama bahkan terkadang komputer bisa hang.
Tips berikut mudah-mudahan bisa bermanfaat khususnya para desain grafis maupun pengunjung blog ini. Tips ini juga hasil dari pengalaman liku-liku saya selama mengerjakan pembuatan banner, baliho dan sejenisnya.
  • membuat banner dan baliho bisa memakai adobephotoshop, coreldraw, illustrator dan freehand
  • karena proses akhir cetakan menggunakan mesin digital printing upayakan file terkonvert atau di-export ke file JPG dengan proses warna CMYK bukan RGB.
  • jangan pernah dilupakan bahwa dalam mengerjakan-nya harus menggunakan warna CMYK sekali lagi CMYK karena hukumnya Wajib dan di haramkan dalam dunia desain. Kenapa ? kenapa tidak boleh RGB, apa artinya RGB dan CMYK. silahkan baca penjelasannya tentang RGB dan CMYK.
  • jika ukuran banner sangat besar misal : 2m x 3m, 3m c 4m, 3m x 5m, 10m x 2m, 25m x 3m dan ukuran big size lainnya pakai alternatif resolusi 96 atau 100 dpi.
  • jangan membuat ukuran banner khususnya yang besar dan panjang dengan ukuran asli, pakai ukuran image sizenya dengan setengahnya misal ukuran 3×5 meter di perkecil 1.5 x 2.5m dg resolusi 100dpi (di potoshop).
  • ukuran big size sebaiknya menggunakan perbandingan dari aslinya misal  50% dari ukuran sebenarnya. gunakan imagesize di photoshop dan atur sesuai kebutuhan.
  • usahakan memoy sizenya di sheetnya tidak melebihi 500mb ( maksudnya memory yg dibutuhkan saat mengerjakan desain tersebut, biasanya bisa dilihat di toolbar nav bawah misal Doc: 100M : 50M
  • agar gambar tidak pecah ambil gambar ukuran sizenya diatas 150kb atau minimal bila di lihat gambar tidak pecah
  • jangan memaksakan gambar yang tidak maksimal karena sangat mempengaruhi hasil dan kualitas, sebagus apapun desain akan mengurangi mutu jika gambar pecah
  • resolusi gambar 72dpi bukan berarti gambar jelek dan pecah, coba di cek di photoshop lihat sizenya misal jika size 500pixel resulosi 72 artinya gambar cukup bagus
  • deteksi gambar pecah atau tidak harus dilihat resulosi dan pixelnya seimbang
  • di coreldraw setelah selesai lebih baik file diexport ke JPG dg resolusi 300 dpi dan original size serta image with CMYK. Semakin besar ukurannya maka resolusi harus dikurangi termasuk prosentasi size nya.
Point point diatas sebenarnya masih banyak lagi karena sebenarnya dasar-dasar pengerjaannya yang harus diketahui adalah seputar resolusi dan size serta pixel.. dalam artian diluar tehnis sejauh mana skill desainer tersebut mengerjakannnya.

Friday, May 13, 2011

Membuat Gambar Transparan Dengan Photoshop


Special Buat flends !

Sobat-sobat blogger pasti tahu betapa pentingnya tampilan header untuk sebuah blog, tidak perlu saja jelaskan alasannya yang jelas header sedikitnya dapat menjadi indikator konten sebuah blog. Dengan melihat tampilan header saja, biasanya pengunjung dapat menebak topik yang dibahas pada sebuah blog secara umum.

Beragam tampilan header dapat kita temukan pada banyak situs dengan berbagai pernak-pernik gambar bahkan di antaranya ada yang menggunakan program Java Script dan Flash.

Biasanya permasalahan timbul saat kita menggabungkan beberapa gambar agar lebih menarik, bukan saja pada header, tetapi semua gambar baik sebagai penjelas atau sekedar dekorasi untuk menambah daya tarik pembaca saat membaca sebuah artikel. Masalah tersebut di antanya, pengaturan warna, ukuran image, kapasitas file image, shadow (bayangan), transparansi dan lain-lain.

Semua permasalahan tersebut sebenarnya dapat diselesaikan dengan bantuan program image editor, Photoshop misalnya. Pada postingan kali ini saya akan mencoba menjelaskan mengenai cara membuat gambar transparan. Coba sobat perhatikan gambar paling atas dimana uang koin berada di atas uang kertas tetapi background biru masih terlihat. Berbeda dengan gambar di bawahnya dimana background biru sudah tidak terlihat, semua dilakukan dengan sedikit rekayasa Photoshop. Anda bisa menilai sendiri mana yang lebih bagus diantara gambar di atas.

Step by step cara membuat gambar transparan dengan Photoshop:
  1. Siapkan gambar yang akan dibuat transparan.
  2. Buka program Photoshop kemudian open gambar tersebut.
  3. Seleksi gambar yang diperlukan saja, kemudian buat copy layer yang diseleksi.
  4. Hapus background agar gambar tersebut tidak memiliki background (transparan)
  5. Anda bisa juga menambahkan bayangan (shadow) pada image tersebut agar gambar sedikit terlihat real atau sesuai kebutuhan.
  6. Simpan gambar tersebut dalam format PNG, caranya pada menu File, click Save For Web atau (Alt+Shift+Ctrl+S) kemudian pilih opsi PNG-24, click Save.
  7. Gambar transparan dengan ekstensi atau format file PNG sudah selesi dibuat.
  8. Gambar siap diupload pada Blog atau Webite Anda.
  9. Lebih jelasnya silahkan perhatikan tutorial cara membuat gambar transparan melalui Video Tutorial.

Tuesday, May 10, 2011

6 Prinsip Desain Grafis

6 Prinsip Desain Grafis
Desain Grafis merupakan suatu porsi dari apa yang dilihat dan dirasakan pada tampilan suatu website. Desain grafis memiliki enam buah prinsip yang mendasar. Prinsip-prinsip tersebut adalah sebagai berikut :


1.Metaphor (Metafora)
Metaphor atau metafora adalah aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan secara harafiah. Menghubungkan presentasi dan elemen-elemen visual dengan item-item yang berkaitan. Metafora akan membuat para pengunjung seolah-olah berada di tempat yang sebenarnya, atau bisa dikatakan juga bahwa metafora dibuat mirip seperti tempat yang dikunjungi. Contohnya, website suatu toko online yang memiliki metafora, dimana pengunjung dibawa ke tempat seolah-olah mereka benar ada di toko online tersebut.
Comment:
Pada website World Wide Store ditemukan unsur metaphor. Banner produk- produk dibuat seperti lorong tempat perbelanjaan dengan latar space.hal ini membuat pengunjung merasa sedang berbelanja di pusat perbelanjaan
2.Clarity (Kejelasan)
Harus ada alasan yang kuat/masuk akal dan jelas mengapa menggunakan setiap elemen yang berada dalam suatu interface yang kita buat,contohnya dalam peletakan suatu button,pembuat harus memiliki alasan mengapa diletakkan di tempat tersebut. Penggunaan elemen yang lebih sedikit akan lebih baik.
Comment:
3.Consistency (Ketetapan)
Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography (model form yang digunakan pada suatu website), teks, dll. Harus ada konsistensi baik dalam layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga. Setiap platform mungkin memiliki panduannya.
Comment:
Konsistensi dari web Santa Fean cukup menarik, dalam hal tampilan, pewarnaan,ikon, serta typography yang digunakan. Dalam hal tampilan dan pewarnaan, web ini menyesuaikan para pengunjung web yang tertarik dengan seni, dining dan real estate. Hal ini ditunjukkan dengan pemilihan warna merah dan banner-banner galeri seni, lokasi dining dan real estate
4. Alignment (Perataan)
Untuk perataan dapat digunakan rata kiri, kanan atau tengah. Pada umumnya suatu teks pada website dimulai dari kiri atas (left alignment), dimana left alignment akan mengijinkan mata untuk menguraikan tampilan dengan lebih mudah. Selain itu dengan menggunakan bantuan garis akan membantu dalam hal perataan. Sembunyikan garis horizontal dan vertical untuk membantu mengalokasikan komponen window/jendela. Garis juga membantu menghubungkan hal-hal yang berhubungan dan memudahkan perataannya.

5. Proximity
Item-item yang berkaitan ditampilkan bersama pasti memiliki hubungan karena jarak yang jauh mengimplikasikan bahwa tidak ada hubungan antara item-item tersebut.

6. Contrast (Keserasian Tampilan)
Keserasian tampilan akan membuat pengunjung web tertarik pada web tsb. Kontras juga dapat memandu mata pengunjung untuk melihat keseluruhan interface. Keuntungan dari keserasian adalah untuk memperkuat fokus atau untuk memperkuat suatu interface. Kontras digunakan untuk membedakan aktifitas kendali. Juga dapat digunakan untuk men-set item yang paling utama. Item yang paling utama diberi highlight. Dengan mempergunakan geometri dapat membantu pengurutan. Kontras juga mendukung skimming secara cepat..


Thursday, May 5, 2011

Membuat Galeri Foto Unik dengan Photoshop,

Galeri foto dengan bentuk yang bagus bisa menjadi karya seni tersendiri diluar foto-foto yang tersusun didalamnya. Seperti galeri foto yang akan kita buat kali ini, unik seperti film kamera manual yang melekuk-lekuk. Teknik yang digunakan adalah transform dengan Warp yang terdapat pada Photoshop.

Hasil Akhir dari Gambar

Sebelum memulai, mari terlebih dahulu kita lihat hasil akhir dari gambar yang akan kita buat
tutorial membuat galeri foto unik dengan photoshop

Langkah 1

Pada langkah pertama ini dibutukan sedikit kemampuan menggunakan Pen Tool, bagi yang ingin tahu lebih lanjut bagaimana cara menggunakan Pen Tool silakan membaca tutorial menggunakan Pen Tool yang saya posting beberapa waktu lalu.
Buat dokumen baru ukuran 1920 x 1200 pixel dengan resolusi 300 ppi dan pilih warna putih sebagai background. Setelah itu buat path seperti pada gambar berikut.
tutorial membuat galeri foto unik dengan photoshop

Langkah 2

Klik kanan path dan pilih Stroke Paths dengan Brush, jangan lupa sebelumnya atur diameter brush 5 px dengan hardness 100 % dan warna foreground merah. Maka kita telah membuat strip sebagai guide untuk tasformasi gambar kita selanjutnya.
tutorial membuat galeri foto unik dengan photoshop

Langkah 3

Download beberapa gambar yang dibutuhkan:


  • gambar Film




  • gambar rol Film




  • beberapa gambar yang akan kita susun dalam galeri. disini saya gunakan gambar-gambar dari beberapa tutorial yang saya tulis sebelumnya, bisa juga kamu gunakan gambar punyamu sendiri atau gambar siapa aja.



  • Langkah 4

    Buka gambar Filmdengan Photoshop, copy dan paste pada dokumen kita. Pada setiap kotak taruhlah gambar serta atur posisinya agar pas ditengah kotak. Pisahkan film satu-persatu. Film yang posisinya terletak pada bagian lekukan ubah bentuknya dengan tekan Ctrl+T, klik kanan pada kotak film dan pilih Warp. Geser tiap sudutnya sehingga kita dapati bagian tepi film membentuk seperti tepi strip. Untuk lebih jelasnya perhatikan gambar berikut.
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 5

    Untuk lekukan kedua kita gunakan dua setengah kotak film, lakukan transform dengan Wrap seperti pada langkah sebelumnya.
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 6

    Untuk lekukan ketiga gunakan lima setengah kotak film, pada daerah lekukannya lakukan transform dengan Wrap seperti berikut.
    tutorial membuat galeri foto unik dengan photoshop
    lekukan terahir gunakan dua setengah kotak film, lakukan transform dengan Wrap seperti pada langkah sebelumnya.
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 7

    Untuk sementara kita dapatkan hasil seperti berikut.
    tutorial membuat galeri foto unik dengan photoshop
    perhalus bagian-bagian tepi gambar yang kurang rata, sehingga kita dapati perubahannya seperti berikut.
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 8

    Langkah berikutnya adalah membuat bayang-bayang pada daerah lekukan. Dengan menggunakan Pen Tool buat seleksi seperti daerah lekukan, kemudian buat layer baru diatas layer yang akan diberi bayangan, dalam keadaan seleksi masih aktif buat gradient dari hitam #000000 ke transparent pada derah terseleksi.
    tutorial membuat galeri foto unik dengan photoshop
    Lakukan hal serupa untuk tiga daerah lekukan berikutnya.
    tutorial membuat galeri foto unik dengan photoshop
    tutorial membuat galeri foto unik dengan photoshop
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 9

    Untuk membuatnya lebih kelihatan nyata, kita beri efek cahaya pada beberapa daerah lekukan. Langkahnya pertama buat seleksi berbentuk elips dengan Elliptical Marquee Tool. Klik Select > Transform Selection dan ubah posisi ssekaligus ukuran seleksi serta posisikan seperti tampak pada gambar berikut. Kemudian pilih Select > Modify > Feather buat radiusnya 50 px.
    tutorial membuat galeri foto unik dengan photoshop
    Buat layer baru, letakkan di bagian paling atas, penuhi dengan warna putih #ffffff, ubah Opacity dan Fill menjadi 75% kemudian lakukan masking dengan seleksi seperti gambar berikut.
    tutorial membuat galeri foto unik dengan photoshop
    lakukan hal serupa pada lekukan paling bawah, tapi kali ini ubah Opacity laye menjadi 90% dan Fill 94%.
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 10

    Berikutnya buka gambar Rol Film ini dengan Photoshop, seleksi bagian gambarnya saja, copy dan paste pada dokumen kita. Letakkan layer rol film ini dibawah gambar photostrip, kemudian lakukan masking pada bagian paling kiri dari gambar photostrip agar nampak keluar dari rol film. Masking disini juga bisa dengan menghapus biasa menggunakan Eraser Tool.
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 11

    Buat seleksi pada separuh dokumen yang bawah, kemudian tarik gradient linear dari bawah ke atas, dari warna foreground #918f92 ke warna background #eef0ef.
    tutorial membuat galeri foto unik dengan photoshop

    Langkah 12

    Langkah berikutnya adalah memberikan bayangan pada photostrip. Caranya pertama buat path seperti gambar dibawah, kemudian buat layer baru dibawah photostrip. Penuhi path dengan warna hitam #000000, atur opacity dan fill menjadi 50%, lalu klik Filter > Blur > Gaussian Blur isi radiusnya 4 px. Lakukan yang sama untuk ujung kiri.
    tutorial membuat galeri foto unik dengan photoshop
    tutorial membuat galeri foto unik dengan photoshop

    Hasil Akhir

    Inilah hasil akhir dari galeri foto yang kita buat. Selamat mencoba trik ini untuk membuat galeri unik dari gambar-gambarmu.
    tutorial membuat galeri foto unik dengan photoshop

    Wednesday, May 4, 2011

    MembuaTemplate PinDengan Photoshop

    Kamu tahu cara bikin pin keren dengan Photoshop? ya disinilah pertanyaan ini akan terjawab. Tutorial Photoshop kali ini akan mengajak kamu belajar bersama bagaimana membuat template pin dengan Photoshop. Kita hanya akan menggunakan sedikit layer untuk menyelesaikannya. Dan layer-layer ini akan kita susun dengan struktur yang baik sehingga jika kamu ingin menggunakan gambar lain untuk pin kamu, kamu bisa dengan mudah menggantinya.

    Preview Hasil Akhir dari Gambar

    Berikut ini adalah hasil akhir gambar yang akan kita buat pada tutorial Photoshop kali ini. Kamu bisa lihat preview di bawah ini
    tutorial photoshop membuat desain template pin keren

    Langkah 1

    Bikin dokumen Photoshop baru dengan resolusi 1280 px kali 800 px dan penuhi backgroundnya dengan warna, kamu bisa menggunakan warna apa saja yang kamu suka. Buat layer baru dan dengan menggunakan Elliptical Marquee tool (M) buat marquee melingkar. Tekan Shift saat mendrag sehingga kamu akan menghasilkan seleksi lingkaran sempurna.
    tutorial photoshop membuat desain template pin keren

    Langkah 2

    Gunakan Paint Bucket Tool (G) untuk mengisi lingkaran seleksi tadi dengan warna apa aja, tidak ada masalah warna apapun yang kamu gunakan. Hilangkan seleksi dengan menekan Ctrl + D.
    tutorial photoshop membuat desain template pin keren

    Langkah 3

    Sekarang saatnya kita muai melakukan styling. Klik dua kali layer lingkaran hijau untuk menampilkan Layer Style window dan pertama pilih Drop Shadow dari pop-up menu yang ada. Gunakan setting seperti di bawah ini, namun jangan klik OK terlebih dahulu.
    tutorial photoshop membuat desain template pin keren

    Langkah 4

    Masih pada jendela Layer Effect, sekarang klik Inner Shadow dan gunakan pengaturan seperti berikut. Perhatikan kotak Use Global Light tidak kita centang, sehingga kita bisa mengubah arah sudut cahayanya. Jangan klik OK dulu.
    tutorial photoshop membuat desain template pin keren

    Langkah 5

    Selanjutnya pilih Inner Glow dan lakukan perubahan setting seperti di bawah ini. Jangan klik OK juga karena kita belum selesai melakukan styling.
    tutorial photoshop membuat desain template pin keren

    Langkah 6

    Dan ini adalah Layer Style terakhir yang kita gunakan. Pilih Gradient Overlay dan pengaturan yang saya gunakan sebagai berikut. Tekan OK jika kamu telah selesai.
    tutorial photoshop membuat desain template pin keren

    Langkah 7

    Sekarang kita akan mulai membuat highlight pada pin. Tambahkan layer baru, kemudian dengan menggunakan Elliptical Marquee Tool, buat seleksi elips dibagian kanan atas pin.
    tutorial photoshop membuat desain template pin keren

    Langkah 8

    Gunakan Gradient Tool dan atur warna Foreground menjadi putih,kemudian pada opsi Gradient Tool dibagian atas jendela Photoshop, pilih gradient Foreground ke Transparent. Sekarang buat gradient pada area seleksi seperti berikut ini. Setelah itu hilangkan seleksi dengan menekan Ctrl + D.
    tutorial photoshop membuat desain template pin keren

    Langkah 9

    Duplikat layer highlight dengan menekan Ctrl + J dan kemudian matikan visibilitas highlight yang asli dengan mengklik gambar mata di sebelah kiri layer. Pastikan sekarang kamu bekerja pada layer highlight copy. Pilih Eraser tool dan gunakan brush dengan radius ukuran besar untuk menghapus sebagian gambar highlight copy.
    tutorial photoshop membuat desain template pin keren
    Setelah menghapus kamu akan dapatkan gambar seperti berikut.
    tutorial photoshop membuat desain template pin keren

    Langkah 10

    Ubah Opacity dari highlight copy menjadi 50%, kemudian hidupkan kembali visibilitas layer highlight yang asli dan ubah juga Opacity layer ini menjadi 50%.
    tutorial photoshop membuat desain template pin keren

    Langkah 11

    Pilih layer highight copy dan lakukan duplikat terhadap layer ini. Sekarang gunakan Ctrl + T untuk memindah hasil duplikatnya ke bagian kiri bawah pin, perhatikan berikut ini:
    tutorial photoshop membuat desain template pin keren
    Tekan Enter jika sudah selesai. Berikutnya kurangiOpacity dari layer hasil duplikat ini menjadi 20%.

    Langkah 12

    Sampai disini template pin kita sudah selesai. Sekarang kita butuh menurunkan Fill Opacity dari layer lingkaran hijau tadi menjadi 0%, berikutnya kamu bsa menaruh gambar apapun yang kamu inginkan. Gambar apapun yang ingin kamu tampilkan pada pin kamu akan terletak dibawah layer ini.
    tutorial photoshop membuat desain template pin keren

    Langkah 13

    Waktu dulu masih suka musik, band yang saya sukai adalah salah satu dari band punk rock paling terkenal di dunia, Green Day. Lagu ‘Wake Me Up When September Ends’ dan ‘American Idiot’ adalah lagu yang paling sering saya dengarkan. Tapi sekarag saya sudah tidak suka musik lagi, bahkan saya membencinya. Dan gambar yang akan saya gunakan pada pin saya adalah simbol American Idiot punya Green Day, yaitu tangan memegang granat. Kamu bisa menggunakan gambar kamu sendiri, mungkin gambar yang ada kaitannya dengan sekolah kamu, bendera merah putih, gambar hasil desain kamu sendiri, atau mungkin logo dari organisasi yang kamu aktif di dalamnya. Taruh gambar kamu dibawah layer lingkaran hijau.
    tutorial photoshop membuat desain template pin keren
    Sekarang tekan Ctrl dan klik pada thumbnail dari layer ligkaran hijau untuk membuat seleksi berbetuk lingkaran,sekarang menuju ke layer Green Day, kemudian pilih Layer > Layer Mask > Reveal Selection. Dan sekarang kamu telah mendapatkan pin funky bergambar Green Day.

    Hasil Akhir Gambar

    Inilah hasil akhir dari tutorial bikin pin keren dengan Photoshop. Dengan menyimpan template ini kamu bisa menggunakanya sewaktu-waktu kamu membutuhkannya dan kamu bisa membuat banyak pin dengan berbagai gambar untuk koleksi. Semoga bermanfaat jangan lupa subscribe ke painthink RSS Feed.
    tutorial photoshop membuat desain template pin keren

    Friday, April 29, 2011

    Video New Background Designs!


    Sekilas Video New Background Designs


    Twitter Delicious Facebook Digg Stumbleupon Favorites More

     
    Powered by Blogger | Printable Coupons