Membuat Layout Web dengan Photoshop CS3

Sebelum Anda mulai:

1. Jika sobat seorang pemula pastikan sobat melewati langkah 1 - 4 dari Tutorial Photoshop  CS3  sebelum mencoba proyek ini.
   
2. Download Project Files (Photoshop.zip, 1 MB)
   
3. Gunakan gambar yang disediakan untuk proyek tersebut. sobat bisa mendapatkan foto gratis seperti ini dari Dreamstime (klik pada gambar Gratis "tab").

Mulai Proyek:

Anda kanvas

1. Buka dokumen baru .

Tempat dan mengedit gambar bunga-bunga

1. Tempat Gambar . File> Place> Browse dan pilih gambar bunga.
2. Resize Gambar - Memilih gambar. Tarik sudut gambar untuk mengubah ukurannya.
3. Putar Gambar - Gambar Pilih. Tempatkan kursor dekat tepi gambar> Ketika kursor memutar menunjukkan> klik dan tarik searah jarum jam atau anti searah jarum jam.
4. Double klik untuk menempatkan gambar.
5. Rasterize Layer - Klik kanan pada layer di mana gambar dan klik pilihan 'lapisan Rasterize'.
6. Hapus Latar Belakang - Gunakan ' Quick Slection Tool dan klik 'background of the image>it will get selected> tekan the delete key. Pilih dan menghapus latar belakang sisa.

Menu Bar

1. Klik Rectangle Shape Tool > klik dan drag untuk membuat sebuah persegi panjang dimana menu akan.
2. 'Shape 1' Sebuah layer baru akan berjudul apear pada layers panel.
3. Double klik pada kotak kecil di sebelah kanan, di bagian "shape 1 'layer.
4. The 'Pick a solid color' window akan terbuka.
5. Pindahkan kursor dan klik di suatu tempat di bunga untuk mengambil yang warna tertentu (kursor secara otomatis berubah menjadi sebuah pipet).
6. Perhatikan bahwa persegi panjang warna mencerminkan satu yang baru saja dipetik. Klik Ok.
7. Pilih Text Tool > klik di suatu tempat pada> tipe layar nama menu dipisahkan dengan "|" simbol (lebih enter).
8. Pilih font dan ukuran dan warna dari panel pilihan.
9. Posisi teks di mana yang diinginkan (lebih dari persegi panjang kuning).
10. Pilih Line Shape Tool > menciptakan baris di bawah menu persegi panjang.
11. Klik pada kotak kecil di lapisan garis dan menggunakan eyedropper untuk memilih warna hijau dari daun pada gambar.

Logo

1. Gunakan Text Tool untuk menciptakan nama logo - tentukan font, ukuran dan warna di 'Options Palette'.

Gambar # 2

1. Masukkan citra ibu dan anak> Resize (Bila terlalu besar zoom out sehingga sobat dapat menemukan sudut-sudut gambar tool [Zoom> klik Alt> pada layar untuk memperkecil. Double klik zoom tool untuk kembali ke ukuran sebenarnya] ).
2. Pilih Line Shape tool untuk membuat persegi panjang di sekeliling gambar> mengubah warna hijau dengan mengklik kotak kecil pada layer dan menggunakan eyedropper tool

Texual Konten

1. Pos - Gunakan Text Tool untuk mengetik halaman pos (menggunakan font yang umum seperti Arial sehingga dapat direplikasi di html nanti.
2. Konten - Klik Text Tool . Klik layar di mana teks konten akan mulai dan tarik ke bawah dan kanan di mana ia akan berakhir. Dalam area teks mulai ketik beberapa teks sampel. Tentukan ukuran dan font. Termasuk ukuran, warna dan font link sampel juga.

Footer

1. Salin dan sisipkan baris hijau di bawah ini untuk membentuk batas sebelum informasi footer. sobat dapat dengan mudah melakukan hal ini dengan menarik lapisan garis bentuk (bentuk 2) ke ikon 'create new layer' ditemukan tepat di samping ikon tempat sampah di palet layer. Ini akan membuat salinan layer. Kemudian sobat dapat memindahkan ke bawah.
2. Gunakan Text Tool untuk mengetik teks footer.

Gambar Slice

1. Gunakan alat slice untuk Create Slices atas logo dan gambar ibu / anak.
2. Klik 'Tool Slice Pilih' tersebut. Dalam opsi slice menetapkan nama untuk kedua slices.
3. Dalam 'Save for Web & Devices' window, pilih gambar  ibu / anak dan perubahan ke format JPEG. Periksa untuk melihat hasil dalam ukuran yang lebih kecil - GIF atau JPEG untuk logo juga.
4. Shift + memilih kedua gambar dan klik "Save".
5. Dalam 'Save Optimized As' window, menyimpan gambar sliced dan dioptimalkan menjadi "proyek nama" folder.Photoshop akan secara otomatis membuat dan folder 'foto' dan menyimpan file di dalamnya.

tata letak Anda sudah siap, sekarang sobat siap untuk membuat website sobat. Menciptakan tata letak dalam HTML dengan Dreamweaver CS3 Tutorial .

Dalam rangka untuk membuat situs sobat tinggal perlu mendaftar dengan server hosting.