Cara Menggunakan Clone Tool Photoshop

Tutorial Photoshop Kali ini akan membahas tentang Cara Menggunakan Clone Tool Photoshop. Pada saat menscan gambar mungkin tanpa sengaja gambar hasil scan kita tidak maksimal serta terdapat seperti goresan, namun jangan khawatir...

Langkah - Langkahnya sebagai berikut :

1. Buka gambar yang ingin diedit dengan Photoshop

2. Carilah dan pilih Clone tool pada tool box sebelah kiri photoshop

3. Tekan dan tahan tombol ALT pada keyboad dan arahkan mouse/pointer pada bagian yang ingin di duplikat / penempatan clone tool pada obyek yang akan di clone

4. Setelah itu lepaskan tombol ALT dan klik kanan dan tahan pada bagian yang akan diperbaiki, geser sehingga gambar terclone secara merata.

Tidak hanya itu, karena kita menempatkan pada gambar love maka gambar tersebut juga akan terduplikat... itulah kegunaan dari clone tool

Hasilnya:

Gambar yang sebelumnya rusak menjadi bagus kembali...

Demikianlah tutorial photoshop tentang cara menggunakan clone tool photoshop ini

Terima kasih semoga bermanfaat

Mempercepat Kinerja Photoshop

Tutorial Photoshop Kali ini akan membahas tentang Cara Mempercepat Kinerja Photoshop. 
Anda punya Komputer dengan spesifikasi yang rendah atau hardware yang lama, misal Pentium 3 dan Ram masih 512 mb. Atau netbook yang hanya memiliki prosessor berbasis intel Atom. Tidak perlu berkecil hati, karena kami punya tips agar Photoshop anda dapat melaju lebih kencang dan cepat alias tidak lemot.

Bagaimana Tips mempercepat kemampuan Photoshop? 

1. Buka program Photoshop, tunggu proses loading hingga terbuka dan klik Edit > Preferences > General, atau jika anda termasuk orang yang agak malas :) maka gunakan shortcut dengan menekan Ctrl+K

2. Menyesuaikan pengaturan
    
Memory Usage
Photoshop menggunakan banyak sekali RAM dan dibarengi dengan OS yang kita gunakan. Jumlah penggunaan RAM dapat diatur di Photoshop--anda dapat mengaturnya sesuai keperluan. Ini semua tergantung pada jumlah RAM yang dimiliki, rubah menjadi 55-65% (bagi yang hanya memiliki 2GB RAM) dan 70-75% (bagi yang memiliki 4GB RAM atau lebih).

Scratch Disks
Sebagai tambahan untuk RAM, Photoshop menggunakan Scratch Disks atau sering disebut "virtual RAM". Sebuah scratch disk adalah tempat hard drive yang dialokasikan untuk program sebagai virtual RAM digunakan ketika memproses data. Jika anda ingin memiliki lebih dari satu hard drive, memberikan Photoshop untuk menggunakan hard drive kedua, ini akan sangat membantu komputer bekerja lebih cepat.
Tentukan sebanyak yang anda inginkan, tidak perlu memikirkan tempat ini hanya sementara dan akan hilang ketika anda keluar dari Photoshop

History & Cache
Dalam proses editing kadang kita melakukan banyak kesalahan ketika bekerja pada sebuah tugas. Bayangkan bagaimana jadinya jika tidak ada perintah "undo"? Sayangnya, dalam Photoshop kita bahkan dapat mengatur jumlah dari History States atau undo tapi semakin banyak diatur--semakin banyak memori yang digunakan. Karena setiap tindakan diingat dalam virtual memory, jadinya memerlukan tempat yang lebih banyak untuk menyimpan semua langkah tersebut jika diperlukan kembali.
Secara normal, History States diatur menjadi 20, di mana, akan membuat komputer menjadi sangat lambat. Itu akan melambatkan Photoshop, khususnya ketika anda mengerjakan gambar yang dengan kapasitas yang cukup besar. Aturlah menjadi 10-15 dan itu akan berjalan lebih halus.
Cache levels digunakan untuk meningkatkan screen redraw dan histogram rendering speed. Pilih lebih banyak Cache levels untuk dokumen yang lebih besar untuk layer yang lebih sedikit, atau lebih sedikit Cache levels untuk dokumen yang lebih sedikit untuk layer yang lebih banyak. Anda dapat memilih dari 1 hingga 8.

