Sabtu, 18 Januari 2014

Desain Multimedia Tata Letak Website di Photoshop

Detail Tutorial
  • Program: Adobe Photoshop, Illustrator CS3 +
  • Kesulitan: Menengah
  • Perkiraan Waktu Penyelesaian: 2 + Jam
Download Source Files
Lihat posting pada tuts + Betatuts + Beta adalah dioptimalkan, dibaca mudah mobile version-ramah dan tuts + jaringan.

Produk akhir Apa yang Anda akan Menjadi Membuat

Kesan pertama melakukan menghitung! Menakjubkan pemirsa kami dengan portofolio secara visual menarik adalah salah satu hal paling penting yang seorang desainer dapat lakukan untuk pengadilan klien baru. Hari ini kita akan menunjukkan bagaimana untuk menggunakan foto, kuas, dan tekstur, dan objek 3D untuk merancang tata letak situs web multimedia kreatif di Photoshop. Mari kita mulai!

Sumber Daya

Sumber daya berikut ini digunakan dalam produksi tutorial ini:

Langkah 1

Buat 960px 620px dengan kanvas di Photoshop. Ini adalah resolusi yang baik untuk situs web seperti kebanyakan layar dapat mengakomodasi itu.
Tekan Cmd + R untuk menambahkan penguasa dan menarik beberapa panduan untuk menandai batas wilayah konten utama. Ini akan berguna untuk pusat desain Anda.

Langkah 2

Sekarang area konten utama dibatasi dengan benar, mari kita mengubah ukuran kanvas untuk 1224px oleh 620px (Image> Canvas Size) untuk menciptakan latar belakang yang lebih besar. Daerah spill-over ini akan berguna untuk pengunjung dengan layar besar dan menciptakan tampilan 'tanpa batas'.

Langkah 3

Langkah terakhir dalam mempersiapkan dokumen kami adalah menambahkan panduan di tengah. Panduan ini akan berguna ketika Anda harus pusat elemen desain. Sebuah cara cepat untuk menemukan pusat ini adalah untuk membuat layer baru dan tekan tombol shortcut Cmd + T untuk mengaktifkan "Free Transform".

Langkah 4

Mari kita membuat platform awan di mana desain utama akan duduk. Membuat latar belakang gradien abu-abu. Layer> Layer Style> Gradient Overlay. Gradient # 434344 # untuk EAECEC. Tinggalkan semua pengaturan lainnya sebagai default.

Langkah 5

Buat layer baru "Awan". Muat Anda Clouds kuas dan cat putih beberapa awan berbagai bentuk, ukuran dan opacity sampai Anda telah mencapai hasil yang serupa seperti yang ditunjukkan di bawah ini.

Langkah 6

Buat layer kedua "awan 2", menambahkan beberapa awan di pusat.

Langkah 7

Buat layer ketiga "awan 3". Kali ini menggunakan kuas cahaya Abstrak , sikat 2nd, ukuran 420px. Flip itu, tekan Cmd + T> Flip Horizontal. Hal ini akan membantu dalam memberikan awan tampilan yang lebih tipis dan halus.

Langkah 8

Sekarang kita akan membuat 3D besar "M" untuk "Multimedia". Anda bisa mengganti inisial perusahaan Anda di sini.
Buka Illustrator dan paste latar belakang awan yang baru saja Anda buat ke dalam layer baru. Menggunakannya sebagai panduan untuk merancang 3D "M". Ketik huruf "M": huruf Handel Gothic Ex, 181pt, putih, Anda dapat mengganti font tebal lebar lainnya.Untuk memberikan teks efek 3D, pergi ke: Efek> 3D> Extrude & Bevel. Lihat gambar di bawah untuk pengaturan.

Langkah 9

Salin 3D "M" dan kembali ke Photoshop untuk paste di dokumen Anda. Ubah nama layer untuk "m". Kita sekarang akan menerapkan beberapa efek dan tekstur agar lebih realistis dan menarik. Pertama menerapkan berikut Layer Style ke lapisan "m".

Langkah 10

Buat New Folder "m tekstur". Pilih huruf "M" dengan Magic Wand Tool dan dengan pilihan ini, tambahkan Layer Mask ke folder. Kami sekarang akan memiliki semua tekstur kami untuk 3D "M" di dalam folder ini.
Gunakan "tekstur 4.jpg" dari Rust Textures pak. Copy, paste dan memanggil lapisan "tekstur". Duplikat dan skala digandakan lapisan "texture2" turun ke 12,5%.

