Di dalam
tutorial photoshop kali ini, saya akan mengajak anda semua untuk belajar bersama
mengenai cara membuat desain web dengan photoshop secara cepat dan mudah. Tentu
saja penjelasan yang saya berikan di sini hanya berupa teknik-teknik dasar yang
digunakan dalam pembuatan desain atau template dari sebuah website. Desain
website yang saya hadirkan di sini dibuat dengan memadukan beragam warna
sehingga tampilannya akan menjadi menarik meski tata letaknya bisa dibilang
amat sederhana. Dengan kreatifitas yang anda miliki, nantinya anda bisa
melakukan modifikasi sesuai dengan yang anda inginkan.
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLoVuDxJ2YQ84M1RTk1y4ttCsn4JRBmnnqyv0GGyOzI1uxOJYiEnyfzQGVjfG9RSGmZwSavypZcjaNg88j7t1SR15sixc2bxDGZiaSecoBdvbreLaBKoKgBkbHQV14WJH0-iWSYcGR_SR/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat.png) |
Source: Google Images |
Sebenarnya untuk membuat sebuah desain website diperlukan dua langkah.
Langkah yang pertama adalah membat layout dengan aplikasi photoshop dan langkah
yang kedua adalah membuat kode html untuk desain tersebut melalui aplikasi
dreamweaver. Karena blog ini hanya membahas mengenai tutorial photoshop, maka
yang saya jelaskan di sini hanyalah langkah awal yaitu tentang bagaimana
membuat layout sebuah website atau blog dengan menggunakan photoshop. Untuk
tutorial tentang pembuatan kode html nya anda bisa mencarinya di google. Jangan
khawatir karena ada banyak sekali website yang menyediakan tentang cara membuat
html dengan aplikasi dreamweaver. Baiklah tak perlu berlama-lama lagi mari langsung
saja kita simak cara pembuatan desain website dengan photoshop berikut ini:
Tutorial Cara Membuat Desain Website dengan Photoshop Mudah dan Cepat
Langkah
pertama
Tahap
pertama dalam pembuatan desain web adalah membuat layout untuk desain awal.
Buatlah sebuah kanvas baru dengan ukuran 700 x 875 px dan pengaturan resolusi
pada angka 72 ppi. Jangan lupa untuk mengatur background content pada opsi
transparent.
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_S7aXkWXM4g-DcmnCj0_guS54nwzgZZ9Thc-8XagtQP5mGxISGiK7AfHk7khkvREUKe-YaurPoi1cUCmUmhzKwdpEGDuWXldRh7JwkKcZqWWfTc8iyCzDnbe0Vj2T0BKlY5p4Q7HwoDo/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+1.png) |
Source: Google Images |
Langkah
kedua
Klik rounded
rectangle tool pada kolom tool box, kemudian buatlah sebuah bidang dengan bentuk
persegi agak memanjang ke bawah. Ini kan digunakan sebagai background dari
desain web yang anda buat.
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDibauPYQOHb6ff0kF8bWZ2dxhaRYLWbwpyJJ4v3f0iK45Ema6D7leip2Y6CcEa1a6m4oi_bpDhS8FifR6JP2uCG0eI7C8PdWuo708Vlw_gETH_m-TXD3cdsiEBdYPUgW54nNO4QVRQhJ/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+2.png) |
Source: Google Images |
Langkah
ketiga
Klik kanan
pada layer shape 1 kemudian pilih opsi blending option. Setelah itu klik
gradient dan buatlah gradasi warna sesuai dengan kesukaan anda. Untuk desain
ini dipilih warna hijau agak kecokelatan dengan warna dasar putih sehingga
hasil gradasinya akan tampak seperti ini:
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cJCMGBnNYAXeGTKu61-jlynBEQPPYvzGeJbUBJmwnoqFA3PWIylCWAbzRfhEbUfHWGjRcE4b97babvSVHPbi7OEjY3KDijlmsS1uJGLtObqNVMXAul0uBe9RCdHFEMTV8DfI9KvY3ax9/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+3.png) |
Source: Google Images |
Langkah
keempat
Langkah selanjutnya
adalah membuat panel menu yang nantinya akan diisi dengan beberapa kategori
menu. Klik lagi rounded rectangle tool kemudian buat sebuah kotak persegi kecil
di bagian kiri atas background. Beri gradasi warna yang agak berbeda agar tidak
menyatu dengan warna pada background.
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorqjzVE9BpxayUrRNByF61sM9ylF4_CYo4NUOxepofNiVbvwgNgmzwqeaSX8jzZ6LgqEI3uqOqesBivXcmMAMqhwSL1oDvWi7QqS-_4k4tAUpCv0RQqJjmARxlUWEsTZZcy02ePXRNhen/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+4.png) |
Source: Google Images |
Langkah
kelima
Buatlah
beberapa persegi memanjang dengan rounded rectangle tool berikan warna
yang lebih cerah seperti yang ada pada gambar di bawah ini:
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifEzXJsqD5tKPnkr64D8ZYRdtdkQVt3D-h9GTIHTxDsIdrozrCwpmbTlxPss7D5BbNaIzP2ovOzcLafgHIlxOn3NZcgQllxX5K1-R_4RSEbrNoVj3dyEiX_BjkpXH8_BdPQU7bJBNFDpka/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+5.png) |
Source: Google Images |
Langkah
keenam
Berikan
tulisan pada kolom menu yang telah dibuat. Biasanya kolom menu diisi dengan
beragam kategori mulai dari halaman utama, tentang saya, galeri foto, dan juga
beragam link yang bertautan dengan website tersebut. Tak lupa ditambahkan
gambar menarik lainnya di sebelah kanan background agar desain website tidak
terlalu kosong dan monoton.
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8NlDrGaNS_JrFSdMBkXwhv5njq2_1t19ZWZTP7FngyfCZKINo5FOCnOAkBHD7Wi799ittlTekMHJkvnJU6QnE9F57SylVEiFX_AI3bsjaTDwwu3gvLXrRr5bA8wOlmqUgSDqnYctga-P/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+6.png) |
Source: Google Images |
Langah
ketujuh
Gunakan
slice tool untuk memotong-motong layer menjadi beberapa bagian. Daftar menu
dibagi menjadi 4 bagian sesuai dengan kategori yang ada. Kemudian logo website
di sebelah kanan dipotong menjadi 1 bagian. Dan buat 1 bagian di bawah untuk
konten atau isi dari web tersebut.
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilZxzp7O3YFIZLP4rouTQzO6cJEbkIzzORjfBli-1eE13QVuE3W2uGrPsdKB4iRK_XDdTk5UBvUP0WmkQVFp5i4ZeUyT9Pt0pZ3I6KwVtSFcW5TsFsMaoJVBQVLqV4k2BlBffgedTFX0Yu/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+7.png) |
Source: Google Images |
Langkah
kedelapan
Sejauh ini
desain web sederhana sudah selesai, anda tinggal menyimpannya dengan menuju
menu file>save for web and devices...
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-vLagOVX708JW_kGlToKBVt7iTA2-EpRXUX2zywe5vsdsoOtTJeB_Eg0Pzz1QA066uTMjdgjYsxwhIeXaLGu3VckdaLNB8HjIiUFS8rYf8GX4YRqwK9epEmKDa8UJ1Vn1rpRArxrT_Uy/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+8.png) |
Source: Google Images |
Langkah
kesembilan
Pada jendela
wizard pada saat melakukan save, buat pengaturan seperti pada gambar di bawah
ini:
![Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat Cara Membuat Desain Web dengan Photoshop Mudah dan Cepat](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUfb6ecoiIuliIiFDka7JrtFz-Vv46_tnLJ6EcRCuS06AY4zfpt7r87cvzS8tteCuUTs01V2awt0Bx5fzurs8OB6ngxfMiej3a_3S8te9A3QNvclYhdxX8pGdcy1l-nAeX6_dI_7LT9fm/s1600/Cara+Membuat+Desain+Web+dengan+Photoshop+Mudah+dan+Cepat+9.png) |
Source: Google Images |
Itulah
kiranya langkah awal dalam
cara membuat desain web dengan photoshop mudah dan
cepat selanjutnya anda tinggal mengeditnya dengan menggunakan macromedia
dreamweaver untuk memasukkan kode html pada desain tersebut agar dapat digunakan
sebagai template dari sebuah website atau blog yang anda miliki. Sekian dari
saya, sampai jumpa lagi pada beragam tutorial photoshop selanjutnya.
source : https://bisaeditphotoshop.blogspot.co.id