Catatan: semua perubahan ini akan terjadi ketika anda menutup dan memanggil kembali Photoshop

3. Bersihkan Clipboard Anda
Lagi dan lagi masalah ada pada RAM. Clipboard Photoshop menggunakan banyak sekali RAM dan jika anda mengkopi beberapa gambar berkapasitas besar dan memindahkannya ke dokumen baru, itu akan masih tertinggal di clipboard. Kosongkan RAM dengan menghapus data yang tidak diperlukan di clipboard. Untuk melakukan itu semua, cukup klik Edit > Purge > All : purge

Catatan : perintah ini tidak dapat ditarik kembali, jadi pikir baik-baik sebelum melakukannya.

4 Tutup Software yang tidak diperlukan
Tip ini sangat sederhana tapi kadang kala kita melupakannya dan selalu menggerutu mengapa Photoshop berjalan sangat lambat. Ini semua karena banyak applikasi yang berjalan pada komputer anda, misal anda membuka microsoft office, coreldraw, winamp, vlc, dll, hal ini menghabiskan RAM dan tenaga komputer. Jadi intinya tutup semua aplikasi yang tidak diperlukan.

5. Instal Photoshop versi yang lebih Rendah
Jika saat diinstal Photoshop versi CS4 namun photoshop berjalan sangat lambat maka anda bisa mengUninstal dan menggantinya dengan versi yang lebih rendah yaitu photoshop CS3 atau Photoshop CS2. Namun jika anda menggunakan pentium 3 maka kami sarankan anda untuk menginstal: adobe photoshop 7
Photoshop versi 7 saja yang merupakan versi paling ringan dan fiturnya juga sepadan dengan photoshop CS Series.

Selamat belajar Belajar Photoshop dan Semoga Bermanfaat

Tutorial Photoshop (Penjelasan Tentang Layer Photoshop)

Tutorial Photoshop (Penjelasan Tentang Layer Photoshop) - Dalam Tutorial Photoshop kali ini saya akan menjelaskan apa yang dimaksud layer atau layers dalam Photoshop. Layer merupakan lapisan yang berfungsi sebagai tempat objek, bisa diibaratkan sebagai kanvas atau lapisan...

Dengan adanya Layer, memungkinkan Anda untuk mengedit sebuah objek tanpa mengganggu objek yang lain Sebagai contoh, jika Anda sedang mengedit gambar 1 maka gambar 2 tidak akan terpengaruh.

Anda dapat mengatur komposisi layers dengan cara mengubah atribut dan urutan layers. Sebagai tambahan, corak khusus seperti adjustment layers, fill layers, dan layers style dapat diterapkan untuk memberikan efek khusus pada layers tersebut.

Layers berisi satu objek sehingga masing-masing objek dapat diedit tanpa mempengaruhi objek yang lain. Ketika Anda memberikan efek tertentu (layer style) pada sebuah layer, maka Anda dapat menduplikasi layer style ke layer yang lain dengan corak dan bentuk yang sama.

Untuk Lebih jelasnya mengenai pengaturan Layer pada photoshop, silahkan lihat gambar tentang Layer Properties di bawah ini :

Berikut ini keterangan dari Layer Properties serta fungsi - fungsinya :

A. Link

Digunakan untuk membuat agar bisa mengelompokkan banyak layer sekaligus. Cara memakainya dengan memilih nama-nama layer yang diinginkan (dengan Shift + Klik), kemudian klik icon ini

.

B. Layer Style

Digunakan untuk membuat layer yang berfungsi seperti menu Layer > Layer style.

C. Add Layer Mask

Digunakan untuk menutup/melindungi sebagian/seluruh lapisan gambar dari proses pengeditan.

