Navigasi Situs Saya

Langkah 1

Aku sudah menyampaikan itu sebelumnya dan saya akan mengatakannya lagi ... Salah satu cara terbaik untuk berguru dan tumbuh di Photoshop yaitu mendekonstruksi dan berusaha untuk membuat desain yang menginspirasi Anda. Kaprikornus dalam semangat itu, mari kita melompat dan mengambil melihat lebih bersahabat pada navigasi LittleLines.com untuk melihat apa yang sanggup kita pelajari ihwal bagaimana mereka awalnya dibentuk indah sedikit nav kafe mereka.
Perhatikan semua detail dalam tampilan diperluas di bawah ini, perbatasan, gradien, ukuran dan warna. Dalam kasus ibarat ini, alat zoom sanggup menjadi teman terbaik Anda.

Langkah 2

Mari kita melompat tepat di dan membuka dokumen Photoshop baru. Untuk tujuan ilustrasi Aku akan membuat 540x200px dokumen saya di 72ppi, tapi terang kalau Anda membuat konsep situs web yang Anda ingin mempunyai ukuran dokumen cukup besar untuk merancang seluruh situs daripada hanya navigasi.
Untuk ketika ini, mari kita mengabaikan latar belakang tekstur kayu dan mengatur warna solid untuk latar belakang navigasi. Klik pada swatch Foreground di bab bawah palet Tools untuk membuka Color Picker, kemudian menentukan warna gratis untuk latar belakang. Saya menentukan yang anggun warna oranye # e07814.

Langkah 3

Buat layer gres dengan mengklik ikon Create New Layer di bab bawah palet Layers. Ketika layer gres muncul klik dua kali pada nama layer untuk mengubah nama itu Nav Background. Mulai kini ketika saya memberitahu Anda Buat New Layer dan beri nama, ini yaitu apa yang akan Anda lakukan.
(* Catatan:. Jika palet Layers tidak terlihat, membawanya dengan menentukan Window> Layers dari hidangan utama)

Langkah 4

Sekarang mari kita membuat seleksi dengan menekan tombol M untuk beralih ke alat Rectangular Marquee. Seperti kita ketahui dari melihat lebih bersahabat dari Langkah 1, langkah-langkah latar belakang navigasi 50px tinggi. Saya ingin menyimpan palet Info terlihat sehingga saya sanggup melihat dimensi yang tepat dari pilihan saya (Window> Info dari hidangan utama), cara ini ibarat yang saya klik dan tarik pilihan saya saya sanggup menonton sizing dan selalu mendapat pilihan saya sesudah pada percobaan pertama.
Setelah pilihan Anda dibuat, cukup tekan Option-Delete (PC: Alt-Backspace) untuk mengisi seleksi dengan warna foreground gres dipilih. Dengan pilihan Anda penuh dengan warna, hapus dengan menekan Command-D (PC: Ctrl-D).
(* Catatan:. Anda juga sanggup memakai opsi Ukuran Tetap di Marquee Options kafe di bab atas Photoshop untuk membuat pilihan ukuran sempurna, tapi saya menemukan bahwa memakai palet Info lebih cepat)

Langkah 5

Sekarang mari kita mengatur panggung untuk tombol kita. Buat layer gres yang disebut Tombol Background, mengatur warna foreground menjadi # 47361f, dan membuat pilihan di atas Background Nav yang 38px tinggi dan cukup lebar untuk menampung tombol Anda ingin membuat (* note: Anda selalu sanggup mempersempit tempat kalau itu terlalu lebar untuk memulai dengan). Isi seleksi dengan warna foreground gres dengan menekan Option-Delete (PC: Alt-Delete) dan hapus dengan menekan Command-D (PC: Ctrl-D).

Langkah 6

Sekarang kita tambahkan gradien cahaya untuk Button Background. Buat layer gres berjulukan Gradient Putih dan mengatur warna foreground menjadi putih dengan baik memakai Color Picker ibarat yang telah kami lakukan sebelumnya, atau hanya dengan menekan tombol D untuk mereset foreground dan warna latar belakang hitam dan putih masing-masing dan kemudian dengan menekan tombol X untuk beralih putih untuk latar depan.
Beralih ke Gradient tool dengan menekan tombol G, dan menentukan Foreground to Transparent swatch dari pemilih Gradient Gradient di Options kafe di bab atas Photoshop.

