Có rất nhiều hướng dẫn trực tuyến hướng dẫn bạn cách sử dụng hiệu quả thiết kế web 2.0. Mặc dù hầu hết các hướng dẫn này đều hữu ích nhưng đồng thời chúng cũng giết chết sự độc đáo trong thiết kế web. Ví dụ: hầu hết các “hướng dẫn” đều cho bạn biết rằng web 2.0 có huy hiệu bóng loáng, nền sọc và phông chữ đậm. Kết quả? Có vô số hàng trăm mẫu thiết kế với huy hiệu, sọc và chữ to đậm… và chúng không có gì khác biệt. Sẽ không thành vấn đề nếu bạn tạo thiết kế web 2.0, web 1.0 hay web 75.0, tất cả đều phải có tính nguyên bản và đáng nhớ.

Tuy nhiên, nếu thực sự không thể tìm thấy bất cứ điều gì đặc biệt độc đáo để tượng trưng cho thiết kế của bạn, thì việc đi theo xu hướng thiết kế web hiện tại sẽ “an toàn hơn”. Vì vậy, đây là một đoạn rất nhỏ về bố cục thiết kế web và cách biến bố cục thông thường thành bố cục web 2.0.

Đây là những gì chúng tôi đã có…

14.png

Và đây là những gì chúng ta sẽ làm…

13.png

Chúng ta sẽ làm việc trong Photoshop, không sử dụng gì ngoài các kiểu lớp; tập trung vào độ chuyển màu nhẹ và bóng.

Bắt đầu bằng cách sử dụng hình chữ nhật với các góc tròn và vẽ một… hình chữ nhật.

1.jpg

cờ

Điều chúng ta cần làm trước tiên là tạo cho hình chữ nhật của chúng ta một chút chiều sâu và sức sống. Tuân theo các nguyên tắc thiết kế web 2.0, chỉ có bóng, đường viền và độ chuyển màu nhẹ mới mang lại cho chúng ta hiệu ứng này. Vì vậy, hãy vào Layer Style và thả một chút bóng nhẹ. Chúng tôi đã sử dụng #96aed6 vì mục đích này.

2.png

Để tạo cho hình dạng có chiều sâu một chút (để nó trông không giống một vật thể phẳng), hãy thêm bóng bên trong nhẹ, với tông màu tối hơn (chúng tôi đã sử dụng #304f82 )

3.png

Cuối cùng, điều quan trọng là phải thêm một chút phác thảo. Chúng ta sẽ sử dụng màu trắng #FFFFFF, vì bóng từ cả hai phía của chúng ta tối hơn, chúng ta muốn có một đường sáng và bán nhìn thấy được để tạo đường viền cho hình dạng.

4.png