D. New Adjustment Layer

Digunakan untuk membuat layer yang berfungsi sebagai pengubahan warna. Perbedaannya kalau menggunakan menu Image > Adjustment bisa dibaca artikel tutorial yang ini.

E. Layer Group

Digunakan untuk mengelompokkan beberapa layer menjadi suatu kumpulan layer, agar mempermudah proses pekerjaan yang menggunakan banyak sekali layer.

F. New Layer

Digunakan untuk membuat layer baru yang kosong, ataupun untuk membuat duplikat layer. Untuk membuat duplikat layer, lakukan dengan cara menggeser nama layer ke icon ini.

G. Delete Layer

Digunakan untuk menghapus layer. Aktifkan layer yang ingin dihapus, kemudian klik icon ini. Dalam Photoshop versi CS2, bisa juga dilakukan hanya dengan mengaktifkan layer kemudian tekan tombol Delete pada keyboard (ini belum bisa dilakukan jika Anda menggunakan Photoshop versi sebelumnya).

H. Layer Blending Option

Digunakan untuk mengatur proses yang terjadi pada pixel-pixel layer terhadap layer yang ada posisinya berada dibawahnya.

I. Image Adjustment Layer

Ini menunjukkan sebuah gambar layer yang merupakan pengaturan warna.

J. Layer Thumbnail

Ini adalah tampilan gambar kecil dari gambar asli Anda. Jika layer merupakan sebuah tulisan atau text, maka gambar tampilannya adalah sebuah huruf T.

Layer ini juga menunjukkan bahwa layer ini adalah layer yang dalam kondisi aktif atau terpilih. Layer yang sedang aktif akan mempunyai warna yang berbeda dengan layer yang tidak aktif.

Tiap sebuah layer bisa mempunyai nama yang berbeda beda. Secara default, Photoshop akan membuat layer dengan nomor yang berurutan. Nama layer ini bisa diganti dengan cara melakukan klik 2 kali pada nama layernya, kemudian Anda tinggal mengetikkan nama yang diinginkan.

Namun saat melakukan klik 2 kali, harus tepat pada nama layernya, karena kalau tidak, maka kita justru masuk ke pengaturan Layer Style. Jika klik 2 kali dilakukan pada thumbnail text layer, maka kita akan langsung membuat blok pada layer tulisan tersebut.

Anda juga bisa menyeleksi layer dengan melakukan klik kanan pada thumbnail layer kemudian memilih Layer Transparency. Atau dengan melakukan Ctrl + klik pada thumbnail layer.

K. Eye Ball / Visibility

Digunakan untuk mengatur tentang tampil atau tidaknya sebuah layer yang sedang Anda kerjakan dengan Photoshop. Cara pakainya, dengan melakukan klik pada icon tersebut.

L. Palette Menu

Icon ini digunakan untuk menampilkan pilihan menu palet. Menu palet ini berhubungan dengan fungsi palet yang sedang Anda tampilkan.

M. Opacity

Digunakan untuk mengatur tingkat transparansi layer. Semakin kecil nilai prosentasenya, maka layer/gambar Anda akan semakin transparan.

N. Fill Opacity

Digunakan untuk mengatur tingkat transparansi layer. Namun tidak sama dengan Opacity, karena Fill ini tidak mengatur bagian yang merupakan Layer Style. Jadi pilihan Fill ini akan bermanfaat jika Anda juga menerapkan Layer Style.

O. Layer Style option

Gambar icon F pada layer ini menunjukkan bahwa pada layer ini terdapat efek Layer Style, sementara gambar segitiga di sebelah kanan ini digunakan untuk menampilkan atau tidaknya informasi detil Layer Style yang digunakan.

P. Locked layer

Gambar icon gembok (maksudnya kunci) ini menunjukkan bahwa layer ini dalam kondisi terkunci. Biasanya gambar dengan ekstension .jpg akan mempunyai layer background yang selalu terkunci. Untuk membuka kunci pada layer background ini, caranya dengan melakukan klik 2 kali pada layer tersebut, kemudian klik OK pada kotak dialog yang muncul.

