7 Tips Photoshop untuk Merancang Situs Web yang Elegan dan Modern

7 Tips Photoshop untuk Merancang Situs Web yang Elegan dan Modern. Tampilan web yang bersih, elegan, dan indah merupakan perspektif masing-masing diri pribadi seseorang. Tentu banyak website yang dirancang sedemikian rupa bagusnya, tetapi kurang efektif ketika digunakan.

Para desainer sering terlalu jauh dalam membuat sebuah konsep, tetapi hasil akhirnya tidak lebih dari text dan bentuk kotak saja. Meskipun desain minimal memiliki daya estetika sendiri apabila dipasangkan dengan tipografi yang baik.



Ada beberapa fitur tertentu dari sebuah desain yang dicap/dilabeli elegan dan modern yaitu kesederhaan dalam desain. Kesederhanaan bukanlah tren desain, melainkan sebuah atribut dari desain yang baik.
Photoshop memberikan satu set alat/tool yang serbaguna untuk menciptakan website yang elegan, dan modern serta menarik tentunya. Anda hanya perlu menggunakan beberapa alat/tool yang dimilik oleh photoshop untuk membuat layout yang modern, dengan fungsi yang jelas dan efektif.


1. Ruang / Space
Ruang putih bisa dijadikan sebagai sebuah pemisah antara elemen desain tanpa harus menggunakan bentuk kotak, garis, atau gambar tambahan. Space ini merupakan aspek yang paling penting dalam desain modern. Ketika Anda bisa memberikan tata letak yang baik, akan membuat desain web Anda terlihat bersih dan elegan.


Anda bisa mengguanakan bantuan grid yang tersedia di photoshop untuk memposisikan elemen pada desain Anda dengan tepat. Anda dapat mengatur ukuran grid secara manual. Gunakan guideline/ garis bantu untuk menetapkan invisible border, margin/garistepi, dan padding yang digunakan.

Anda bisa membuat garisbantu/guidelines di photoshop dengan menekan tombol Ctrl+R (windows) atau Cmd+R (mac) untuk mengaktifkan ruler dan dengan drag ruler dari atas ataupun dari kiri untuk membuat garis bantu/guidelines.


2. Kedalaman / Depth
Anda bisa menambahkan efek depth dengan cara menambahkan efek cahaya dan bayangan untuk membuat elemen Anda tampak tajam dan terlihat nyata. Efek bayangan dapat diterapkan untuk setiap objek, seleksi, atau lapisan text, gunakan trik ini untuk memadukan bayangan dengan latar belakang Anda, jangan gunakan hitam default pada bayangan Anda.


Tidak semua bayangan harus gelap. Coba kombinasikan efek inner shadow dengan drop shadow putih atau warna terang untuk menciptakan cekungan atau “Letterpress” yang bisa Anda isi text di dalamnya.


3. Detail
Gradient tool dan gradient layer effect berperan penting dalam desain yang elegan dan modern. Gradient selalu hadir dalam setiap aspek desain modern, mulai dari bayangan dan highlight untuk latar belakang/ background dan tombol/button.

Untuk mengakses gradient tool, anda bisa menekan tombol Shift+G. untuk membuat gradient, klik kanvas , drag dan lepaskan. Alat ini baik digunakan untuk daerah yang luas seperti untuk background, cahaya, atau bayangan radial. Ketika membuat tombol, icon lapisan efek gradient overlay merupakan cara yang lebih efisien untuk membentuk tekstur pada gambar.

Gunakan efek ini untuk memberikan efek dimensi yang halus pada tombol dan bar navigasi, atau untuk meniru gaya teksture kertas ataupun logam.


4. Definisi / Definition
Dengan memperhatikan lapisan tepi dan batas samping, Pastikan elemen gambar Anda memiliki kontras yang tepat agar elemen terlihat jelas.

Efek lapisan stroke akan menguraikan unsur-unsur seperti text atau tombol dimana Anda perlu memberi garis disemua sisinya. Anda dapat menggunakan efek ini untuk memperjelas bagian masing masing elemen.


5. Menarik / Interest
Desain yang modern tidaklah harus berwarna putih serta minimalis. Apabila Anda bisa mengkombinasikan tekstur dengan baik ankan membuat tampilan Anda terlihat menarik. Gunakan teknik yang halus seperti menambahkan noise (filter->Add Noise) atau teksture overlay layer effect untuk daerah background atau elemen permukaan untuk memberikan efek yang berbeda. Semakin jelas dan nyata elemen yang muncul, akan membuat tampilan Anda menjadi menarik.



6. Perpektif / Perspective
Perspektif merupakan teknik yang kurang banyak dimanfaatkan dalam web desain modern mungkin karena trend yang ada saat ini hanya fokus ke konsistensi bentuk simetri dan grid. Dengan menerapkan perspektif untuk gambar dan elemen dalam desain Anda, Anda dapat menampilkan kedalaman, dimensi, dan bentuk modern yang menarik dengan satu langkah yang mudah.

Perspektif dapat diberikan untuk setiap bentuk atau gambar dengan memilih “Free Transform Path”.
Ilusi perspektif juga dapat dibuat dengan menciptakan bentuk asimetris atau frame dan dengan tambahan gradient serta bayangan yang tepat untuk menempatkan objek terpisah menjadi terlihat perspektifnya.



7. Readability
Usahakan dalam web Anda nanti semua text bisa jelas terbaca. Anda bisa menambahkan efek texture ke dalam text, dengan cara mengkonversi layer text menjadi Smart Object dengan mengklik kanan layer text dan pilih “Convert to Smart Object”. Dengan menerapkan konversi ke smart object Anda memungkinkan untuk menerapkan filter dan teknik lain untuk text Anda.


Jangan lupa menambahkan efek “Crisp” atau “sharp” text agar text anda terlihat jelas dan natural.

Itulah tips yang bisa Anda gunakan

Daftar Shortcut Photoshop Lengkap
Tutorial Photoshop
Daftar Font Gratis
Tampilan Baru Twitter Mirip Facebook??