Langkah 11

Sesuaikan Opacity layer menjadi 40% dan mengubah Blending Mode ke Color Burn untuk kedua lapisan.

Langkah 12

Menambah layer tekstur "texture3" menggunakan "metal_plaque_bump_seam.jpg" Lapis Baja Logam Textures . Sesuaikan Opacity layer menjadi 26% dan mengubah Blending Mode untuk Hard Light. Pergeseran lapisan sekitar sampai Anda puas dengan posisi tekstur itu.

Langkah 13

Gunakan sikat Soft Round dengan Opacity sekitar 30% untuk menerapkan bayangan di bawah "M". Gunakan Smudge Tool untuk menyesuaikan dan menciptakan bayangan miring seperti di bawah ini.

Langkah 14

Tambahkan nama perusahaan Anda, dalam hal ini "Multimedia". Gunakan Heritage Ekstra Bold, 32px, hitam. Selanjutnya tambahkan bayangan samar di bawahnya.
Gandakan layer, nama itu "bayangan multimedia". Cmd + T untuk mengakses Transform Tool, klik kanan dan pilih flip vertikal. Tambahkan Motion Blur. Ubah Opacity layer menjadi 50%. Tambah Mask Layer dan akhirnya, menerapkan gradien memudar keluar bagian bawah.

Langkah 15

Sekarang kita akan membuat Cityscape bagi dunia Multimedia kami. Anda dapat menggunakan Cityscape Brushes untuk bangunan. Ambil beberapa abstrak membuat paket: Render Textures Pack 1 dan Render Pack Textures 2 untuk tekstur. Pertama menggunakan kuas untuk menggambar beberapa bangunan. Gambarlah setiap bangunan pada lapisan yang terpisah, antara lapisan "awan" dan "clouds2".

Langkah 16

Resize, posisi dan memotong bagian dari bangunan yang Anda tidak perlu.

Langkah 17

Untuk setiap gedung, membuat Folder Baru yang akan berisi tekstur masing-masing.Menggunakan metode yang sama untuk menerapkan tekstur untuk huruf "M", pilih setiap gedung, satu per satu, dengan Tool Magic Wand dan menambahkan seleksi sebagai Layer Mask ke folder. Atur Blending Mode folder lapisan untuk Meringankan.

Langkah 18

Sekarang menerapkan tekstur abstrak ke Cityscape sebagai berikut. Memindahkan, memutar, mengubah ukuran tekstur sampai Anda puas dengan efek.

Langkah 19

Ini adalah praktik yang baik untuk membersihkan dan mengatur lapisan Anda. Meskipun sedikit membosankan pada awalnya, latihan ini benar-benar akan menghemat waktu yang berharga ketika mencari file, katakanlah sebulan kemudian. Tempatkan semua lapisan bangunan di folder baru "Bangunan". Bawa folder ini turun antara layer "awan" dan "awan 2".

Langkah 20

Gunakan sikat awan Anda untuk melukis awan kecil pada layer "clouds2" untuk menutupi dasar bangunan '.

Langkah 21

Mari kita tambahkan props multimedia kami: kamera klasik , kursi Direktur , kamera TV, Laptop , Microphone , Hotair baloon 1 , Hotair baloon 2 , Pohon Kecil . Untuk masing-masing benda-benda mengekstrak latar belakang mereka dengan menggunakan Magic Wand Tool (W) dan kemudian klik pada tombol Refine Edge untuk menyesuaikan tepi.Untuk menghilangkan sisa tepi kasar, gunakan Eraser Tool (E) dengan sikat bundar kecil.

Langkah 22

Resize dan kemudian menerapkan Filter> Sharpen Cerdas (Cmd + F) untuk setiap objek. Posisi mereka sebagai berikut.

Langkah 23

Menambahkan bayangan ke kursi, kamera TV, laptop, mikrofon, kamera dan mobil dengan mengikuti teknik yang sama yang digunakan untuk huruf "M". Untuk pohon, gunakan sikat alam dan menyesuaikan bentuk dengan menggunakan Smudge Tool.

Langkah 24

Musim semi waktu pembersihan! Menghubungkan setiap lapisan objek dengan lapisan bayangan masing-masing sehingga akan mudah untuk mengubah setiap objek dan mematikan yang diperlukan. Untuk melakukan hal ini, Tekan Shift + klik pada kedua lapisan. Klik kanan dan pilih Link Layer. Kemudian tempat semua lapisan alat peraga dalam folder baru "Props".