Demikian tutorial lengkap mengenai penjelasan dan ilustrasi Layer Photoshop.

Terima kasih semoga bermanfaat.

Tutorial Photoshop (Teknik Dasar Edit Foto Dengan Photoshop)

Tutorial Photoshop (Teknik Dasar Edit Foto Dengan Photoshop) - Cara Edit Foto Dengan Photoshop - Masih berbicara tentang Adobe Photoshop dan bagaimana cara mengedit foto dengan Photoshop, kalau kita membahas "cara" berarti kita membahas, bagaimana untuk mengolah gambar digital agar terlihat lebih menarik dari foto aslinya, nah... disini pembahasan nya bisa menjadi panjang. Menarik menurut Saya belum tentu menarik menurut Anda, atau pun Menarik menurut teman di sebelah Anda, Selera masing-masing yang melihat hasil akhir sebuah Olahan Gambar Digital yang akan menentukan nya.

Apa yang harus di Pahami Pertama Kali

Tool Tool Dasar Photoshop serta kegunaan nya, sebuah Pokok terpenting yang harus di pahami pertama kali, ibarat Orang yang ingin Belajar mengendarai Sepeda Motor, harus sudah benar benar tahu gas dan kegunaan nya, Rem juga fungsi dari Rem itu sendiri, Fungsi Kopling dan cara menggunakan nya, begitu pula mempelajari Adobe Photoshop, yang "njelimet" kalau kata Orang yang baru akan memulai Belajar Photoshop. Seperti Sepeda Motor, 3 Hal Terpenting yang harus kita Pahami sebelum Belajar Mengemudikan Sepeda Motor, Pertama Gas, Kemudian Rem, lalu Kopling, Photoshop pun dapat kita bagi menjadi 3 Tool dasar yang harus di Pahami, Pertama Tool Seleksi, Kemudian Tool Retouch lalu Tool Drawing

3 Kelompok Tool Dasar inilah yang akan manjadi Pondasi kita dalam mempelajari photoshop, di mulai dari Kelompok Tool yang Pertama Tools Selection, apa itu tool tool seleksi, Tool Selection atau Tool Seleksi, adalah Tool yang akan kita pergunakan untuk menyeleksi, memotong serta memindahkan Area tertentu pada Sebuah Foto. Lalu Kelompok Tool yang Kedua, Retouch Tools. Tool Tool ini lah yang akan membantu kita selama Proses Pengolahan Gambar Digital. Selanjutnya Kelompok Tool yang Ketiga Drawing Tool, sesuai dengan nama nya Drawing, yaitu Menggambar, Kelompok Tool ini memungkinkan kita untuk menggambar di Photoshop dengan Mudah

Mempelajari Fungsi Fungsi Tool Dasar

Setelah kita tahu dan Memahami Tool Dasar dari Adobe Photoshop, kemudian kita Mempelajari Fungsi dari Tool Photoshop Tersebut, dan bagaimana Tool itu bekerja. Bisa dimulai dengan membuka Foto Apapun lalu mencoba satu persatu Tool Tersebut, Kalau Anda Berfikir hal ini hanya akan membuang waktu Saja. Anda Salah...! Saya akan mencontohkan kembali dengan Belajar Sepeda Motor, Cukup dengan Tahu Gas dan Rem juga Kopling, ya...... Saya Pastikan Anda Bisa Mengendarai Sepeda Motor, dan Sepeda Motor tersebut Pasti Berjalan kalau Gas di Putar, Tapi....apa iya Motor bisa Berjalan dengan Mulus kalau Kita tidak mengetahui Pada Kecepatan Berapa Kopling harus di Naikkan Satu Step, Lalu Bagaimana Pula agar motor bisa Tetap Seimbang selama kita mengendarai nya. Kembali ke Adobe Photoshop.... Tidak ada Salah nya mencoba satu per satu masing masing Tool Photoshop yang berada pada Tool Box, agar nantinya selama kita mengolah gambar Digital dapat berjalan dengan Mulus, karna kita tahu semua Tool Photoshop dan Cara Menggunakan Tool Photoshop

