Cara Membuat Header Situs Web Profesional di Photoshop

Photoshop CC 2014 adalah alat yang ideal untuk mendesain gambar profesional untuk situs web Anda, termasuk spanduk. Saat mendesain spanduk pertama Anda, buatlah desainnya tetap sederhana sehingga grafiknya tidak dipenuhi dengan terlalu banyak informasi visual. Jika bisnis Anda memiliki warna perusahaan dan font perusahaan, Anda pasti dapat menggunakannya di spanduk Anda.

Langkah 1

Cara Membuat Header Situs Web Profesional di Photoshop

Luncurkan Photoshop. Tekan "Ctrl-N" atau pilih "Baru" dari menu File. Di kotak dialog, tentukan tinggi dan lebar spanduk Anda, seperti lebar 900 piksel dan tinggi 150 piksel. Klik "Oke."

Langkah 2

Cara Membuat Header Situs Web Profesional di Photoshop

Pilih warna latar belakang yang solid untuk spanduk jika diinginkan. Untuk melakukannya, klik ikon "Warna Foreground" di Toolbar dan pilih warna, lalu klik "Alat Persegi Panjang" dan seret ke seluruh spanduk. Dalam tutorial ini, bagaimanapun, kita akan tumpang tindih dua gradien daripada menggunakan latar belakang yang solid.

Langkah 3

Photoshop CC 2014 adalah alat yang ideal untuk mendesain gambar profesional untuk situs web Anda, termasuk spanduk. Saat mendesain spanduk pertama Anda, buatlah desainnya tetap sederhana sehingga grafiknya tidak dipenuhi dengan terlalu banyak informasi visual. Jika bisnis Anda memiliki warna perusahaan dan font perusahaan, Anda pasti dapat menggunakannya di ...

Klik alat "Gradien" di Kotak Alat. Klik menu "Isi" di bilah Opsi dan pilih gradien hitam dan putih dari preset yang tersedia. Klik di mana saja di atas spanduk di kanvas dan seret kursor ke bawah spanduk. Lepaskan tombol mouse untuk menerapkan gradien.

Langkah 4

Spanduk web Photoshop, tutorial spanduk web, gambar web photoshop

Klik "Alat Teks Horisontal" di Kotak Alat. Seret kursor ke atas spanduk untuk membuat kotak teks. Gunakan menu di bilah Opsi untuk menentukan font, ukuran font, dan warna. Seret kotak teks sehingga berada di tengah sisi kiri spanduk.

Langkah 5

Cara Membuat Header Situs Web Profesional di Photoshop

Pilih "Buka" dari menu File dan pilih gambar apa pun di komputer Anda yang ingin Anda gunakan untuk spanduk Anda, seperti logo perusahaan, gambar diri Anda atau produk yang Anda jual. Saat gambar terbuka, pilih "Duplikat" dari menu Layer. Ubah tujuan ke file header Anda, yang akan disebut "Tanpa Judul-1" kecuali Anda sudah menyimpannya. Klik "OK" untuk menambahkan gambar sebagai lapisan baru ke spanduk Anda.

Langkah 6

Cara Membuat Header Situs Web Profesional di Photoshop

Pilih "Transform" dari menu Edit dan kemudian klik "Scale." Dalam kebanyakan kasus, seluruh gambar tidak akan terlihat pada spanduk sempit, tetapi garis besarnya terlihat setelah Anda memilih "Skala". Seret sudut mana pun dari kerangka gambar untuk mengubah ukurannya untuk spanduk Anda. Tahan tombol "Shift" sambil menyeret untuk mengunci rasio aspeknya. Tekan enter." Seret gambar sehingga berada di sisi kanan spanduk.

Langkah 7

Photoshop CC 2014 adalah alat yang ideal untuk mendesain gambar profesional untuk situs web Anda, termasuk spanduk. Saat mendesain spanduk pertama Anda, buatlah desainnya tetap sederhana sehingga grafiknya tidak dipenuhi dengan terlalu banyak informasi visual. Jika bisnis Anda memiliki warna perusahaan dan font perusahaan, Anda pasti dapat menggunakannya di ...

Klik ikon "Foreground Color" di Toolbar untuk membuka Color Picker. Klik di mana saja di sisi kanan spanduk untuk mencocokkan warnanya di Color Picker dan kemudian klik "OK."

Langkah 8

Spanduk web Photoshop, tutorial spanduk web, gambar web photoshop

Pilih "Alat Persegi Panjang" dari Toolbox. Klik menu "Isi" dan kemudian pilih ikon "Gradien" di bagian atas opsi menu. Seret kursor melintasi spanduk dari dalam sisi kiri gambar sampai ke tepi kiri spanduk. Membuat persegi panjang dengan gradien menggunakan warna yang Anda cocokkan dari gambar.

Langkah 9

Cara Membuat Header Situs Web Profesional di Photoshop

Temukan layer "Rectangle 1" di panel Layers, yang merupakan layer yang berisi persegi panjang gradien yang baru saja Anda tambahkan. Seret layer ini ke bawah untuk menjadikannya layer ketiga dari atas -- di bawah "Layer 1" dan layer yang berisi teks Anda. Klik menu "Opacity" di bagian atas panel Layers dan seret penggeser hingga sekitar 50 persen. Membuat gradien atas semi-transparan memungkinkannya bergabung dengan gradien di bawahnya, menciptakan latar belakang yang kaya.

Langkah 10

Cara Membuat Header Situs Web Profesional di Photoshop

Pilih layer yang berisi teks Anda di panel Layers. Klik menu "Layer", pilih "Layer Style" lalu klik "Bevel & Emboss." Pastikan menu Gaya diatur pada "Emboss" dan seret penggeser "Kedalaman" ke kiri -- sekitar "225" persen -- untuk menambahkan sedikit efek ini ke teks.

Langkah 11

Photoshop CC 2014 adalah alat yang ideal untuk mendesain gambar profesional untuk situs web Anda, termasuk spanduk. Saat mendesain spanduk pertama Anda, buatlah desainnya tetap sederhana sehingga grafiknya tidak dipenuhi dengan terlalu banyak informasi visual. Jika bisnis Anda memiliki warna perusahaan dan font perusahaan, Anda pasti dapat menggunakannya di ...

Klik opsi "Satin" di jendela Layer Style. Untuk gaya ini, gunakan Blend Mode "Multiply" dan kurangi Opacity menjadi sekitar "15" persen. Ini menggabungkan gaya satin dengan gaya emboss. Sesuaikan pengaturan jika diinginkan dan klik "OK."

Spanduk web Photoshop, tutorial spanduk web, gambar web photoshop

Simpan gambar sebagai spanduk yang dioptimalkan untuk Web dengan memilih "Simpan untuk Web" dari menu File. Pilih "JPEG" dari menu Format dan gunakan Kualitas Gambar antara 75 dan 80 persen. Ini menciptakan gambar dengan ukuran file kecil, yang dimuat dengan cepat oleh browser Web apa pun, tanpa mengorbankan kualitas gambar. Klik "Simpan" dan pilih lokasi untuk menyimpan file di komputer Anda. Setelah menutup Photoshop, tambahkan file ke halaman Web Anda.