Langkah 25

Ketika merancang sebuah homepage, unsur-unsur interaktif memainkan peran utama dalam menentukan keberhasilan situs web. Oleh karena itu kita harus membuat tombol utama kami menarik dan menonjol bagi pengguna untuk ingin klik mereka. Kita akan membuat kotak 3D yang terhubung dengan Cityscape melalui kabel berwarna-warni.Mereka akan mewakili bagian halaman yang berbeda. Berikut preview dari apa yang Anda akan merancang.

Langkah 26

Kembali ke Illustrator untuk menggambar kotak 3D dan kabel berwarna-warni. Gunakan Rectangle Tool (M) untuk menarik 6 kotak putih dengan lebar berbeda tergantung pada panjang kotak teks akan berisi. Contoh "Web" akan memiliki kotak yang lebih kecil dan "Kontak" akan memiliki kotak yang lebih luas.

Langkah 27

Terapkan Effect> 3D> Extrude & Bevel untuk setiap kotak. Lihat gambar untuk pengaturan efek setiap kotak, dari kiri ke kanan.

Langkah 28

Menyalin karya seni yang Anda buat di Photoshop sejauh ini dan paste di "latar belakang" lapisan sebagai panduan. Buatlah beberapa baris dengan baik Pen Tool (P) atau Perangkat Pensil (T), mana yang lebih mudah bagi Anda.

Langkah 29

Kita sekarang akan membuat beberapa kuas pelangi. Gunakan Rectangle Tool (M) untuk menggambar persegi panjang. Kemudian copy dan paste 04:56 persegi panjang satu di samping satu sama lain secara vertikal. Mengubah warna mereka. Pilih semua persegi panjang dan menggunakan Align Left untuk menyelaraskan mereka.

Langkah 30

Membuat variasi pelangi beberapa. Berikut adalah beberapa contoh.

Langkah 31

Untuk membuat sikat, pilih pelangi klaster, drag and drop ke Brushes Panel Anda. Pilih New Art Brush. Nama Anda Art Brush "Rainbow1" dan menyimpan pengaturan default dengan arah yang benar horizontal.

Langkah 32

Sekarang menerapkan kuas pelangi Anda ke baris yang berbeda.

Langkah 33

Copy dan paste setiap kawat pelangi (line) secara individual dalam Photoshop.Tempelkan lapisan di depan gedung tetapi di balik props Anda dan huruf "M".Menerapkan Layer Mask pada lapisan kawat dan menggunakan sikat Cloud untuk membuat bagian dari kabel transparan.

Langkah 34

Untuk memberikan kabel tampilan 3D dan membuat mereka bersinar, menerapkan Bevel & Emboss Layer Style dengan pengaturan yang sama seperti yang ditunjukkan di bawah ini. Setiap kawat memerlukan beberapa pengaturan tweaker sedikit untuk mencapai tampilan yang diinginkan.

Langkah 35

Copy dan paste kotak 3D dari Illustrator ke dalam lapisan individu.

Langkah 36

Terapkan tekstur "metal_plaque_bump_seam.jpg" dari Lapis Baja Logam Textures , menggunakan teknik yang sama seperti pada Langkah 10 dan Langkah 17. Atur Blending Mode layer tekstur untuk Hard Light dengan Opacity 26%.

Langkah 37

Menambahkan teks ke kotak. Gunakan Heritage Ekstra Bold, 14px, hitam. Putar teks mana yang dibutuhkan untuk mengikuti sudut kotak.

Langkah 38

Bersihkan lapisan Anda dan mengatur tombol ke dalam folder, jika Anda belum melakukannya.

Langkah 39

Langkah terakhir! Tambahkan footer dan Anda selesai! Gunakan Verdana, 10px, # cccccc untuk baris pertama dan # 999999 untuk bottom line. Ini adalah warna web yang aman.

Kesimpulan

Saya harap Anda menemukan tutorial ini bermanfaat. Apakah berbagi pendapat, ide, dan saya akan senang untuk membantu Anda jika Anda memiliki pertanyaan. Jadilah kreatif dan mengeksplorasi teknik-teknik yang telah Anda pelajari di sini - saya tidak sabar untuk melihat apa yang Anda datang dengan!
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)