Cara Membuat Layout Desain Interior Photoshop

Cara Membuat Layout Desain Interior Photoshop

Dari tutorial ini Anda akan belajar cara membuat tata letak website profesional dan glossy untuk perusahaan Desain Interior terkait. Just follow the steps of this tutorial and you'll find out that there is nothing so complicated in designing this stunning template. Cukup ikuti langkah-langkah dari tutorial ini dan Anda akan menemukan bahwa tidak ada yang begitu rumit dalam merancang template ini menakjubkan. What's more, in this tutorial we use only few simple tricks you will repeat almost every step (eg creating textboxes). Terlebih lagi, dalam tutorial ini kita menggunakan trik sederhana hanya sedikit Anda akan mengulangi hampir setiap langkah (boks teks menciptakan misalnya). We are sure that after finishing this tutorial you'll be able to create fabulous website layouts. Kami yakin bahwa setelah menyelesaikan tutorial ini Anda akan dapat membuat layout situs yang luar biasa. So, as they say “Bon voyage!” Our exciting trip begins: Jadi, seperti yang mereka katakan "! Bon voyage" Perjalanan dimulai menarik kami:
Here is what you'll need : Berikut adalah apa yang Anda butuhkan:
Program: Photoshop 7 or later Program: Photoshop 7 atau lambat
Difficulty: Beginner Level Kesulitan: Pemula
Set Time: 90 minutes Atur Waktu: 90 menit
Materials: Vector illustration of a screen with swirls, stock image of the bed and the blue glossy ball. Bahan: Vektor ilustrasi dari sebuah layar dengan berputar-putar, gambar saham dari tempat tidur dan bola biru mengkilap. All files are available for Downloading . Semua file yang tersedia untuk download .
This tutorial is based on the design of Free Interior Website Template that was launced by Templates.com not long ago. Tutorial ini didasarkan pada desain Template Website Gratis Interior yang diluncurkan oleh Templates.com belum lama ini.
Here is the Interior Design Layout that we are going to create: Berikut adalah Layout Desain Interior bahwa kita akan membuat:



Open Photoshop 7.0 or later. Buka Photoshop 7.0 atau yang lebih baru. Press Ctrl+N to create a new document; name it (for example, “Interior Design Layout”) and set the following values: Width: 1000; Height: 996. Tekan Ctrl + N untuk membuat dokumen baru, nama itu (misalnya, "Layout Desain Interior") dan mengatur nilai berikut: Lebar: 1000; Tinggi: 996.
Now we need to create the orange background. Sekarang kita perlu membuat latar belakang oranye. Go to Color Panels and pick the Orange color (#f26522). Pergi ke Panel Warna dan memilih warna Orange (# f26522). Use the Paint Bucket Tool (G) from the Toolbox Panel to fill the background. Gunakan Paint Bucket Tool (G) dari Panel Toolbox untuk mengisi latar belakang.



Next step is adding a gradient to make the background look elegant and smooth. Langkah selanjutnya adalah menambahkan gradien untuk membuat latar belakang terlihat elegan dan halus. Select the Gradient Tool (Shift+G). Pilih Gradient Tool (Shift + G). In the Gradient options box set gradient type to Linear (1) and chose foreground to Transparency preset type (2). Dalam Gradient opsi jenis kotak set gradien untuk Linear (1) dan memilih latar depan untuk mengetik Transparansi yang telah ditetapkan (2). Set the foreground color to black. Mengatur warna latar depan hitam.



Create the new Layer. Buat Layer baru. Go to Layer – New…- Layer – Name it Background Gradient -Press OK. Pergi ke Layer - New ... - Layer - Latar Belakang Nama itu Gradient-Tekan OK. Now apply the gradient as shown in the picture bellow: Sekarang menerapkan gradien seperti yang ditunjukkan di bawah gambar:

Go to the Layers Panel and change the Blending Mode from Normal to Overlay. Pergi ke Panel Layers dan mengubah Blending Mode dari Normal untuk Overlay. Set Opacity to 40%. Set Opacity menjadi 40%.


Creating a Header Layout . Membuat Layout header.
Now we will add a header layout. Sekarang kita akan menambahkan tata letak header. We've decided to make it dark grey. Kami telah memutuskan untuk membuatnya abu-abu gelap. Create the new Layer (Layer – New –Layer…-Name it Header Layout – Press Ok ). Buat Layer baru (Layer - Layer Baru ...-Nama itu Tata Letak Header - Tekan Ok).
Pick a Rectangular Marquee Tool and make a selection on top of Layout as shown in the image bellow. Pilih Rectangular Marquee Tool dan membuat pilihan di atas Tata Letak seperti yang ditunjukkan di bawah gambar.
Select black as a foreground color and press Alt + Backspace to fill the selected area with black. Pilih hitam sebagai warna foreground dan tekan Alt + Backspace untuk mengisi area yang dipilih dengan hitam. Press Ctrl+D to deselect. Tekan Ctrl + D untuk membatalkan pilihan. Here is what we get: Berikut adalah apa yang kita dapatkan:



It's about time to add some gradient. Ini saatnya untuk menambahkan beberapa gradien. Let's do it this way. Mari kita melakukannya dengan cara ini. Go to the Layers Panel and double click on Header Layout Layer to open Layer Style Panel . Pergi ke Layer Panel dan klik dua kali pada Layer header Layout untuk Panel Layer Style terbuka. Select Gradient Overlay, set Opacity value to 2% and chose black and white Gradient preset, Angle: 90 as shown in the picture bellow. Pilih Gradient Overlay, set nilai Opacity menjadi 2% dan memilih Gradient hitam dan putih yang telah ditetapkan, Angle: 90 seperti yang ditunjukkan di bawah gambar. Press Ok. Tekan Ok. And you're done! Dan Anda selesai!



Adding the Image . Menambahkan Image.
Now we will add a fancy image that would somehow identify the business orientation of the layout. Sekarang kita akan menambahkan gambar mewah yang entah bagaimana akan mengidentifikasi orientasi bisnis tata letak. We've decided to take this lovely picture of the modern bed. Kami telah memutuskan untuk mengambil gambar ini indah tempat tidur modern. It's a good idea to think over the semiotics behind the visual image. Ini adalah ide yang baik untuk memikirkan semiotika balik citra visual. The bed is a symbol of warmth and comfort, thus it will match greatly the luminous orange background. Tempat tidur adalah simbol dari kehangatan dan kenyamanan, sehingga akan cocok latar belakang oranye sangat bercahaya. Also, the bed is designed in minimal style so is our layout. Juga, tempat tidur yang dirancang dalam gaya minimal jadi adalah tata letak kami. As for the colors there are 4 main colors that form a great contrast (white – wine red – grey – orange). Sedangkan untuk warna ada 4 warna utama yang membentuk sebuah kontras yang besar (putih - anggur merah - abu-abu - oranye).



Open the image in Photoshop, select the Layer containing the bed (such images usually consist of 2 layers – the white background and the image itself). Buka gambar di Photoshop, pilih Layer berisi tempat tidur (gambar tersebut biasanya terdiri dari 2 lapisan - latar belakang putih dan gambar itu sendiri). Go to Layer – Duplicate Layer… Set the following settings: Pergi ke Layer - Duplicate Layer ... Mengatur pengaturan berikut:
As : Bed Seperti: Bed
Destination Tujuan
Document: Interior Design Layout. Dokumen: Desain Tata Letak Interior.



In case if the image is a little bit bigger than you want, press Ctrl+T to activate Free Transform Tool . Dalam kasus jika gambar sedikit lebih besar dari yang Anda inginkan, tekan Ctrl + T untuk mengaktifkan Free Transform Tool. Adjust the image size according to your preference and place it in the left top corner of the layout using Move Tool (V). Sesuaikan ukuran gambar sesuai dengan preferensi Anda dan tempatkan di sudut kiri atas tata letak menggunakan Move Tool (V). Here is how the final result should look like: Berikut adalah bagaimana hasil akhir akan terlihat seperti:



Now let's add some light coming from the lamp placed on the bed. Sekarang mari kita menambahkan beberapa cahaya yang datang dari lampu yang ditempatkan di tempat tidur. It will somehow connect the background with the image. Entah bagaimana akan menghubungkan latar belakang dengan gambar. So, create the new Layer, name it Light. Jadi, buat Layer baru, nama itu Cahaya. Go to the Layers Panel , select the new Layer and drag it under the Header Layout layer but above the Background Gradient Layer. Pergi ke Panel Layers, pilih Layer baru dan drag di bawah lapisan Tata Letak header tetapi di atas layer Background Gradient. Select Elliptical Marquee Tool and make a selection under the bed. Pilih Elliptical Marquee Tool dan buatlah seleksi di bawah tempat tidur. Pick white color as a foreground and press Alt+ Backspace to fill the selection with white. Pilih warna putih sebagai latar depan dan tekan Alt + Backspace untuk mengisi seleksi dengan warna putih. Here is another picture of how it is supposed to look like: Berikut ini adalah gambaran bagaimana seharusnya terlihat seperti:



Now Press Ctrl+ D to deselect. Sekarang Tekan Ctrl + D untuk membatalkan pilihan. You need to make it look like a dispersing light. Anda perlu untuk membuatnya terlihat seperti cahaya menyebar. So, let's make it a little bit blurry. Jadi, mari kita membuatnya sedikit kabur. Go to Filter – Blur – Gaussian Blur. Pergi ke Filter - Blur - Gaussian Blur. Set the Radius value to 67,9 and hit OK. Set nilai Radius ke 67,9 dan tekan OK.



Now go to the Layers Panel once again, select Light Layer and set Blending Mode to Overlay to get the effect of a softly spreading light. Sekarang pergi ke Layer Panel sekali lagi, pilih layer Cahaya dan mengatur Blending Mode untuk Overlay untuk mendapatkan efek cahaya lembut menyebar. So, the final result should look like in the picture bellow. Jadi, hasil akhir akan terlihat seperti di bawah gambar.



Back to the Background . Kembali ke Background.
We need to customize our background a little bit more. Kita perlu untuk menyesuaikan latar belakang kita sedikit lebih. So, create another Layer and name it Background Gradient 2. Jadi, buat layer lain dan nama itu Gradient Latar Belakang 2. Place it under the Light Layer. Tempatkan di bawah Layer Cahaya. Now grab Gradient Tool , select foreground to Transperency preset; pick black as a foreground color and apply the gradient as shown in the picture bellow: Sekarang ambil Gradient Tool, pilih foreground menjadi Transperency telah ditetapkan; memilih hitam sebagai warna foreground dan menerapkan gradien seperti yang ditunjukkan di bawah gambar:



And you will get: Dan Anda akan mendapatkan:



Go to the Layers Panel and set the Blending Mode to Soft Light with Opacity value of 40% and it's done! Pergi ke Panel Layers dan mengatur Blending Mode ke Soft Light dengan nilai Opacity 40% dan itu dilakukan!



Applying Swirls . Menerapkan swirls.
Let's make our Layout background look more elegant. Mari kita membuat latar belakang Tata Letak kami terlihat lebih elegan. We've found rather interesting abstract picture from which we will copy some elements. Kami telah menemukan gambar abstrak yang agak menarik dari mana kita akan menyalin beberapa elemen.
Open the image in Photoshop go to the Layer containing the image itself. Buka gambar di Photoshop pergi ke Layer yang berisi gambar itu sendiri. Pick a Rectangular Marquee Tool and select the part of the image that will fit our layout background. Pilih Rectangular Marquee Tool dan memilih bagian dari gambar yang akan cocok latar belakang tata letak kami. Right click on the selection and chose Layer via Copy. Klik kanan pada seleksi dan memilih layer melalui Salin. Now you have a piece that you've selected on the separate layer. Sekarang Anda memiliki bagian yang Anda pilih pada lapisan yang terpisah. Duplicate that Layer to our “Interior Design Layout” as we did earlier Gandakan layer yang ke "Layout Desain Interior" kami seperti yang kita lakukan sebelumnya



Adjust the size of the figure using Free Transform Tool (Ctrl+T) and place it on the right side of the layout as shown in the picture. Sesuaikan ukuran gambar menggunakan Tool Free Transform (Ctrl + T) dan meletakkannya di sisi kanan tata letak seperti yang ditunjukkan pada gambar.



Go to the Layers Panel and set the Swirls Layer Blending Mode to Soft Light with Opacity 15%. Pergi ke Layer Panel dan mengatur Layer Blending Mode ke Soft Light swirls dengan Opacity 15%.



Duplicate Swirls Layer and using Free Transform Tool add some more swirls to the Background. Duplicate Layer berputar dan menggunakan Free Transform Tool menambahkan berputar lagi untuk Background. Here is how we have decided to place them. Berikut adalah bagaimana kita telah memutuskan untuk menempatkan mereka.



Adding Content . Menambahkan Konten.
Select white color as a foreground and pick Horizontal Type Tool . Pilih warna putih sebagai latar depan dan memilih Horizontal Type Tool.



Go to Window – Character to open Character Panel . Pergi ke Window - Karakter untuk membuka Panel Karakter. Set the values as shown in the picture bellow and then type in “Interior Design” closer to the right top corner. Mengatur nilai-nilai seperti yang ditunjukkan di bawah gambar dan kemudian ketik "Desain Interior" lebih dekat ke sudut kanan atas.



Select the word “Interior” and pick dark grey color as a foreground that will paint the word in grey. Pilih kata "Negeri" dan memilih warna abu-abu gelap sebagai latar depan yang akan cat kata dalam abu-abu.



Now pick Horizontal Type Tool again and type in “Luxurious Life” under “Interior Design”. Sekarang pilih Horizontal Type Tool lagi dan ketik "Hidup Mewah" di bawah "Desain Interior". Set the character parameters as shown in the picture bellow. Mengatur parameter karakter seperti yang ditunjukkan di bawah gambar.



Now we will create the effect of reflection for this sign. Sekarang kita akan membuat efek refleksi untuk tanda ini. Duplicate “Luxurious Life” text layer. Gandakan "Hidup Mewah" lapisan teks. Place it under the original text and go to Edit – Transform – Flip Vertical. Tempatkan di bawah teks asli dan pergi ke Edit - Transform - Balik Vertikal. Now go to the Layers Panel and right click on the reflection Layer and chose Rasterize Type. Sekarang pergi ke Layer Panel dan klik kanan pada Layer refleksi dan memilih Jenis Rasterize.



Adjust Gradient Preset to black foreground – white background. Sesuaikan Gradient Preset untuk foreground hitam - latar belakang putih.



Now take the Rectangular Marquee Tool and make a small selection as shown in the image bellow. Sekarang ambil Rectangular Marquee Tool dan membuat pilihan kecil seperti yang ditunjukkan di bawah gambar. Apply quick mask by pressing “Q”. Oleskan masker cepat dengan menekan "Q". Apply the gradient and exit Quick Masking by pressing “Q” once again. Terapkan gradien dan keluar Masking Cepat dengan menekan "Q" sekali lagi.



Go to the Layers Panel and set Blending Mode to Overlay with Opacity 40%. Pergi ke Layer Panel dan mengatur Blending Mode untuk Overlay dengan Opacity 40%.



It's high time to add some text (link mock-ups) to the header. Sudah saatnya untuk menambahkan beberapa teks (link mock-up) untuk header. Just add signs “Home”, “About Us”, “Contact Us”, etc… Hanya menambahkan tanda "Home", "Tentang Kami", "Hubungi Kami", dll ...
Adjust the characters of each sign according to the picture. Sesuaikan karakter setiap tanda sesuai dengan gambar.



Create another Layer. Buat layer lain. It should be above the Header Background Layer. Ini harus berada di atas Layer Background header. Select the Pencil Tool and set the Master Diameter value to 1 px. Pilih Alat Pensil dan menetapkan nilai ke 1 Guru Diameter px. Set the foreground color to white. Mengatur warna foreground menjadi putih.



Now draw vertical lines (dividers) between the “Main Page” links as shown in the picture. Sekarang menggambar garis vertikal (pemisah) antara link "Halaman Utama" seperti yang ditunjukkan pada gambar. Set Blending Mode to Soft Light. Set Blending Mode ke Soft Light.



Creating a Footer . Membuat Footer sebuah.
Create another Layer, name it Footer Background and place it under Swirls Layer. Buat layer lain, nama itu Latar Belakang Footer dan tempat di bawah layer swirls. Using Rectangular Marquee Tool make a selection closer to the bottom of the layout. Menggunakan Rectangular Marquee Tool membuat pilihan lebih dekat ke dasar tata letak. Set Dark Grey (#242424) as a foreground color and press Alt+Backspace to fill the selection. Set Dark Grey (# 242424) sebagai warna latar depan dan tekan Alt + Backspace untuk mengisi seleksi. Hit Ctrl+D to deselect. Tekan Ctrl + D untuk membatalkan pilihan.



Now we will add some text (link mock-ups). Sekarang kita akan menambahkan beberapa teks (link mock-up). Set the Character values as shown in the picture. Menetapkan nilai-nilai Karakter seperti yang ditunjukkan dalam gambar.



Add a small Copyright sign bellow (for example, “Copyright – type in Your Name here”). Tambahkan bawah Copyright tanda kecil (misalnya, "Copyright - ketik Nama kamu di sini").



Creating “Latest News” Textbox . Membuat "Berita Terbaru" Textbox.
Now we will add the “Latest News” textbox. Sekarang kita akan menambahkan "Berita Terbaru" textbox. So, create the new Layer, name it “Latest News” and place it under the Bed Layer. Jadi, buat Layer baru, nama itu "Latest News" dan tempat di bawah Layer Bed. Take a Rectangular Marquee Tool and make selection as shown in the picture bellow. Ambil Rectangular Marquee Tool dan buatlah seleksi seperti yang ditunjukkan di bawah gambar. Fill it with white color. Isi dengan warna putih. Ctrl+D to deselect. Ctrl + D untuk membatalkan pilihan.



Set the Layer's Blending Mode to Soft Light with Opacity: 30%. Atur Blending Mode Layer menjadi Soft Light dengan Opacity: 30%.



Create another Layer and make a smaller selection as shown in the picture bellow. Buat layer lain dan membuat pilihan yang lebih kecil seperti yang ditunjukkan di bawah gambar. Fill it with Dark Grey color (#242424). Mengisinya dengan warna Dark Grey (# 242424). Ctrl+D to deselect. Ctrl + D untuk membatalkan pilihan.



Add “Latest News” sign, set characters value as shown in the picture and place in the dark grey rectangular. Tambahkan "Berita Terbaru" tanda, karakter set nilai seperti yang ditunjukkan dalam gambar dan tempat dalam persegi panjang abu-abu gelap.



Post some text in this textbox (eg Satum quae sequi…) so the customer could see how it would look like in general. Posting beberapa teks dalam textbox (misalnya Satum quae sequi ...) sehingga pelanggan dapat melihat bagaimana hal itu akan terlihat seperti pada umumnya.



Creating Polls Textbox . Membuat Textbox Polling.
Create another textbox similar to the one we've just created. Buat textbox lain yang serupa dengan yang kita baru saja dibuat. Place it under the “Latest News” textbox. Tempatkan di bawah textbox "Berita Terbaru".
This time set the Layer Opacity 60 % Kali ini mengatur Layer Opacity 60%



Add some text that would look like a question and few variants of answers. Tambahkan beberapa teks yang akan terlihat seperti sebuah pertanyaan dan jawaban beberapa varian. Set the character values as shown in the picture bellow. Menetapkan nilai-nilai karakter seperti yang ditunjukkan di bawah gambar.



Now we need to add up some markers for people to make their choice. Sekarang kita perlu menambahkan beberapa penanda bagi orang untuk membuat pilihan mereka. You need to create separate Layers for each marker. Anda perlu membuat Layer terpisah untuk masing-masing penanda. Create the new Layer, name it Marker 1 and Select Elliptical Marquee Tool and a make a small round selection. Buat Layer baru, nama itu Marker 1 dan Pilih Elliptical Marquee Tool dan membuat pilihan bulat kecil. Go to the Layers Panel and double click on the Marker 1 Layer. Pergi ke Layer Panel dan klik dua kali pada Layer 1 Marker. In the Layer Style Panel select Stroke and set the values as shown in the picture bellow. Pada Panel Layer Style pilih Stroke dan menetapkan nilai-nilai seperti yang ditunjukkan di bawah gambar.



Repeat the previous steps to create as much markers as you need. Ulangi langkah sebelumnya untuk membuat penanda sebanyak yang Anda butuhkan.



Creating Greeting Header and Short Description Textbox . Membuat header Greeting dan Textbox Short Description.
Create “Vote” button. Buat "Vote" tombol. Follow the steps for creating “Latest News” sign. Ikuti langkah-langkah untuk menciptakan "Berita Terbaru" tanda.



Now we will create Greeting Header. Sekarang kita akan membuat header Salam. Create the new Layer and name it “Welcome”. Buat Layer baru dan beri nama "Selamat Datang". Grab the Rectangular Marquee Tool and make selection as shown in the picture. Ambil Rectangular Marquee Tool dan buatlah seleksi seperti ditunjukkan pada gambar. Fill it with black color and set Blending Mode to Soft Light. Mengisinya dengan warna hitam dan Mode mengatur Blending Soft Light.



Now simply type in your greetings (eg WELCOME OUR INTERIOR DESIGN). Sekarang cukup mengetik salam Anda (misalnya DESAIN INTERIOR KAMI SELAMAT DATANG). Set the character values as shown in the picture bellow. Menetapkan nilai-nilai karakter seperti yang ditunjukkan di bawah gambar. You can also add Short Description of what is this website devoted to under the “welcome header”. Anda juga dapat menambahkan Short Description apa yang dikhususkan untuk website ini di bawah header "menyambut".



Creating Recent Articles Textbox . Membuat Textbox Recent Articles.
Let's add up another textbox that will show the latest posts added to the website blog. Mari kita tambahkan textbox yang lain akan menampilkan pesan terbaru ditambahkan ke situs blog. We'll place it under the Short Description. Kami akan menempatkan di bawah Short Description.
So, once again. Jadi, sekali lagi. Create the new Layer, name it Recent Articles, grab Rectangular Marquee Tool and make selection as shown in the picture. Buat Layer baru, nama itu Recent Articles, ambil Rectangular Marquee Tool dan buatlah seleksi seperti ditunjukkan pada gambar. Fill it with pure black. Mengisinya dengan hitam murni. Go to the Layers Panel and set Blending Mode to Soft Light with Opacity: 40%. Pergi ke Layer Panel dan mengatur Blending Mode ke Soft Light dengan Opacity: 40%.



Now, add a small image of a glossy ball. Sekarang, tambahkan sebuah gambar kecil dari bola glossy.



As you can see, it is blue and it doesn't match the selected palette, but that's not a problem. Seperti yang Anda lihat, itu adalah biru dan tidak cocok dengan palet dipilih, tapi itu bukan masalah. Let's repaint it. Mari kita mengecat itu. Grab the Brush Tool and set the Master Diameter manually, so it would cover the whole ball. Ambil Brush Tool dan mengatur Master Diameter secara manual, sehingga akan menutupi seluruh bola. Set Dark Orange (#b33922) as a foreground and paint over the ball. Atur gelap Orange (# b33922) sebagai latar depan dan cat di atas bola.



Now go to the Layers Panel and set Blending Mode to Color. Sekarang pergi ke Layer Panel dan mengatur Blending Mode menjadi Color. And here you go! Dan di sini Anda pergi!



Add some more glossy balls and type in some content. Tambahkan beberapa bola lebih glossy dan ketik beberapa konten. The final result should look like this: Hasil akhir akan terlihat seperti ini:

Now it is finished. Sekarang selesai. Hope, this tutorial was useful for you. Harapan, tutorial ini bermanfaat untuk Anda. As you can see, there it is not that hard to create really professional web layout. Seperti yang dapat Anda lihat, ada tidak sulit untuk membuat tata letak web benar-benar profesional. All you need is patience and a bit of imagination. Yang Anda butuhkan adalah kesabaran dan sedikit imajinasi

Posted in: Photoshop Web