Banyak orang baru untuk web desain merasa bingung dengan irisan dan Javascript rollovers dan akhirnya meninggalkan proyek mereka keluar dari frustrasi. The point of this Photoshop web tutorial is to keep things simple by creating a web page that uses only 2 graphics. Inti dari web Photoshop tutorial ini adalah untuk menjaga hal-hal sederhana dengan menciptakan sebuah halaman web yang menggunakan hanya 2 grafis.
Website Plan
Kita akan menciptakan sebuah banner dan tempatkan dalam sebuah tabel yang akan berisi 5 baris dan 1 kolom. Banner akan ditempatkan pada baris teratas. Baris berikutnya akan berisi teks untuk situs Anda dan setiap foto yang mungkin ingin memasukkan. Baris 3 akan mengadakan pemisah, baris 4 akan untuk link teks Anda dan pemberitahuan hak cipta, dan baris 5 akan mengadakan pemisah kedua.
Let's Get Going
Aku akan nama situs ini Designer Girlz Jaringan. Langkah berikutnya adalah untuk menemukan grafis untuk banner. Anda mungkin menemukan citra yang baik di salah satu situs foto saham gratis (saya telah membuat daftar beberapa di bawah ini), tapi aku sedang mencari sesuatu yang sedikit lebih profesional, jadi aku mencoba iStockphoto galeri dan menemukan sebuah ilustrasi oleh Prashanth Vinaya bahwa hanya biaya $ 3. Sweet. Manis. Itu versi dikurangi itu di sebelah kanan.
Pilih A Website Color Scheme
Warna bendera dan situs Web yang akan diambil dari berbagai pink yang digunakan dalam gambar. Ada 3 pink Saya ingin menggunakan - gelap merah muda, tengah pink, dan merah muda yang ringan bahwa saya membuat diriku dari bayangan yang lebih gelap merah muda. Saya menemukan bahwa dengan menggunakan slider pada opacity warna sampel Anda dapat membuat variasi yang bagus. Buka dokumen baru dan salin dan sisipkan grafis utama yang Anda pilih ke dalamnya. Sekarang dari toolbox pilih alat dan pipet sampel warna dengan mengkliknya dalam grafis Anda. Hal ini akan mengubah warna latar depan alun-alun di kotak peralatan Anda. Sekarang buka dokumen baru yang lain dan dalam Latar Belakang Isi pilih Putih. Klik OK. Dengan membuka dokumen ini, buat layer baru dengan masuk Layer> New> Layer. Lalu pergi Edit> Fill dan pilih Isi, Use: Foreground Color. Ini akan mengisi dokumen Anda dengan warna yang baru saja Anda sampel. Triknya di sini adalah untuk menurunkan opacity menggunakan slider dan untuk tetap bermain-main dengan itu sampai Anda menemukan nice teduh. Bila Anda menetap di satu, meratakan gambar dengan layer akan> Ratakan Image. Gunakan alat pipet lagi, kali ini untuk mengubah warna latar depan alun-alun di kotak peralatan Anda sehingga sama dengan warna yang baru Anda buat. Sekarang klik pada warna kuadrat dan pemilih warna akan muncul, dan Anda bisa menuliskan jumlah warna baru Anda.
Memilih Font
Aku pergi melalui font dan menetap di Onyx teratur. Ketika Anda menemukan sebuah font yang bekerja untuk Anda, cobalah bermain dengan pelacakan, terkemuka, dan skala - atau kombinasi keduanya. Ini membuatnya lebih personal dan unik ketika Anda menyertakan beberapa tweak. Untuk memilih font di Photoshop pergi Window> Character. Dalam palet Anda akan melihat daftar font yang Anda install. Untuk men-tweak setting Anda perlu untuk membuka Ayat palet. Anda dapat melakukan ini dengan masuk Window> Paragraph. Mencari font baru? Pada akhir tutorial ini Anda akan menemukan daftar untuk beberapa sumber font gratis.
Merancang A Website Banner
Buat dokumen baru yang adalah 600 x 300 piksel. Anda dapat mengubah ukuran ini sesuai desain Anda sendiri ketika Anda memilih saham Anda sendiri foto dan rencana tata letak yang sesuai. Sekarang saya akan membuat layer baru, Layer> New Layer dan aku akan menyebutnya Designer Girl. Aku akan menempatkan ilustrasi di lapisan ini dan menyusut agar sesuai. Anda menyusut grafis Anda dengan memilih Edit> Transform> Skala. Kotak yang melompat-lompat akan memiliki pegangan. Gunakan kunci Shift untuk membatasi proporsi, dan mengecilkan gambar Anda dengan memilih menangani kiri atas dan menariknya ke arah kanan bawah. Untuk memindahkan grafik, tarik di dalam kotak melompat-lompat. Klik masukkan ketika Anda senang dengan hasilnya.Selanjutnya kami ingin latar belakang yang gelap. Aku akan pergi dengan cahaya merah muda.
Menambahkan Sebuah Warna Latar Belakang
Aku memilih latar belakang lapisan, layer 1, dan aku mengisinya dengan cahaya merah muda dengan pergi Pilih> Semua, kemudian Edit> Fill, dan di kotak dialog di Isi, aku pilih Gunakan: Warna dan di Color Picker FBE0EC saya masukkan. Hasilnya adalah 600 x 300 spanduk dengan latar belakang warna yang lembut dan dengan seni ditempatkan di sebelah kiri. Kami ke sana. Aku memutuskan untuk menerapkan stroke tebal untuk lapisan latar belakang untuk membuat desain lebih menarik. Pertama pastikan latar belakang lapisan, layer 1, aktif, dan membuat copy dengan masuk Layer> New> Layer Via Copy. Selanjutnya klik ganda di sebelah nama layer. Ini akan memunculkan Blending Options di kotak dialog Layer Style. Pilih dan kemudian klik pada kata Stroke di Styles pilihan di sisi kiri. Saya mengubah pengaturan untuk Ukuran: 7px, Posisi: Di dalam, Blend Mode: Normal, Opacity: 100%, Fill Type: Color, dan saya mengklik warna D04E8C carikan dan masuk dalam color picker. Click OK. Klik OK. Perbatasan hanya untuk mengimbangi desain, jadi dengan segala cara membuat perubahan dan mendapatkan kreatif dengan ide-ide Anda sendiri. Website Name & Section Titles Website Nama & Bagian Judul We're going to put the names of the major sections right on the banner.Kita akan menempatkan nama-nama bagian utama kanan pada banner. Karena itu akan hanya satu satu grafik kita akan menggunakan peta gambar. Buat layer baru untuk kata-kata Anda. Gunakan jenis alat untuk menciptakan nama bagian dan kemudian menggunakan alat untuk memindahkan posisi mereka tepat ke tempat yang Anda inginkan pada banner. Jangan lupa untuk memilih warna untuk teks Anda yang lebih gelap dari warna latar belakang Anda menemukan diri Anda sendiri untuk menghindari kata-kata kotor dan penderitaan berteriak kerontokan rambut besar! Lakukan ini dengan pergi Window> Character. Dalam palet Karakter Anda akan menemukan warna persegi. Klik untuk mengubah warna. Anda akan memerlukan sebuah HTML editor seperti GoLive atau Dreamweaver untuk mengotomatisasi proses ini. Ini benar-benar sangat sederhana. Anda membuat sedikit "peta" atas setiap kata dan kemudian masukkan link tujuan. Jika Anda tidak memiliki editor HTML Anda harus melakukan pencarian Google pada gambar peta untuk menemukan tutorial, atau membeli buku seperti Elizabeth Castro's HTML Quickstart Guide untuk membantu Anda.
Rencana B
Anda tidak memiliki editor HTML, Anda tidak ingin untuk mencari tutorial, dan Anda tidak ingin membeli buku Elizabeth Castro? Kita akan pergi ke Plan B - menggunakan link teks biasa kanan di dalam halaman web itu sendiri. Itu berarti kita memiliki beberapa ruang kosong pada banner sekarang, tepat di bawah nama website. Gunakan ruang ini untuk menambahkan frase deskriptif tentang apa pengguna akan menemukan di situs Anda. The SeparatorBuat dokumen baru. Harus lebar 600 piksel, dan harus tinggi sekitar 12 piksel. Isilah formulir ini dengan latar belakang warna. Kemudian, dengan menggunakan alat teks dan warna gelap, ketik beberapa periode, seperti ini dan menempatkan mereka dalam berkas, keterpusatan mereka. Mengubah ukuran dan jarak sampai tampak sempurna. Sekarang simpan ini sebagai file GIF. Build A Simple TabelDalam editor HTML Anda pilihan membangun sebuah meja sederhana yang mengandung 5 baris dan 1 kolom. Jika Anda akan menggunakan link teks navigasi di bawah panji-panji bukannya peta gambar pada banner, buat baris tambahan sehingga Anda berakhir dengan 6 baris dalam tabel Anda. N Sekarang tempat Anda ke individu elemen baris tabel dan Anda selesai.
0 komentar:
Posting Komentar