Cara Mendesign Website Menggunakan Photoshop/GIMP [Prolog]

Photoshop memang sebuah aplikasi Grafis luar biasa, dan sangat berguna bagi para web designer professional. GIMP merupakan aplikasi sekelas Photoshop tapi bersifat Free, dan tersedia lintas platform (Linux, Windows, MAC) juga cukup powerfull untuk mengolah gambar dan design.
Pada kesempatan ini, saya ingin sedikit berbagi bagaimana mendesign kerangka website/blog menggunakan GIMP (Jika anda menggunakan photoshop langkahnya tidak jauh berbeda). Pada kesempatan ini saya ingin memeberikan pengenalan terlebih dulu, dan di akhir nantinya anda bisa mendownload Master projeknya.
Berikut dibawah adalah desgin header website yang saya buat menggunakan GIMP.

Design untuk sidebar, konten, dan footer belum sempat saya buat, pada kesempatan berikut saya akan coba design menlanjutkan rancangan ini, dan nanti jika ada kesempatan kita lanjutkan sampai ke kode htmlnya dan menjadi sebuah template blog/website. Terus ikuti blgo ini dengan berlagganan artikel terbaru lainnya.

Kamu belum terlalu akrab dengan GIMP (GNU Image Manipulation Program) silahkan baca-baca di blog ini, ada banyak artikel  dan ebook yang bisa anda dapatkan, saya juga buatkan label khusus untuk GIMP.
Tutorial GIMP lainnya bisa anda lihat di sini

Kamu bisa download master projeck website diatas di sini.

GIMP Tutorial -Objek Kembar!

GIMP adalah software/tool manipulasi photo yang mendukung multi-platform. GIMP merupakan singkatan dari GNU Image Manipulation Program. GIMP cocok untuk berbagai tugas manipulasi gambar, termasuk retouching foto, komposisi gambar, dan gambar konstruksi. GIMP memiliki banyak kemampuan sama seperti halnya Adobe Photoshop. Hal ini dapat digunakan sebagai program paint yang sederhana, program foto kualitas ahli retouching, sistem online batch processing, produksi massal renderer gambar, format converter gambar, dan lain sebagainya.
Berikut ini adalah tutorial bagaimana menggabungkan dua buah photo dengan manggunakn GIMP. Photo di bawah adalah orang yang sama, tapi dengan kostum yang berbeda. Berikut adalah gambarnya hasilnya.

Berikut tutorial sederhananya, saya jelaskan melalui Video.

Oke semoga bermanfaat, sekian

Bermain Dengan Photoshop

Kali ini kita akan bermain-main dengan photosop dikit, mumpung lagi tidak ada kerjaan
kita akan mecoba membuat sebuah animasi sederhana, terlihat seperti gambar di bawah



Adapun langkah pembuatannya adalah sebagai berikut.

Step 1.
Buka photosop, Dari menu file pilih Open dan masukkan gambar terserah anda, disini saya menggunakan gambar seorang gadis, tapi mungkin sudah tidak gadis lagi


step 2.
Buat layer baru [tekan Ctrl+j pada keyboard] dengan nama Layer 1. Dengan Paint Bucket tool tumpahkan warna pada Layer 1 tadi,
disini saya menggunakan warna #bfc8c8, Maka akan terlihat seperti gambar dibawah



Step 3.
Layer 1 masih aktif, Tuliskan teks menggunakan Horizontal type Mask tool, Tujuan kita menggunakan Hoizontal type mask yool ini adalah agar teks yang kita tulis akan membuat seleksi dengan sendirinya.
Setelah seleksi terbentuk tekan tombol Del pada keyboard, tapi sebelumnya sesuikan ukuran teks sampai nek dilihat. Makan hasilnya akan terlihat seperti gambar dibawah



Step 4.
Duplikat layer bacground, dengan memilih menu layer-->Duplikat layer, setelah hasil duplikat terbentuk, Delete layer background tadi, ini bertujuan agar layer backgroun yang berisi tadi bisa di gerakkan nantinya

step 5.
Melalui menu Window pilih Animation maka akan mucul Fram animation dan pembuatan animasi kita kali ini siap dimulai. Dulpikat Frame seperti terlihat pada gambar di bawah



Step 6.

Pada frame 1 geser gambar jauh kekiri, dan pada frame 2 geser gambar kembali ke bentuk normal, ini dimaksudkan agar pergerakan gambar mengikuti pergeseran arah yang kita lakukan.
Langkahnya terlihat seperti gambar dibawah.

gambar pertama merupakan frame 1 dan kedua adalah frame 2





Step 7.
Frame 2 masih aktif, kita akan membuat proses pergerakan gambar dari arah pergeseran yang telah kita berikan tadi.
Klik Tombol Tweens animation frame pada window animation, beri nilai 6 pada pilihan frames to add, semakin banyak pergerakan gambar akan semakin halus tapi dengan imbalan
ukuran gambar yang menjadi sedikit lebih bersar pula.