Belajar Tehnik Photoshop

Mempelajari Cara berarti kita membicarakan juga Tehnik Disini, Banyak sekali cara cara atau pun Langkah langkah edit dengan Photoshop, Cutting, Masking dan Blending, adalah 3 dari sekian Banyak Tehnik edit Foto di Adobe Photoshop. Perkaya diri kita dengan berbagai macam tehnik yang banyak di Share di Website atau pun Blog Tutorial Photoshop, bisa juga dengan membeli buku Buku Tutorial Photoshop, bila memungkinkan Ambil Mata Kuliah Design yang Mempelajari Photoshop lebih Rinci, Sangat Beruntung menurut saya Orang yang mempelajari Photoshop dengan Berkuliah, karna terdapat benang merah yang sangat jelas Antara Photoshoper "Kuliah" dan Photoshoper "Otodidak". Saya Termasuk dalam Kategori Photoshoper Otodidak, yang sama sekali tidak mengetahui makna makna Warna, tidak mengetahui bagaimana Typography yang Baik, Tidak tahu apa dan bagaimana Painting, Semua Hal yang Saya Tahu tentang Photoshop Saya Pelajari dari Tutorial yang ada di Internet, beruntung nya Saya karna Saya memiliki Pembimbing yang sudah Lebih dulu mengenal dan memahami Photoshop, Pembimbing yang juga Seorang Photoshoper Otodidak.

Explorasi dan Seni

Explorasi....Explorasi.... dan Explorasi.... terus mengexplor kemampuan kita, jangan Bosan dengan kata Belajar, jangan Pernah Puas dengan Hasil kita yang Sekarang, kalau kita merasa Puas dengan hasil Olahan kita yang sekarang, maka pembelajaran akan berhenti sampai di sini, dan Hasil Olahan pun akan berhenti hanya pada yang kita Tahu Saya. Buka Mata... Lihat bagaimana Hasil Olahan Orang Lain, cari Hasil Editan yang lebih baik dari hasil Editan kita, Pelajari itu semua, di sinilah Karakter Digital Imaging kita akan terbentuk, disinilah kita akan banyak mengerti dan akan memahami Bagaimana cara mengedit yang Baik. dan disini juga kita akan menyisipkan nilai seni dalam setiap hasil Olahan Kita.

Tutorial Desain Web (Sekilas Pengetahuan Tentang Cara Mendesain Sebuah Website)

Tutorial Desain Web (Sekilas Pengetahuan Tentang Cara Mendesain Sebuah Website) - Sering kita temui website yang tipikal: "Welcome to my homepage," animasi e-mail, background dengan tulisan miring (diagonal), animasi garis pembatas, tabel dengan border tiga-dimesi dan lain-lain. Hal ini terjadi akibat dari fasilitas Template yang disediakan oleh software pembuat web seperti: Frontpage, Corel WebDesigner, dan sebagainya yang ditujukan untuk mempermudah penggunanya dalam membangun website.

Jika anda puas dengan hasil kerja anda membangun website dengan fasilitas template, sudahlah cukup sampai disini. Tetapi jika anda tidak puas dengan apa yang anda buat, dan anda merasa ingin lebih baik, maka anda perlu mengetahui bagaimana seorang Web Designer membangun suatu Website, terlepas anda punya bakat seni atau tidak.

1.     Unik : Dalam membuat karya apapun seorang designer mempunyai kesadaran untuk tidak meniru atau menggunakan karya orang lain. Begitu pula seorang Web Designer harus mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang telah digunakan atau dibuat oleh orang lain.

