Bersih dan minimalis Portofolio Layout dalam Photoshop

In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop. Dalam tutorial ini Anda akan belajar cara membuat tata letak portofolio bersih dan minimalis di Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Jika Anda memiliki pertanyaan tentang tutorial ini pastikan untuk bertanya di komentar. Also, remember with all the tutorials, the psd is available for download. Juga, ingat dengan semua tutorial, PSD yang tersedia untuk di-download.

Final Result Hasil akhir

Click on the image to view the full-scale final result . Klik pada gambar untuk melihat hasil akhir skala penuh .

Resource List Daftar sumber daya

• Chunk Font Potongan Font
• Mono Icon Set Mono Set Ikon
• Nixus Icon Pack Nixus Icon Pack

Lets get started… Mari kita mulai ...

1. 1. The first thing we want to do is create a new document with the dimensions of 1020×1180. Hal pertama yang ingin kita lakukan adalah membuat dokumen baru dengan dimensi 1020 × 1180.

2. 2. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000. Menggunakan Rectangle Marquee Tool Anda, membuat pilihan yang mirip dengan berikut ini dan mengisinya dengan # 000000.

3. 3. Next we want to add some Blending options to our newly created layer. Selanjutnya kita ingin menambahkan beberapa opsi Blending ke lapisan kami baru dibuat. To do so, right click your layer in the layers palette and choose blending options from the drop down menu. Untuk melakukannya, klik kanan layer Anda dalam palet layer dan pilih opsi blending dari menu drop down. Insert the following: Masukkan berikut ini:


4. 4. Our header will be fairly simple and basic to go along with the rest of the theme. Header kami akan cukup sederhana dan mendasar untuk pergi bersama dengan sisa dari tema. I chose to use the font Chuck from our resource list at the top for our logo, and set my foreground to #4A4A4A. Saya memilih untuk menggunakan font dari Chuck daftar sumber daya kami di atas untuk logo kami, dan mengatur latar depan saya untuk # 4A4A4A.

5. 5. The search field will be located on the right side of our header. Kolom pencarian akan terletak di sisi kanan header kita. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #FFFFFF. Menggunakan Anda Rectangle Tool Marquee, membuat persegi panjang mirip dengan berikut ini dan mengisinya dengan # FFFFFF. Then add some light grey text and an icon from the Nixus Icon Pack in a similar fashion. Kemudian tambahkan beberapa teks abu-abu terang dan ikon dari Icon Pack Nixus dengan cara yang sama.

6. 6. On your White Rectangle layer, add the following blending options to make your search field stand out from the header: Pada lapisan Persegi Panjang Putih Anda, tambahkan opsi blending berikut untuk membuat kolom pencarian Anda berdiri keluar dari header:

7. 7. Time to move onto our horizontal navigational menu. Waktu untuk pindah ke menu horizontal navigasi kami. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000. Menggunakan Rectangle Marquee Tool Anda, membuat pilihan yang mirip dengan berikut ini dan mengisinya dengan # 000000.

8. 8. Next add the following blending options to your layer: Selanjutnya tambahkan opsi blending berikut untuk lapisan Anda:




9. 9. We then want to add a layer mask of an arrow to symbolize an active link. Kami kemudian ingin menambahkan lapisan masker panah untuk melambangkan link aktif. Using your Polygonal Lasso Tool, create a triangle similar to the following. Menggunakan Polygonal Lasso Tool Anda, membuat segitiga yang serupa dengan berikut ini. Then go to EDIT>SELECT>INVERSE. Lalu pergi ke EDIT> SELECT Inverse>. Then choose the layer mask icon at the bottom of your layers palette. Kemudian pilih ikon layer mask di bagian bawah palet layer Anda.

10. 10. The final step for our navigation is to add some links. Langkah terakhir untuk navigasi kami adalah untuk menambahkan beberapa link. Using the color white for your font, add some links in the following manner. Menggunakan warna putih untuk font, menambahkan beberapa link dengan cara berikut. Then open up the Nixus Icon Pack and add some appropriate icons next to each link, and that is it for our header. Kemudian membuka Pack Icon Nixus dan menambahkan beberapa ikon yang sesuai di samping setiap link, dan yang itu untuk header kita.

11. 11. Lets go ahead and get started on our featured area. Mari kita pergi ke depan dan memulai di daerah fitur kami. This will hold our slider box displaying our products. Hal ini akan terus kami menampilkan kotak slider produk kami. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000. Menggunakan Rectangle Marquee Tool Anda, membuat pilihan yang mirip dengan berikut ini dan mengisinya dengan # 000000.

12. 12. Add the following blending options to your layer: Tambahkan opsi berikut ke lapisan campuran Anda:


13. 13. With this layer selected, hit Command+J to duplicate your layer. Dengan lapisan ini dipilih, tekan Command + J untuk duplikat layer Anda. Then create a blank layer under your duplicated layer and then select your duplicated layer again. Kemudian membuat lapisan kosong di bawah lapisan Anda digandakan dan kemudian pilih lapisan Anda diduplikasi lagi. Right click your layer and choose “Merge Down”. Klik kanan layer Anda dan pilih "Merge Down". This will flatten our copied layer. Ini akan meratakan lapisan kami disalin.
14. 14. While your duplicated background layer is still selected, go to Filter>Noise>Add Noise and insert the following options in the dialogue box: Sementara latar belakang lapisan digandakan Anda masih dipilih, pergi ke Filter> Noise> Add Noise dan masukkan opsi berikut di kotak dialog:

15. 15. Lower this layers opacity to about 8%, and then you'll have something that looks like the following: Turunkan opacity layer ini menjadi sekitar 8%, dan kemudian Anda akan memiliki sesuatu yang terlihat seperti berikut:

16. 16. We then want to move onto our Slider Box. Kami kemudian ingin pindah ke Kotak Slider kami. Using your Rectangle Marquee Tool, create a Rectangle that looks similar to the following and fill it with #FFFFFF. Menggunakan Anda Rectangle Tool Marquee, membuat Rectangle yang terlihat mirip dengan berikut ini dan mengisinya dengan # FFFFFF.

17. 17. Add the following blending options to your layer. Tambahkan opsi berikut ke lapisan campuran Anda.

18. 18. Using your Rectangle Marquee Tool, make a rectangle similar to the following and then fill it with black. Menggunakan Rectangle Marquee Tool Anda, membuat persegi panjang mirip dengan yang berikut dan kemudian mengisinya dengan hitam. Then use your polygonal lasso tool to add a little triangular selection to the top of your box and then fill it with black on the same layer: Kemudian menggunakan alat laso poligonal Anda untuk menambahkan pilihan segitiga sedikit bagian atas kotak dan kemudian mengisinya dengan hitam pada lapisan yang sama:

19. 19. Now insert the following blending options onto its layer: Sekarang masukkan pilihan blending berikut ke lapisan nya:



20. 20. The music Icon used is from the Mono Icon Pack (find it in the resource list), and I set its blending mode to Overlay, and then lowered the opacity to around 40%. Ikon musik yang digunakan adalah dari Mono Icon Pack (menemukannya dalam daftar sumber daya), dan saya mengatur blending mode ke Overlay, dan kemudian menurunkan opacity menjadi sekitar 40%. Then just add some text and a thumbnail in a similar way to the following. Kemudian hanya menambahkan beberapa teks dan thumbnail dalam cara yang mirip dengan berikut ini.

21. 21. We want to show what our non-active sliders will look like. Kami ingin menunjukkan apa yang non-aktif kami slider akan terlihat seperti. Using your Rectangle Marquee tool, make a Rectangle similar to the following and fill it with #000000. Menggunakan Rectangle Marquee tool Anda, membuat Rectangle mirip dengan berikut ini dan mengisinya dengan # 000000.

22. 22. Insert the following blending options onto its layer: Masukkan pilihan blending berikut ke lapisan nya:


23. 23. Add some text to describe what your slider represents, and you'll have something like this after you do this a few times. Tambahkan beberapa teks untuk menjelaskan apa yang Anda mewakili slider, dan Anda akan memiliki sesuatu seperti ini setelah Anda melakukan ini beberapa kali.

24. 24. Next we want to create the little 'wave' that is at the bottom of our featured box. Selanjutnya kita ingin membuat 'gelombang' sedikit yang di bagian bawah kotak fitur kami. Using your Pen Tool with it set to Shape (not path), create a shape similar to the following. Menggunakan Pen Tool Anda dengan diatur ke Shape (tidak jalan), menciptakan bentuk serupa dengan berikut ini.

25. 25. Insert the following blending options onto your shapes layer: Masukkan pilihan blending lapisan berikut ke bentuk Anda:




26. 26. Your completed featured area will look like this: Menyelesaikan fitur wilayah Anda akan terlihat seperti ini:

27. 27. Our content area is going to be split into two different background colors. Area konten kami adalah akan dibagi menjadi dua warna latar belakang yang berbeda. The top color is #16273E, and the lower color is #D0E0F3. Warna atas adalah # 16273E, dan warna yang lebih rendah adalah # D0E0F3. Use your Rectangle Marquee Tool to make these rectangles, and then fill them with the appropriate color on their own layers. Gunakan Rectangle Marquee Tool Anda untuk membuat persegi panjang, dan kemudian mengisi mereka dengan warna yang sesuai pada lapisan mereka sendiri.