Step 7.
KLik tombol play pada Window animation untuk melihat hasilnya, Selanjutnya pada menu file pilih edit in image ready untuk pindah ke image ready> Loh kok harus ke image ready dulu?
Ini kita lakukan agar kita bisasave file kita nantinya dalam format *.gif
Setelh image ready kebuka pilih menu fuli-->save optimize, ZZZreng maka jadilah animasi yang telh kita buat.



Mainkan kreasi anda, banyak yang anda bisa lakukan untuk menghiasi animasi yang sudah anda buat.
Demikina semoga artikel sederhana ini bisa berguna bagi orang lain
Jika ada yang perlu didiskusikan plizz leave a command.

MEMBUAT ANIMANSI MENGGUNAKAN PHOTOSHOP

Hey jumpa lagi dengan ane, kali ini kita akan coba bahas mengenai cara membuat
animasi sederhana menggunakan photoshop. contoh berikut merupalan hasil dari
pembuatan animasi sederhana menggunakan photoshop


Step 1

Buat document baru dengan ukuran 200x200 pixel. Disini nantinya kita akan membuat animasi
daun berjatuhan kyak musim gugur gitu he..
disini saya mengukan model rerumputpata ha.., mungkin ente punya kreasi sendiri terserah nantinya ente mu kembangin kayak gimana.
Selanjutnya atus warna background #22b730 dan foregroundya #22b730, tujuan kita menggunakan warna ini adalah agar nantinya
rumput yang kita buat dengan brush tool bisa kelihatan lebih hijau tau mirip dengan rumput yang aslinya

Step 2

Buat layer baru, aktifkan brsuh tool lau pilih dune grass dan atur master diameternya menjadi 112pixel



Selanjutnya dengan brush tool tadi kita buat gambar rumput pada bagian bawah layer, karna diameter rumputnya besar, maka kita gunakan setengah saja,..loh kalo gitcu kita buat ukuran yang pas supaya kangsung?
jawab..
Udah tak coba pi hasilnya kurang kerren, so..just do it
maka akan dihasilkan sperti gambar dibawah



Duplikat layer 1 sehingga didapatkan layer 1 copy, selanjutnya pada layer 1 copy pilih menu edit-->transform-->flip horizintal
tujuannya adalah agar rumput terkesan tidak tumbuh searah, setelh melakuakn langkah ini runmput akan tumbuh zigzag.

step 3

Perbesar master diameter dari brush tool dan kreasikan rumputnya agar terlihat agak membesar disamping.
selanjutnya kita akan mebuat daunnya dimana nantinya daun ini akan kita buat bergerak.
Adapun cara membuat daun ini kita bisa menggunakan Custem Shape tool yang ada pada menu tool
lalu pilih daun yang anda suka, tetunya juga dengan warna daunnya uakni dengan merubah warna dari foreground.
jika gambar daunnya belum ada klik tanda panah pada menu shape yang muncul lalu pilih all trus oke
terlihat sperti gambar dibawah



Step 4

Nah sekarang kita masuk ke intinya, setalah gambar daun tadi jadi, plih menu window-->animation, maka akan mencul menu berbentuk frame dimana disini nantinya kita akan menggerakkan gambar kita sehingga kita dapat menghasilkan gambar yang bergerak
tentunya dengan type *.gif
selanjutnya duplikat frame, seperti gambbar dibawah



Step 5

Klik frame 1 untuk mengaktipkannya, lalu geser gambar daun tadi kebaian atas dari gambar rumput yang talah kita buat, usahakan geser sampai
keluar dari layer agar tidak kelihatan, trus klik frame 2 lalau geser lagi gambar daun tadi kebawah, usahakan dulu berupa garis lurus



gambar di bawah adalah frame 2



Step 6

Selanjutnya masih pada menu frame/animatiom, pilih tweens animation frames dan berikan nilai 5, semakin banyak nilai yang deberikan maka pergerakan gambar kita akan semakin halus
tapi dengan kapasitas gambar yang lebih besar pula. Maka hasilnya akan terllihat sperti gambar dibawah



untuk melihat hasilnya ente hanya perlu tekan play maka daun akan bergerak jatuh, ente bisa kreasikan pergerakan dari daun tersebut disamping itu juga delay waktunya juga bisa kita atur yakni dengan mengklik kiri pada simbol "sec" yang ada pada menu animation tersebut.
dan untuk menghasilkan format gambar berbentuk gif ente harus pisah ke image ready yakni dengan menu file-->edit in image ready. Setelah ada dalam image ready pilih save optimaze and oke,,jadi dah tu gambar gif
berikut adalah hasil akhirnya


oceh selamat berkreasi..
jika ada yang kurang jelas plizz leave a command

Membuat Button Web Dengan Photoshop