2.     Komposisi : Seorang Web Designer selalu memperhatikan komposisi warna yang akan digunakan dalam website yang dibuatnya. Pergunakan selalu Palette 216 WebColor, yang dapat diperoleh dari Adobe.com, hal ini untuk mencegah terjadinya dither pada image yang berformat GIF. Dalam membangun website suatu perusahaan, Web Designer selalu menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut. Sebagai contoh: Telkom Corporate Color-nya adalah biru, Coca-Cola : merah dan putih, Standard-Chartered : hijau dan biru, dsb. Untuk kemudian warna-warna tadi digunakan sebagai warna dominan atau sebagai elemen pendukung (garis, background, button, dsb).

3.     Simple : Web Designer banyak yang menggunakan prinsip "Keep it Simple", hal ini ditujukan agar tampilan website tersebut terlihat rapi, bersih dan juga informatif.

4.     Semiotik : Semiotika adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini diharapkan dengan melihat tanda atau gambar, user/ audience dapat dengan mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar/image yang berkesan tombol, padahal itu bukan tombol/ link.

5.     Ergonomis : Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah dalam hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga mudah dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di akses dan lebih penting lagi adalah Informatif.

6.     Fokus : Tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang berukuran hampir sama. Hal ini akan membingungkan user/audience untuk menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.

7.     Konsisten : Tentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub Judul dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut, misalnya: hindari menggunakan font Comic dalam membangun website suatu perusahaan resmi.

Demikian beberapa aspek dan prinsip yang digunakan Web Designer dalam membuat website, selebihnya merupakan ekspresi dari pembuat website itu sendiri yang terwujud dalam penggayaan penyusunan website.

Software-software pembuat suatu website

Desain : Untuk membuat desain suatu homepage biasanya para web designer dimulai dengan software ini sebagai tampilan sementara atau dalam membuat layout homepage.

1. Adobe Photoshop : Desain berbasis titik ( bitmap )

2. Adobe Image Ready : Memotong gambar-gambar ke dalam format html

3. Adobe Illustrator : Desain berbasis vector

4. CorelDraw : Desain berbasis vector

5. Macromedia Freehand : Desain berbasis vector

Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah efek cahaya, textur dan manipulasi teks.

1. Macromedia Firework : Efek teks

2. Painter : Memberikan efek lukisan

3. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.

4. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai’s Power Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain layout homepage di Photoshop.

Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup.

 1. 3D Studio Max : Untuk membuat objek dan animasi 3D.

 2. Gif Construction Set : Membuat animasi file gif

 3. Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil.

 4. Microsoft Gif Animator : Membuat animasi file gif

 5. Swift 3D : Merancang animasi 3D dengan format file FLASH.

 6. Swish : Membuat berbagai macam efek text dengan format file FLASH.

 7. Ulead Cool 3D : Membuat animasi efek text 3D.

Web Editor : Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script.

1. Alaire Homesite

2. Cold Fusion

3. Microsoft Frontpage

4. Macromedia Dreamweaver

5. Net Object Fusion

Programming : Hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang dan Iklanbaris.

1. ASP ( Active Server Page )

2. Borland Delphy

3. CGI ( Common Gateway Interface )

4. PHP

5. Perl

Upload : File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita.

1. Bullet FTP

2. Cute FTP

3. WS-FTP

4. Macromedia Dreamweaver : dengan fasilitas Site FTP

5. Microsoft Frontpage : dengan fasilitas Publish

Sound Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file midi atau wav, perlu alat khusus untuk itu.

1. Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav.

2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi

Banyak sekali memang software untuk membuat suatu homepage dan kita tidak perlu mempelajari semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula lebih baik dimulai terlebih dulu dengan mempelajari software Microsoft Frontpage atau Macromedia Dreamweaver agar lebih mengenal aturan-aturan membuat homepage dan mengenal bahasa html. Setelah itu baru Adobe Photoshop yang dipakai kebanyakan para desainer.

Langkah-langkah Membuat Homepage

Bermacam-macam langkah yang digunakan profesi web kita untuk membuat suatu homepage. Berikut ini adalah proses secara umum yang dilakukan kebanyakan profesi web di Indonesia untuk membuat web.