Langkah 7

Sebelum kita menerapkan gradien, memungkinkan membuat Clipping Mask dari lapisan Putih Gradient ke lapisan Tombol Background oleh Control-Klik (PC: klik-kanan) pada lapisan Putih Gradient di palet Layer dan menentukan Create Clipping Mask dari menu. Ini akan membuatnya sehingga hanya pixel dari lapisan putih Gradient yang tumpang tindih lapisan Tombol Background akan terlihat. Anda akan tahu clipping mask telah dibentuk alasannya yaitu lapisan akan menjorok dengan panah kecil ke lapisan itu dijepitkan.
(* Catatan: Cara gampang untuk membuat clipping mask antara dua lapisan yaitu untuk tahan Option (PC: Alt) kunci dan kemudian menggerakkan kursor ke baris antara dua lapisan di palet Layers, pada ketika kursor akan mengubah apa yang tampak ibarat dua bulat yang tumpang tindih. Ketika perubahan kursor, cukup klik mouse anda untuk membuat topeng kliping.)

Langkah 8

Dengan lapisan terpotong gotong royong kita sanggup maju dan menambahkan gradien. Untuk melakukannya, cukup klik dan tarik ke bawah dengan alat Gradient dari atas area tombol latar belakang coklat hingga sekitar 50% dari jarak dari atas ke bawah.
(* Catatan: Menekan tombol Shift sementara Anda klik dan tarik gradient Anda akan membatasi ke garis benar-benar vertikal.)

Langkah 9

Jelas efek gradien kami gres dibentuk jauh terlalu kuat, sehingga memungkinkan pergi ke palet Layers dan menurunkan Fill layer Gradient Putih untuk 20% dan mengubah Blend Mode itu menjadi Color Dodge.

Langkah 10

Selanjutnya, mari kita ciptakan perbatasan ganda di bab atas tombol coklat. Buat layer gres berjulukan Ganda Perbatasan dan mengatur foreground dan warna latar belakang masing-masing # 644239 dan # 866d53.
Cari alat Rectangular Marquee di bab atas palet Tools dan Klik dan Tahan mouse Anda di atasnya untuk mengungkapkan itu terbang-out-menu. Pilih Single Row Marquee Tool dari daftar dan klik pada panggung di bab atas tombol brown latar belakang untuk membuat pixel seleksi horisontal tunggal di atas panggung. Jangan khawatir kalau penempatan Anda tidak sempurna, Anda selalu sanggup memindahkan perbatasan atas atau ke bawah sesudah kami selesai membuat itu.

Langkah 11

Dengan pemilihan terusan piksel tunggal Anda dibuat, tekan Option-Delete (PC: Alt-Backspace) untuk mengisi seleksi dengan warna foreground kita set di langkah terakhir. Tekan tombol Panah Bawah pada keyboard Anda sekali untuk memindahkan pilihan ke bawah satu pixel, kemudian isi seleksi dengan warna latar belakang gres Anda dengan menekan Command-Delete (PC: Ctrl-Backspace). Sekarang Anda sanggup membatalkan pilihan dengan menekan Command-D (PC: Ctrl-D).
Jika baris Anda tidak di tempat yang tepat, beralih ke Move tool dengan menekan tombol V dan kemudian memindahkannya ke atas atau bawah dengan mouse Anda (atau tombol panah) hingga itu menutupi bab atas dua piksel tombol brown background. Aku sudah diperbesar di bawah ini sehingga Anda sanggup melihat persis bagaimana hal yang harus membentuk up.

Langkah 12

Hal terakhir yang perlu kita lakukan yaitu menambahkan lapisan Perbatasan ganda untuk topeng kliping kita sudah dibentuk ke lapisan Tombol Background, jadi hanya ibarat yang kami lakukan sebelumnya, Control-klik (PC: Klik kanan) di Perbatasan ganda lapisan dalam palet Layers dan pilih Create Clipping Mask dari menu.

Langkah 13