28. 28. We want to add some noise to each section to give it a little texture like we did for the background of our featured area. Kami ingin menambahkan beberapa kebisingan ke bagian masing-masing untuk memberikan sedikit tekstur seperti yang kami lakukan untuk latar belakang area fitur kami. Duplicate each color layer for your content areas background, and then repeat step 14 with them selected. Gandakan setiap lapisan warna untuk latar belakang area konten Anda, dan kemudian ulangi langkah 14 dengan mereka yang dipilih. On your dark blue layer, lower it's opacity to about 8%. Pada lapisan berwarna biru gelap, menurunkan opacity itu untuk sekitar 8%. For the light blue layer, lower it to around 6%. Untuk lapisan biru muda, lebih rendah menjadi sekitar 6%. You will have something that looks like this: Anda akan memiliki sesuatu yang terlihat seperti ini:

29. 29. The client login box is what we will work on next. Kotak login klien adalah apa yang kita akan bekerja pada berikutnya. Using your Rounded Rectangle Tool with a radius of 10px, and a foreground of #D0E0F3, make a rectangle like the following: Menggunakan Rounded Rectangle Tool dengan radius 10px, dan latar depan # D0E0F3, membuat persegi panjang seperti berikut:

30. 30. Insert the following blending options onto your rounded rectangles layer: Masukkan pilihan blending berikut ke lapisan bulat persegi panjang Anda:



31. 31. Using your text tool add a title for your login box with the color #16273E, and then an icon from the Nixus Icon Pack. Menggunakan alat teks Anda menambahkan judul untuk kotak login Anda dengan warna # 16273E, dan kemudian sebuah ikon dari Icon Pack Nixus. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #FFFFFF. Menggunakan Anda Rectangle Tool Marquee, membuat persegi panjang mirip dengan berikut ini dan mengisinya dengan # FFFFFF.

32. 32. Lower your white rectangles layer opacity to 30%, and then insert the following blending options: Turunkan opacity putih persegi panjang lapisan sampai 30%, dan kemudian memasukkan pilihan blending berikut:


33. 33. Using your Rounded Rectangle Tool again, we want to make the input fields for the login box. Menggunakan Rounded Rectangle Tool lagi, kita ingin membuat field input untuk kotak login. Make a rectangle that looks similar to the following: Buatlah persegi panjang yang terlihat mirip dengan berikut:

34. 34. Insert the following blending options onto your Rounded Rectangle Layer: Masukkan pilihan blending layer berikut ke Rounded Rectangle Anda:




35. 35. Add some text and an icon from the Mono Icon pack and you'll have something that looks like the following: Tambahkan beberapa teks dan ikon dari Mono Ikon paket dan Anda akan memiliki sesuatu yang tampak seperti berikut:

36. 36. The final step to our Client Login box is to add a login button. Langkah terakhir untuk kotak Login Klien kami adalah untuk menambahkan tombol login. Using your Rounded Rectangle Tool again, make a rectangle similar to the following: Menggunakan Rounded Rectangle Tool lagi, membuat sebuah persegi panjang seperti berikut:

37. 37. Now insert the following blending options onto its layer: Sekarang masukkan pilihan blending berikut ke lapisan nya:




38. 38. All that is left is to add some text and an icon from your Nixus Icon pack and you'll have something like this. Semua yang kiri adalah untuk menambahkan beberapa teks dan ikon dari paket Ikon Nixus Anda dan Anda akan memiliki sesuatu seperti ini. I also copied the divider we created under the “Client Login” text and placed it under our login button. Saya juga disalin pembagi kita buat di bawah teks "Login Klien" dan ditempatkan di bawah tombol login kita.

39. 39. The rest of the content area is all about text and icon placement. Sisa area konten adalah semua tentang teks dan penempatan ikon. I arranged it in the following way: Aku mengaturnya dengan cara sebagai berikut:

40. 40. The last thing we need to create is our footer. Hal terakhir yang perlu kita buat footer kita. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #000000. Menggunakan Rectangle Marquee Tool Anda, membuat persegi panjang mirip dengan berikut ini dan mengisinya dengan # 000000.

41. 41. Using your Polygonal Lasso Tool, your going to want to make a ridged selection similar to the following Menggunakan Alat Polygonal Lasso Anda, Anda akan ingin untuk membuat seleksi bergerigi seperti berikut

and then choose Edit>Clear. dan kemudian pilih Edit> Hapus. When your finished clearing it, it will look something like this: Setelah selesai Anda kliring, hal itu akan terlihat seperti ini:

42. 42. Insert the following blending options onto your footer layer: Masukkan pilihan blending lapisan berikut ke footer:



43. 43. Add some text to your footer, and then your final result will look something like the following: Tambahkan beberapa teks untuk footer Anda, dan kemudian hasil akhir Anda akan terlihat seperti berikut:

Posted in: Photoshop Web