1.     Membuat Sketsa Desain : Desainer bisa saja menuangkan ide dalam membuat interface suatu homepage dalam bentuk sketsa di kertas dahulu. Untuk kebanyakan orang, biasanya langkah ini dilewatkan dan langsung pada langkah membuat layout desain dengan menggunakan software.

2.     Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan software seperti Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks dan Macromedia Freehand untuk memperhalus sketsa desain.

3.     Membagi gambar menjadi potongan kecil-kecil : Setelah layout desain homepage sudah jadi. File gambarb tersebut dipecah menjadi potongan kecil-kecil untuk mengoptimize waktu download. Untuk melakukan hal tersebut dapat menggunakan software Adobe Image Ready. Software ini dapat langsung memotong gambar yang besar tadi dan otomatis juga menjadikannya ke dalam format html. Langkah ini bisa saja dilewatkan bila ukuran gambar kita tidak terlalu besar.

4.     Membuat Animasi : Animasi diperlukan untuk menghidupkan homepage kita agar menarik pengunjung. Macromedia Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut.

5.     Membuat HTML : Setelah itu kita merapikan layout desain kita seperti menempatkan beberapa tombol dan gambar, menambah text, mengedit script HTML, membuat layout form ke dalam format HTML. Untuk itu kita perlu software HTML Editor seperti Macromedia Dreamweaver, Microsoft Frontpage dan Allaire Homesite.

6.     Programming dan Script : Untuk website e-commerce, iklan baris, lelang, database, membuat guestbook, counter dan forum diskusi. File HTML kita perlu programming untuk melakukan aktivitas semacam itu. Programming dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI, PHP, Visual Basic. Dan perlu diperhatikan bahwa programming dan script ini biasanya dilakukan setelah desain homepage kita telah jadi.

7.     Upload HTML : Setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita perlu meng-upload file kita ke suatu tempat ( hosting ), agar semua orang di dunia dapat mengakses halaman html kita. Biasanya Macromedia Dreamweaver dengan fasilitas site FTP dan Microsoft Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP.

Tutorial Photoshop ( Memisahkan Gambar Dari Background dengan Extract)

Tutorial Photoshop ( Memisahkan Gambar Dari Background dengan Extract) - Tutorial ini menjelaskan bagaimana memisahkan gambar dari background. Cara ini efektif bagi gambar dengan tingkat kontras yang tinggi, dengan begitu selalu ada cara untuk berimajinasi.

Memang ada cara yang lainnya yaitu dengan menggunakan Magic Eraser Tool, tapi kelemahan dari cara ini adalah tool ini tidak bisa membedakan tingkat kontras dalam gradien sehingga tidak bisa digunakan bila background terlalu komplek dengan banyak warna. Baiklah,,, untuk mempersingkat waktu, mari kita mulai saja.

Langkah - langkahnya adalah sebagai berikut:

1. siapkan gambar yang akan di edit
2.  Buka gambar tersebut dengan program photoshop, disini saya menggunakan photoshop 7, namun bagi anda yang sudah menggunakan Photoshop CS caranya sama saja, [klik kanan] gambar > open with "pilih" Photoshop atau Start > All Program > Photoshop 7 > Open > cari gambar yang diinginkan
3. Setelah itu kalian lihat menu utama di sebelah atas pilih filter > extract atau kalian bisa menekan (ctrl + alt + x) Maka kalian akan dibawa ke jendela extract
4.      Di jendela extact terdapat kalian cari Toolbox dengan gambar spidol di sebelah kiri atas dan [klik kiri] tool tersebut lalu atur properties di sebelah kanan dengan ketentuan berikut:
   