Pada kesempatan yang berbahagia ini kita akan coba membahas bagaimana menbuat button website dengan menggunakan photoshop, so bagi temen2 yang ingin tahu caranya buat button dengan photoshop jangan lewatkan artikel ini
berikut contohnya




Step 1
Buat document baru dengan ukuran 750x600 pixel dengan warna bacground #676a67, selanjutnya masukkan gambar dibawah ini yang nantinya akan kita gunakan
sebagai sample header website kita. Gabungkan header tadi dengan document yang telah kita buat atur tingginy sekitar 200px, untuk lebar disesuaikan dengan lebar document kita
kurang lebuhnya akan terlihat seperti gambar dibawah



simpan gambar diatas karna akan kita gunakan sebagai header




Step 2

Pada layer baru dengan rectangular marquee tool buat seleksi tepat dibawah header web kita dengan lebar disesuaikan dengan
lebar header, dan tinggi sekitar 23 pixel. Atur warna foreground menjadi #c7d6c3 dan background #316a35
Selanjutnya dengan gradien tool tarik garis dari atas kebawah pada seleksi yang telah kita buat
hasilnya kurang lebih akan terlihat seperti gambar dibawah



step 3

Biarkan seleksi masih aktif pada layer tadi, kemudian pilih menu select-->modify-->contract dan beri nilai 3, hasilnya seleksi tadi akan mengecil beberapa pixel
selnjutnya dengan gradient tool tarik garis dari bawah keatas dalam seleksi tadi, ingat didalam seleksi , jangan sampai keluar, sebab bakalan berantakan jadinya ntar. tekan control+d pada keyboard untuk menghapus seleksi
Kurang lebihnya akan didapat hasil seperti gambar dibawah



step 4

Dengan rectangular marquee tool buat seleksi tepat didalam menu bar yang kita buat tadi, sisakan sedikit jarak pada atas dan bawah seleksi sekitar 1px
selanjutnya tarik garis dari atas kebawah menggunakan gradient tool, setelah didapatkan hasilnya, pilih menu edit-->strok
dan beri warna hitam untuk garis outside 1px.
Maka setidaknya akan didapat hasil sperti gambar dibawah



step 5

Tambhakan text dan sesuaikan bersarnya dengan button yang telh kita buat
maka setidaknya akan didapat gambar seperti dibawah


Langkah yang sama juga untuk menu button yang lainnya sehingga akan didapat hasil akhir seperti gambar dibawah



Demikian semoga bermanfaat,,Omen........

Membuat Tulisan Rumput

Tanpa banyak cakap langsung saja entar keburu basi, disini saya menggunakan photoshop cs 2, di photoshop sebelumnya juga bisa digunakan, so jangan cemas




step 1
Buat dokument baru dengan ukuran 600x200 pixel dengan background warna putih ,
kemudian tulsikan sebuah hurup.
Untuk ukurannya huruf disesuaikan aja dengan tinggi documnentnya ,kurang lebihnya bisa dilihat dalam gambar dibawah



step2

Atur warna background dengan #175424 dan foreground #7a9677. Aktifkan menu Brush dan pilih dune grass atur
master diameter sampai 36 px. Selanjutnya buat layer baru, [ layer-->new layer ]
Dalam layer baru ini kita akan membuat goresan rumput mulai dari kiri ke kanan, usahakan agak tebal dan panjangnya
kita sesuaikan juga.
Kurang lebihnya bisa dilihat dalam gambar dibawah







step 3

Dengan move tool geser goresan rumput yang kita buat tadi ke bagian hurup yang kita mau tutupi, disini pertama saya akan mencoba menutupi bagian atas terlebih dahulu, tapi sebelumnya kita harus merubah dulu arah rebahnya rumput dengan menu edit-->transform-->flip horizontal, selanjutnya untuk
menyeseuaikan dengan bentuk hurup kita gunakan menu edit-->free transform atau control+T
kurang lebihya seperti gambar dibawah



step 4

Duplikat layer rumput, kembali ke menu edit-->tranform-->flip horizontal, selnjutnya pilih menu edit-->free transform
dan putar 180 derajat, sehingga kurang lebihnya akan terbentuk seperti gambar dibawah




step 5

Kita duplikat layer 1 copy dua kali, nantinya kita gunakan untuk
menutupi tinggi dari hurup, selanjutnya tekan control+T untuk mengaktifkan free transform dan putar 90 derajat dan sesuaikan dengan tinggi hurup agar bisa menutupi hurup secara utuh
kurang lebihnya akan terlihat seperti gambar dibawah




step 6

Dulikat layer dan gunakan free transform untuk menutupi semua bagian dari hurup tadi
sehingga semua hurup akan tertutupi oleh rumput,,dan lakukan hal yang sama untuk semua huruf yang ingin anda buat



Dan hasil akhirnya adalah seperrti gambar dibawah, tapi tambahkan sendiri dengan kreasi anda sendiri


wasalam omen...