Dengan latar belakang kini lengkap, beralih ke Type tool dengan menekan tombol T dan memungkinkan mempersiapkan font dan gaya. Website LittleLines memakai font Lucida Grande yang merupakan sistem abjad Apple menemukan native pada sistem operasi OSX, namun pengguna Windows, jangan khawatir, hanya membaca. Kita akan mengatur jenis kami dengan terlebih dahulu memastikan Palette Character terlihat (jika tidak, pilih Window> Character dari hidangan utama).
Pengguna Windows: The Lucida Grande Font yaitu Apple pribadi hingga rilis browser Safari untuk PC di mana Apple termasuk kedua Lucida Grande Lucida Grande dan font Bold. Karena ini yaitu font Apple, saya tidak sanggup memberikannya pada saya pelajaran download, tetapi kalau Anda ingin font ini, Anda sanggup men-download dan menginstal Windows versi browser Safari dari website Apple dan kemudian arahkan ke Program Files> Safari> Safari.resources folder di mana Anda akan menemukan kedua standar dan versi berani font. Anda kemudian sanggup drag file-file ke Windows Font Manager di panel kontrol untuk menginstal mereka. (* Catatan: Anda mungkin harus me-restart Photoshop untuk menyegarkan itu daftar font.)
Dari font hidangan drop-down di bab kiri atas palet Karakter menemukan font Lucida Grande dan memilihnya, kalau alasannya yaitu alasan tertentu komputer Anda tidak mempunyai Lucida Grande terinstal, Anda sanggup memakai font sans-serif yang sama ibarat Verdana, Arial atau Helvetica untuk mencapai efek yang sangat mirip. Mengatur berat font Bold, ukuran untuk 11pt, warna ke # bcb19b dan gaya anti-aliasing di bab bawah palet untuk Crisp.

Langkah 14

Klik ke panggung untuk memulai sebuah referensi teks gres dan mengetikkan link Anda. Ketika mengejek sebuah situs ibarat ini saya memakai spasi untuk memisahkan link dan dalam hal ini saya memakai 9 ruang antara setiap item link. Setelah selesai teks Anda, klik pada ikon kecil Periksa Mark dalam Opsi teks Alat kafe di bab atas Photoshop (atau cukup tekan tombol Enter). Anda akan melihat bahwa layer teks gres telah diciptakan untuk Anda dalam palet Layers.

Langkah 15

Dengan lapisan teks masih dipilih dalam palet Layers, tahan Command (PC: Ctrl) kunci dan klik tombol Add ikon New Layer di bab bawah palet Layers. Ini akan menambahkan lapisan gres di bawah lapisan ketika ini. Nama ini layer gres Tombol sekarang.
Tekan tombol M untuk beralih ke alat Rectangular Marquee (* pastikan Anda beralih kembali ke alat Rectangular Marquee dari flyout-menu kalau masih diatur ke alat Single Row Marquee yang kita dipakai untuk membuat garis horizontal) dan membuat rectangular selection dari sudut kiri atas ke sentra antara dua pertama tombol ibarat yang ditunjukkan di bawah ini.

Langkah 16

Tekan tombol D untuk mereset foreground dan warna latar belakang hitam dan putih masing-masing, maka cukup mengisi seleksi dengan warna putih dengan menekan Command-Delete (PC: Ctrl-Backspace). Anda tak sanggup Deselect dengan menekan Command-D (PC: Ctrl-D)

Langkah 17

Selanjutnya kita akan memakai Layer Styles untuk menambahkan gradien dan garis untuk Button lapisan saat ini, tapi pertama-tama, klik pada swatch warna foreground dalam palet Tools dan mengubah warna untuk # c8a282.
Buka Layer Styles kotak obrolan dengan Control-Klik (PC: klik-kanan) pada lapisan Tombol sekarang di palet Layer dan menentukan Blending Options dari menu. Kemudian mengatur Layer Styles berikut, berhati-hati untuk mengusut setiap pengaturan dengan yang di bawah. Perhatikan bahwa dalam Gradient Overlay pilihan gaya area, ketika Anda klik pada Gradient Picker, latar depan ke swatch transparan memakai warna foreground Anda hanya mengatur. Dengan cara ini kita menghindari harus membuat gradien kustom dengan warna itu.
(* Catatan: Jika gradien Anda sepertinya tidak akan diposisikan di mana Anda suka, Anda sanggup langsung klik dan drag di panggung ke posisi yang Anda inginkan.)