5. Setelah selesai dengan pengaturan, buatlah garis dengan spidol tersebut pada bagian perbatasan antara object dengan background tersebut, lihat gambar:  
   
   
   
   6. Setelah selesai memblok kalian pilih icon seperti gambar cat di sebelah kiri (atau tekan  huruf "G" pada keyboard) lalu [klik kiri] di dalam bagian gambar yang di blok sehingga gambar terisi dengan cat biru, lihat gambar:
   
   
   
   
   
   7. Jangan  menekan [ok], tapi tekan [preview] untuk melihat hasil extract sehingga bisa diperbaiki jika ada kekurangan
   
   
   8.  Ada 2 tool di sebelah kiri untuk memperbaiki hasil extact yaitu Clean up tool & Edge touchup tool
   Perbedaan: Clean up tool = untuk membersihkan sisa noda dengan menghapus bagian tidak diinginkan Edge touchup tool = untuk memperhalus dengan sentuhan halus / memperhalus object yang telah di extract
   
   
   9.  Jika pengeditan dirasa sudah selesai maka tekan [ok]
   Hasilnya adalah:
    
   
   
   

Tutorial Desain Web ( Efek kertas terselip dengan CSS )

Tutorial Desain Web ( Efek kertas terselip dengan CSS ) - Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. kali ini kita akan membuat sebuah efek kertas yang terselip ke dalam lubang. Berikut ini adalah screenshot dari efek yang kita bicarakan jika anda masih belum memiliki gambarannya.

1.       Markup HTML

Untuk markup HTMLnya sederhana saja, kita hanya membutuhkan sebuah div sebagai objek kertas, saya beri kelas kertas pada div tersebut. Saya juga tambahkan sedikit random/dummy text pada kertas tersebut.

<div class="kertas">

        <h1>Lorem Ipsum Dolor Sit Amet</h1>

        <p>

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut at consectetur officia et accusamus inventore dolor cupiditate tempore fuga alias aliquam quo dolorum voluptatem tenetur ipsum corporis commodi vitae! Iusto!

        </p>

</div>

2.       CSS

Pertama-tama kita beri style terlebih dahulu kertas yang akan kita selipkan nantinya beserta background dari bodynya.

body{

        background:#d8d8d8;

}

.kertas{

        background:white;

        width:400px;

        margin:20px auto;

        padding:20px;

        position:relative;

        font-family:cambria,serif;

        box-shadow:0 1px 10px rgba(0,0,0,.3);

}

Selanjutnya adalah efek utama yang akan kita buat, Tekniknya sangat sederhana, kita buat tambahkan pseudo element pada class kertas, yang akan menjadi efek lubang untuk menyelipkan kertas.

.kertas::before, .kertas::after{

        background:#d8d8d8;

        content:"";

        width:100px;

        height:50px;

        position:absolute;

        top:-25px;

        box-shadow:0 5px 10px -7px rgba(0,0,0,.3);

}

style tersebut akan membuat sebuah box yang akan kita gunakan untuk menutupi ujung-ujung kertas dan pada style selanjutnya kita akan mengatur rotasi dari tiap ujung.

.kertas::before{

        left:-50px;

        -webkit-transform: rotate(-45deg);

        -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

        -o-transform: rotate(-45deg);

        transform: rotate(-45deg);

}

.kertas::after{

        right:-50px;

        -webkit-transform: rotate(45deg);

        -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

        -o-transform: rotate(45deg);

        transform: rotate(45deg);

}

Silahkan simpan pekerjaan anda dan perhatikan apa yang ditampilkan dalam browser. 

3.       Efek Selotip

Dengan teknik yang sama, kita juga bisa membuat efek kertas yang menempel dengan menggunakan selotip di setiap ujungnya. yang perlu kita lakukan hanyalah merubah tinggi dari pseudo element dan memberi background yang transparan

Dengan teknik yang sama, kita juga bisa membuat efek kertas yang menempel dengan menggunakan selotip di setiap ujungnya. yang perlu kita lakukan hanyalah merubah tinggi dari pseudo element dan memberi background yang transparan

.kertas::before, .kertas::after{

        background:rgba(255,255,255,.5);

        content:"";

        width:100px;

        height:25px;

        position:absolute;

        top:-10px;

        box-shadow:0 5px 10px -7px rgba(0,0,0,.3);

}

Dalam contoh di atas saya memberikan warna transparan dengan system rgba, anda bisa menggunakan background-image dan membuat gambar selotip yang lebih realistis