Langkah 18

Jika Anda melaksanakan segalanya dengan benar, hidangan Anda kini harus terlihat ibarat di bawah ini.

Langkah 19

Tombol ketika ini di situs LittleLines mempunyai teks hitam pada kondisi ketika ini, jadi mari kita beralih ke lapisan teks kita, tekan tombol T untuk mengaktifkan alat Jenis, pilih teks dari tombol pertama dan mengubah warna menjadi hitam dengan mengubah warna dari teks yang dipilih dalam palet Character.

Langkah 20

Langkah terakhir dalam penyusunan tombol yaitu dengan menambahkan garis pembatas hitam antara tombol yang tersisa. Klik pada lapisan Perbatasan Double dan kemudian buat layer gres di atasnya disebut Garis Divider. Buat Clipping Mask untuk layer Garis Divider oleh Control-Klik (PC: klik-kanan) layer gres dan menentukan Create Clipping Mask dari menu. Ada kini harus 3 lapisan terpotong dengan layer Background Tombol ibarat yang ditunjukkan di bawah ini.

Langkah 21

Untuk membuat garis-garis hitam, mari kita tekan tombol D untuk mereset warna foreground menjadi hitam, kemudian dari alat terbang-out hidangan Rectangular Marquee menentukan alat Column Marquee tunggal yang akan membuat 1 pixel Pilihan vertikal.
Dari referensi orisinil kita sanggup melihat bahwa pembagi vertikal hitam kecil hanya ditempatkan di perbatasan kiri setiap tombol, jadi klik pada tahap antara kedua dua tombol untuk membuat pilihan satu pixel, dorongan itu kiri atau kanan dengan tombol panah kalau penempatan tidak sempurna, kemudian isi seleksi dengan warna hitam dengan menekan Option-Delete (PC: Alt-Delete). Lanjutkan proses ini hingga Anda telah dibagi tombol yang tersisa dan jangan lupa satu di tepi ujung kanan tombol terakhir. Tekan Command-D (PC: Ctrl-D) untuk membatalkan pilihan ketika Anda sudah selesai.

Langkah 22

Bagi Anda yang ingin pergi jarak dan menambahkan tekstur kayu untuk latar belakang, saya akan menjelaskan bahwa di sini juga (karena saya tahu saya akan mendapat 50 email ihwal hal itu kalau saya tidak!).
Pertama, Anda harus menemukan tekstur kayu yang ingin Anda gunakan, saya pikir defcon-x situs yaitu salah satu tempat terbaik untuk jenis tekstur dan mereka punya banyak sekali tekstur kayu resolusi tinggi untuk menentukan dari. Saya akan memakai tekstur ini memetikan Anda ingin mengikuti bersama di rumah. Command-klik (PC: Klik kanan) pada gambar dan pilih Copy Image, kemudian kembali ke dokumen Photoshop Anda.
Klik pada layer Background Nav untuk memilihnya (Ini yaitu satu dengan garis oranye di atasnya), maka cukup tekan Command-V (PC: Ctrl-V) untuk menyisipkan tekstur disalin ke dalam dokumen. Sebuah layer gres akan secara otomatis dibentuk yang saya akan mengubah nama Wood. Tekstur kayu kini mengisi seluruh dokumen, sehingga memungkinkan klip ke Nav Background lapisan dengan Control-Mengklik (PC: klik-kanan) pada lapisan kayu gres dan menentukan Create Clipping Mask dari hidangan ibarat yang kami lakukan sebelumnya.
(* Catatan: Jika Anda merasa ibarat Anda tidak melihat cukup dari serat kayu alasannya yaitu resolusi tinggi, Anda sanggup selalu memakai Free Transform tool untuk mengecilkan tekstur untuk ukuran yang cocok untuk Anda.)

Langkah 23

Urutan terakhir dari bisnis akan menambahkan hitam sedikit untuk transparan layer style Gradient Overlay untuk layer Background Nav, jadi Control-klik (PC: Klik kanan) pada layer Background Nav dan pilih Blending Options dari menu, kemudian mengatur berikut Gradient Overlay Layer Style.

Langkah 24

Dan itu orang, navigasi Anda selesai. Saya harap Anda berguru sesuatu yang sedikit di sepanjang jalan!